📄 page.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html lang="en"><HEAD><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><TITLE>Paged media</TITLE><link rel="stylesheet" href="style/default.css" type="text/css"><link rel="prev" href="generate.html"><link rel="next" href="colors.html"><link rel="contents" href="cover.html#minitoc"><link rel="CSS-properties" href="propidx.html" title="properties"><link rel="index" href="indexlist.html" title="index"></HEAD><BODY><div class="navbar" align="center"><p><a href="generate.html">previous</a> <a href="colors.html">next</a> <a href="cover.html#minitoc">contents</a> <a href="propidx.html">properties</a> <a href="indexlist.html">index</a> </div><hr class="navbar"><H1 align="center">13 <a name="the-page">Paged media</a></H1><div class="subtoc"><p><strong>Contents</strong> <ul class="toc"> <li class="tocline2"><a href="page.html#q1" class="tocxref">13.1 Introduction to paged media</a> <li class="tocline2"><a href="page.html#page-box" class="tocxref">13.2 Page boxes: the @page rule</a> <ul class="toc"> <li class="tocline3"><a href="page.html#page-margins" class="tocxref">13.2.1 Page margins</a> <li class="tocline3"><a href="page.html#page-size-prop" class="tocxref">13.2.2 Page size: the <span class="propinst-size">'size'</span> property</a> <ul class="toc"> <li class="tocline4"><a href="page.html#q5" class="tocxref"> Rendering page boxes that do not fit a target sheet</a> <li class="tocline4"><a href="page.html#q6" class="tocxref"> Positioning the page box on the sheet</a> </ul> <li class="tocline3"><a href="page.html#crop-mark-prop" class="tocxref">13.2.3 Crop marks: the <span class="propinst-marks">'marks'</span> property</a> <li class="tocline3"><a href="page.html#q8" class="tocxref">13.2.4 Left, right, and first pages</a> <li class="tocline3"><a href="page.html#q9" class="tocxref">13.2.5 Content outside the page box</a> </ul> <li class="tocline2"><a href="page.html#page-breaks" class="tocxref">13.3 Page breaks</a> <ul class="toc"> <li class="tocline3"><a href="page.html#page-break-props" class="tocxref">13.3.1 Break before/after elements: <span class="propinst-page-break-before">'page-break-before'</span>, <span class="propinst-page-break-after">'page-break-after'</span>, <span class="propinst-page-break-inside">'page-break-inside'</span></a> <li class="tocline3"><a href="page.html#named-pages" class="tocxref">13.3.2 Using named pages: <span class="propinst-page">'page'</span></a> <li class="tocline3"><a href="page.html#break-inside" class="tocxref">13.3.3 Breaks inside elements: <span class="propinst-orphans">'orphans'</span>, <span class="propinst-widows">'widows'</span></a> <li class="tocline3"><a href="page.html#allowed-page-breaks" class="tocxref">13.3.4 Allowed page breaks</a> <li class="tocline3"><a href="page.html#forced" class="tocxref">13.3.5 Forced page breaks</a> <li class="tocline3"><a href="page.html#q16" class="tocxref">13.3.6 "Best" page breaks</a> </ul> <li class="tocline2"><a href="page.html#q17" class="tocxref">13.4 Cascading in the page context</a> </ul></div><H2><a name="q1">13.1 Introduction to paged media</a></H2><P> Paged media (e.g., paper, transparencies, pages that aredisplayed on computer screens, etc.) differ from<a href="./media.html#continuous-media-group">continuous media</a>in that the content of the document is split into one or more discretepages. To handle page breaks, CSS2extends the <a href="visuren.html">visual formatting model</a>as follows:</p><ol><li>The <a href="#page-box">pagebox</a> extends the <a href="box.html#box-model">boxmodel</a> to allow authors to specify the size of a page, its margins,etc. <li>The <a name="x0"><span class="index-def" title="page model"><dfn>pagemodel</dfn></span></a> extends the <a href="visuren.html">visual formattingmodel</a> to account for <a href="#page-breaks">page breaks.</a></ol><P>The CSS2 <a name="page-model">page model</a> specifies how adocument is formatted within a rectangular area -- the <ahref="#page-box">page box</a> -- that has a finite width andheight. The page box does not necessarily correspond to the real <a name="x1"><spanclass="index-def" title="sheet"><dfn>sheet</dfn></span></a> where thedocument will ultimately be rendered (paper, transparency, screen,etc.). The CSS page model specifies formatting in the page box, butit is the user agent's responsibility to transfer the page box to thesheet. Some transfer possibilities include:</P><ul><li>Transferring one page box to one sheet (e.g., single-sided printing).<li>Transferring two page boxes to both sides of the same sheet (e.g.,double-sided printing).<li>Transferring N (small) page boxes to one sheet (called "n-up").<li>Transferring one (large) page box to N x M sheets (called "tiling").<li>Creating signatures. A signature is a group of pagesprinted on a sheet, which, when folded and trimmed like a book, appear in theirproper sequence.<li>Printing one document to several output trays.<li>Outputting to a file.</ul><P>Although CSS2 does not specify how user agents transfer page boxesto sheets, it does include certain mechanisms for telling user agentsabout the target sheet <a href="#page-size-prop">size andorientation</a>.<H2>13.2 <a name="page-box">Page boxes</a>: the @page rule</H2><P>The <a name="x2"><span class="index-def" title="page box"><dfn>pagebox</dfn></span></a> is a rectangular region that contains two areas:</p><ul><li>The <span class="index-def" title="page area"><aname="page-area"><dfn>page area</dfn></a></span>. The pagearea includes the boxes laid out on that page.The edges of the page area act as the initial <ahref="visuren.html#initial-containing-block">containing block</a> for layout that occurs between page breaks.<li>The margin area, which surrounds the page area.</ul><div class="note"><P> <em><strong>Note.</strong> In CSS2, the <ahref="./box.html#border-properties">border properties</a> and <ahref="./box.html#padding-properties">padding properties</a> do not apply to pages; they may in the future.</em></div><P>Authors specify the dimensions, orientation, margins, etc. of apage box within an <a name="x4"><span class="index-def" title="@page">@page</span></a>rule. An @page rule consists of the keyword "@page", a page selector(followed with no intervening space by an optional page pseudo-class),and a block of declarations (said to be in the <span class="index-def"title="page-context"><a name="page-context"><dfn>pagecontext</dfn></a></span>).</p><P>The <a name="x6"><span class="index-def" title="page selector"><dfn>pageselector</dfn></span></a> specifies for which pages the declarationsapply. In CSS2, page selectors may designate the first page,all left pages, all right pages, or a page with a specific name.</p><P>The dimensions of the page box are set with the <a href="page.html#propdef-size" class="noxref"><spanclass="propinst-size">'size'</span></a> property. The dimensionsof the page area are the dimensions of the page box minusthe margin area. <div class="example"><P style="display:none">Example(s):</P><P>For example, the following @page rule sets the page box size to 8.5 x 11 inches and creates '2cm' marginon all sides between the page box edge and the page area:</p><pre>@page { size 8.5in 11in; margin: 2cm }</pre></div>The <a href="page.html#propdef-marks" class="noxref"><span class="propinst-marks">'marks'</span></a> property in an @pagerule specifies crop and cross marks for the page box.<h3>13.2.1 <a name="page-margins">Page margins</a></h3><P>The <a href="box.html#margin-properties">margin properties</a>(<a href="box.html#propdef-margin-top" class="noxref"><span class="propinst-margin-top">'margin-top'</span></a>, <a href="box.html#propdef-margin-right" class="noxref"><spanclass="propinst-margin-right">'margin-right'</span></a>, <a href="box.html#propdef-margin-bottom" class="noxref"><spanclass="propinst-margin-bottom">'margin-bottom'</span></a>, <a href="box.html#propdef-margin-left" class="noxref"><spanclass="propinst-margin-left">'margin-left'</span></a>, and <a href="box.html#propdef-margin" class="noxref"><spanclass="propinst-margin">'margin'</span></a>) apply within the <ahref="#page-context">page context</a>. The following diagram shows therelationships between the sheet, page box, and page margins:</P><div class="figure"><P><img src="./images/page-info.gif" alt="Illustration of sheet, pagebox, margin, and page area."><SPAN class="dlink"> <A name="img-page-info" href="images/longdesc/page-info-desc.html" title="Long description illustrating relationship between page box and sheet">[D]</A></SPAN></p></div><P>The computed value of box margins at the top or bottom of the pagearea is '0'.<p>The <a href="#page-context">page context</a> has no notion offonts, so 'em' and 'ex' units are not allowed. Percentage values onthe margin properties are relative to the dimensions of the <ahref="#page-box">page box</a>; for left and right margins, they referto page box width while for top and bottom margins, they refer to pagebox height. All other units associated with the respective CSS2properties are allowed.<P>Due to negative margin values (either on the page box or onelements) or <a href="visuren.html#absolute-positioning">absolutepositioning</a> content may end up outside the page box, but thiscontent may be "cut" -- by the user agent, the printer, or ultimately,the paper cutter.<h3>13.2.2 <a name="page-size-prop">Page size</a>: the <a href="page.html#propdef-size" class="noxref"><spanclass="propinst-size">'size'</span></a> property</h3><div class="propdef"><dl><dt><span class="index-def" title="'size'"><a name="propdef-size" class="propdef-title"><strong>'size'</strong></a></span><dd><table class="propinfo" cellspacing=0 cellpadding=0><tr valign=baseline><td><em>Value:</em> <td><a href="syndata.html#value-def-length" class="noxref"><span class="value-inst-length"><length></span></a>{1,2} | auto | portrait | landscape | <a href="cascade.html#value-def-inherit" class="noxref"><span class="value-inst-inherit">inherit</span></a><tr valign=baseline><td><em>Initial:</em> <td>auto<tr valign=baseline><td><em>Applies to:</em> <td>the page context<tr valign=baseline><td><em>Inherited:</em> <td>N/A<tr valign=baseline><td><em>Percentages:</em> <td>N/A<tr valign=baseline><td><em>Media:</em> <td><a href="media.html#visual-media-group" class="noxref">visual</a>, <a href="media.html#paged-media-group" class="noxref">paged</a></table></dl></div><P>This property specifies the size and orientation of a page box.<P>The size of a page box may either be "absolute" (fixed size) or"relative" (scalable, i.e., fitting available sheet sizes). Relativepage boxes allow user agents to scale a document and make optimal useof the target size. <P>Three values for the <a href="page.html#propdef-size" class="noxref"><span class="propinst-size">'size'</span></a>property create a relative page box:</p><DL><DT><strong>auto</strong><DD>The page box will be set to the size and orientation of thetarget sheet. <DT><strong>landscape</strong><DD>Overrides the target's orientation. The page box is the samesize as the target, and the longer sides are horizontal.<DT><strong>portrait</strong><DD>Overrides the target's orientation. The page box is the samesize as the target, and the shorter sides are horizontal.</DL><div class="example"><P style="display:none">Example(s):</P><P><p>In the following example, the outer edges of the page box will alignwith the target. The percentage value on the <a href="box.html#propdef-margin" class="noxref"><spanclass="propinst-margin">'margin'</span></a> property is relative to thetarget size so if the target sheet dimensions are21.0cm x 29.7cm (i.e., A4), the margins are 2.10cm and 2.97cm.<pre>@page { size: auto; /* auto is the initial value */ margin: 10%;}</pre></div><P>Length values for the <a href="page.html#propdef-size" class="noxref"><span class="propinst-size">'size'</span></a>property create an absolute page box. If only one length value isspecified, it sets both the width and height of the page box (i.e.,the box is a square). Since the page box is the <ahref="visuren.html#initial-containing-block">initial containingblock</a>, percentage values are not allowed for the <a href="page.html#propdef-size" class="noxref"><spanclass="propinst-size">'size'</span></a> property.<div class="example"><P style="display:none">Example(s):</P><P>For example:<PRE>@page { size: 8.5in 11in; /* width height */}</PRE><P>The above example set the width of the page box to be 8.5in and theheight to be 11in. The page box in this example requires a targetsheet size of 8.5"x11" or larger.</div><P>User agents may allow users to control the transfer of the pagebox to the sheet (e.g., rotating an absolute page box that'sbeing printed).<h4><a name="q5"> Rendering page boxes that do not fit a target sheet</a></h4><P>If a page box does not fit the target sheet dimensions, the user agent may choose to:</p><UL><LI>Rotate the page box 90⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -