[css-page] Add the 'marks' and 'bleed' properties from GCPM.

Author: SimonSapin

css-page/Overview.html

@@ -116,7 +116,7 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
 Spread pseudo-classes: <span class=css data-link-type=maybe title=:left>:left</span>, <span class=css data-link-type=maybe title=:right>:right</span></a><li><a href=#first-pseudo><span class=secno>4.2.2</span>
 First-page pseudo-class: <span class=css data-link-type=maybe title=:first>:first</span></a><li><a href=#blank-pseudo><span class=secno>4.2.3</span>
 Blank-page pseudo-class: <span class=css data-link-type=maybe title=:blank>:blank</span></a></ul><li><a href=#syntax-page-selector><span class=secno>4.3</span>@page rule grammar</a><li><a href=#cascading-and-page-context><span class=secno>4.4</span>Cascading in the page context</a></ul><li><a href=#margin-boxes><span class=secno>5</span>Page-Margin Boxes</a><ul class=toc><li><a href=#margin-at-rules><span class=secno>5.1</span>At-rules for page-margin boxes</a><li><a href=#populating-margin-boxes><span class=secno>5.2</span>Populating page-margin boxes</a><li><a href=#margin-dimension><span class=secno>5.3</span>Computing Page-margin Box Dimensions</a><ul class=toc><li><a href=#margin-box-terms><span class=secno>5.3.1</span><span id=max-margin-dimension></span>Page-Margin Box Layout Terminology</a><li><a href=#variable-sizing><span class=secno>5.3.2</span>
-Page-Margin Box Variable Dimension Computation Rules</a><ul class=toc><li><a href=#variable-auto-margins><span class=secno>5.3.2.1</span>Margins</a><li><a href=#variable-auto-sizing><span class=secno>5.3.2.2</span>Resolving <span class=css data-link-type=maybe title=auto>auto</span> widths</a><li><a href=#variable-minmax><span class=secno>5.3.2.3</span>Handling <span class=property data-link-type=propdesc title=min-width>min-width</span> and <span class=property data-link-type=propdesc title=max-width>max-width</span></a><li><a href=#variable-position><span class=secno>5.3.2.4</span>Positioning</a><li><a href=#variable-mapping><span class=secno>5.3.2.5</span>Boxes on other sides</a></ul><li><a href=#fixed-sizing><span class=secno>5.3.3</span>Page-Margin Box Fixed Dimension Computation Rules</a></ul><li><a href=#margin-box-ex><span class=secno>5.4</span>Page-margin box examples</a></ul><li><a href=#page-properties><span class=secno>6</span>Page Properties</a><ul class=toc><li><a href=#page-based-counters><span class=secno>6.1</span>Page-based counters</a><li><a href=#margin-text-alignment><span class=secno>6.2</span>Page-margin boxes and default values</a></ul><li><a href=#page-size><span class=secno>7</span>Page Size</a><ul class=toc><li><a href=#page-size-prop><span class=secno>7.1</span>Page size: the <span class=property data-link-type=propdesc title=size>size</span> property</a><ul class=toc><li><a href=#page-size-media-query><span class=secno>7.1.1</span>Media Queries</a></ul><li><a href=#renderingpages><span class=secno>7.2</span>Rendering page boxes that do not fit a page sheet</a><li><a href=#positioning-page-box><span class=secno>7.3</span>Positioning the page box on the sheet</a></ul><li><a href=#page-breaks><span class=secno>8</span>
+Page-Margin Box Variable Dimension Computation Rules</a><ul class=toc><li><a href=#variable-auto-margins><span class=secno>5.3.2.1</span>Margins</a><li><a href=#variable-auto-sizing><span class=secno>5.3.2.2</span>Resolving <span class=css data-link-type=maybe title=auto>auto</span> widths</a><li><a href=#variable-minmax><span class=secno>5.3.2.3</span>Handling <span class=property data-link-type=propdesc title=min-width>min-width</span> and <span class=property data-link-type=propdesc title=max-width>max-width</span></a><li><a href=#variable-position><span class=secno>5.3.2.4</span>Positioning</a><li><a href=#variable-mapping><span class=secno>5.3.2.5</span>Boxes on other sides</a></ul><li><a href=#fixed-sizing><span class=secno>5.3.3</span>Page-Margin Box Fixed Dimension Computation Rules</a></ul><li><a href=#margin-box-ex><span class=secno>5.4</span>Page-margin box examples</a></ul><li><a href=#page-properties><span class=secno>6</span>Page Properties</a><ul class=toc><li><a href=#page-based-counters><span class=secno>6.1</span>Page-based counters</a><li><a href=#margin-text-alignment><span class=secno>6.2</span>Page-margin boxes and default values</a></ul><li><a href=#page-size><span class=secno>7</span>Page Size</a><ul class=toc><li><a href=#page-size-prop><span class=secno>7.1</span>Page size: the <span class=property data-link-type=propdesc title=size>size</span> property</a><ul class=toc><li><a href=#page-size-media-query><span class=secno>7.1.1</span>Media Queries</a></ul><li><a href=#page-marks-bleed><span class=secno>7.2</span>Page marks and bleed area</a><li><a href=#renderingpages><span class=secno>7.3</span>Rendering page boxes that do not fit a page sheet</a><li><a href=#positioning-page-box><span class=secno>7.4</span>Positioning the page box on the sheet</a></ul><li><a href=#page-breaks><span class=secno>8</span>
     <span id=pg-br-before-after></span>
     <span id=page-break-before></span>
     <span id=page-break-after></span>
@@ -1932,7 +1932,31 @@ <h4 class="heading settled heading" data-level=7.1.1 id=page-size-media-query><s
 <p>In the example above, "A4" sheets are given a "3cm" page margin, and "letter"
 sheets are given a "1in" page margin.</p>
 
-<h3 class="heading settled heading" data-level=7.2 id=renderingpages><span class=secno>7.2 </span><span class=content>Rendering page boxes that do not fit a page sheet</span><a class=self-link href=#renderingpages></a></h3>
+
+<h3 class="heading settled heading" data-level=7.2 id=page-marks-bleed><span class=secno>7.2 </span><span class=content>Page marks and bleed area</span><a class=self-link href=#page-marks-bleed></a></h3>
+
+<p>The <a class=property data-link-type=propdesc href=#propdef-marks title=marks>marks</a> property from <a data-biblio-type=informative data-link-type=biblio href=#css2 title=css2>[CSS2]</a> is part of this specification.
+
+<table class=propdef><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-marks>marks<a class=self-link href=#propdef-marks></a></dfn><tr><th>Value:<td>[ crop || cross ] | none<tr><th>Initial:<td>none<tr><th>Applies to:<td>page context<tr><th>Inherited:<td>no<tr><th>Media:<td>visual, paged<tr><th>Computed value:<td>as specified</table>
+<p>This property adds crop and/or cross marks to the document. Crop
+marks indicate where the page should be cut. Cross marks are used to
+align sheets.
+
+<p>Crop marks and cross marks are printed outside the page box. To
+have room to show crop and cross marks, the final pages will have to
+be somewhat bigger than the page box.
+
+<div class=example>
+<p>To set crop and cross marks on a document, this code can be used:
+<pre>@page { marks: crop cross }
+</pre></div>
+
+<table class=propdef><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-bleed>bleed<a class=self-link href=#propdef-bleed></a></dfn><tr><th>Value:<td><a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a><tr><th>Initial:<td>6pt<tr><th>Applies to:<td>page context<tr><th>Inherited:<td>no<tr><th>Media:<td>visual, paged<tr><th>Computed value:<td>as specified<tr><th>Percentages:<td>refer to width of page box</table>
+<p>This property specifies the extent of the page bleed area outside
+the page box. This property only has effect if crop marks are enabled.
+
+
+<h3 class="heading settled heading" data-level=7.3 id=renderingpages><span class=secno>7.3 </span><span class=content>Rendering page boxes that do not fit a page sheet</span><a class=self-link href=#renderingpages></a></h3>
 
 <p>If a page box does not match the target page sheet dimensions, the user agent
 should do one of the following (in order of preference):</p>
@@ -1949,7 +1973,7 @@ <h3 class="heading settled heading" data-level=7.2 id=renderingpages><span class
 <p>The user agent <em class=RFC2119>MAY</em> wish to consult the user before
 performing these operations.</p>
 
-<h3 class="heading settled heading" data-level=7.3 id=positioning-page-box><span class=secno>7.3 </span><span class=content>Positioning the page box on the sheet</span><a class=self-link href=#positioning-page-box></a></h3>
+<h3 class="heading settled heading" data-level=7.4 id=positioning-page-box><span class=secno>7.4 </span><span class=content>Positioning the page box on the sheet</span><a class=self-link href=#positioning-page-box></a></h3>
 
 <p>When the page box is smaller than the page sheet, the user agent <em class=RFC2119>SHOULD</em> either:</p>
 
@@ -2567,14 +2591,15 @@ <h3 class="no-num no-ref heading settled heading" id=normative><span class=conte
 
 <h3 class="no-num no-ref heading settled heading" id=informative><span class=content>
 Informative References</span><a class=self-link href=#informative></a></h3>
-<div data-fill-with=informative-references><dl><dt id=css-device-adapt title=CSS-DEVICE-ADAPT><a class=self-link href=#css-device-adapt></a>[CSS-DEVICE-ADAPT]<dd>Rune Lillesveen. <a href=http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/>CSS Device Adaptation</a>. 15 September 2011. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/>http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/</a><dt id=css3-images title=CSS3-IMAGES><a class=self-link href=#css3-images></a>[CSS3-IMAGES]<dd>Elika J. Etemad; Tab Atkins Jr.. <a href=http://www.w3.org/TR/2012/CR-css3-images-20120417/>CSS Image Values and Replaced Content Module Level 3</a>. 17 April 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/CR-css3-images-20120417/>http://www.w3.org/TR/2012/CR-css3-images-20120417/</a><dt id=css3-writing-modes title=CSS3-WRITING-MODES><a class=self-link href=#css3-writing-modes></a>[CSS3-WRITING-MODES]<dd>Elika J. Etemad; Koji Ishii. <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>CSS Writing Modes Module Level 3</a>. 15 November 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a><dt id=css3val title=CSS3VAL><a class=self-link href=#css3val></a>[CSS3VAL]<dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a href=http://www.w3.org/TR/2013/CR-css3-values-20130730/>CSS Values and Units Module Level 3</a>. 30 July 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/CR-css3-values-20130730/>http://www.w3.org/TR/2013/CR-css3-values-20130730/</a><dt id=jlreq title=JLREQ><a class=self-link href=#jlreq></a>[JLREQ]<dd>Yasuhiro Anan; et al. <a href=http://www.w3.org/TR/2012/NOTE-jlreq-20120403/>Requirements for Japanese Text Layout</a>. 3 April 2012. W3C Working Group Note. URL: <a href=http://www.w3.org/TR/2012/NOTE-jlreq-20120403/>http://www.w3.org/TR/2012/NOTE-jlreq-20120403/</a></dl></div>
+<div data-fill-with=informative-references><dl><dt id=css-device-adapt title=CSS-DEVICE-ADAPT><a class=self-link href=#css-device-adapt></a>[CSS-DEVICE-ADAPT]<dd>Rune Lillesveen. <a href=http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/>CSS Device Adaptation</a>. 15 September 2011. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/>http://www.w3.org/TR/2011/WD-css-device-adapt-20110915/</a><dt id=css2 title=CSS2><a class=self-link href=#css2></a>[CSS2]<dd>Ian Jacobs; et al. <a href=http://www.w3.org/TR/2008/REC-CSS2-20080411>Cascading Style Sheets, level 2 (CSS2) Specification</a>. 11 April 2008. W3C Recommendation. URL: <a href=http://www.w3.org/TR/2008/REC-CSS2-20080411>http://www.w3.org/TR/2008/REC-CSS2-20080411</a><dt id=css3-images title=CSS3-IMAGES><a class=self-link href=#css3-images></a>[CSS3-IMAGES]<dd>Elika J. Etemad; Tab Atkins Jr.. <a href=http://www.w3.org/TR/2012/CR-css3-images-20120417/>CSS Image Values and Replaced Content Module Level 3</a>. 17 April 2012. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/CR-css3-images-20120417/>http://www.w3.org/TR/2012/CR-css3-images-20120417/</a><dt id=css3-writing-modes title=CSS3-WRITING-MODES><a class=self-link href=#css3-writing-modes></a>[CSS3-WRITING-MODES]<dd>Elika J. Etemad; Koji Ishii. <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>CSS Writing Modes Module Level 3</a>. 15 November 2012. W3C Working Draft. (Work in progress.) URL: <a href=http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/>http://www.w3.org/TR/2012/WD-css3-writing-modes-20121115/</a><dt id=css3val title=CSS3VAL><a class=self-link href=#css3val></a>[CSS3VAL]<dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a href=http://www.w3.org/TR/2013/CR-css3-values-20130730/>CSS Values and Units Module Level 3</a>. 30 July 2013. W3C Candidate Recommendation. (Work in progress.) URL: <a href=http://www.w3.org/TR/2013/CR-css3-values-20130730/>http://www.w3.org/TR/2013/CR-css3-values-20130730/</a><dt id=jlreq title=JLREQ><a class=self-link href=#jlreq></a>[JLREQ]<dd>Yasuhiro Anan; et al. <a href=http://www.w3.org/TR/2012/NOTE-jlreq-20120403/>Requirements for Japanese Text Layout</a>. 3 April 2012. W3C Working Group Note. URL: <a href=http://www.w3.org/TR/2012/NOTE-jlreq-20120403/>http://www.w3.org/TR/2012/NOTE-jlreq-20120403/</a></dl></div>
 
 <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 Index</span><a class=self-link href=#index></a></h2>
 <div data-fill-with=index><ul class=indexlist>
 <li>available height, <a href=#available-height title="section 5.3.1">5.3.1</a>
 <li>available width, <a href=#available-width title="section 5.3.1">5.3.1</a>
 <li>:blank, <a href=#valuedef-blank title="section 4.2.3">4.2.3</a>
+<li>bleed, <a href=#propdef-bleed title="section 7.2">7.2</a>
 <li>containing block, <a href=#containing-block title="section 5.3.1">5.3.1</a>
 <li>Content-empty page, <a href=#content-empty title="section 3.2">3.2</a>
 <li>end page value, <a href=#end-page-value title="section 8.1">8.1</a>
@@ -2587,6 +2612,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <li>margin at-rule, <a href=#margin-at-rule title="section 5.1">5.1</a>
 <li>margin context, <a href=#margin-context title="section 5.1">5.1</a>
 <li>margin_sym, <a href=#syntax-prod-margin-sym title="section 4.3">4.3</a>
+<li>marks, <a href=#propdef-marks title="section 7.2">7.2</a>
 <li>match, <a href=#match title="section 4.2">4.2</a>
 <li>max-content width, <a href=#max-content-width title="section 5.3.1">5.3.1</a>
 <li>media, <a href=#media title="section 4.3">4.3</a>
@@ -2626,6 +2652,8 @@ <h2 class="no-num no-ref heading settled heading" id=property-index><span class=
 Property index</span><a class=self-link href=#property-index></a></h2>
 <div data-fill-with=property-index><table class=proptable><thead><tr><th scope=col>Name<th scope=col>Value<th scope=col>Initial<th scope=col>Applies to<th scope=col>Inh.<th scope=col>%ages<th scope=col>Media<th scope=col>Computed value<tbody>
 <tr><th scope=row><a data-property="">size</a><td>&lt;length&gt;{1,2} | auto | [ &lt;page-size&gt; || [ portrait | landscape] ]<td>auto<td>page context<td>N/A<td>N/A<td>paged<td>specified value
+<tr><th scope=row><a data-property="">marks</a><td>[ crop || cross ] | none<td>none<td>page context<td>no<td><td>visual, paged<td>as specified
+<tr><th scope=row><a data-property="">bleed</a><td>&lt;length&gt;<td>6pt<td>page context<td>no<td>refer to width of page box<td>visual, paged<td>as specified
 <tr><th scope=row><a data-property="">page</a><td>auto | &lt;identifier&gt;<td>auto<td>boxes that create class A break points<td>no (but see prose)<td>N/A<td>paged<td>specified value</table></div>
 
 

css-page/Overview.src.html

@@ -1919,6 +1919,51 @@ <h4 id="page-size-media-query">Media Queries</h4>
 <p>In the example above, "A4" sheets are given a "3cm" page margin, and "letter"
 sheets are given a "1in" page margin.</p>
 
+
+<h3 id="page-marks-bleed">Page marks and bleed area</h3>
+
+<p>The 'marks' property from [[CSS2]] is part of this specification.
+
+<pre class='propdef'>
+Name: marks
+Value: [ crop || cross ] | none
+Initial: none
+Applies To: page context
+Inherited: no
+Computed Value: as specified
+Media: visual, paged
+</pre>
+
+<p>This property adds crop and/or cross marks to the document. Crop
+marks indicate where the page should be cut. Cross marks are used to
+align sheets.
+
+<p>Crop marks and cross marks are printed outside the page box. To
+have room to show crop and cross marks, the final pages will have to
+be somewhat bigger than the page box.
+
+<div class="example">
+<p>To set crop and cross marks on a document, this code can be used:
+<pre>
+@page { marks: crop cross }
+</pre>
+</div>
+
+<pre class='propdef'>
+Name: bleed
+Value: <<length>>
+Initial: 6pt
+Applies To: page context
+Inherited: no
+Percentages: refer to width of page box
+Computed Value: as specified
+Media: visual, paged
+</pre>
+
+<p>This property specifies the extent of the page bleed area outside
+the page box. This property only has effect if crop marks are enabled.
+
+
 <h3 id="renderingpages">Rendering page boxes that do not fit a page sheet</h3>
 
 <p>If a page box does not match the target page sheet dimensions, the user agent