drafts: css3-gcpm/Overview.html@2fa0f76c392e

[css3-page][css3-gcpm] Move :blank to css3-page, per WG resolution

CSSWG resolution:
http://lists.w3.org/Archives/Public/www-style/2012Nov/0250.html

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

     2 "http://www.w3.org/TR/html4/strict.dtd">

     4 <html lang=en>

     5  <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">

     6   <title>CSS Generated Content for Paged Media Module</title>

     8   <link href="http://purl.org/dc/terms/" rel=schema.dcterms>

     9   <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"

    10    rel=dcterms.rights>

    11   <meta content="CSS Generated Content for Paged Media Module"

    12    name=dcterms.title>

    13   <meta content=text name=dcterms.type>

    14   <meta content=2013-02-11 name=dcterms.issued>

    15   <meta content="Håkon Wium Lie" name=dcterms.creator>

    16   <meta content=W3C name=dcterms.publisher>

    17   <meta content="http://www.w3.org/TR/2013/ED-css3-gcpm-20130211/"

    18    name=dcterms.identifier>

    19   <meta content="text/html; charset=utf-8" http-equiv=Content-Type>

    20   <link href="../default.css" rel=stylesheet type="text/css">

    21   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet

    22    type="text/css">

    23   <style type="text/css">

    24 .example img { display: block }

    25 .example { background: #ddd }

    26 body { line-height: 1.3 }

    27 </style>

    29  <body>

    30   <div class=head> <!--begin-logo-->

    31    <p><a href="http://www.w3.org/"><img alt=W3C height=48

    32     src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->

    34    <h1>CSS Generated Content for Paged Media Module</h1>

    36    <h2 class="no-num no-toc" id=w3c-working>Editor's Draft 11 February 2013</h2>

    38    <dl>

    39     <dt>This version:

    41     <dd><a

    42      href="http://www.w3.org/TR/2013/ED-css3-gcpm-20130211/">http://www.w3.org/TR/2013/ED-css3-gcpm-20130211/</a>

    44     <dt>Latest version:

    46     <dd><a

    47      href="http://www.w3.org/TR/css3-gcpm/">http://www.w3.org/TR/css3-gcpm/</a>

    49     <dt>Previous version:

    51     <dd><a href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/">

    52      http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/</a>

    54     <dt>Editor:

    56     <dd>Håkon Wium Lie, Opera Software, howcome@opera.com

    57    </dl>

    58    <!--begin-copyright-->

    59    <p class=copyright><a

    60     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"

    61     rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr

    62     title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a

    63     href="http://www.csail.mit.edu/"><abbr

    64     title="Massachusetts Institute of Technology">MIT</abbr></a>, <a

    65     href="http://www.ercim.eu/"><abbr

    66     title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,

    67     <a href="http://www.keio.ac.jp/">Keio</a>, <a

    68     href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a

    69     href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,

    70     <a

    71     href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>

    72     and <a

    73     href="http://www.w3.org/Consortium/Legal/copyright-documents">document

    74     use</a> rules apply.</p>

    75    <!--end-copyright-->

    76    <hr title="Separator for header">

    77   </div>

    79   <h2 class="no-num no-toc" id=abstract>Abstract</h2>

    81   <p>This module describes features often used in printed publications. Most

    82    of the specified functionality involves some sort of generated content

    83    where content from the document is adorned, replicated, or moved in the

    84    final presentation of the document. Along with two other CSS3 modules –

    85    multi-column layout and paged media – this module offers advanced

    86    functionality for presenting structured documents on paged media. Paged

    87    media can be printed, or presented on screens.

    89   <h2 class="no-num no-toc" id=status-of-this-document>Status of this

    90    document</h2>

    91   <!--begin-status-->

    93   <p>This is a public copy of the editors' draft. It is provided for

    94    discussion only and may change at any moment. Its publication here does

    95    not imply endorsement of its contents by W3C. Don't cite this document

    96    other than as work in progress.

    98   <p>The (<a

    99    href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public

   100    mailing list <a

   101    href="mailto:www-style@w3.org?Subject=%5Bcss3-gcpm%5D%20PUT%20SUBJECT%20HERE">

   102    www-style@w3.org</a> (see <a

   103    href="http://www.w3.org/Mail/Request">instructions</a>) is preferred for

   104    discussion of this specification. When sending e-mail, please put the text

   105    “css3-gcpm” in the subject, preferably like this:

   106    “[<!---->css3-gcpm<!---->] <em>…summary of comment…</em>”

   108   <p>This document was produced by the <a href="/Style/CSS/members">CSS

   109    Working Group</a> (part of the <a href="/Style/">Style Activity</a>).

   111   <p>This document was produced by a group operating under the <a

   112    href="/Consortium/Patent-Policy-20040205/">5 February 2004 W3C Patent

   113    Policy</a>. W3C maintains a <a href="/2004/01/pp-impl/32061/status"

   114    rel=disclosure>public list of any patent disclosures</a> made in

   115    connection with the deliverables of the group; that page also includes

   116    instructions for disclosing a patent. An individual who has actual

   117    knowledge of a patent which the individual believes contains <a

   118    href="/Consortium/Patent-Policy-20040205/#def-essential">Essential

   119    Claim(s)</a> must disclose the information in accordance with <a

   120    href="/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the

   121    W3C Patent Policy</a>.</p>

   122   <!--end-status-->

   124   <p>This WD contains functionality that the CSS WG finds interesting and

   125    useful. In general, the earlier a feature appears in this draft, the more

   126    stable it is. Significant changes in functionality and syntax must be

   127    expected from <a href="#paged-presentations">paged presentations</a> and

   128    onwards. Also, functionality described in this module may be moved to

   129    other modules. Since the <a

   130    href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608">previous WD</a>,

   131    hyphenation has been moved to <a

   132    href="http://www.w3.org/TR/2011/WD-css3-text-20110901/#hyphenation">css3-text</a>

   133    and the <a

   134    href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/#the-super-decimal-list-style-type">super-decimal</a>

   135    list-style-type value has been moved to <a

   136    href="http://www.w3.org/TR/2011/WD-css3-lists-20110524/#super-decimal">css3-lists</a>.

   137    <a

   138    href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/#named-counter-styles">Named

   139    counter styles</a> and the <a

   140    href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/#the-symbols-list-style-type">symbols()</a>

   141    list-style-type value should also appear in a future css3-lists WD.

   143   <h2 class="no-num no-toc" id=table-of-contents><a name=contents>Table of

   144    contents</a></h2>

   145   <!--begin-toc-->

   147   <ul class=toc>

   148    <li><a href="#introduction"><span class=secno>1. </span>Introduction</a>

   150    <li><a href="#running-headers-and-footers"><span class=secno>2.

   151     </span>Running headers and footers</a>

   152     <ul class=toc>

   153      <li><a href="#named-strings"><span class=secno>2.1. </span>Named

   154       strings</a>

   155       <ul class=toc>

   156        <li><a href="#setting-named-strings-the-string-set-pro"><span

   157         class=secno>2.1.1. </span>Setting named strings: the ‘<code

   158         class=property>string-set</code>’ property</a>

   160        <li><a href="#using-named-strings"><span class=secno>2.1.2.

   161         </span>Using named strings</a>

   162       </ul>

   164      <li><a href="#running-elements"><span class=secno>2.2. </span>Running

   165       elements</a>

   166     </ul>

   168    <li><a href="#leaders"><span class=secno>3. </span>Leaders</a>

   170    <li><a href="#cross-references"><span class=secno>4.

   171     </span>Cross-references</a>

   172     <ul class=toc>

   173      <li><a href="#the-target-counter-and-target-counters-v"><span

   174       class=secno>4.1. </span>The ‘<code class=css>target-counter</code>’

   175       and ‘<code class=css>target-counters</code>’ values</a>

   177      <li><a href="#the-target-text-value"><span class=secno>4.2. </span>The

   178       ‘<code class=css>target-text</code>’ value</a>

   179     </ul>

   181    <li><a href="#footnotes"><span class=secno>5. </span>Footnotes</a>

   182     <ul class=toc>

   183      <li><a href="#turning-elements-into-footnotes"><span class=secno>5.1.

   184       </span>Turning elements into footnotes</a>

   186      <li><a href="#the-footnote-area"><span class=secno>5.2. </span>The

   187       footnote area</a>

   189      <li><a href="#footnote-calls"><span class=secno>5.3. </span>Footnote

   190       calls</a>

   192      <li><a href="#footnote-markers"><span class=secno>5.4. </span>Footnote

   193       markers</a>

   195      <li><a href="#counting-footnotes"><span class=secno>5.5. </span>Counting

   196       footnotes</a>

   198      <li><a href="#laying-out-footnotes"><span class=secno>5.6. </span>Laying

   199       out footnotes</a>

   201      <li><a href="#footnote-magic"><span class=secno>5.7. </span>Footnote

   202       magic</a>

   203     </ul>

   205    <li><a href="#page-marks-and-bleed-area"><span class=secno>6. </span>Page

   206     marks and bleed area</a>

   208    <li><a href="#bookmarks"><span class=secno>7. </span>Bookmarks</a>

   209     <ul class=toc>

   210      <li><a href="#bookmark-level"><span class=secno>7.1. </span>‘<code

   211       class=property>bookmark-level</code>’</a>

   213      <li><a href="#bookmark-label"><span class=secno>7.2. </span>‘<code

   214       class=property>bookmark-label</code>’</a>

   216      <li><a href="#bookmark-state"><span class=secno>7.3. </span>‘<code

   217       class=property>bookmark-state</code>’</a>

   218     </ul>

   220    <li><a href="#cmyk-colors"><span class=secno>8. </span>CMYK colors</a>

   222    <li><a href="#styling-blank-pages"><span class=secno>9. </span>Styling

   223     blank pages</a>

   225    <li><a href="#paged-presentations"><span class=secno>10. </span>Paged

   226     presentations</a>

   228    <li><a href="#navigation-between-pages"><span class=secno>11.

   229     </span>Navigation between pages</a>

   230     <ul class=toc>

   231      <li><a href="#page-shift-effects"><span class=secno>11.1. </span>Page

   232       shift effects</a>

   233     </ul>

   235    <li><a href="#page-floats"><span class=secno>12. </span>Page floats</a>

   236     <ul class=toc>

   237      <li><a href="#page-float-delays"><span class=secno>12.1. </span>Page

   238       float delays</a>

   240      <li><a href="#clearing-page-floats"><span class=secno>12.2.

   241       </span>Clearing page floats</a>

   243      <li><a href="#floating-inside-and-outside-pages"><span class=secno>12.3.

   244       </span>Floating inside and outside pages</a>

   245     </ul>

   247    <li><a href="#page-and-column-floats-alternative-synta"><span

   248     class=secno>13. </span>Page and column floats, alternative syntax</a>

   250    <li><a href="#exclusions"><span class=secno>14. </span>Exclusions</a>

   251     <ul class=toc>

   252      <li><a href="#exclusions-based-on-floats"><span class=secno>14.1.

   253       </span>Exclusions based on floats</a>

   255      <li><a href="#the-float-offset-property"><span class=secno>14.2.

   256       </span>The ‘<code class=property>float-offset</code>’ property</a>

   258      <li><a href="#the-clear-side-property"><span class=secno>14.3.

   259       </span>The ‘<code class=property>clear-side</code>’ property</a>

   261      <li><a href="#exclusions-based-on-images"><span class=secno>14.4.

   262       </span>Exclusions based on images</a>

   264      <li><a href="#exclusions-based-on-rendered-content"><span

   265       class=secno>14.5. </span>Exclusions based on rendered content</a>

   267      <li><a href="#exclusions-based-on-shapes"><span class=secno>14.6.

   268       </span>Exclusions based on shapes</a>

   269     </ul>

   271    <li><a href="#regions"><span class=secno>15. </span>Regions</a>

   273    <li><a href="#regions-and-exclusions-examples"><span class=secno>16.

   274     </span>Regions and Exclusions examples</a>

   276    <li><a href="#selecting-pages"><span class=secno>17. </span>Selecting

   277     pages</a>

   279    <li><a href="#selecting-lines"><span class=secno>18. </span>Selecting

   280     lines</a>

   282    <li><a href="#conditional-text"><span class=secno>19. </span>Conditional

   283     text</a>

   285    <li><a href="#conformance"><span class=secno>20. </span>Conformance</a>

   287    <li><a href="#appendix-a-default-style-sheet"><span class=secno>21.

   288     </span>Appendix A: Default style sheet</a>

   290    <li class=no-num><a href="#acknowledgments">Acknowledgments</a>

   292    <li class=no-num><a href="#references">References</a>

   293     <ul class=toc>

   294      <li class=no-num><a href="#normative-references">Normative

   295       references</a>

   297      <li class=no-num><a href="#other-references">Other references</a>

   298     </ul>

   300    <li class=no-num><a href="#index">Index</a>

   302    <li class=no-num><a href="#property-index">Property index</a>

   303   </ul>

   304   <!--end-toc-->

   306   <h2 id=introduction><span class=secno>1. </span>Introduction</h2>

   308   <p>(This section is not normative.)

   310   <p>This specification describes features often used in printed

   311    publications. Some of the proposed functionality (e.g., the new list style

   312    types, and border segments) may also used with other media types. However,

   313    this specification is monstly concerned with paged media.

   315   <h2 id=running-headers-and-footers><span class=secno>2. </span>Running

   316    headers and footers</h2>

   318   <p>To aid navigation in printed material, headers and footers are often

   319    printed in the page margins. <a href="#CSS3PAGE"

   320    rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a> describes how to place

   321    headers and footers on a page, but not how to fetch headers and footers

   322    from elements in the document. This specification offers two ways to

   323    achieve this. The first mechanism is <dfn id=named-strings0>named

   324    strings</dfn> which <em>copies</em> the text (without style, structure, or

   325    replaced content) from one element for later reuse in margin boxes. The

   326    second mechanism is <dfn id=running-elements0>running elements</dfn> which

   327    <em>moves</em> elements (with style, structure, and replaced content) into

   328    a margin box.

   330   <h3 id=named-strings><span class=secno>2.1. </span>Named strings</h3>

   331   <!--

   332 <p>Named strings are discussed both in the CSS3 Generated and Replaced

   333 Content (section 9) and in CSS3 Paged Media (several places). For a

   334 proposed definition of the property, one has to go back to the <a href="http://www.w3.org/1999/06/WD-css3-page-19990623">CSS3 draft from 1999</a>

   335 1999:

   336 -->

   338   <p>Named strings can be thought of as variables that can hold one string of

   339    text each. Named strings are created with the ‘<a

   340    href="#string-set"><code class=property>string-set</code></a>’ property

   341    which copies a string of text into the named string. Only text is copied;

   342    not style, structure, or replaced content.

   344   <div class=example>

   345    <p>Consider this code:

   347    <pre>

   348 h1 { string-set: title contents }

   349 </pre>

   351    <p>Whenever an <code>h1</code> element is encountered, its textual content

   352     is copied into a named string called <em>title</em>. Its content can be

   353     retrieved in the ‘<code class=property>content</code>’ property:

   355    <pre>

   356 @page :right { @top-right { content: string(title) }}

   357 </pre>

   358   </div>

   360   <h4 id=setting-named-strings-the-string-set-pro><span class=secno>2.1.1.

   361    </span>Setting named strings: the ‘<a href="#string-set"><code

   362    class=property>string-set</code></a>’ property</h4>

   364   <table class=propdef>

   365    <tbody>

   366     <tr>

   367      <td><em>Name:</em>

   369      <td><dfn id=string-set>string-set</dfn>

   371     <tr>

   372      <td><em>Value:</em>

   374      <td>[[ &lt;identifier> &lt;content-list>] [, &lt;identifier>

   375       &lt;content-list>]* ] | none

   377     <tr>

   378      <td><em>Initial:</em>

   380      <td>none

   382     <tr>

   383      <td><em>Applies to:</em>

   385      <td>all elements

   387     <tr>

   388      <td><em>Inherited:</em>

   390      <td>no

   392     <tr>

   393      <td><em>Percentages:</em>

   395      <td>N/A

   397     <tr>

   398      <td><em>Media:</em>

   400      <td>all

   402     <tr>

   403      <td><em>Computed value:</em>

   405      <td>as specified value

   406   </table>

   408   <p>The ‘<a href="#string-set"><code

   409    class=property>string-set</code></a>’ property accepts a comma-separated

   410    list of named strings. Each named string is followed by a content list

   411    that specifies which text to copy into the named string. Whenever an

   412    element with value of ‘<a href="#string-set"><code

   413    class=property>string-set</code></a>’ different from ‘<code

   414    class=css>none</code>’ is encountered, the named strings are assigned

   415    their respective value.

   417   <p>&lt;content-list> expands to one or more of these values, in any order:

   419   <dl>

   420    <dt>&lt;string&gt;

   422    <dd>a string, e.g. "foo"

   424    <dt>&lt;counter&gt;

   426    <dd>the counter() or counters() function, as per <a

   427     href="http://www.w3.org/TR/CSS21/syndata.html#counter">CSS 2.1 section

   428     4.3.5</a>

   430    <dt>contents

   432    <dd>The textual content of the element, including the content of its

   433     ::before and ::after pseudo-element. The content of the element's

   434     descendants, including their respective ::before and ::after

   435     pseudo-elements, are included in the returned content.

   437    <dt>content-element

   439    <dd>The textual content of the element, not including the content of its

   440     ::before and ::after pseudo-element. The content of the element's

   441     descendants, including their respective ::before and ::after

   442     pseudo-elements, are included in the returned content.

   444    <dt>content-before

   446    <dd>The textual content of the ::before pseudo-element the content of the

   447     element.

   449    <dt>content-after

   451    <dd>The textual content of the ::after pseudo-element the content of the

   452     element.

   454    <dt>content-first-letter

   456    <dd>The first letter of the content of the element. The definition of a

   457     letter is the same as for :first-letter pseudo-elements.

   458     <p class=note>The expected use for ‘<code

   459      class=css>content-first-letter</code>’ is to create one-letter

   460      headers, e.g., in dictionaries.

   462    <dt>env()

   464    <dd>This function returns data from the local environment of the user at

   465     the time of formatting. The function accepts one of these keywords:

   466     <ul>

   467      <li>env(url): returns the URL of the document

   469      <li>env(date): returns the date on the user's system at the time of

   470       formatting

   472      <li>env(time): returns the time on the user's system at the time of

   473       formatting

   475      <li>env(date-time): returns the date and time on the user's system at

   476       the time of formatting

   477     </ul>

   479     <p>Information about date and time is formatted according to the locale

   480      of the user's system.

   482     <p class=issue>Or, should there be a way to specify the locale? Or should

   483      we simply format all in ISO format (e.g., 2010-03-30)?

   485     <p class=note>On many systems, preformatted strings in the user's locale

   486      can be found through the <a

   487      href="http://www.opengroup.org/onlinepubs/009695399/functions/strftime.html">strftime</a>

   488      function. The date, time and date-time strings can be found by using the

   489      "%x", "%X" and "%c" conversion strings, respectively.

   491     <div class=example>

   492      <pre>

   493 @page {

   494   @top-right { content: env(url) }

   495   @bottom-right { content: env(date-time) }

   496 }

   497 </pre>

   498     </div>

   499   </dl>

   500   <!--<p class="issue">Should target-counter() and leader() also be allowed?</p>-->

   502   <p>Named strings can only hold the result of one assignment; whenever a new

   503    assignment is made to a named string, its old value is replaced.

   505   <p class=note>User agents, however, must be able to remember the result of

   506    more than one assignment as the ‘<code class=css>string()</code>’

   507    functional value (described below) can refer to different assignments.

   509   <p>The scope of a named string is the page of the element to which the

   510    ‘<a href="#string-set"><code class=property>string-set</code></a>’

   511    property is attached and subsequent pages.

   513   <p>The name space of named strings is different from other sets of names in

   514    CSS.

   516   <p>The textual content is processed as if ‘<code class=css>white-space:

   517    normal</code>’ had been set.

   519   <div class=example>

   520    <pre>

   521 h2 {

   522   string-set: header "Chapter " counter(header) ": " contents;

   523   counter-increment: header;

   524 }

   525 </pre>

   527    <p>Note that the string called "header" is different from the counter with

   528     the same name. The above code may result in <em>header</em> being set to

   529     "Chapter 2: Europa".

   530   </div>

   532   <div class=example>

   533    <p>This example results in the same value being assigned to

   534     <em>header</em> as in the previous example. <!--note namespace-->

   536    <pre>

   537 h2:before { content: "Chapter " counter(header) }

   538 h2 {

   539   string-set: header content-before content-element;

   540   counter-increment: header }

   541 </pre>

   542   </div>

   544   <div class=example>

   545    <pre>

   546 dt { string-set: index content-first-letter }

   547 </pre>

   548   </div>

   550   <div class=example>

   551    <p>The content is copied regardless of other settings on the element. In

   552     HTML, TITLE elements are normally not displayed, but in this examplet the

   553     content is copied into a named string:

   555    <pre>

   556 title {

   557   display: none;

   558   string-set: header contents;

   559 }

   560 </pre>

   561   </div>

   563   <h4 id=using-named-strings><span class=secno>2.1.2. </span>Using named

   564    strings</h4>

   566   <p>The content of named strings can be recalled by using the ‘<code

   567    class=css>string()</code>’ value on the ‘<code

   568    class=property>content</code>’ property. The ‘<code

   569    class=css>string()</code>’ value has one required argument, namely the

   570    name of the string.

   572   <div class=example>

   573    <pre>

   574 @page { @top-center { content: string(header) }}

   575 @page { @right-middle { content: string(index) }}

   576 @page { @top-left { content: string(entry) }}

   577 h1 { string-set: header "Chapter " counter(chapter) contents }

   578 dt { string-set: index content-first-letter, entry contents }

   579 </pre>

   580   </div>

   582   <p>If the value of the named string is changed by an element on a certain

   583    page, the named string may have several values on that page. In order to

   584    specify which of these values should be used, an optional argument is

   585    accepted on the ‘<code class=css>string()</code>’ value. This argument

   586    can have one of four keywords:

   588   <ul>

   589    <li>‘<code class=css>start</code>’: the named string's entry value for

   590     that page is used.

   592    <li>‘<code class=css>first</code>’: the value of the first assignment

   593     is used. If there is no assignment on the page, the start value is used.

   594     ‘<code class=css>first</code>’ is the default value.

   596    <li>‘<code class=css>last</code>’: the named string's exit value for

   597     that page is used

   599    <li>‘<code class=css>first-except</code>’: similar to ‘<code

   600     class=css>first</code>’, except on the page where the value was

   601     assigned. On that page, the empty string is used.

   602   </ul>

   604   <p>The assignment is considered to take place on the first page where a

   605    content box representing the element occurs. If the element does not have

   606    any content boxes (e.g., if ‘<code class=css>display: none</code>’ is

   607    set), the assignment is considered to take place on the page where the

   608    first content box would have occured if the element had been in the normal

   609    flow.

   611   <div class=example>

   612    <p>In this example, the first term on the page will be shown in the top

   613     left corner and the last term on the page will be shown in the top right

   614     corner. In top center of the page, the first letter of first term will be

   615     shown.

   617    <pre>

   618 @page { @top-left { content: string(term, first) }}

   619 @page { @top-right { content: string(term, last) }}

   620 @page { @top-center { content: string(index, first) }}

   621 dt { string-set: index content-first-letter, term contents }

   622 </pre>

   623   </div>

   625   <div class=example>

   626    <p>In this example, the header in the top center will be blank on pages

   627     where ‘<code class=css>h1</code>’ elements appear. On other pages,

   628     the string of the previous ‘<code class=css>h1</code>’ element will

   629     be shown.

   631    <pre>

   632 @page { @top-center { content: string(chapter, first-except) }}

   633 h1 { string-set: chapter contents }

   634 </pre>

   635   </div>

   637   <p>If the named string referred to in a ‘<code

   638    class=css>string()</code>’ value has not been assigned a value, the

   639    empty string is used.

   641   <h3 id=running-elements><span class=secno>2.2. </span>Running elements</h3>

   643   <p>Named strings, as described above, can only hold textual content; any

   644    style, structure or replaced content associated with the element is

   645    ignored. To overcome this limitation, a way of moving elements into

   646    running headers and footers is introduced.

   648   <p>Elements that are moved into headers and footers are repeated on several

   649    pages; they are said to be <a href="#running-elements0"><em>running

   650    elements</em></a>. To support running elements, a new value – running()

   651    – is introduced on the ‘<code class=property>position</code>’

   652    property. It has one required argument: the name by which the running

   653    element can be referred to. A running element is not shown in its natural

   654    place; there it is treated as if ‘<code class=css>display:

   655    none</code>’ had been set. Instead, the running element may be displayed

   656    in a margin box.

   658   <p>Like counters and named strings, the name of a running element is chosen

   659    by the style sheet author, and the names have a separate name space. A

   660    running element can hold one element, including its pseudo-elements and

   661    its descendants. Whenever a new element is assigned to a running element,

   662    the old element is lost.

   664   <p class=note>User agents, however, must be able to remember the result of

   665    more than one assignment as the ‘<code class=css>element()</code>’

   666    value (described below) can refer to different assignments.

   668   <p>Running elements inherit through their normal place in the structure of

   669    the document.

   671   <div class=example>

   672    <pre>

   673 title { position: running(header) }

   674 @page { @top-center {

   675   content: element(header) }

   676 }

   677 </pre>

   678   </div>

   680   <div class=example>

   681    <p>In this example, the element is copied into the running header but it

   682     also keeps its normal place.

   684    <pre>

   685 title { position: running(header), normal }

   686 @page { @top-center {

   687   content: element(header) }

   688 }

   689 </pre>

   690   </div>

   692   <p>Like the ‘<code class=css>string()</code>’ value, the ‘<code

   693    class=css>element()</code>’ value accepts an optional second argument:

   695   <dl>

   696    <dt>‘<code class=css>start</code>’

   698    <dt>‘<code class=css>first</code>’

   700    <dt>‘<code class=css>last</code>’

   702    <dt>‘<code class=css>first-except</code>’

   703   </dl>

   705   <p>The keywords have the same meaning as for the ‘<code

   706    class=css>string()</code>’ value, and the place of the assignments are

   707    the same.

   709   <p>The ‘<code class=css>element()</code>’ value cannot be combined with

   710    any other values.

   712   <div class=example>

   713    <p>In this example, the header is hidden from view in all media types

   714     except print. On printed pages, the header is displayed top center on all

   715     pages, except where h1 elements appear.

   717    <pre>

   718 &lt;style>

   719   div.header { display: none }

   720   @media print {

   721   div.header {

   722     display: block;

   723     position: running(header);

   724   }

   725   @page { @top-center { content: element(header, first-except) }}

   726 &lt;/style>

   727 ...

   728 &lt;div class="header">Introduction&lt;/div>

   729 &lt;h1 class="chapter">An introduction&lt;/div>

   731 </pre>

   732   </div>

   734   <div class=example>

   735    <p>This code illustrates how to change the running header on one page in

   736     the middle of a run of pages:

   738    <pre>

   739 ...

   740 &lt;style>

   741 @page { @top-center {

   742   content: element(header, first) }}

   743 .header { position: running(header) }

   744 .once { font-weight: bold }

   745 &lt;/style>

   746 ...

   747 &lt;div class="header">Not now&lt;/div>

   748 &lt;p>Da di ha di da di ...

   749   &lt;span class="header once">NOW!&lt;/span>

   750   &lt;span class="header">Not now&lt;/span>

   751   ... da di ha di hum.&lt;/p>

   752 ...

   753 </pre>

   754    The header is "Not now" from the outset, due to the "div" element. The

   755    first "span" element changes it to "<b>NOW!</b>" on the page where the

   756    "span" element would have appeared. The second "span" element, which would

   757    have appeared on the same page as the first is not used because the

   758    ‘<code class=css>first</code>’ keyword has been specified. However,

   759    the second "span" element still sets the exit value for "header" and this

   760    value is used on subsequent pages.</div>

   762   <h2 id=leaders><span class=secno>3. </span>Leaders</h2>

   764   <p>A leader is a visual pattern that guides the eye. Typically, leaders are

   765    used to visually connect an entry in a list with a corresponding code. For

   766    example, there are often leaders between titles and page numbers in a

   767    table of contents (TOC). Another example is the phone book where there are

   768    leaders between a name and a telephone number.

   770   <p>In CSS3, a leader is composed of series of glyphs through the ‘<code

   771    class=css>leader()</code>’ value on the ‘<code

   772    class=property>content</code>’ property. The functional notation accepts

   773    two values. The first describes the glyph pattern that makes up the

   774    leader. These values are allowed:

   776   <ul>

   777    <li>leader(dotted)

   779    <li>leader(solid)

   781    <li>leader(space)

   783    <li>leader(&lt;string&gt;)

   784   </ul>

   786   <p>Using the keyword values is equivalent to setting a string value. The

   787    table below shows the equivalents:

   789   <table class=border>

   790    <tbody>

   791     <tr>

   792      <th>Keyword

   794      <th>String

   796      <th>Unicode characters

   798     <tr>

   799      <td>leader(dotted)

   801      <td>leader(‘<code class=css>. </code>’)

   803      <td>\002E \0020

   805     <tr>

   806      <td>leader(solid)

   808      <td>leader(‘<code class=css>_</code>’)

   810      <td>\005F

   812     <tr>

   813      <td>leader(space)

   815      <td>leader(‘<code class=css> </code>’)

   817      <td>\0020

   818   </table>

   819   <!--

   820 <p>User Agents should attempt to align corresponding glyphs from the

   821 leader pattern between consecutive lines.

   822 -->

   824   <p>The string inside the parenthesis is called the <em>leader string</em>.

   826   <p>In its simplest form, the ‘<code class=property>content</code>’

   827    property only takes one ‘<code class=css>leader()</code>’ value:

   829   <div class=example>

   830    <pre>

   831 heading::after { content: leader(dotted) }

   832 </pre>

   833   </div>

   835   <p>The leader string must be shown in full at least once and this

   836    establishes the minimum length of the leader. To fill the available space,

   837    the leader string is repeated as many times as possible in the writing

   838    direction. At the end of the leader, a partial string pattern may be

   839    shown. White space in leaders is collapsed according to the values on

   840    white-space properties.

   841    <!-- <span class="issue">Or, partial strings be avoided?</span> -->

   842    <!--<p class="issue">Should other properties influence the appearance of leaders?-->

   844   <p>These properties influence the appearance of leaders: all font

   845    properties, text properties, ‘<code

   846    class=property>letter-spacing</code>’, white-space properties,

   847    background properties, and ‘<code class=property>color</code>’.

   849   <p>The second value describes the alignment of the leader. These values are

   850    allowed:

   852   <dl>

   853    <dt>align

   855    <dd>attempt to align corresponding glyphs from the leader pattern between

   856     consecutive lines. This is the default value.

   858    <dt>start

   860    <dd>align leader string with the start

   862    <dt>end

   864    <dd>align leader string with the end

   866    <dt>center

   868    <dd>center leader string

   870    <dt>string-space

   872    <dd>add space between strings to take up all available space

   874    <dt>letter-space

   876    <dd>add space between letters (both inside the string, and at the

   877     start/end of the string) to take up all available space

   878   </dl>

   880   <div class=example>

   881    <pre>

   882 heading::after { content: leader(dotted, align) }

   883 heading::after { content: leader(dotted, start) }

   884 heading::after { content: leader(dotted, end) }

   885 heading::after { content: leader(dotted, center) }

   886 heading::after { content: leader(dotted, string-space) }

   887 heading::after { content: leader(dotted, letter-space) }

   888 </pre>

   889   </div>

   891   <p>In a more complex example, the ‘<code class=property>leader</code>’

   892    value is combined with other values on the ‘<code

   893    class=property>content</code>’ property:

   895   <div class=example>

   896    <pre>

   897 ul.toc a::after {

   898   content: leader(". . . ") target-counter(attr(href url), page);

   899 }

   900 </pre>

   901   </div>

   903   <p>If the content connected by a leader end up on different lines, the

   904    leader will be present on all lines. Each leader fragment honors the

   905    minimum length of the leader.

   907   <div class=example>

   908    <p>Consider this code:

   910    <pre>

   911 &lt;style>

   912 .name::after { content: leader(dotted) }

   913 &lt;/style>

   914 &lt;div class="entry">

   915 &lt;span class="name">John Doe&lt;/span>

   916 &lt;span class="number">123456789&lt;/span>

   917 &lt;/div>

   918 </pre>

   920    <p>If the name and number end up on different lines (e.g., in a narrow

   921     column), it may be formatted like this:

   923    <pre>

   924 John Doe....

   925 ...123456789

   926 </pre>

   927   </div>

   929   <p>To determine the length of the leaders, user agents must do the

   930    following for each line:

   932   <ol>

   933    <li>Lay out the content with leaders of minimum lengths

   935    <li>Determine the empty space left on the line.

   937    <li>Distribute the empty space between the leaders on the line. Glyphs

   938     must not be shown partially. All leaders on the line should, to the

   939     extent possible, have the same length. This may not always be possible as

   940     the minimum leader length must be honored.

   942    <li>Fill the empty space with the specified leader pattern.

   943   </ol>

   945   <div class=example>

   946    <p>Consider this code:

   948    <pre>

   949 &lt;style>

   950 cite::before { content: leader('  ') }

   951 &lt;/style>

   952 &lt;blockquote>

   953   Bla great bla bla world bla bla

   954   empire bla bla color bla bla

   955   history bla bla forever.

   956     &lt;cite>John Johnson&lt;/cite>

   957 &lt;/blockquote>

   958 </pre>

   960    <p>Depending on the width of the containing block, this may be rendered

   961     as:

   963    <pre>

   964   Bla great bla bla world bla bla

   965   empire bla bla color bla bla

   966   history bla bla forever.   John

   967   Johnson

   968 </pre>

   970    <p>However, this rendering is preferable:

   972    <pre>

   973   Bla great bla bla world bla bla

   974   empire bla bla color bla bla

   975   history bla bla forever.

   976                      John Johnson

   977 </pre>

   979    <p>To indicate that <q>John Johnson</q> should be kept on one line, this

   980     rule can be added to the style sheet:

   982    <pre>

   983 cite { text-wrap: suppress }

   984 </pre>

   986    <p>Until ‘<code class=property>text-wrap</code>’ is widely supported,

   987     this rule can also be used:

   989    <pre>

   990 cite { white-space: nowrap }

   991 </pre>

   993    <p>If the containing element is wider, this may be the resultant

   994     presentation:

   996    <pre>

   997   Bla great bla bla world bla bla empire

   998   bla bla color bla bla history bla bla

   999   forever.                  John Johnson

  1000 </pre>

  1001   </div>

  1003   <h2 id=cross-references><span class=secno>4. </span>Cross-references</h2>

  1005   <p>It is common to refer to other parts of a document by way of a section

  1006    number (e.g., "See section 3.4.1"), a page number (e.g., "See discussion

  1007    on page 72"), or a string (e.g., "See the chapter on Europe"). Being able

  1008    to resolve these cross-references automatically saves time and reduces the

  1009    number of errors.

  1011   <h3 id=the-target-counter-and-target-counters-v><span class=secno>4.1.

  1012    </span>The ‘<code class=css>target-counter</code>’ and ‘<code

  1013    class=css>target-counters</code>’ values</h3>

  1015   <p>Numerical cross-references are generated by ‘<code

  1016    class=css>target-counter()</code>’ and ‘<code

  1017    class=css>target-counters()</code>’ values that fetch the value of a

  1018    counter at the target end of the link. These functions are similar to the

  1019    ‘<code class=css>counter()</code>’ and ‘<code

  1020    class=css>counters()</code>’ functions, except that they fetch counter

  1021    values from remote elements. ‘<code class=css>target-counter()</code>’

  1022    has two required arguments: the url of the link, and the name of a

  1023    counter. ‘<code class=css>target-counters()</code>’ has three required

  1024    arguments: the url of the link, the name of a counter, and a separator

  1025    string. Both functions accepts an optional argument at the end that

  1026    describes which list style type to use when presenting the resulting

  1027    number; ‘<code class=css>decimal</code>’ being the default.

  1029   <div class=example>

  1030    <p>This style sheet specifies that a string like " (see page 72)" is added

  1031     after a link:

  1033    <pre>

  1034 a::after { content: "(see page " target-counter(attr(href url), page, decimal) ")" }

  1035 </pre>

  1036   </div>

  1038   <div class=example>

  1039    <p>This style sheet specifies that a string like " (see section 1.3.5)" is

  1040     added after a link:

  1042    <pre>

  1043 a::after { content: "(see section " target-counters(attr(href url), section, ".", decimal) ")" }

  1044 </pre>

  1045   </div>

  1047   <h3 id=the-target-text-value><span class=secno>4.2. </span>The ‘<code

  1048    class=css>target-text</code>’ value</h3>

  1050   <p>Textual cross-references are generated by ‘<code

  1051    class=css>target-text()</code>’ which fetches the textual content from

  1052    the target end of the link. Only text is copied; not style, structure, or

  1053    replaced content. ‘<code class=css>target-text()</code>’ has one

  1054    required argument: the url of the link. An optional second argument

  1055    specifies exactly which content is fetched. There are five possible

  1056    values: ‘<code class=css>contents</code>’, ‘<code

  1057    class=css>content-element</code>’, ‘<code

  1058    class=css>content-before</code>’, ‘<code

  1059    class=css>content-after</code>’, ‘<code

  1060    class=css>content-first-letter</code>’; these keywords are defined

  1061    above.

  1063   <div class=example>

  1064    <p>To generate this text

  1066    <blockquote>

  1067     <p>See Chapter 3 ("A better way") on page 31 for an in-depth evaluation.

  1068    </blockquote>

  1069    from this markup:

  1070    <pre>

  1071 &lt;p>See &lt;a href="#chx">this chapter&lt;/a> for an in-depth evaluation.

  1072 ...

  1073 &lt;h2 id="chx">A better way&lt;/h2>

  1074 </pre>

  1075    this CSS code can be used:

  1076    <pre>

  1077 h2 { counter-increment: chapter }

  1078 a { content: "Chapter " target-counter(attr(href url), chapter)

  1079    ' ("'  target-text(attr(href url), content-element) '") on page '

  1080    target-counter(attr(href url), page);

  1081 </pre>

  1082   </div>

  1084   <h2 id=footnotes><span class=secno>5. </span>Footnotes</h2>

  1086   <p>A footnote is a note typically placed at the bottom of a page that

  1087    comments on or cites a reference. References to footnotes are marked with

  1088    a <em>note-call</em> in the main text. The rendering of footnotes is

  1089    complex. As far as possible, footnotes try to reuse other parts of CSS.

  1090    However, due to the typographic traditions of footnotes, some new

  1091    functionality is required to support footnotes in CSS:

  1093   <p>In order to support footnotes in CSS, the following functionality is

  1094    added:

  1096   <ul>

  1097    <li>one new value on the ‘<code class=property>float</code>’ property:

  1098     ‘<code class=css>footnote</code>’

  1100    <li>one new page area: ‘<code class=css>@footnote</code>’

  1102    <li>two new pseudo-elements: ‘<code class=css>::footnote-call</code>’

  1103     and ‘<code class=css>::footnote-marker</code>’

  1105    <li>one predefined counter: ‘<code class=css>footnote</code>’

  1107    <li>one new value on the ‘<code class=property>content</code>’

  1108     property: ‘<code class=css>target-pull()</code>’

  1110    <li>border segments

  1111     <!--<li>two new 'list-style-type' values: ''super-decimal'', and symbol(...)-->

  1112   </ul>

  1114   <div class=example>

  1115    <p>In its simplest form, making a footnote is simple.

  1117    <pre>

  1118 &lt;style>

  1119 .footnote { float: footnote }

  1120 &lt;/style>

  1122 &lt;p>A sentence consists of words. &lt;span class="footnote">Most often.&lt;/span>.

  1123 </pre>

  1125    <p>In this example, the text <q>Most often.</q> will be placed in a

  1126     footnote. A note-call will be left behind in the main text and a

  1127     corresponding marker will be shown next to the footnote. Here is one

  1128     possible rendering:

  1130    <pre>

  1131 A sentence consists of words. ¹

  1133 ¹ Most often.

  1134 </pre>

  1135   </div>

  1137   <div class=example>

  1138    <p>To support legacy browsers, it is often better to make a link to the

  1139     note rather than including the text inline. This example shows how to

  1140     fetch the content of a note and place it in a footnote.

  1142    <pre>

  1143 &lt;style>

  1144 @media print {

  1145   .footnote {

  1146     float: footnote;

  1147     content: target-pull(attr(href url)) }

  1148   .call { display: none }

  1149 }

  1150 &lt;/style>

  1151 ...

  1152 &lt;p>A sentence consists of words&lt;a class="footnote" href="#words"> [3]&lt;/a>.

  1153 ...

  1154 &lt;p id=words>&lt;span class="call">[3]&lt;/span> Most often.

  1155 </pre>

  1157    <p class=issue>define ‘<code class=css>target-pull</code>’

  1159    <p>When shown in a legacy browser, the content of the element will be

  1160     shown as a clickable link to an endnote. When printed according to this

  1161     specification, there will be a footnote:

  1163    <pre>

  1164 A sentence consists of words¹.

  1166 ¹ Most often.

  1167 </pre>

  1168   </div>

  1170   <div class=example> Consider this markup:

  1171    <pre>

  1172 &lt;p>Sorry, &lt;span title="This is, of course, a lie.">we're closing for lunch&lt;/span>.

  1173 </pre>

  1175    <p>The content of the "title" attribute can be turned into a footnote with

  1176     this code:

  1178    <pre>

  1179 span[title]::after {

  1180   content: attr(title);

  1181   float: footnote;

  1182 }

  1183 </pre>

  1184   </div>

  1186   <h3 id=turning-elements-into-footnotes><span class=secno>5.1.

  1187    </span>Turning elements into footnotes</h3>

  1189   <p>An element with ‘<code class=css>float: footnote</code>’ (called a

  1190    <em>footnote element</em>) is moved to the <em>footnote area</em> and a

  1191    <em>footnote-call</em> pseudo-element is put in its original place.

  1193   <div class=example>

  1194    <pre>

  1195 span.footnote {

  1196   float: footnote;

  1197 }

  1198 </pre>

  1199   </div>

  1201   <p>Footnote elements are presented inside the <em>footnote area</em>, but

  1202    they inherit through their normal place in the structure of the document.

  1204   <p>The ‘<code class=property>display</code>’ property on footnote

  1205    elements is ignored. Instead, the value of the ‘<code

  1206    class=property>display</code>’ property in the @footnote context

  1207    determines if footnotes are block or inline elements.

  1209   <div class=example>

  1210    <p>In this example, the footnotes are displayed inline:

  1212    <pre>

  1213 @footnote {

  1214   display: inline;

  1215 }

  1216 span.footnote {

  1217   float: footnote;

  1218 }

  1219 </pre>

  1221    <p>Here is one possible presentation of inline footnotes:

  1223    <pre>

  1224 ¹ The first footnote. º The second footnote.

  1225 </pre>

  1226   </div>

  1227   <!--

  1228 <p class=issue>Another way to achieve this would be to introduce different keywords for inline and block footnotes (e.g., float: footnote-inline, float: footnote-block).

  1229 -->

  1231   <p>For each new footnote element, the ‘<code class=css>footnote</code>’

  1232    counter is automatically incremented.

  1234   <h3 id=the-footnote-area><span class=secno>5.2. </span>The footnote area</h3>

  1236   <p>All elements with ‘<code class=css>float: footnote</code>’ are moved

  1237    to the <em>footnote area</em>. The footnote area is described by an

  1238    @footnote-rule inside the @page-rule. By default, the footnote area

  1239    appears at the bottom of the page, but it can be positioned in other

  1240    places.

  1242   <p class=issue>Should the footnote are be positioned using page floats or

  1243    (fixed?) absolute positioning? Or both?

  1245   <p class=issue>

  1247   <div class=example>

  1248    <p>These rules place the footnote area at the bottom of the page, spanning

  1249     all columns:

  1251    <pre>

  1252 @page {

  1253   @footnote {

  1254     float: bottom;

  1255     column-span: all;

  1256     width: 100%;

  1257   }

  1258 }

  1259 </pre>

  1260   </div>

  1262   <div class=example>

  1263    <p>These rules place the footnote area at the bottom of the first column:

  1265    <pre>

  1266 @page {

  1267   @footnote {

  1268     float: bottom;

  1269     width: 100%;

  1270   }

  1271 }

  1272 </pre>

  1273   </div>

  1275   <div class="example issue">

  1276    <p>This code places the footnote area at the bottom of the right column:

  1278    <pre>

  1279 @page {

  1280   @footnote {

  1281     float: bottom-corner;

  1282     width: 100%;

  1283   }

  1284 }

  1285 </pre>

  1286   </div>

  1287   <!--

  1288 <p class=issue>How should one indicate that the footnote area should

  1289 span columns? Typically, footnotes are put inside columns rather than

  1290 spanning the full width, but there could be exceptions.

  1291 -->

  1293   <p>The content of the footnote area is considered to come before other

  1294    content which may compete for the same space on the same page.

  1296   <div class=example>

  1297    <pre>

  1298 @page { @footnote { float: bottom page}}

  1299 div.figure { float: bottom page }

  1300 </pre>

  1302    <p>If figures and footnotes are on the same page, the footnotes will

  1303     appear below the figures as they are floated to the bottom before the

  1304     figures.

  1305   </div>

  1307   <p>Potentially, every page has a footnote area. If there are no footnotes

  1308    on the page, the footnote area will not take up any space. If there are

  1309    footnotes on a page, the layout of the footnote area will be determined by

  1310    the properties/values set on it, and by the footnote elements elements

  1311    inside it.

  1313   <p>These properties apply to the footnote area: ‘<code

  1314    class=property>content</code>’, ‘<code

  1315    class=property>border</code>’, ‘<code

  1316    class=property>padding</code>’, ‘<code

  1317    class=property>margin</code>’, ‘<code class=property>height</code>’,

  1318    ‘<code class=property>width</code>’, ‘<code

  1319    class=property>max-height</code>’, ‘<code

  1320    class=property>max-width</code>’, ‘<code

  1321    class=property>min-height</code>’, ‘<code

  1322    class=property>min-width</code>’, the background properties. <!--

  1323 <p class="note">In published books, it is customary for the footnote

  1324 area to be limited to less than half the height of the page area. Long

  1325 footnotes may need more space, and the customary solution is for

  1326 footnotes to span several pages. To achieve this, the 'max-height'

  1327 property should be used. However, footnotes spanning several pages is

  1328 an advanced feature which is not a conformance requirement for this

  1329 specification.

  1330 -->

  1332   <div class=example>

  1333    <p>This example uses some of the applicable properties on @footnote:

  1335    <pre>

  1336 @footnote {

  1337   margin-top: 0.5em;

  1338   border-top: thin solid black;

  1339   border-clip: 4em;

  1340   padding-top: 0.5em;

  1341 }

  1342 </pre>

  1344    <p>The result of this code is a footnote area separated from other content

  1345     above it by margin, border and padding. Only 4em of the border is visible

  1346     due to the ‘<code class=property>border-clip</code>’ property, which

  1347     is defined in <a href="http://dev.w3.org/csswg/css4-background/">CSS

  1348     Backgrounds and Borders Module Level 4</a>. <!--[[!CSS4BACKGROUND]]-->.

  1349   </div>

  1350   <!--

  1351 <p class="issue">Footnotes in tables and floats may be problematic. In

  1352 some cases, the author may want the footnote to go at the end of the

  1353 table or float instead of the bottom of the page.

  1354 -->

  1356   <h3 id=footnote-calls><span class=secno>5.3. </span>Footnote calls</h3>

  1358   <p>When an element is moved to the footnote area, a <em>footnote-call</em>

  1359    is left behind. By default, User Agents must behave as if this code is

  1360    part of the default style sheet:

  1362   <pre>

  1363 ::footnote-call {

  1364   content: counter(footnote, super-decimal);

  1365 }

  1366 </pre>

  1368   <p>The resulting note call is a super-script decimal number.

  1370   <h3 id=footnote-markers><span class=secno>5.4. </span>Footnote markers</h3>

  1372   <p>A ::footnote-marker pseudo-element is added to each footnote element, in

  1373    the same place, and replacing, the ::before pseudo-element. User agents

  1374    must, by default, show the "footnote" counter in the footnote-marker.

  1376   <div class=example>

  1377    <p>User Agents may display footnote-calls and footnote-markers this way by

  1378     default:

  1380    <pre>

  1381 ::footnote-call {

  1382   content: counter(footnote, super-decimal);

  1383 }

  1384 ::footnote-marker {

  1385   content: counter(footnote, super-decimal);

  1386 }

  1387 </pre>

  1388   </div>

  1390   <p>Marker elements are discussed in more detail in the CSS Lists module <a

  1391    href="#CSS3LIST" rel=biblioentry>[CSS3LIST]<!--{{!CSS3LIST}}--></a>. One

  1392    suggested change to that module is to honor the value of ‘<code

  1393    class=property>list-style-position</code>’ on the ::footnote-marker

  1394    pseudo-element itself rather than the corresponding list-item element.

  1395    Further, one clarification to the horizontal placement of the marker is

  1396    suggested: the <em>margin</em> box of the marker box is horizontally

  1397    aligned with the start of the line box.

  1399   <h3 id=counting-footnotes><span class=secno>5.5. </span>Counting footnotes</h3>

  1401   <p>The "footnote" counter is automatically incremented each time a footnote

  1402    is generated. That is, the "footnote" counter is incremented by one each

  1403    time an element with ‘<code class=css>float: footnote</code>’ appears.

  1405   <p>The footnote counter can be reset with the ‘<code

  1406    class=property>counter-reset</code>’ property.

  1408   <div class=example> This code resets the "footnote" counter on a per-page

  1409    page basis:

  1410    <pre>

  1411 @page { counter-reset: footnote }

  1412 </pre>

  1413   </div>

  1415   <p class=issue>Should one also be able to manually increment the "footnote"

  1416    counter? <!--

  1417 <p>The 'counter-increment' property can be set in the @footnote rule.

  1418 Each time an element with 'float: footnote' is found, the corresponding

  1419 counter is incremented.

  1421 <div class="example">

  1422 <p>This rule is part of the default style sheet:

  1424 <pre>

  1425 @page {

  1426   @footnote {

  1427     counter-increment: footnote;

  1428   }

  1429 }

  1430 </pre>

  1432 As a result, the "footnote" counter is incremented each time a footnote is generated.

  1433 </div>

  1434 -->

  1436   <h3 id=laying-out-footnotes><span class=secno>5.6. </span>Laying out

  1437    footnotes</h3>

  1439   <p>Footnotes must appear as early as possible under the following

  1440    constraints:

  1442   <ol>

  1443    <li>A footnote marker may not appear on an earlier page than the footnote

  1444     call.

  1446    <li>Footnotes may not appear out of document order.

  1447     <!--<span class="issue">(What order is that: the document order or the visual order?

  1448     Probably the document order, the same order as the footnote counter

  1449     values, although the visual order of the footnote calls may be

  1450     different, due to their occurrence in positioned and floating

  1451     elements.)</span>-->

  1453    <li>The footnote area is limited in size by ‘<code

  1454     class=property>max-height</code>’, unless the page contains only

  1455     footnotes. (E.g., if at the end of the document there are still footnotes

  1456     unprinted, the User Agent can use the whole page to display footnotes.)

  1458    <li>If there is a footnote call on a page, the footnote area may not be

  1459     empty, unless its ‘<code class=property>max-height</code>’ is too

  1460     small.

  1461   </ol>

  1463   <h3 id=footnote-magic><span class=secno>5.7. </span>Footnote magic</h3>

  1465   <p>When an element is turned into a footnote, certain magical things

  1466    happen. The element is moved to the footnote area, a footnote call is left

  1467    behind in its place, a footnote marker is displayed before the element,

  1468    and the footnote counter is incremented.

  1470   <p>When rendering footnotes, User Agents may apply certain heuristics to

  1471    improve the presentation. For example, the space between a footnote-call

  1472    and surrounding text may be adjusted. Another example is the height of the

  1473    footnote area; it may be heuristically constrained to limit the area that

  1474    is used for footnotes. <!--

  1475 <h2>Sidenotes</h2>

  1477 <p>Sidenotes are supported the same way as footnotes; only the name

  1478 and the settings in the default style sheet differentiates the two.

  1480 <p class=note>The motivation for having another page-based area into

  1481 which content can be floated is that footnotes and sidenotes are

  1482 often used in the same document.

  1484 <div class="example">

  1485 <p>This example moves images to the outside margin of pages:

  1487 <pre>

  1488 @page :left {

  1489   margin-left: 10em;

  1490   @sidenote { position: fixed; left: -8em; width: 6em }

  1491 }

  1492 @page :right {

  1493   margin-right: 10em;

  1494   @sidenote { position: fixed; right: -8em; width: 6em }

  1495 }

  1496 img { float: sidenote }

  1497 </pre>

  1498 </div>

  1500 <p class=note>The reason for having both a footnote and a sidenote area

  1501 on every page is that some documents use both.

  1503 <p class=issue>Should there be a mechanism to create new areas like

  1504 footnote/sidenote, or are two "magic" areas enough?

  1505 -->

  1506    <!--

  1507 <h2>Hyphenation</h2>

  1508 --> <!--

  1509 <table class=hyphenate>

  1510 <tr><th>CSS<th>XSL<th>DSSSL

  1511 <tr><th>hyphens<th>hyphenate<th>hyphenate

  1513 <tr><td>none<td>false

  1514 <tr><td>manual<td>

  1515 <tr><td>auto<td>true

  1517 <tr><th>hyphenate-resource<th>country, language, script<th>?

  1518 <tr><td>auto

  1519 <tr><td>&lt;uri>

  1521 <tr><th>hyphenate-before<th>hyphenation-remain-character-count<th>hyphenation-remain-char-count

  1522 <tr><td>auto<td>

  1523 <tr><td>&lt;integer><td>&lt;integer>

  1525 <tr><th>hyphenate-after<th>hyphenation-push-character-count<th>hyphenation-push-char-count

  1526 <tr><td>auto<td>

  1527 <tr><td>&lt;integer><td>&lt;integer>

  1529 <tr><th>hyphenate-lines<th>hyphenation-ladder-count<th>hyphenation-ladder-count

  1530 <tr><td>no-limit<td>no-limit

  1531 <tr><td>&lt;integer>

  1533 <tr><th>hyphenate-character<th>hyphenation-character<th>hyphenation-char

  1534 <tr><td>&lt;string><td>&lt;character>

  1535 <tr><td>auto

  1537 <tr><th><th>hyphenation-keep<th>hyphenation-keep

  1538 <tr><td><td>auto

  1539 <tr><td><td>column

  1540 <tr><td><td>page

  1541 <tr><th><th><th>hyphenation-exceptions

  1542 <tr><td><td><td>The value is a list of strings. Each string is a word which may contain hyphen characters, #\-, indicating where hyphenation may occur. If a word to be hyphenated occurs in the list, it may only be hyphenated in the specified places. The initial value is the empty list.

  1545 </table>

  1547 -->

  1548    <!--

  1549 <p>Hyphenation means splitting words to improve the layout of

  1550 paragraphs. This specifications does not define the exact rules for

  1551 hyphenation, but describes six properties that influence hyphenation.

  1553 <h3>The 'hyphens' property</h3>

  1555 <table class=propdef>

  1556     <tr>

  1557       <td><em>Name:</em>

  1558       <td><dfn>hyphens</dfn>

  1559     <tr>

  1560       <td><em>Value:</em>

  1561       <td>none | manual | auto | all

  1562     <tr>

  1563       <td><em>Initial:</em>

  1564       <td>manual

  1565     <tr>

  1566       <td><em>Applies to:</em>

  1567       <td>all elements

  1568     <tr>

  1569       <td><em>Inherited:</em>

  1570       <td>yes

  1571     <tr>

  1572       <td><em>Percentages:</em>

  1573       <td>N/A

  1574     <tr>

  1575       <td><em>Media:</em>

  1576       <td>visual

  1577     <tr>

  1578       <td><em>Computed value:</em>

  1579       <td>specified value

  1580 </table>

  1582 <p>Values are:

  1584 <dl>

  1585 <dt>none

  1587 <dd>Words are not broken at line breaks, even if characters inside the word suggest line break points.

  1589 <dt>manual

  1591 <dd>Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities. Characters can be explicit or conditional.

  1593 <div class="example">

  1594 <p>In Unicode, U+00AD is a conditional "soft hyphen" and U+2010 is an explicit hyphen. Unicode Standard Annex #14 describes the <a href="http://unicode.org/reports/tr14/#SoftHyphen">role of soft hyphens in the</a> Unicode Line breaking algorithm.

  1595 </div>

  1597 <div class="example">

  1598 <p>In HTML, &amp;shy; represents the soft hyphen character which suggests a line break opportunity.

  1599 <pre>

  1600 ex&amp;shy;ample.

  1601 </pre>

  1602 </div>

  1605 <dt>auto

  1606 <dd>Words can be broken at appropriate hyphenation points, as determined by characters inside the word, resources listed in 'hyphenate-resource', or other UA-dependent resources. Characters inside the word take priority over hyphenation points determined by other resources.

  1608 <dt>all

  1610 <dd>All possible hyphenation points, as determined by characters inside the word, resources listed in 'hyphenate-resource', or other UA-dependent resources, are marked. The visual appearance of the mark is UA-dependent.

  1613 </dl>

  1615 <h3>The 'hyphenate-resource' property</h3>

  1617 <table class=propdef>

  1618     <tr>

  1619       <td><em>Name:</em>

  1620       <td><dfn>hyphenate-resource</dfn>

  1621     <tr>

  1622       <td><em>Value:</em>

  1623       <td>none | &lt;uri&gt; [, &lt;uri&gt; ]*

  1624     <tr>

  1625       <td><em>Initial:</em>

  1626       <td>none

  1627     <tr>

  1628       <td><em>Applies to:</em>

  1629       <td>all elements

  1630     <tr>

  1631       <td><em>Inherited:</em>

  1632       <td>yes

  1633     <tr>

  1634       <td><em>Percentages:</em>

  1635       <td>N/A

  1636     <tr>

  1637       <td><em>Media:</em>

  1638       <td>visual

  1639     <tr>

  1640       <td><em>Computed value:</em>

  1641       <td>specified value

  1642 </table>

  1644 <p>This property specifies a comma-separated list of external resources that can help the UA determine hyphenation points. If more than one resource is specified, the UA should consult each resource – in turn, from the beginning – until it finds one that is able to determine hyphenation points in a word. The 'none' value indicates that no external resources are available. In any case, the UA can also use local resources not listed on this property.

  1646 <div class="example">

  1648 <p>Often, finding the right hyphenate resource is based on knowing the

  1649 language of the text. The <code>lang</code> attribute is recommended

  1650 for encoding the language, and the corresponding selector is used in

  1651 this example:

  1653 <pre>

  1654 :lang(dk) { hyphenate-resource: url("hyph_da_DK.dic"), url("hyph_da_NO.dic") }

  1655 </pre>

  1657 </div>

  1659 <h3>The 'hyphenate-before' and 'hyphenate-after' properties</h3>

  1661 <table class=propdef>

  1662     <tr>

  1663       <td><em>Name:</em>

  1664       <td><dfn>hyphenate-before</dfn>

  1665     <tr>

  1666       <td><em>Value:</em>

  1667       <td>&lt;integer> | auto

  1668     <tr>

  1669       <td><em>Initial:</em>

  1670       <td>auto

  1671     <tr>

  1672       <td><em>Applies to:</em>

  1673       <td>all elements

  1674     <tr>

  1675       <td><em>Inherited:</em>

  1676       <td>yes

  1677     <tr>

  1678       <td><em>Percentages:</em>

  1679       <td>N/A

  1680     <tr>

  1681       <td><em>Media:</em>

  1682       <td>visual

  1683     <tr>

  1684       <td><em>Computed value:</em>

  1685       <td>specified value

  1686 </table>

  1688 <p>This property specifies the minimum number of characters in a

  1689 hyphenated word before the hyphenation character. The ''auto'' value

  1690 means that the UA chooses a value that adapts to the current layout.

  1692 <p class="note">Unless the UA is able to calculate a better value, it

  1693 is suggested that ''auto'' means 2.

  1696 <table class=propdef>

  1697     <tr>

  1698       <td><em>Name:</em>

  1699       <td><dfn>hyphenate-after</dfn>

  1700     <tr>

  1701       <td><em>Value:</em>

  1702       <td>&lt;integer> | auto

  1703     <tr>

  1704       <td><em>Initial:</em>

  1705       <td>auto

  1706     <tr>

  1707       <td><em>Applies to:</em>

  1708       <td>all elements

  1709     <tr>

  1710       <td><em>Inherited:</em>

  1711       <td>yes

  1712     <tr>

  1713       <td><em>Percentages:</em>

  1714       <td>N/A

  1715     <tr>

  1716       <td><em>Media:</em>

  1717       <td>visual

  1718     <tr>

  1719       <td><em>Computed value:</em>

  1720       <td>specified value

  1721 </table>

  1723 <p>This property specifies the minimum number of characters in a hyphenated word after the hyphenation character. The ''auto'' value means that the UA chooses a value that adapts to the current layout.

  1725 <p class="note">Unless the UA is able to calculate a better value, it is suggested that ''auto'' means 2.

  1728 <h3>The 'hyphenate-lines' property</h3>

  1730 <table class=propdef>

  1731     <tr>

  1732       <td><em>Name:</em>

  1733       <td><dfn>hyphenate-lines</dfn>

  1734     <tr>

  1735       <td><em>Value:</em>

  1736       <td>no-limit | &lt;integer>

  1737     <tr>

  1738       <td><em>Initial:</em>

  1739       <td>no-limit

  1740     <tr>

  1741       <td><em>Applies to:</em>

  1742       <td>all elements

  1743     <tr>

  1744       <td><em>Inherited:</em>

  1745       <td>yes

  1746     <tr>

  1747       <td><em>Percentages:</em>

  1748       <td>N/A

  1749     <tr>

  1750       <td><em>Media:</em>

  1751       <td>visual

  1752     <tr>

  1753       <td><em>Computed value:</em>

  1754       <td>specified value

  1755 </table>

  1757 <p>This property indicates the maximum number of successive hyphenated

  1758 lines in an element. In some cases, user agents may not be able to

  1759 honor the specified value. The ''no-limit'' value means that there is

  1760 no limit.

  1762 <h3>The 'hyphenate-character' property</h3>

  1764 <table class=propdef>

  1765     <tr>

  1766       <td><em>Name:</em>

  1767       <td><dfn>hyphenate-character</dfn>

  1768     <tr>

  1769       <td><em>Value:</em>

  1770       <td>auto | &lt;string>

  1771     <tr>

  1772       <td><em>Initial:</em>

  1773       <td>auto

  1774     <tr>

  1775       <td><em>Applies to:</em>

  1776       <td>all elements

  1777     <tr>

  1778       <td><em>Inherited:</em>

  1779       <td>yes

  1780     <tr>

  1781       <td><em>Percentages:</em>

  1782       <td>N/A

  1783     <tr>

  1784       <td><em>Media:</em>

  1785       <td>visual

  1786     <tr>

  1787       <td><em>Computed value:</em>

  1788       <td>specified value

  1789 </table>

  1791 <p>This property specifies strings that are shown between parts of

  1792 hyphenated words. The 'auto' value means that the user agent should

  1793 find an appropriate value.

  1795 <div class="example">

  1796 <p>In Latin scripts, the hyphen character (U+2010) is often used to

  1797 indicate that a word has been split. Normally, it will not be

  1798 necessary to set it explicitly. However, this can easily be done:

  1800 <pre>

  1801 article { hyphenate-character: "\2010" }

  1802 </pre>

  1803 </div>

  1806 <h3>The 'hyphenate-last-line-avoid' property</h3>

  1808 <table class=propdef>

  1809     <tr>

  1810       <td><em>Name:</em>

  1811       <td><dfn>hyphenate-last-line-avoid</dfn>

  1812     <tr>

  1813       <td><em>Value:</em>

  1814       <td>auto | always | column | page | spread

  1815     <tr>

  1816       <td><em>Initial:</em>

  1817       <td>auto

  1818     <tr>

  1819       <td><em>Applies to:</em>

  1820       <td>block-level elements

  1821     <tr>

  1822       <td><em>Inherited:</em>

  1823       <td>yes

  1824     <tr>

  1825       <td><em>Percentages:</em>

  1826       <td>N/A

  1827     <tr>

  1828       <td><em>Media:</em>

  1829       <td>visual

  1830     <tr>

  1831       <td><em>Computed value:</em>

  1832       <td>specified value

  1833 </table>

  1835 <p>This property indicates hyphenation behavior at the end of elements, column, pages and spreads. A spread is a set of two pages that are visible to the reader at the same time. Values are:

  1837 <dl>

  1838 <dt>auto

  1840 <dd>no restrictions imposed

  1842 <dt>always

  1844 <dd>the last full line of the element, or the last line before any column, page, or spread break inside the element should not be hyphenated.

  1846 <dt>column

  1848 <dd>the last line before any column, page, or spread break inside the element should not be hyphenated

  1850 <dt>page

  1852 <dd>the last line before page or spread break inside the element should not be hyphenated

  1854 <dt>spread

  1856 <dd>the last line before any spread break inside the element should not be hyphenated.

  1858 </dl>

  1860 <div class=example>

  1861 <pre>

  1862 p { hyphenate-last-line-avoid: always }

  1863 div.chapter {  hyphenate-last-line-avoid: spread }

  1864 </div>

  1865 <div>

  1867 <div class=example>

  1868 <p>A paragraph may be formatted like this when 'hyphenate: auto' is set:

  1870 <pre>

  1871    This is just a

  1872    simple example

  1873    to show Antar-

  1874    ctica.

  1875 </pre>

  1877 <p>With 'hyphenate-last-line-avoid: always' one would get:

  1879 <pre>

  1880    This is just a

  1881    simple example

  1882    to        show

  1883    Antarctica.

  1884 <pre>

  1885 </div>

  1886 -->

  1887    <!--

  1888 <h2>New counter styles</h2>

  1891 <h3>The ''super-decimal'' list-style-type</h3>

  1893 <p class=issue>This section will be moved to css3-lists (<a href="http://lists.w3.org/Archives/Public/www-style/2009Jun/0186.html">minutes</a>)

  1895 <p>A new list-style-type, ''super-decimal'', is introduced to better support

  1896 footnotes. Small, super-script footnote calls are common; the first

  1897 three numbers have code points in Latin-1 and some font families have

  1898 even more super-script glyphs. The ''super-decimal'' keyword allow

  1899 these font resources to be used and replaces the use of 'font-size'

  1900 and 'vertical-align' (which prohibit the use of special-purpose

  1901 glyphs).

  1903 <div class="example">

  1904 This example specifies that footnote markers should consist of

  1905 super-script decimal numbers.

  1907 <pre>

  1908 ::footnote-marker { content: counter(footnote, super-decimal) }

  1909 </pre>

  1910 </div>

  1912 <p>Using super-script glyphs is optional; UAs may also scale and position

  1913 other glyphs for use in footnote calls.

  1915 -->

  1916    <!--

  1917 <h3>Named counter styles</h3>

  1919 <p>CSS defines a number of predefined list style types for the

  1920 'list-style-type' property and other places where a list-style-type

  1921 value is accepted. Some styles repeat the same glyph (e.g., ''disc''

  1922 and ''circle'') while others have lists of glyphs (e.g., ''decimal'',

  1923 and ''lower-roman''). To increase the range of lists that can be

  1924 achieved through CSS without adding many new keywords,

  1925 @counter-style rules are introduced. By using @counter-style, a style

  1926 sheet can name new counter styles.

  1928 <p>An @counter-style rule consists of the keyword ''@counter-style'',

  1929 followed by the name of the symbol counter style, followed by a

  1930 space-separated list of strings.

  1932 <div class="example">

  1934 <pre>

  1935 @counter-style daggers "*" "\2020" "\2021" "\A7" "#";

  1936 ol { list-style-type: daggers }

  1937 </pre>

  1939 </div>

  1941 <div class="example">

  1943 <pre>

  1944 @counter-style ordinal "1st" "2nd" "3rd" "4th";

  1945 h1:before { content: counter(chapter, ordinal) " chapter" }

  1946 </pre>

  1948 </div>

  1950 <p>The first string in the list represents number one, the second

  1951 string represents number two, etc. Outside the range of specified values, the rendering

  1952 will be as if the ''decimal'' list style type had been specified.

  1954 <div class="example">

  1955 <p>Consider this example:

  1957 <pre>

  1958 @counter-style ordinal "1st" "2nd" "3rd" "4th";

  1959 ordered-list { counter-reset: items -1 }

  1960 list-item { counter-increment: items 2 }

  1961 </pre>

  1963 <p>For a series of <tt>list-item</tt> elements inside an

  1964 <tt>ordered-list</tt> element, the value of the <tt>items</tt> counter

  1965 will be -1, 1, 3, 5, 7 etc. Given that the <tt>ordinal</tt> counter

  1966 style only defines a counter style for 1, 2, 3, and 4, the list will

  1967 be numbered "-1", "1st", "3rd", "5", "7" etc.

  1969 </div>

  1971 <p>Named counter styles can be imported through @import statements.

  1973 <div class="example">

  1974 <pre>

  1975 @import url(http://www.example.com/armenian-counters.css); /* defines 'armenian' */

  1976 ol { list-style-type: armenian }

  1977 </pre>

  1978 </div>

  1979 -->

  1980    <!--

  1981 <div class="issue">Should we allow images in addition to strings?

  1982 <pre>

  1983   @counter-style graphic url("1.gif") url("2.gif") url("3.gif")

  1984 </pre>

  1985 </div>

  1986 -->

  1987    <!--

  1988 <h3>The ''symbols()'' list-style-type</h3>

  1990 <p>A new list-style-type with a functional notation is introduced to

  1991 avoid the indirection of having to name counter styles. The

  1992 ''symbols()'' value takes a comma-separated list of strings as

  1993 arguments.

  1996 <div class="example">

  1997 <pre>

  1998 ::footnote-call {

  1999     content: counter(footnote, symbols('*', '+', '!'))

  2000 }

  2001 </pre>

  2002 </div>

  2004 <p>Outside the range of specified values, the rendering will be as if

  2005 the ''decimal'' list style type had been specified.

  2007 <div class="example">

  2009 This code:

  2011 <pre>

  2012 ol { list-style: symbols("*", "\2020", "\2021", "\A7", "#") }

  2013 </pre>

  2015 will result in these list-items markers: * † ‡ § # 6 7 8 ...

  2017 </div>

  2018 -->

  2019    <!--

  2020 <p class="issue">Should there be a way to indicate the behavior if there are more items than strings? Proposals include: "alphabetic", "enumerate", "numeric", "cycle", "ideographic".

  2021 -->

  2022    <!--

  2023 <h2>Page counters</h2>

  2025 <p>Printed publications often show page numbers to indicate the

  2026 sequence of papes. Also, it is common to show the total number of

  2027 pages in the document. For example, "page 3 of 5" may be shown at the

  2028 bottom of a page.

  2030 <p>This specifiction describes two counters that can be used to

  2031 indicate page numbers: ''page'' and ''pages''.

  2033 <h3>The ''page'' counter</h3>

  2035 <p>The ''page'' counter is predefined to start with a value of zero,

  2036 and to be automatically incremented by one before every page. That is,

  2037 UAs must behave as if this code fragment is part of the default style

  2038 sheet:

  2040 <pre>

  2041 @page {

  2042   counter-increment: page 1;

  2043 }

  2044 </pre>

  2046 <p>The ''page'' counter can be reset and incremented in style sheets

  2047 just like other counters. On pages where the counter is incremented by

  2048 the style sheet in the page context, the automatic incrementation does

  2049 not take place.

  2051 <div class="example">

  2053 <pre>

  2054 @page {

  2055   @bottom-center {

  2056      content: counter(page);

  2057   }

  2058 }

  2060 @page introduction {

  2061   counter-reset: page;

  2062 }

  2064 @page :right {

  2065   counter-increment: page 2;

  2066 }

  2067 </pre>

  2068 </div>

  2071 <h3>The ''pages'' counter</h3>

  2073 <p>The ''pages'' counter is predefined to have the total number of

  2074 pages in the document. In order to find the value of this counter, the

  2075 UA will have to paginate the document. This counter is a constant and

  2076 it cannot be set or incremented by a style sheet.

  2078 <div class=example>

  2079 <pre>

  2080 @page {

  2081   @bottom-center {

  2082      content: "Page " counter(page) " of " counter(pages) " pages in total";

  2083   }

  2084 }

  2085 </pre>

  2086 </div>

  2088 <p>UAs that are not able to paginate the document should display a

  2089 question mark or another symbol that indicates uncertainty.

  2091 <div class=example>

  2093 <p>This code has no effect on the ''pages'' counter which cannot be

  2094 changed by the style sheet. However, the the ''page'' counter reset normally.

  2096 <pre>

  2097 @page :right {

  2098   counter-reset: pages page;

  2099 }

  2100 </pre>

  2101 </div>

  2103 -->

  2104    <!--

  2106 <h2>Image resolution</h2>

  2108 <p>Image resolution, as the term is used in this document, means

  2109 pixels per physical length, e.g., pixels per inch. Some image formats

  2110 can record information about the resolution of images. This

  2111 information can be helpful when determining the actual size of the

  2112 image in the formatting process. However, the information can also be

  2113 wrong, in which case it should be ignored. The 'image-resolution' and

  2114 'background-image-resolution' properties are introduced to determine

  2115 the correct resolution of images.

  2117 <table class=propdef>

  2118     <tr>

  2119       <td><em>Name:</em>

  2120       <td><dfn>image-resolution</dfn>

  2121     <tr>

  2122       <td><em>Value:</em>

  2123     <td>normal | [ from-image || &lt;dpi> ]

  2124     <tr>

  2125       <td><em>Initial:</em>

  2126       <td>normal

  2127     <tr>

  2128       <td><em>Applies to:</em>

  2129       <td>replaced elements <span class=issue>and background images?</span>

  2130     <tr>

  2131       <td><em>Inherited:</em>

  2132       <td>yes

  2133     <tr>

  2134       <td><em>Percentages:</em>

  2135       <td>N/A

  2136     <tr>

  2137       <td><em>Media:</em>

  2138       <td>visual

  2139     <tr>

  2140       <td><em>Computed value:</em>

  2141       <td>as specified value <span class=issue>(or, should it be only one value?)</span>

  2142 </table>

  2144 <p>The values are:

  2146 <dl>

  2147 <dt>normal

  2149 <dd>The resolution of the image is unknown, and UAs should not use the

  2150 resolution found in the image. Instead, the image resolution will be

  2151 found by converting the dimension of the image into CSS pixels.

  2153 <dt>from-image

  2155 <dd>The UA must look for the resolution in the image itself. If the image does not have a resolution, the specified &lt;dpi> value is used. If no &lt;dpi> value is specified, the behavior is as if ''normal'' had been specified.

  2157 <dt>&lt;dpi>

  2159 <dd>The value consists of a number with a 'dpi' unit identifier. The &lt;dpi> value sets the resolution of the image. In combination with ''from-image'', the specified dpi is only used if the image does not have a resolution.

  2161 </dl>

  2163 <div class="example">

  2164 <p>This rule specifies that the UA should use the image resolution found in the image itself.

  2165 <pre>

  2166 img { image-resolution: from-image }

  2167 </pre>

  2168 </div>

  2171 <div class="example">

  2172 <p>Using this rule, the image resolution is set to 300dpi and the resolution in the image, if any, is ignored.

  2173 <pre>

  2174 img { image-resolution: 300dpi }

  2175 </pre>

  2176 </div>

  2179 <div class="example">

  2180 <p>These rules both specify that the UA should use the image resolution found in the image itself. If the image has no resolution, the resolution is set to 300dpi.

  2181 <pre>

  2182 img { image-resolution: from-image 300dpi }

  2183 img { image-resolution: 300dpi from-image }

  2184 </pre>

  2185 </div>

  2188 -->

  2189    <!--

  2191 <table class=propdef>

  2192     <tr>

  2193       <td><em>Name:</em>

  2194       <td><dfn>image-resolution</dfn>

  2195     <tr>

  2196       <td><em>Value:</em>

  2197     <td>normal | auto | &lt;dpi> [ , normal | &lt;dpi> ]?

  2198     <tr>

  2199       <td><em>Initial:</em>

  2200       <td>normal

  2201     <tr>

  2202       <td><em>Applies to:</em>

  2203       <td>replaced elements

  2204     <tr>

  2205       <td><em>Inherited:</em>

  2206       <td>yes

  2207     <tr>

  2208       <td><em>Percentages:</em>

  2209       <td>N/A

  2210     <tr>

  2211       <td><em>Media:</em>

  2212       <td>visual

  2213     <tr>

  2214       <td><em>Computed value:</em>

  2215       <td>as specified value <span class=issue>(or, should it be only one value?)</span>

  2216 </table>

  2218 <p>This property accepts either a single value, or a comma-separated

  2219 list of two values. The values are:

  2221 <dl>

  2222 <dt>normal

  2224 <dd>The resolution of the image is unknown, and UAs should not use the

  2225 resolution found in the image. Instead, the image resolution will be

  2226 found by making image pixels equivalent to CSS pixels.

  2228 <dt>auto

  2230 <dd>The UA must look for the resolution in the image itself. If the image has no image resolution, the next value in the comma-separated list is evaluated.

  2232 <dt>&lt;dpi>

  2234 <dd>The value consists of a number with a 'dpi' unit identifier. The

  2235 UA should use the specified resolution.

  2237 </dl>

  2239 <p>If, after evaluating the specified values, no image resolution has been determined, the UA should behave as if ''normal'' had been specified.

  2241 <div class="example">

  2242 <p>This rule specifies that the UA should use the image resolution found in the image itself.

  2243 <pre>

  2244 img { image-resolution: auto }

  2245 </pre>

  2246 </div>

  2248 <div class="example">

  2249 <p>This rule specifies that the UA should use the image resolution found in the image itself. If the image has no resolution, the resolution is set to 300dpi.

  2250 <pre>

  2251 img { image-resolution: auto, 300dpi }

  2252 </pre>

  2253 </div>

  2255 <div class="example">

  2256 <p>Using this rule, the image resolution is set to 300dpi and the resolution in the image, if any, is ignored.

  2257 <pre>

  2258 img { image-resolution: 300dpi }

  2259 </pre>

  2260 </div>

  2263 -->

  2264    <!--

  2266 <div class="issue">

  2267 <p>Should there be a way of setting width, height, resolution on images that are referenced by a URL in the style sheet? E.g.,

  2268 <pre>

  2269 background-image: url(image.png, width, height, resolution);

  2270 background-image: image-url(image.png, width, height, resolution);

  2271 background-image: image(url(image.png), width, height, resolution);

  2272 </pre>

  2273 </div>

  2274 -->

  2275    <!--

  2276 <table class=propdef>

  2277     <tr>

  2278       <td><em>Name:</em>

  2279       <td><dfn>background-image-resolution</dfn>

  2280     <tr>

  2281       <td><em>Value:</em>

  2282     <td>normal | auto | &lt;dpi> [ , normal | &lt;dpi> ]?

  2283     <tr>

  2284       <td><em>Initial:</em>

  2285       <td>normal

  2286     <tr>

  2287       <td><em>Applies to:</em>

  2288       <td>replaced elements

  2289     <tr>

  2290       <td><em>Inherited:</em>

  2291       <td>yes

  2292     <tr>

  2293       <td><em>Percentages:</em>

  2294       <td>N/A

  2295     <tr>

  2296       <td><em>Media:</em>

  2297       <td>visual

  2298     <tr>

  2299       <td><em>Computed value:</em>

  2300       <td>as specified value <span class=issue>(or, should it be only one value?)</span>

  2301 </table>

  2303 <p class=issue>Introducing one new property in all places where an image can be loaded may not be a scalable solution. Therefore this property is at risk.

  2305 <p>As 'image-resolution', except that it describes the resolution of the element's background image.

  2307 -->

  2309   <h2 id=page-marks-and-bleed-area><span class=secno>6. </span>Page marks and

  2310    bleed area</h2>

  2312   <p>The ‘<a href="#marks"><code class=property>marks</code></a>’

  2313    property from <a href="#CSS2" rel=biblioentry>[CSS2]<!--{{CSS2}}--></a> is

  2314    part of this specification. <!--

  2315 http://www.w3.org/TR/2008/REC-CSS2-20080411/page.html#propdef-marks

  2316 -->

  2318   <table class=propdef>

  2319    <tbody>

  2320     <tr>

  2321      <td><em>Name:</em>

  2323      <td><dfn id=marks>marks</dfn>

  2325     <tr>

  2326      <td><em>Value:</em>

  2328      <td>[ crop || cross ] | none

  2330     <tr>

  2331      <td><em>Initial:</em>

  2333      <td>none

  2335     <tr>

  2336      <td><em>Applies to:</em>

  2338      <td>page context

  2340     <tr>

  2341      <td><em>Inherited:</em>

  2343      <td>no

  2345     <tr>

  2346      <td><em>Percentages:</em>

  2348      <td>N/A

  2350     <tr>

  2351      <td><em>Media:</em>

  2353      <td>visual, paged

  2355     <tr>

  2356      <td><em>Computed value:</em>

  2358      <td>specified value

  2359   </table>

  2361   <p>This property adds crop and/or cross marks to the document. Crop marks

  2362    indicate where the page should be cut. Cross marks are used to align

  2363    sheets.

  2365   <p>Crop marks and cross marks are printed outside the page box. To have

  2366    room to show crop and cross marks, the final pages will have to be

  2367    somewhat bigger than the page box.

  2369   <div class=example>

  2370    <p>To set crop and cross marks on a document, this code can be used:

  2372    <pre>

  2373 @page { marks: crop cross }

  2374 </pre>

  2375   </div>

  2377   <table class=propdef>

  2378    <tbody>

  2379     <tr>

  2380      <td><em>Name:</em>

  2382      <td><dfn id=bleed>bleed</dfn>

  2384     <tr>

  2385      <td><em>Value:</em>

  2387      <td>&lt;length&gt;

  2389     <tr>

  2390      <td><em>Initial:</em>

  2392      <td>6pt

  2394     <tr>

  2395      <td><em>Applies to:</em>

  2397      <td>page context

  2399     <tr>

  2400      <td><em>Inherited:</em>

  2402      <td>no

  2404     <tr>

  2405      <td><em>Percentages:</em>

  2407      <td>refer to width of page box

  2409     <tr>

  2410      <td><em>Media:</em>

  2412      <td>visual

  2414     <tr>

  2415      <td><em>Computed value:</em>

  2417      <td>as specified value

  2418   </table>

  2420   <p>This property specifies the extent of the page bleed area outside the

  2421    page box. This property only has effect if crop marks are enabled.

  2423   <h2 id=bookmarks><span class=secno>7. </span>Bookmarks</h2>

  2425   <p>Some document formats have the capability of holding bookmarks.

  2426    Bookmarks are typically shown outside the document itself, often in a

  2427    tree-structured and clickable table of contents. To generate bookmarks,

  2428    these properties are defined: ‘<a href="#bookmark-level0"><code

  2429    class=property>bookmark-level</code></a>’, ‘<a

  2430    href="#bookmark-label0"><code class=property>bookmark-label</code></a>’,

  2431    and ‘<a href="#bookmark-state0"><code

  2432    class=property>bookmark-state</code></a>’.

  2434   <h3 id=bookmark-level><span class=secno>7.1. </span>‘<a

  2435    href="#bookmark-level0"><code class=property>bookmark-level</code></a>’</h3>

  2437   <table class=propdef>

  2438    <tbody>

  2439     <tr>

  2440      <td><em>Name:</em>

  2442      <td><dfn id=bookmark-level0>bookmark-level</dfn>

  2444     <tr>

  2445      <td><em>Value:</em>

  2447      <td>none | &lt;integer>

  2449     <tr>

  2450      <td><em>Initial:</em>

  2452      <td>none

  2454     <tr>

  2455      <td><em>Applies to:</em>

  2457      <td>all elements

  2459     <tr>

  2460      <td><em>Inherited:</em>

  2462      <td>no

  2464     <tr>

  2465      <td><em>Percentages:</em>

  2467      <td>N/A

  2469     <tr>

  2470      <td><em>Media:</em>

  2472      <td>all

  2474     <tr>

  2475      <td><em>Computed value:</em>

  2477      <td>specified value

  2478   </table>

  2480   <p>This property describes what level a certain bookmark has in a

  2481    hierarchical bookmark structure. The values are:

  2483   <dl>

  2484    <dt>none

  2486    <dd>no bookmark is generated

  2488    <dt>&lt;integer>

  2490    <dd>Indicates the level of the bookmark; the highest level is ‘<code

  2491     class=css>1</code>’, then ‘<code class=css>2</code>’, ‘<code

  2492     class=css>3</code>’ etc. A bookmark will be generated only if ‘<a

  2493     href="#bookmark-label0"><code class=property>bookmark-label</code></a>’

  2494     also has a value different from ‘<code class=property>none</code>’.

  2495   </dl>

  2497   <div class=example>

  2498    <pre>

  2499 h1 { bookmark-level: 1 }

  2500 h2 { bookmark-level: 2 }

  2501 h3 { bookmark-level: 3 }

  2502 </pre>

  2503   </div>

  2505   <h3 id=bookmark-label><span class=secno>7.2. </span>‘<a

  2506    href="#bookmark-label0"><code class=property>bookmark-label</code></a>’</h3>

  2508   <table class=propdef>

  2509    <tbody>

  2510     <tr>

  2511      <td><em>Name:</em>

  2513      <td><dfn id=bookmark-label0>bookmark-label</dfn>

  2515     <tr>

  2516      <td><em>Value:</em>

  2518      <td>&lt;content-list> | none

  2520     <tr>

  2521      <td><em>Initial:</em>

  2523      <td>none

  2525     <tr>

  2526      <td><em>Applies to:</em>

  2528      <td>all elements

  2530     <tr>

  2531      <td><em>Inherited:</em>

  2533      <td>no

  2535     <tr>

  2536      <td><em>Percentages:</em>

  2538      <td>N/A

  2540     <tr>

  2541      <td><em>Media:</em>

  2543      <td>all

  2545     <tr>

  2546      <td><em>Computed value:</em>

  2548      <td>specified value

  2549   </table>

  2551   <p>This property specifies the label of the bookmark, i.e., the text that

  2552    will represent the bookmark in the bookmark structure. The values are:

  2554   <dl>

  2555    <dt>&lt;content-list>, as defined on the ‘<a href="#string-set"><code

  2556     class=property>string-set</code></a>’ property. A bookmark will be

  2557     generated only if ‘<a href="#bookmark-level0"><code

  2558     class=property>bookmark-level</code></a>’ also has a value different

  2559     from ‘<code class=property>none</code>’.

  2561    <dt>none

  2563    <dd>no bookmark is generated

  2564   </dl>

  2566   <div class=example>

  2567    <pre>

  2568 a { bookmark-label: attr(title) }

  2569 h1 { bookmark-label: contents }

  2570 h2 { bookmark-label: content-before }

  2571 h2 { bookmark-label: content-before ": " contents }

  2572 #frog { bookmark-label: "The green frog" }

  2573 </pre>

  2574   </div>

  2575   <!--

  2577 <table class=propdef>

  2578     <tr>

  2579       <td><em>Name:</em>

  2580       <td><dfn>bookmark-target</dfn>

  2581     <tr>

  2582       <td><em>Value:</em>

  2583       <td>none | &lt;uri>

  2584     <tr>

  2585       <td><em>Initial:</em>

  2586       <td>none

  2587     <tr>

  2588       <td><em>Applies to:</em>

  2589       <td>all elements

  2590     <tr>

  2591       <td><em>Inherited:</em>

  2592       <td>no

  2593     <tr>

  2594       <td><em>Percentages:</em>

  2595       <td>N/A

  2596     <tr>

  2597       <td><em>Media:</em>

  2598       <td>all

  2599     <tr>

  2600       <td><em>Computed value:</em>

  2601       <td>For URI values, the absolute URI; for 'none', as specified.

  2602 </table>

  2604 <p>This property specifies the target of the bookmark link.

  2606 <div class=example>

  2607 <pre>

  2608 .bookmark {

  2609    bookmark-label: attr(title);

  2610    bookmark-target: attr(href url);

  2611 }

  2612 ...

  2613 &lt;a class="bookmark" title="The green pear" href="#pears"/>

  2614 </pre>

  2615 </div>

  2617 <div class=example>

  2618 .example { bookmark-target: url(http://www.example.com) }

  2619 </div>

  2621 -->

  2623   <h3 id=bookmark-state><span class=secno>7.3. </span>‘<a

  2624    href="#bookmark-state0"><code class=property>bookmark-state</code></a>’</h3>

  2626   <table class=propdef>

  2627    <tbody>

  2628     <tr>

  2629      <td><em>Name:</em>

  2631      <td><dfn id=bookmark-state0>bookmark-state</dfn>

  2633     <tr>

  2634      <td><em>Value:</em>

  2636      <td>open | closed

  2638     <tr>

  2639      <td><em>Initial:</em>

  2641      <td>open

  2643     <tr>

  2644      <td><em>Applies to:</em>

  2646      <td>block-level elements

  2648     <tr>

  2649      <td><em>Inherited:</em>

  2651      <td>no

  2653     <tr>

  2654      <td><em>Percentages:</em>

  2656      <td>N/A

  2658     <tr>

  2659      <td><em>Media:</em>

  2661      <td>all

  2663     <tr>

  2664      <td><em>Computed value:</em>

  2666      <td>specified value

  2667   </table>

  2669   <p>This property describes the initial state of a bookmark.

  2671   <div>

  2672    <pre>

  2673 * { bookmark-state: closed }

  2674 #open { bookmark-state: open }

  2675 </pre>

  2676   </div>

  2678   <h2 id=cmyk-colors><span class=secno>8. </span>CMYK colors</h2>

  2680   <p>Printers do not use RGB colors, they (often) use CMYK: cyan, magenta,

  2681    yellow and black. The ‘<code class=css>device-cmyk()</code>’

  2682    functional value allows style sheets to express device-dependent CMYK

  2683    colors.

  2685   <div class=example>

  2686    <pre>

  2687 h3 { color: device-cmyk(0.8, 0.5, 0.0, 0.3) }

  2688 </pre>

  2689   </div>

  2691   <p>The values representing the colors are between ‘<code

  2692    class=css>0</code>’ and ‘<code class=css>1</code>’. Values outside

  2693    this range are clipped.

  2695   <p>It is not expected that screen-centric user agents support CMYK colors

  2696    and it is therefore important that existing CSS color values can be

  2697    combined with CMYK colors.

  2699   <div class=example>

  2700    <pre>

  2701 h3 {

  2702   color: red;

  2703   color: device-cmyk(0.5, 0.1, 0.0, 0.2);

  2704 }

  2705 </pre>

  2707    <p>User Agents that do not understand the <code>device-cmyk()</code>

  2708     value, will use the first color (red). User agents that understand

  2709     <code>device-cmyk()</code> will use the second color (which is bluish).

  2710   </div>

  2712   <h2 id=styling-blank-pages><span class=secno>9. </span>Styling blank pages</h2>

  2714   <div class=note>

  2715    <p> This section has been moved to <a href="#CSS3PAGE"

  2716     rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a>.

  2717   </div>

  2719   <h2 id=paged-presentations><span class=secno>10. </span>Paged presentations</h2>

  2721   <p>Printed publications are paged, while screen-based presentations of web

  2722    pages are most often presented in a continous manner with a scrollbar on

  2723    the side. There are reasons to believe that screen-based presentations

  2724    also could benefit from using paged presentations. There is nothing in web

  2725    specifications that prevent browsers from adding a page-based mode today.

  2726    However, most web content is authored and styled with a continous

  2727    presentation in mind. This could change if it becomes possible to describe

  2728    paged presentations in style sheets. This section is an attempt to do so.

  2730   <p>To support paged presentations, four new values are added to the

  2731    ‘<code class=property>overflow-style</code>’ property:

  2733   <dl>

  2734    <dt>paged-x

  2736    <dd>overflow content is paged, and the pages are laid out along the x

  2737     axis, in the x axis component of the writing direction

  2739    <dt>paged-y

  2741    <dd>overflow content is paged, and the pages are laid out along the y

  2742     axis, in the the y axis component of the writing direction

  2744    <dt>paged-x-controls

  2746    <dd>as ‘<code class=property>paged-x</code>’, but with added

  2747     UA-specific controls to change pages

  2749    <dt>paged-y-controls

  2751    <dd>as ‘<code class=property>paged-y</code>’, but with added

  2752     UA-specific controls to change pages

  2753   </dl>

  2755   <p class=issue>Is "paginated" a better word?

  2757   <p class=issue>Should controls be specified on a separate property, or on

  2758    an attribute (like HTML's video element)?

  2760   <p class=issue>Should the axis (x/y) be specified on a separate property?

  2762   <div class=example>

  2763    <p>In this example, the root element is constrained to have the same

  2764     height as the initial containing block. Overflow content will be laid out

  2765     on subsequent pages along the x axis. In LTR languages, this means right;

  2766     in RTL languages this means left; in vertical-rl this means right.

  2768    <pre>

  2769   html {

  2770     overflow-style: paged-x;

  2771     height: 100%;

  2772   }

  2773 </pre>

  2774   </div>

  2776   <div class=example>

  2777    <p>In this example, one element within the document is paged, and controls

  2778     are added so that users can navigate from one page to the next. As such,

  2779     the controls have the same effect as scrollbars in continous

  2780     presentations.

  2782    <pre>

  2783   #content {

  2784     overflow-style: paged-x-controls;

  2785     height: 400px;

  2786   }

  2787 </pre>

  2788   </div>

  2790   <p>A paged container cannot be split over multiple columns.

  2792   <h2 id=navigation-between-pages><span class=secno>11. </span>Navigation

  2793    between pages</h2>

  2795   <p>Paged navigation within a page (as described above), can also be

  2796    naturally extended to navigation between web documents. To support this, a

  2797    new @-rule is proposed: @navigation. The purpose of @navigation is to

  2798    describe which documents the user can navigate to by moving up, right,

  2799    down, or left from the current document.

  2801   <p>Four new properties are allowed inside @navigation: nav-up, nav-right,

  2802    nav-bottom, nav-right.

  2804   <p class=note>The name of the properties inside @navigation are borrowed

  2805    from <a href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#nav-dir">CSS3

  2806    Basic User Interface Module</a>.

  2808   <p>The properties accept these values:

  2810   <dl>

  2811    <dt>go()

  2813    <dd>the function takes one argument, which refers to the <tt>rel</tt>

  2814     attribute of the <tt>link</tt> element

  2815     <div class=example>

  2816      <pre>

  2817 &lt;link rel=index href="../index.html">

  2818 &lt;link rel=previous href=g3.html>

  2819 &lt;link rel=next href=g1.html>

  2820 ...

  2821 @navigation {

  2822   nav-up: go(index);

  2823   nav-left: go(previous);

  2824   nav-right: go(next);

  2825 }

  2826 </pre>

  2827     </div>

  2829     <p class=issue>This functionality relies on semantics in HTML and CSS.

  2830      Other languages may have other other ways to describe such semantics.

  2831      One possible solution for other languages is "link[rel=index] { nav-up:

  2832      attr(href) }"

  2834    <dt>‘<code class=css>back</code>’

  2836    <dd>The keyword takes the user one step back in the history of browsed

  2837     pages.

  2838     <div class=example>

  2839      <pre>

  2840 @navigation {

  2841   nav-left: back;

  2842 }

  2843 </pre>

  2844     </div>

  2846    <dt>url()

  2848    <dd>The funcation takes one argument: a URL. Relative URLs are relative to

  2849     the style sheet.

  2850     <div class=example>

  2851      <pre>

  2852 @navigation {

  2853   nav-up: url(..);

  2854   nav-down: url(a1.html);

  2855 }

  2856 </pre>

  2857     </div>

  2859    <dt>url-doc()

  2861    <dd>The function is identical to url(), except that relative URLs are

  2862     relative to the document, not to the style sheet.

  2863     <div class=example>

  2864      <pre>

  2865 @navigation {

  2866   nav-up: url-doc(..);

  2867   nav-down: url-doc(a1.html);

  2868 }

  2869 </pre>

  2870     </div>

  2871   </dl>

  2873   <div class=example>

  2874    <p>Combined with the <a

  2875     href="http://www.w3.org/TR/2011/WD-css3-conditional-20110901/#at-document">@document-rule</a>,

  2876     navigation maps can be described:

  2878    <pre>

  2879 @document url("http://example.com/foo") {

  2880   @navigation {

  2881     nav-right: link-rel(next);

  2882   }

  2883 }

  2885 @document url("http://example.com/bar") {

  2886   @navigation {

  2887     nav-upt: link-rel(next);

  2888   }

  2889 }

  2890 </pre>

  2891   </div>

  2893   <h3 id=page-shift-effects><span class=secno>11.1. </span>Page shift effects</h3>

  2895   <p>To describe page shift effects, four new properties inside @navigation

  2896    are proposed: nav-up-shift, nav-right-shift, nav-down-shift,

  2897    nav-left-shift. These properties take one of several keyword values:

  2899   <dl>

  2900    <dt>pan

  2902    <dd>pans to the new page; this is the initial value

  2904    <dt>turn

  2906    <dd>turns the page, like soft book pages do

  2908    <dt>flip

  2910    <dd>flips the page, like stiff cardbord

  2912    <dt>fold

  2914    <dd>the old page folds, like an accordion

  2915   </dl>

  2917   <p class=issue>The proposed keyword values are loosely described. Are there

  2918    better ways to describe transitions?

  2920   <div class=example>

  2921    <pre>

  2922 @navigation {

  2923    nav-up-shift: pan;

  2924    nav-down-shift: flip;

  2925 }

  2926 </pre>

  2927   </div>

  2929   <h2 id=page-floats><span class=secno>12. </span>Page floats</h2>

  2931   <p>Images and figures are sometimes displayed at the top or bottom of pages

  2932    and columns. This specificaton adds new keywords on the ‘<code

  2933    class=property>float</code>’ property which, in combination with integer

  2934    values on ‘<code class=property>column-span</code>’, provides support

  2935    for common paper-based layouts.

  2937   <p>The values below only have effect in paged mode, and the resulting

  2938    floats are called "page floats".

  2940   <p class=note>A more accurate term may have been "column floats", as the

  2941    the elements relate more strongly to columns that to pages.

  2943   <p>Four new keywords on ‘<code class=property>float</code>’ have been

  2944    added:

  2946   <dl>

  2947    <dt>top

  2949    <dd>the box is floated to the top of the natural column

  2951    <dt>bottom

  2953    <dd>the box is floated to the bottom of the natural column

  2955    <dt>top-corner

  2957    <dd>the box is floated to the top of the last column (in the inline

  2958     direction) that fits inside the multicol element on the same page.

  2960    <dt>bottom-corner

  2962    <dd>similar to ‘<code class=property>top-corner</code>’, exept the box

  2963     is floated to the bottom <!--

  2964 <dt>snap(&lt;length>, [top | bottom])

  2966 <dd>same as 'top' if the box is naturally near the top; same as

  2967 'bottom' if the box is naturally near the bottom. If the box naturally

  2968 leads to a (page/column) break, the box is floated to the top of the

  2969 next page/column. The first optionaloptional length value specifies how far from the

  2970 top/bottom the element can be influenced, The second

  2971 -->

  2973    <dt>snap(&lt;length> &lt;length>? [, top | bottom | near ]?)

  2975    <dd>

  2976     <p>Makes the element float to the top or bottom if it naturally appears

  2977      within a certain distance from the top or bottom. The length value(s)

  2978      specifies the maxium distance from the top/bottom that an element must

  2979      be within in order to be floated; one length value specifies the

  2980      distance from both the top and the bottom, two length values specify the

  2981      distance from the top and bottom, respectively. If an element is within

  2982      the specified distance from both the top and the bottom, bottom wins.

  2984     <p>The optional keyword value specifies where the element is floated:

  2985      top, bottom, or the nearest of the two. The initial value is ‘<code

  2986      class=property>near</code>’.

  2988     <p>An element is considered to be a float if it has a snap() value, even

  2989      if the element does not appear within the specified distance. This way,

  2990      it can be determined whether an element is float or not without laying

  2991      out the document.

  2993    <dt>snap

  2995    <dd>same as <tt>snap(2em, near)</tt>

  2996   </dl>

  2998   <p>If the requested position cannot be honored, the page float may be

  2999    displayed in subsequent columns/pages.

  3001   <div class=example>

  3002    <p>In this example, tables will snap to the top/bottom if the top/bottom

  3003     of the border box is closer than ‘<code class=css>3em</code>’ from

  3004     the top/bottom of the page/column.

  3006    <pre>

  3007 table { float: snap }

  3008 table { float: snap(3em) }

  3009 table { float: snap(3em, bottom) }

  3010 table { float: snap(3em 2em, bottom) }

  3011 </pre>

  3012   </div>

  3014   <p class=issue>Should we define a reasonable default (say, 3em) instead of

  3015    relying on implementation-specific values?

  3017   <p class=issue>Do numberic values (in addition to length values) make

  3018    sense, like for orphans/widows <!--

  3019 The 'widows'/'orphans' properties may be consulted to determine if the box is near the top/bottom.

  3020 -->

  3022   <p>These new keywords only apply in paged media; in continous media

  3023    declarations with these keywords are ignored.

  3025   <div class=example>

  3026    <p>Float figure to top of natural column:

  3028    <pre>

  3029 .figure { float: top; display: block; }

  3030 </pre>

  3031    <img alt="sample rendering" src=7.png></div>

  3033   <div class=example>

  3034    <pre>

  3035 .figure { float: top; width: 50% }

  3036 </pre>

  3037    <img alt="sample rendering" src=7b.png></div>

  3039   <div class=example>

  3040    <p>Float figure to top of the natural column, spanning all columns:

  3042    <pre>

  3043 .figure { float: top; column-span: all }

  3044 </pre>

  3045   </div>

  3047   <div class=example>

  3048    <p>Float figure to top of the last column of the multicol element on the

  3049     current page:

  3051    <pre>

  3052 .figure { float: top-corner }

  3053 </pre>

  3054    <img alt="sample rendering" src=6.png></div>

  3056   <p>The ‘<code class=property>column-span</code>’ property is extended

  3057    with integer values so that elements can span several columns. If the

  3058    specified integer value is equal to, or larger than the number of columns

  3059    in the multicol element, the number of columns spanned will be the same as

  3060    if ‘<code class=css>column-span: all</code>’ had been specified.

  3062   <div class=example>

  3063    <p>In combination with ‘<code class=property>column-span</code>’, the

  3064     figure is floated to the top corner of the multicol element on that page:

  3066    <pre>

  3067 .figure { float: top-corner; column-span: 2; width: 100% }

  3068 </pre>

  3069    <img alt="sample rendering" src=8.png></div>

  3071   <p>

  3073   <div class=example> <img alt="sample rendering" src=regions.png>

  3074    <p>In this example, a commonly used newspaper layout is easily described:

  3076    <pre>

  3077 body { columns: 3 }

  3078 img.A { column-span: 2; width: 100% }  /* image spans two columns */

  3079 .one { column-span: 2 }                /* lead paragraph spans two columns */

  3080 </pre>

  3081   </div>

  3082   <!--

  3083 <h3>Float modifiers</h3>

  3085 <p>These values on 'float' can be combined with one of 'top'/'bottom'/'top-corner'/'bottom-corner' values:

  3087 <dl>

  3089 <dt>next-page

  3091 <dd>In paged media, float box to the next page. The first column of the multicol element on the next page is considered to be the natural column for boxes affected by this value.

  3093 <div class=example>

  3095 <pre>

  3096 .figure { float: top-corner next-page }

  3097 </pre>

  3099 </div>

  3101 <dt>next-column

  3103 <dd>In paged media, float box to the next column.

  3105 <div class=example>

  3107 <pre>

  3108 .figure { float: top next-column }

  3109 .figure { float: next-column top }

  3110 </pre>

  3112 </div>

  3114  !--

  3115 <dt>unless-room

  3117 <dd>Only float the box if it otherwise would have lead to a column or page break.

  3119 <div class=example>

  3121 <pre>

  3122 .figure { float: top unless-room }

  3123 </pre>

  3125 </div>

  3126  --

  3128 <dt>left/right

  3130 <dd>'left'/'right' can be used in combination with 'top'/'bottom'/'top-corner'/'bottom-corner' to allow other content to flow around the box.

  3132 <div class=example>

  3133 <pre>

  3134 .figure { float: top right; width: 60% }

  3135 </pre>

  3136 <img alt="sample rendering" src=13.png>

  3137 </div>

  3141 </dl>

  3143 -->

  3145   <h3 id=page-float-delays><span class=secno>12.1. </span>Page float delays</h3>

  3147   <p>A page float can ask to be displayed at a later point by adding a

  3148    numeric value to the keywords defined above

  3150   <div class=example>

  3151    <p>Float figure to top of the natural column:

  3153    <pre>

  3154 .figure { float: top(1) }

  3155 </pre>

  3156   </div>

  3158   <div class=example>

  3159    <p>Float figure to the top of the column appearing after the natural

  3160     column:

  3162    <pre>

  3163 .figure { float: top(2) }

  3164 </pre>

  3165   </div>

  3167   <div class=example>

  3168    <p>Float figure to the top corner on the page appearing after the natural

  3169     page:

  3171    <pre>

  3172 .figure { float: top-corner(2) }

  3173 </pre>

  3174   </div>

  3176   <p class=issue>What should happen if the float request a column/page that

  3177    would otherwise not exist?

  3179   <h3 id=clearing-page-floats><span class=secno>12.2. </span>Clearing page

  3180    floats</h3>

  3182   <p>If more than page float request the same position (e.g, the top of a

  3183    column), they will normally be stacked like other floats. To avoid

  3184    stacking, two new values on ‘<code class=property>clear</code>’ can be

  3185    used:

  3187   <dl>

  3188    <dt>column

  3190    <dd>If there is already a page float at the requested position, the page

  3191     float is moved to the next column which does not have a page float in the

  3192     requested position.

  3194    <dt>page

  3196    <dd>If there is already a page float at the requested position, the page

  3197     float is moved to the next page which does not have a page float in the

  3198     requested position

  3199   </dl>

  3201   <div class=example>

  3202    <p>In this example, the two figures end up the top corner of two different

  3203     pages:

  3205    <pre>

  3206 .figure { float: top-corner; clear: page }

  3208 &ltdiv class=figure>&lt;/div>

  3209 &ltdiv class=figure>&lt;/div>

  3210 </pre>

  3211   </div>

  3213   <div class=example>

  3214    <p>In this example, the two figures request different positions, and they

  3215     may therefore end up in the same column:

  3217    <pre>

  3218 .figure.one { float: top; clear: column }

  3219 .figure.two { float: bottom; clear: column }

  3221 &ltdiv class="figure one">&lt;/div>

  3222 &ltdiv class="figure two">&lt;/div>

  3223 </pre>

  3224   </div>

  3226   <h3 id=floating-inside-and-outside-pages><span class=secno>12.3.

  3227    </span>Floating inside and outside pages</h3>

  3229   <p>Two allow content to flow to the inside and outside of a page, these

  3230    keywords are added to the ‘<code class=property>float</code>’

  3231    property:

  3233   <dl>

  3234    <dt>inside

  3236    <dd>On a right page, this value is synonymous with ‘<code

  3237     class=property>left</code>’. On a left page, this value is synonymous

  3238     with ‘<code class=property>right</code>’.

  3240    <dt>outside

  3242    <dd>On a left page, this value is synonymous with ‘<code

  3243     class=property>left</code>’, On a right page, this value is synonymous

  3244     with ‘<code class=property>right</code>’.

  3245   </dl>

  3247   <div class=example>

  3248    <pre>

  3249 .figure { float: outside }

  3250 </pre>

  3251   </div>

  3253   <h2 id=page-and-column-floats-alternative-synta><span class=secno>13.

  3254    </span>Page and column floats, alternative syntax</h2>

  3256   <p>This section describes an alternative syntax for page and column floats.

  3258   <p>Four new keywords on ‘<code class=property>float</code>’ have been

  3259    added:

  3261   <dl>

  3262    <dt>left, right, top, bottom

  3264    <dd>relative to physical viewport

  3266    <dt>line-left, line-right

  3268    <dd>relative to inline axis

  3270    <dt>before, after

  3272    <dd>relative to block direction

  3274    <dt>inside, outside

  3276    <dd>as described in the previous section

  3278    <dt>footnote

  3280    <dd>as described above

  3282    <dt>columns(n)

  3284    <dd>makes the float span n columns, and sets the float context to be the

  3285     multicol element

  3287    <dt>page

  3289    <dd>sets the float context to be the page

  3290   </dl>

  3292   <div class=example>

  3293    <p>Float figure to the top right corner of the multicol element, spanning

  3294     two columns:

  3296    <pre>

  3297 .figure { float: top rigth columns(2); width: 100% }

  3298 </pre>

  3299    <img alt="sample rendering" src=8.png></div>

  3301   <div class=example>

  3302    <p>Float figure to top of the last column of the multicol element on the

  3303     current page:

  3305    <pre>

  3306 .figure { float: top right columns(1) }

  3307 </pre>

  3308    <img alt="sample rendering" src=6.png></div>

  3310   <div class=example>

  3311    <p>Float figure to the top right of the current element, allowing other

  3312     content on its side:

  3314    <pre>

  3315 .figure { float: top right; width: 60% }

  3316 </pre>

  3317    <img alt="sample rendering" src=13.png></div>

  3319   <div class=example>

  3320    <p>Escape the multicol element and float to the top right of the page

  3321     area:

  3323    <pre>

  3324 .figure { float: top right page }

  3325 </pre>

  3326   </div>

  3328   <h2 id=exclusions><span class=secno>14. </span>Exclusions</h2>

  3330   <h3 id=exclusions-based-on-floats><span class=secno>14.1. </span>Exclusions

  3331    based on floats</h3>

  3333   <p>A new value on ‘<code class=property>float</code>’ is introduced to

  3334    support intrusion in columns:

  3336   <dl>

  3337    <dt>intrude

  3339    <dd>The element may intrude neighboring columns; if the element is not in

  3340     a multi-column element, this keyword has no effect.

  3341   </dl>

  3343   <p>The ‘<code class=property>intrude</code>’ value only works in

  3344    combination with one of these keywords: ‘<code

  3345    class=property>left</code>’/‘<code

  3346    class=property>right</code>’/‘<code

  3347    class=property>top</code>’/‘<code

  3348    class=property>bottom</code>’/‘<code

  3349    class=property>top-corner</code>’/‘<code

  3350    class=property>bottom-corner</code>’.

  3352   <div class=example>

  3353    <pre class=css>

  3354 img { float: left intrude; width: 120%;  }

  3355 </pre>

  3357    <p>In this example, the image is wider than the column and will therefore

  3358     intrude into the neighboring column. At the bottom of the middle column

  3359     is a long word that is clipped in the middle of the column gap. <img

  3360     alt="sample rendering" src=1.png>

  3361   </div>

  3363   <h3 id=the-float-offset-property><span class=secno>14.2. </span>The ‘<a

  3364    href="#float-offset"><code class=property>float-offset</code></a>’

  3365    property</h3>

  3367   <table class=propdef>

  3368    <tbody>

  3369     <tr>

  3370      <td><em>Name:</em>

  3372      <td><dfn id=float-offset>float-offset</dfn>

  3374     <tr>

  3375      <td><em>Value:</em>

  3377      <td>&lt;length> &lt;length> ?

  3379     <tr>

  3380      <td><em>Initial:</em>

  3382      <td>0 0

  3384     <tr>

  3385      <td><em>Applies to:</em>

  3387      <td>floated elements

  3389     <tr>

  3390      <td><em>Inherited:</em>

  3392      <td>no

  3394     <tr>

  3395      <td><em>Percentages:</em>

  3397      <td>see prose

  3399     <tr>

  3400      <td><em>Media:</em>

  3402      <td>visual, paged

  3404     <tr>

  3405      <td><em>Computed value:</em>

  3407      <td>one or two absolute lengths

  3408   </table>

  3410   <p>This property pushes a float in opposite direction of the where it has

  3411    been floated with ‘<code class=property>float</code>’. If one value is

  3412    specified, it is the horizontal offset. If two values are specified, the

  3413    first is the horizontal and the second is the vertical offset. If no

  3414    vertical value has been specified, the vertical offset is set to zero.

  3416   <p>This property can only influence a float along an axis it has been

  3417    floated.

  3419   <div class=example>

  3420    <pre>

  3421 img {

  3422   float: left;

  3423   float-offset: 2em 3em;

  3424 }

  3425 </pre>

  3427    <p>In this example, the image is floated to the left. Therefore, ‘<a

  3428     href="#float-offset"><code class=property>float-offset</code></a>’ may

  3429     only push the element in the horizontal direction, and the vertical value

  3430     is ignored.

  3431   </div>

  3433   <p>Negative values are allowed; a negative values will push the float in

  3434    the same direction as it has been floated with ‘<code

  3435    class=property>float</code>’

  3437   <p>This property may move floats into other column than where they

  3438    naturally appear.

  3440   <div class=example>

  3441    <pre>img {

  3442   float: right;

  3443   float-offset: 5px;

  3444 }

  3445 </pre>

  3446    <img alt="sample rendering" src=14.png></div>

  3448   <p>Percentage values are computed according to this formula:

  3450   <pre>

  3451   (containing-block-width - float-width) * percentage

  3452   (containing-block-height - float-height) * percentage

  3453 </pre>

  3455   <div class=example> Pull quotes are often centered in a column. In this

  3456    example, the pull quote is floated to the right, and then pushed back into

  3457    the center. <img src="exclusion_wrap_side_left.png" width=213>

  3458    <pre>

  3459 .pullquote {

  3460   float: right;

  3461   float-offset: 50%; /* 50% centers the box */

  3462 }

  3463 </pre>

  3464   </div>

  3466   <p>When negative values are set on this property, the column gap is also

  3467    part of the calculation:

  3469   <pre>

  3470   ((containing-block-width + 2 * column-gap) - float-width) * percentage

  3471 </pre>

  3473   <div class=example>

  3474    <pre>img {

  3475   float: top right;

  3476   float-offset: -50% 3em;  /* 50% centers the box */

  3477   width: 120%;

  3478 }

  3479 </pre>

  3480    <img alt="sample rendering" src=11.png></div>

  3482   <div class=example>

  3483    <pre>

  3484 img {

  3485   float: top right;

  3486   float-offset: -80% 2em;

  3487   width: 100%;

  3488 }

  3489 </pre>

  3490    <img alt="sample rendering" src=12.png></div>

  3492   <h3 id=the-clear-side-property><span class=secno>14.3. </span>The ‘<a

  3493    href="#clear-side"><code class=property>clear-side</code></a>’ property</h3>

  3495   <table class=propdef>

  3496    <tbody>

  3497     <tr>

  3498      <td><em>Name:</em>

  3500      <td><dfn id=clear-side>clear-side</dfn>

  3502     <tr>

  3503      <td><em>Value:</em>

  3505      <td>auto <!-- | left | right--> | both

  3507     <tr>

  3508      <td><em>Initial:</em>

  3510      <td>auto

  3512     <tr>

  3513      <td><em>Applies to:</em>

  3515      <td>floated elements

  3517     <tr>

  3518      <td><em>Inherited:</em>

  3520      <td>no

  3522     <tr>

  3523      <td><em>Percentages:</em>

  3525      <td>N/A

  3527     <tr>

  3528      <td><em>Media:</em>

  3530      <td>visual, paged

  3532     <tr>

  3533      <td><em>Computed value:</em>

  3535      <td>as specified

  3536   </table>

  3538   <p>This property declares if the side of a float should be cleared of

  3539    content. Values have the following meaning:

  3541   <dl>

  3542    <dt>auto

  3544    <dd>if the float is left-floated, there should be no content to the left;

  3545     if the float is right-floated, there should be no content to the right

  3546     !_-

  3548    <dt>left

  3550    <dd>there should be no content to the left of the float

  3552    <dt>right

  3554    <dd>there should be no content to the left of the float -->

  3556    <dt>none

  3558    <dd>there may be content on either side of the float

  3559   </dl>

  3560   <!--

  3561 <h3>Pull-quotes</h3>

  3563 <div class=example>

  3564 <img width=213 src="exclusion_wrap_side_left.png">

  3566 <pre>

  3567 .pullquote {

  3568   float: right;

  3569   float-offset: 5em;

  3570 }

  3571 </pre>

  3573 <pre>

  3574 .pullquote {

  3575   float: right;

  3576   float-offset: 50%;

  3577 }

  3578 </pre>

  3581 </div>

  3583 <div class=example>

  3584 <p><img width=213 src="exclusion_wrap_side_right.png">

  3586 <pre>

  3587 .pullquote {

  3588   float: left;

  3589   float-offset: 5em;

  3590 }

  3591 </pre>

  3593 <pre>

  3594 .pullquote {

  3595   float: left;

  3596   float-offset: 50%;

  3597 }

  3598 </pre>

  3600 <pre>

  3601 .pullquote {

  3602   float: center;

  3603   clear-side: left;

  3604 }

  3605 </pre>

  3607 </div>

  3609 <pre>

  3610 .pullquote {

  3611   float: left;

  3612   float-offset: 50%; /* center */

  3613 }

  3614 </pre>

  3616 -->

  3618   <div class=example> <img src="exclusion_wrap_side_both.png" width=213> <!--

  3619 <pre>

  3620 .pullquote {

  3621   float: center;

  3622   clear-side: none;

  3623 }

  3624 </pre>

  3625 -->

  3627    <pre>

  3628 .pullquote {

  3629   float: left;

  3630   float-offset: 50%;

  3631   clear-side: none;

  3632 }

  3633 </pre>

  3634    <!--

  3635 <pre>

  3636 .pullquote {

  3637   float: positioned;

  3638   left: 5em;

  3639   clear-side: none;

  3640 }

  3641 </pre>

  3643 <pre>

  3644 .pullquote {

  3645   float: center;

  3646 }

  3647 </pre>

  3648 --></div>

  3650   <h3 id=exclusions-based-on-images><span class=secno>14.4. </span>Exclusions

  3651    based on images</h3>

  3653   <p>Exclusions are often based on shapes found in images. In this

  3654    specification, background image can carry the shape, around which text is

  3655    wrapped. The new property ‘<code

  3656    class=property>background-exclude-level</code>’ indicates a level in the

  3657    alpha channel of the background image(s) that defines the shape.

  3659   <div class=example>

  3660    <p>Here is an example that uses the background of the multicol element as

  3661     a template for exclusions. <img src=car1.jpg>

  3663    <pre>

  3664 article {

  3665   padding: 4em;

  3666   columns: 15em;

  3667   background: url(nicecar.jpg);

  3668   background-exclude-level: 0.5;

  3669 }

  3670 article h1 { column-span: all } /* Bonneville Speedway */

  3671 </pre>

  3672   </div>

  3674   <div class=example>

  3675    <p>This example is the same as the above, just with changed column widths.

  3676     <img src=car2.jpg>

  3678    <pre>

  3679 article {

  3680   padding: 4em;

  3681   columns: 6em;

  3682   background: url(nicecar.jpg);

  3683   background-exclude-level: 0.5;

  3684 }

  3685 article h1 { column-span: all } /* Bonneville Speedway */

  3686 </pre>

  3687   </div>

  3689   <p>Background images can be repeated. Therefore exclusions based on images

  3690    can be repeated.

  3692   <div class=example> <img src="exclusions_repeating.jpg">

  3693    <pre>

  3694 article {

  3695   background: repeat-y url(zigzag.png);

  3696   background-exclude-level: 0.5;

  3697 }

  3698 article h1 {

  3699   column-span: all;

  3700 }

  3701 </pre>

  3702   </div>

  3704   <h3 id=exclusions-based-on-rendered-content><span class=secno>14.5.

  3705    </span>Exclusions based on rendered content</h3>

  3707   <p>A new property. ‘<code class=property>exclude-level</code>’, is

  3708    introduced to allow wraps around the rendered content of the element.

  3710   <div class=example> <img src=exclusions-dropcap.png>

  3711    <pre>

  3712 #dropcaps {

  3713   font-size: 3em;

  3714   float: left;

  3715   exclude-level: 0.5;

  3716   margin-top: -0.2em;

  3717 }

  3718 &lt;p>&lt;span id="dropcaps">Many&lt;/span> instances ...&lt;/p>

  3719     &lt;p>The text ....&lt;/p>

  3720 </pre>

  3721   </div>

  3723   <p class=issue>Define behavior if both ‘<code

  3724    class=property>exclude-level</code>’ and ‘<code

  3725    class=property>background-exclude-level</code>’ is set.

  3727   <p class=issue>Some kind of spacing behavior must be defined; ‘<code

  3728    class=property>exclude-margin</code>’ may be an option.

  3730   <p class=issue>Define behavior if both ‘<code

  3731    class=property>exclude-level</code>’ and ‘<code

  3732    class=property>background-exclude-level</code>’ is set.

  3734   <h3 id=exclusions-based-on-shapes><span class=secno>14.6. </span>Exclusions

  3735    based on shapes</h3>

  3737   <p class=issue>I suggest not having exclusions based in shapes in the first

  3738    generation of exclusions; we may want to definde shapes for CSS in general

  3739    (e.g., for borders), so we may want to wait until we have a holistic

  3740    approach.

  3742   <div class=example> <img src=heart1.png>

  3743    <pre>

  3744 article::column(1) {

  3745   content-inside: circle(50%, 50%, 30%);

  3746 }

  3748 article::column(2) {

  3749   content-outside: polygon(x1, y1, x2, y2, x3, y3, ... xn, yn);

  3750   color: red;

  3751 }

  3752 </pre>

  3753   </div>

  3755   <div class=example> <img src=heart2.png>

  3756    <pre>

  3757 article::column(1) {

  3758   content-outside: circle(x, y, z);

  3759 }

  3760 article::column(2) {

  3761   content-inside: polygon(x1, y1, x2, y2, x3, y3, ... xn, yn);

  3762 }

  3763 </pre>

  3764   </div>

  3765   <!--

  3766 <h2>Aligning baselines in multi-column layouts</h2>

  3768 <p>In multi-column layouts, baselines are typically aligned between

  3769 adjacent columns. This gives the presentation a visual rythm, and text

  3770 in the end of the columns will be alignend. To support this, a new

  3771 value on the <span class=property>'line-box-contain'</span> property is

  3772 defined: ''line-grid'' (or, perhaps, ''gap'', ''crack'', ''snap'', ''snap-gap'', ''void'', ''grid'', ''snap-to-grid'').

  3774 <p>The value means that the height of the line in which the element

  3775 occurs should be rounded up to the smallest multiple of the used

  3776 'line-height' value on the containing block.

  3778 <div class=example>

  3779 <p>In this example, the stacking height of div.figure would be 30px (2 * 15px)

  3781 <pre>

  3782 div.multicol { line-height: 15px }

  3783 div.figure { height: 20px; line-box-contain: block inline replaced line-grid }

  3784 </pre>

  3785 </div>

  3787 <p class=note>The <a href="http://dev.w3.org/csswg/css3-linebox/#LineStacking">line-box-contain</a> property is defined in <a href="http://dev.w3.org/csswg/css3-linebox">CSS3 module: line</a>.

  3788 -->

  3789   <!--

  3790 http://www.w3.org/Style/Group/css3-src/css3-linebox/Overview.html#LineStacking

  3791 -->

  3792   <!--

  3793 <p class=note>A similar idea — 'line-stacking-strategy: grid-height' — was proposed in a <a href="http://www.w3.org/TR/css3-linebox/#line-stacking-strategy">previous version of the CSS3 line module</a>. The 'line-stacking-strategy' property is <a href="http://www.w3.org/TR/xsl/#line-stacking-strategy">used in XSL</a>.

  3794 -->

  3796   <h2 id=regions><span class=secno>15. </span>Regions</h2>

  3798   <p>Regions are series of stylable boxes into which content can be poured.

  3799    Columns are regions that are automatically generated to contain all the

  3800    content of the the multicol element. By adding selectors for columns,

  3801    columns can be styled and positioned and thereby escape the rigid patterns

  3802    that columns naturally live in.

  3804   <div class=example>

  3805    <pre>

  3806 div.chapter::column(3)       /* the 3rd column of the element */

  3807 div.chapter::column(2n)      /* all even columns of the element */

  3808 div.chapter::column(3+)      /* all columns but the 1st and 2nd */

  3809 div.chapter::column(2,2)     /* second column on second page */

  3810 div.chapter::column(*,2)     /* all columns on the second page */

  3811 div.chapter::column(1,*)     /* the first column on all pages */

  3812 </pre>

  3813   </div>

  3815   <p>To underline the fact that columns are regions, the "region" keyword can

  3816    be used as a substitute for "column".

  3818   <div class=example>

  3819    <pre>

  3820 div.chapter::region(3)       /* the 3rd region of the element */

  3821 div.chapter::region(2n)      /* all even regions of the element */

  3822 div.chapter::region(3+)      /* all regions but the 1st and 2nd */

  3823 div.chapter::region(2,2)     /* second region on second page */

  3824 div.chapter::region(*,2)     /* all regions on the second page */

  3825 div.chapter::region(1,*)     /* the first column on all pages */

  3826 </pre>

  3827   </div>

  3829   <div class=example> <img alt="sample rendering" src=regions.png>

  3830    <p>In this example, the multicol layout is changed so that the image

  3831     (which appears first in the markup) spans two columns and is floated to

  3832     the top, thereby escaping its natural column. The first column, which

  3833     holds the start of the textual content is also floated to the top,

  3834     spanning two columns, and therefore ends up just under the image. When

  3835     the first column/region is floated away, the second column will move into

  3836     its space.

  3838    <pre>

  3839 article { columns: 3 }

  3840 img { column-span: 2; width: 100%; float: top }

  3841 article::region(1) {    /* selects column 1 */

  3842   column-span: 2;

  3843   float: top;

  3844   height: 3em;          /* sets preferred height of region */

  3845 }

  3847 &lt;article>

  3848   &lt;img ...>

  3849   &lt;p>...  &lt;p>...  &lt;p>...

  3850 &lt;/article>

  3851 </pre>

  3852   </div>

  3854   <div class=example>

  3855    <pre>

  3856 div.chapter::region(1) {

  3857   transform: rotate(6.5deg);

  3858 }

  3859 div.chapter::region(2) {

  3860   transform: rotate(-5.5deg) translate(0, 40px);

  3861 }

  3862 </pre>

  3863    <img src="regions_rotated_columns.jpg"></div>

  3864   <!--

  3865 <div class=example>

  3866 Consider this markup:

  3868 <pre>

  3869 &lt;div class=text>

  3870 &lt;div lang=en>

  3871 Some words in English ...

  3872 &lt;/div>

  3873 &lt;div lang=fr>

  3874 Quelques mots en Francaise...

  3875 &lt;/div>

  3876 &lt;/div>

  3877 </pre>

  3879 <p>Here is the CSS code to lay these out into two columns with

  3880 different background colors:

  3882 <pre>

  3883 div.text {

  3884   columns: 32em;

  3885 }

  3887 div:lang(en) {

  3888   display: table-cell;

  3889   color: black; background: white;

  3890 }

  3892 div:lang(fr) {

  3893   display: table-cell;

  3894   color: white; background: black;

  3895 }

  3896 </pre>

  3898 <p>This example shows that use cases that first seem to require regions may be achieved with other methods.

  3900 </div>

  3901 -->

  3902   <!--

  3903 <div class=example>

  3904 <pre>

  3905   article { columns: 14em; }

  3906   article::column(1) {

  3907      position: absolute;

  3908      font-size: 1.2em;

  3909      visibility: collapse; /* makes space available others to use */

  3910      ...

  3911   }

  3912 </pre>

  3913 </div>

  3914 -->

  3916   <h2 id=regions-and-exclusions-examples><span class=secno>16. </span>Regions

  3917    and Exclusions examples</h2>

  3919   <div class=example> <img src="exclusion_ordering.png">

  3920    <pre>

  3921 article {

  3922   columns: 15em;

  3923 }

  3924 article::region(1-3) {

  3925   width: 15em;

  3926   height: 15em;

  3927 }

  3928 article::region(2-3) {

  3929   margin: 4em 0 0 -4em;

  3930 }

  3931 </pre>

  3932   </div>

  3934   <div class=example> <img src="exclusion_ordering_z_order.png">

  3935    <pre>

  3936 article {

  3937   columns: 15em;

  3938 }

  3939 acticle::region(1-3) {

  3940   height: 15em;

  3941 }

  3942 acticle::region(2-3) {

  3943   margin: 4em 0 0 -4em;

  3944 }

  3945 acticle::region(2) {

  3946   z-index: 1;

  3947 }

  3948 </pre>

  3949   </div>

  3951   <h2 id=selecting-pages><span class=secno>17. </span>Selecting pages</h2>

  3953   <p>In CSS 2.0, <a

  3954    href="http://www.w3.org/TR/CSS2/page.html#page-selectors">first, left and

  3955    right pages</a> can be selected. This specification adds support for

  3956    selecting a certain page generate by a certain element.

  3958   <p>The ‘<code class=property>first-page</code>’ pseudo-element is

  3959    similar to the ‘<code class=property>first-letter</code>’ and ‘<code

  3960    class=property>first-line</code>’ elements; it is used to apply styling

  3961    to the part of an element that ends up on the starting page for that

  3962    element. If the whole element appears on the starting page, ‘<code

  3963    class=property>first-page</code>’ applies to the whole element. The

  3964    following properties apply to :first-page pseudo-elements: column

  3965    properties, background properties, margin properties, border properties,

  3966    and padding properties. UAs may apply other properties as well.

  3968   <div class=example>

  3969    <p>In this example, there will be one column on the starting page of each

  3970     chapter, while subsequent pages will have two columns:

  3972    <pre>

  3973   div.chapter { columns: 2 }

  3974   div.chapter::first-page { columns: 1 }

  3975 </pre>

  3976   </div>

  3978   <div class=example>

  3979    <p>In this example, padding is added on the left side on the starting page

  3980     of each chapter:

  3982    <pre>

  3983   div.chapter { break-before: left }

  3984   div.chapter::first-page { padding-left: 4em }

  3985 </pre>

  3986   </div>

  3988   <p>As a generalization of the ‘<code class=property>first-page</code>’

  3989    pseudo-element, the ‘<code class=css>page()</code>’ pseudo-selector

  3990    allows other pages to be selected.

  3992   <div class=example>

  3993    <pre>

  3994 div.chapter::page(2)             /* second page of the element */

  3995 div.chapter::page(2n)            /* even pages of the element */

  3996 div.chapter::page(2-4)           /* select page 2, 3, and 4 */

  3997 div.chapter::page(2)::column(2)  /* second column, but only if it appears on the second page */

  3998 </pre>

  3999   </div>

  4000   <!--

  4001 nth page in the document, or the nth named page.

  4004 <div class=example>

  4005 <p>This example sets the background color of the second page in the document:

  4007 <pre>

  4008 @page :nth(2) {

  4009   background: green;

  4010 }

  4011 <pre>

  4012 </div>

  4014 <div class=example>

  4015 <p>This example sets the background color of the second page of all chapters in a document:

  4017 <pre>

  4018 @page chapter {

  4019   background: yellow;

  4020 }

  4021 @page chapter:nth(2) {

  4022   background: green;

  4023 }

  4024 div.chapter {

  4025   page: chapter;

  4026 }

  4027 <pre>

  4028 </div>

  4030 <p>The arguments to the nth() functional notation is the same as for the <a href="http://www.w3.org/TR/css3-selectors/#nth-child-pseudo">nth-child()</a> pseudo-class.

  4032 <div class="example">

  4033 <pre>

  4034 @page chapter:nth(2n+1) {

  4035   background: green;

  4036 }

  4037 </pre>

  4038 </div>

  4040 <p>Even when a named page is not defined through an <code>@page <em>name</em> { .. }</code> construct, the name can still be used with :nth().

  4042 <div class="example">

  4043 <p>Even when the first line is commented out, the second page of all chapters in the document will be green.

  4045 <pre>

  4046 /* @page chapter { ... } */

  4048 @page chapter:nth(2) {

  4049   background: green;

  4050 }

  4052 div.chapter { page: chapter }

  4053 </pre>

  4054 </div>

  4057 <h3>Page pseudo-elements</h3>

  4059 <p class=issue>This may no longer be needed du to generic page selectors

  4060 -->

  4062   <h2 id=selecting-lines><span class=secno>18. </span>Selecting lines</h2>

  4064   <p>The ‘<code class=property>first-line</code>’ pseudo-element selects

  4065    the first formatted line of an element. The ‘<code

  4066    class=css>first-lines(n)</code>’ pseudo-element selects the first n

  4067    formatted lines of an element.

  4069   <div class=example> <img alt="sample rendering" src=regions.png>

  4070    <pre>

  4071   article { columns: 3 }

  4072   img, p.lead:first-lines(3) {

  4073     column-span: 2;

  4074   }

  4076   &lt;article>

  4077     &lt;img>

  4078     &lt;p class=lead>

  4079     &lt;p>...    &lt;p>...    &lt;p>...    &lt;p>...    &lt;p>...

  4080   &lt;/article>

  4081 </pre>

  4082   </div>

  4084   <h2 id=conditional-text><span class=secno>19. </span>Conditional text</h2>

  4086   <div class=example>

  4087    <pre>

  4088   a:target-layout(attr(href url), same-page) { content: " on this page" }

  4089   a:target-layout(attr(href url), next-page) { content: " on the next page" }

  4090   a:target-layout(attr(href url), previous-page) { content: " on the previous page" }

  4091 </pre>

  4092   </div>

  4094   <h2 id=conformance><span class=secno>20. </span>Conformance</h2>

  4096   <p>TBD

  4098   <h2 id=appendix-a-default-style-sheet><span class=secno>21. </span>Appendix

  4099    A: Default style sheet</h2>

  4101   <pre>

  4102 @page {

  4103   counter-reset: footnote;

  4104   @footnote {

  4105     counter-increment: footnote;

  4106     float: page bottom;

  4107     width: 100%;

  4108     height: auto;

  4109   }

  4110 }

  4112 ::footnote-call {

  4113   counter-increment: footnote;

  4114   content: counter(footnote, super-decimal);

  4115 }

  4116 ::footnote-marker {

  4117   content: counter(footnote, super-decimal);

  4118 }

  4121 h1 { bookmark-level: 1 }

  4122 h2 { bookmark-level: 2 }

  4123 h3 { bookmark-level: 3 }

  4124 h4 { bookmark-level: 4 }

  4125 h5 { bookmark-level: 5 }

  4126 h6 { bookmark-level: 6 }

  4127 </pre>

  4129   <p class=issue>Add grammar for functions defined in this spec.

  4131   <h2 class=no-num id=acknowledgments>Acknowledgments</h2>

  4133   <p>This document has been improved by Bert Bos, Michael Day, Melinda Grant,

  4134    David Baron, Markus Mielke, Steve Zilles, Ian Hickson, Elika Etemad,

  4135    Laurens Holst, Mike Bremford, Allan Sandfeld Jensen, Kelly Miller, Werner

  4136    Donné, Tarquin (Mark) Wilton-Jones, Michel Fortin, Christian Roth, Brady

  4137    Duga, Del Merritt, Ladd Van Tol, Tab Atkins Jr., Jacob Grundtvig Refstrup,

  4138    James Elmore, Ian Tindale, Murakami Shinyu, Paul E. Merrell, Philip

  4139    Taylor, Brad Kemper, Peter Linss, Daniel Glazman, Tantek Çelik, Florian

  4140    Rivoal, Alex Mogilevsky, Simon Sapin, Cameron McCormack, Liam R E Quin,

  4141    Peter Moulder, Morten Stenshorne, Rune Lillesveen, Lars Erik Bolstad,

  4142    Anton Prowse, Michel Onoff

  4144   <h2 class=no-num id=references>References</h2>

  4146   <h3 class=no-num id=normative-references>Normative references</h3>

  4147   <!--begin-normative-->

  4148   <!-- Sorted by label -->

  4150   <dl class=bibliography>

  4151    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->

  4152     <!---->

  4154    <dt id=CSS3LIST>[CSS3LIST]

  4156    <dd>Tab Atkins Jr. <a

  4157     href="http://www.w3.org/TR/2011/WD-css3-lists-20110524"><cite>CSS Lists

  4158     and Counters Module Level 3.</cite></a> 24 May 2011. W3C Working Draft.

  4159     (Work in progress.) URL: <a

  4160     href="http://www.w3.org/TR/2011/WD-css3-lists-20110524">http://www.w3.org/TR/2011/WD-css3-lists-20110524</a>

  4161    </dd>

  4162    <!---->

  4163   </dl>

  4164   <!--end-normative-->

  4166   <h3 class=no-num id=other-references>Other references</h3>

  4167   <!--begin-informative-->

  4168   <!-- Sorted by label -->

  4170   <dl class=bibliography>

  4171    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->

  4172     <!---->

  4174    <dt id=CSS2>[CSS2]

  4176    <dd>Ian Jacobs; et al. <a

  4177     href="http://www.w3.org/TR/2008/REC-CSS2-20080411"><cite>Cascading Style

  4178     Sheets, level 2 (CSS2) Specification.</cite></a> 11 April 2008. W3C

  4179     Recommendation. URL: <a

  4180     href="http://www.w3.org/TR/2008/REC-CSS2-20080411">http://www.w3.org/TR/2008/REC-CSS2-20080411</a>

  4181    </dd>

  4182    <!---->

  4184    <dt id=CSS3PAGE>[CSS3PAGE]

  4186    <dd>Håkon Wium Lie; Melinda Grant. <a

  4187     href="http://www.w3.org/TR/2006/WD-css3-page-20061010"><cite>CSS3 Module:

  4188     Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in

  4189     progress.) URL: <a

  4190     href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a>

  4191    </dd>

  4192    <!---->

  4193   </dl>

  4194   <!--end-informative-->

  4196   <h2 class=no-num id=index>Index</h2>

  4197   <!--begin-index-->

  4199   <ul class=indexlist>

  4200    <li>bleed, <a href="#bleed" title="section 6."><strong>6.</strong></a>

  4202    <li>bookmark-label, <a href="#bookmark-label0"

  4203     title="section 7.2."><strong>7.2.</strong></a>

  4205    <li>bookmark-level, <a href="#bookmark-level0"

  4206     title="section 7.1."><strong>7.1.</strong></a>

  4208    <li>bookmark-state, <a href="#bookmark-state0"

  4209     title="section 7.3."><strong>7.3.</strong></a>

  4211    <li>clear-side, <a href="#clear-side"

  4212     title="section 14.3."><strong>14.3.</strong></a>

  4214    <li>float-offset, <a href="#float-offset"

  4215     title="section 14.2."><strong>14.2.</strong></a>

  4217    <li>marks, <a href="#marks" title="section 6."><strong>6.</strong></a>

  4219    <li>named strings, <a href="#named-strings0"

  4220     title="section 2."><strong>2.</strong></a>

  4222    <li>running elements, <a href="#running-elements0"

  4223     title="section 2."><strong>2.</strong></a>

  4225    <li>string-set, <a href="#string-set"

  4226     title="section 2.1.1."><strong>2.1.1.</strong></a>

  4227   </ul>

  4228   <!--end-index-->

  4230   <h2 class=no-num id=property-index>Property index</h2>

  4231   <!--begin-properties-->

  4233   <table class=proptable>

  4234    <thead>

  4235     <tr>

  4236      <th>Property

  4238      <th>Values

  4240      <th>Initial

  4242      <th>Applies to

  4244      <th>Inh.

  4246      <th>Percentages

  4248      <th>Media

  4250    <tbody>

  4251     <tr>

  4252      <th><a class=property href="#bleed">bleed</a>

  4254      <td>&lt;length&gt;

  4256      <td>6pt

  4258      <td>page context

  4260      <td>no

  4262      <td>refer to width of page box

  4264      <td>visual

  4266     <tr>

  4267      <th><a class=property href="#bookmark-label0">bookmark-label</a>

  4269      <td>&lt;content-list> | none

  4271      <td>none

  4273      <td>all elements

  4275      <td>no

  4277      <td>N/A

  4279      <td>all

  4281     <tr>

  4282      <th><a class=property href="#bookmark-level0">bookmark-level</a>

  4284      <td>none | &lt;integer>

  4286      <td>none

  4288      <td>all elements

  4290      <td>no

  4292      <td>N/A

  4294      <td>all

  4296     <tr>

  4297      <th><a class=property href="#bookmark-state0">bookmark-state</a>

  4299      <td>open | closed

  4301      <td>open

  4303      <td>block-level elements

  4305      <td>no

  4307      <td>N/A

  4309      <td>all

  4311     <tr>

  4312      <th><a class=property href="#clear-side">clear-side</a>

  4314      <td>auto | both

  4316      <td>auto

  4318      <td>floated elements

  4320      <td>no

  4322      <td>N/A

  4324      <td>visual, paged

  4326     <tr>

  4327      <th><a class=property href="#float-offset">float-offset</a>

  4329      <td>&lt;length> &lt;length> ?

  4331      <td>0 0

  4333      <td>floated elements

  4335      <td>no

  4337      <td>see prose

  4339      <td>visual, paged

  4341     <tr>

  4342      <th><a class=property href="#marks">marks</a>

  4344      <td>[ crop || cross ] | none

  4346      <td>none

  4348      <td>page context

  4350      <td>no

  4352      <td>N/A

  4354      <td>visual, paged

  4356     <tr>

  4357      <th><a class=property href="#string-set">string-set</a>

  4359      <td>[[ &lt;identifier> &lt;content-list>] [, &lt;identifier>

  4360       &lt;content-list>]* ] | none

  4362      <td>none

  4364      <td>all elements

  4366      <td>no

  4368      <td>N/A

  4370      <td>all

  4371   </table>

  4372   <!--end-properties-->

Mercurial > drafts / file revision

css3-gcpm/Overview.html@2fa0f76c392e

css3-gcpm/Overview.html