drafts: css3-gcpm/Overview.src.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">

     3 <html lang="en">

     4 <head>

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

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

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

     9 <link href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css" rel=stylesheet type="text/css">

    11 <style type="text/css">

    12 .example img { display: block }

    13 .example { background: #ddd }

    14 body { line-height: 1.3 }

    15 </style>

    18 <body>

    20 <div class="head">

    22 <!--logo-->

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

    26 <h2 class="no-num no-toc" id="w3c-working">[LONGSTATUS] [DATE]</h2>

    28 <dl>

    29 <dt>This version:</dt>

    30 <dd><a href="[VERSION]">http://www.w3.org/TR/[YEAR]/[STATUS]-css3-gcpm-[CDATE]/</a></dd>

    32 <dt>Latest version:

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

    36 <dt>Previous version:

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

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

    42 <dt>Editor:

    43 <dd>H&aring;kon Wium Lie, Opera Software, howcome@opera.com

    44 </dl>

    46 <!--begin-copyright-->

    47 <p>[If you keep the &lt;!--comment-->, the copyright will be included

    48 here automatically]</p>

    49 <!--end-copyright-->

    51 <hr title="Separator for header">

    52 </div>

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

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

    58 Most of the specified functionality involves some sort of generated

    59 content where content from the document is adorned, replicated, or

    60 moved in the final presentation of the document. Along with two other

    61 CSS3 modules &ndash; multi-column layout and paged media &ndash; this

    62 module offers advanced functionality for presenting structured

    63 documents on paged media. Paged media can be printed, or presented on

    64 screens.

    67 <h2 class="no-num no-toc">Status of this document</h2>

    69 <!--begin-status-->

    71 <!--end-status-->

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

    74 and useful. In general, the earlier a feature appears in this draft,

    75 the more stable it is. Significant changes in functionality and syntax

    76 must be expected from <a href="#paged-presentations">paged

    77 presentations</a> and onwards. Also, functionality described in this

    78 module may be moved to other modules. Since the <a href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608">previous WD</a>, hyphenation has been moved to <a href="http://www.w3.org/TR/2011/WD-css3-text-20110901/#hyphenation">css3-text</a> and the <a href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/#the-super-decimal-list-style-type">super-decimal</a> list-style-type value has been moved to <a href="http://www.w3.org/TR/2011/WD-css3-lists-20110524/#super-decimal">css3-lists</a>. <a href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/#named-counter-styles">Named counter styles</a> and the <a href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608/#the-symbols-list-style-type">symbols()</a> list-style-type value should also appear in a future css3-lists WD.

    81 <h2 class="no-num no-toc"><a name="contents">Table of contents</a></h2>

    83 <!--begin-toc-->

    84 <p>[If you keep the &lt;!--comment--> the table of contents will be

    85 included here automatically.]</p>

    86 <!--end-toc-->

    89 <h2>Introduction</h2>

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

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

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

    95 style types, and border segments) may also used with other media

    96 types. However, this specification is monstly concerned with paged media.

    98 <h2>Running headers and footers</h2>

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

   101 printed in the page margins. [[CSS3PAGE]] describes how to place

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

   103 footers from elements in the document. This specification offers two

   104 ways to achieve this. The first mechanism is <dfn>named strings</dfn>

   105 which <em>copies</em> the text (without style, structure, or replaced

   106 content) from one element for later reuse in margin boxes. The second

   107 mechanism is <dfn>running elements</dfn> which <em>moves</em> elements

   108 (with style, structure, and replaced content) into a margin box.

   110 <h3>Named strings</h3>

   112 <!--

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

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

   115 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>

   116 1999:

   117 -->

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

   120 string of text each. Named strings are created with the 'string-set'

   121 property which copies a string of text into the named string. Only

   122 text is copied; not style, structure, or replaced content.

   124 <div class="example">

   126 <p>Consider this code:

   128 <pre>

   129 h1 { string-set: title contents }

   130 </pre>

   132 <p>Whenever an <code>h1</code> element is encountered,

   133 its textual content is copied into a named string called

   134 <em>title</em>. Its content can be retrieved in the 'content'

   135 property:

   137 <pre>

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

   139 </pre>

   141 </div>

   145 <h4>Setting named strings: the 'string-set' property</h4>

   147 <table class=propdef>

   148     <tr>

   149       <td><em>Name:</em>

   150       <td><dfn>string-set</dfn>

   151     <tr>

   152       <td><em>Value:</em>

   153       <td>[[ &lt;identifier> &lt;content-list>] [, &lt;identifier> &lt;content-list>]* ] | none

   154     <tr>

   155       <td><em>Initial:</em>

   156       <td>none

   157     <tr>

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

   159       <td>all elements

   160     <tr>

   161       <td><em>Inherited:</em>

   162       <td>no

   163     <tr>

   164       <td><em>Percentages:</em>

   165       <td>N/A

   166     <tr>

   167       <td><em>Media:</em>

   168       <td>all

   169     <tr>

   170       <td><em>Computed&nbsp;value:</em>

   171       <td>as specified value

   172 </table>

   174 <p>The 'string-set' property accepts a comma-separated list of named

   175 strings. Each named string is followed by a content list that

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

   177 element with value of 'string-set' different from ''none'' is

   178 encountered, the named strings are assigned their respective value.

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

   182 <dl>

   184 <dt>&lt;string&gt;

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

   187 <dt>&lt;counter&gt;

   188 <dd>the counter() or counters() function, as per <a href="http://www.w3.org/TR/CSS21/syndata.html#counter">CSS 2.1 section 4.3.5</a>

   190 <dt>contents

   192 <dd>The textual content of the element, including the content of its ::before and ::after pseudo-element. The content of the element's descendants, including their respective ::before and ::after pseudo-elements, are included in the returned content.

   194 <dt>content-element

   196 <dd>The textual content of the element, not including the content of its ::before and ::after pseudo-element. The content of the element's descendants, including their respective ::before and ::after pseudo-elements, are included in the returned content.

   198 <dt>content-before

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

   202 <dt>content-after

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

   206 <dt>content-first-letter

   208 <dd>The first letter of the content of the element. The definition of a letter is the same as for :first-letter pseudo-elements.

   210 <p class="note">The expected use for ''content-first-letter'' is to create one-letter headers, e.g., in dictionaries.</p>

   212 <dt>env()

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

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

   217 <ul>

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

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

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

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

   222 </ul>

   224 <p>Information about date and time is formatted according to the locale of the user's system.

   225 <p class=issue>Or, should there be a way to specify the locale? Or should we simply format all in ISO format (e.g., 2010-03-30)?

   227 <p class=note>On many systems, preformatted strings in the user's locale can be found through the <a href="http://www.opengroup.org/onlinepubs/009695399/functions/strftime.html">strftime</a> function. The date, time and date-time strings can be found by using the "%x", "%X" and "%c" conversion strings, respectively.

   229 <div class=example>

   231 <pre>

   232 @page {

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

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

   235 }

   236 </pre>

   238 </div>

   241 </dl>

   242 </dl>

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

   246 <p>Named strings can only hold the result of one assignment; whenever

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

   249 <p class='note'>User agents, however, must be able to remember the

   250 result of more than one assignment as the ''string()'' functional value

   251 (described below) can refer to different assignments.

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

   254 'string-set' property is attached and subsequent pages.

   256 <p>The name space of named strings is different from other sets of

   257 names in CSS.

   259 <p>The textual content is processed as if 'white-space: normal' had been set.

   262 <div class="example">

   263 <pre>

   264 h2 {

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

   266   counter-increment: header;

   267 }

   268 </pre>

   270 <p>Note that the string called "header" is different from the counter with the same name. The above code may result in <em>header</em> being set to "Chapter 2: Europa".

   272 </div>

   275 <div class="example">

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

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

   279 <pre>

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

   281 h2 {

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

   283   counter-increment: header }

   284 </pre>

   285 </div>

   287 <div class="example">

   288 <pre>

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

   290 </pre>

   291 </div>

   293 <div class="example">

   294 <p>The content is copied regardless of other settings on the element. In HTML, TITLE  elements are normally not displayed, but in this examplet the content is copied into a named string:

   296 <pre>

   297 title {

   298   display: none;

   299   string-set: header contents;

   300 }

   301 </div>

   304 <h4>Using named strings</h4>

   306 <p>The content of named strings can be recalled by using the

   307 ''string()'' value on the 'content' property. The ''string()'' value has

   308 one required argument, namely the name of the string.

   310 <div class="example">

   311 <pre>

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

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

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

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

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

   317 </pre>

   318 </div>

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

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

   322 which of these values should be used, an optional argument is accepted

   323 on the ''string()'' value. This argument can have one of four keywords:

   325 <ul>

   326 <li>''start'': the named string's entry value for that page is used.

   327 <li>''first'': the value of the first assignment is used. If there is no assignment on the page, the start value is used. ''first'' is the default value.

   328 <li>''last'': the named string's exit value for that page is used

   329 <li>''first-except'': similar to ''first'', except on the page where the value was assigned. On that page, the empty string is used.

   330 </ul>

   332 <p>The assignment is considered to take place on the first page where a content box representing the element occurs. If the element does not have any content boxes (e.g., if 'display: none' is set), the assignment is considered to take place on the page where the first content box would have occured if the element had been in the normal flow.

   334 <div class="example">

   335 <p>In this example, the first term on the page will be shown in the top left corner and the last term on the page will be shown in the top right corner. In top center of the page, the first letter of first term will be shown.

   336 <pre>

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

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

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

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

   341 </pre>

   342 </div>

   345 <div class="example">

   346 <p>In this example, the header in the top center will be blank on pages where 'h1' elements appear. On other pages, the string of the previous 'h1' element will be shown.

   347 <pre>

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

   349 h1 { string-set: chapter contents }

   350 </pre>

   351 </div>

   353 <p>If the named string referred to in a 'string()' value has not been

   354 assigned a value, the empty string is used.

   357 <h3>Running elements</h3>

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

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

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

   362 running headers and footers is introduced.

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

   365 several pages; they are said to be <em>running elements</em>. To

   366 support running elements, a new value &ndash; running() &ndash; is

   367 introduced on the 'position' property. It has one required argument:

   368 the name by which the running element can be referred to. A running

   369 element is not shown in its natural place; there it is treated as if

   370 'display: none' had been set. Instead, the running element may be

   371 displayed in a margin box.

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

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

   375 running element can hold one element, including its pseudo-elements

   376 and its descendants. Whenever a new element is assigned to a running

   377 element, the old element is lost.

   379 <p class='note'>User agents, however, must be able to remember the

   380 result of more than one assignment as the ''element()'' value

   381 (described below) can refer to different assignments.

   383 <p>Running elements inherit through their normal place in the

   384 structure of the document.

   387 <div class="example">

   388 <pre>

   389 title { position: running(header) }

   390 @page { @top-center {

   391   content: element(header) }

   392 }

   393 </pre>

   394 </div>

   397 <div class="example">

   398 <p>In this example, the element is copied into the running header but it also keeps its normal place.

   400 <pre>

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

   402 @page { @top-center {

   403   content: element(header) }

   404 }

   405 </pre>

   406 </div>

   410 <p>Like the ''string()'' value, the ''element()'' value accepts an

   411 optional second argument:

   413 <dl>

   414 <dt>''start''

   415 <dt>''first''

   416 <dt>''last''

   417 <dt>''first-except''

   418 </dl>

   420 <p>The keywords have the same meaning as for the ''string()'' value,

   421 and the place of the assignments are the same.

   423 <p>The ''element()'' value cannot be combined with any other values.

   425 <div class="example">

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

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

   428 all pages, except where h1 elements appear.

   430 <pre>

   431 &lt;style>

   432   div.header { display: none }

   433   @media print {

   434   div.header {

   435     display: block;

   436     position: running(header);

   437   }

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

   439 &lt;/style>

   440 ...

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

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

   444 </pre>

   445 </div>

   447 <div class="example">

   448 <p>This code illustrates how to change the running header on one page in the middle of a run of pages:

   450 <pre>

   451 ...

   452 &lt;style>

   453 @page { @top-center {

   454   content: element(header, first) }}

   455 .header { position: running(header) }

   456 .once { font-weight: bold }

   457 &lt;/style>

   458 ...

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

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

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

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

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

   464 ...

   465 </pre>

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

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

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

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

   471 ''first'' keyword has been specified. However, the second "span"

   472 element still sets the exit value for "header" and this value is

   473 used on subsequent pages.

   474 </div>

   478 <h2>Leaders</h2>

   480 <p>A leader is a visual pattern that guides the eye.

   481 Typically, leaders are used to visually connect an entry in a list

   482 with a corresponding code. For example, there are often leaders between

   483 titles and page numbers in a table of contents (TOC). Another example is the

   484 phone book where there are leaders between a name and a telephone

   485 number.

   487 <p>In CSS3, a leader is composed of series of glyphs through the

   488 ''leader()'' value on the 'content' property. The functional notation

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

   490 leader. These values are allowed:

   492 <ul>

   493 <li>leader(dotted)

   494 <li>leader(solid)

   495 <li>leader(space)

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

   497 </ul>

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

   500 The table below shows the equivalents:

   502 <table class=border>

   503 <tr><th>Keyword<th>String<th>Unicode characters

   504 <tr><td>leader(dotted)<td>leader('. ')<td>\002E \0020

   505 <tr><td>leader(solid)<td>leader('_')<td>\005F

   506 <tr><td>leader(space)<td>leader(' ')<td>\0020

   507 </table>

   510 <!--

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

   512 leader pattern between consecutive lines.

   513 -->

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

   519 <p>In its simplest form, the 'content' property only takes one

   520 ''leader()'' value:

   522 <div class="example">

   523 <pre>

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

   525 </pre>

   526 </div>

   528 <P>The leader string must be shown in full at least once and this

   529 establishes the minimum length of the leader. To fill the available

   530 space, the leader string is repeated as many times as possible in the

   531 writing direction. At the end of the leader, a partial string pattern

   532 may be shown.  White space in leaders is collapsed according to the

   533 values on white-space properties.

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

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

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

   539 properties, text properties, 'letter-spacing', white-space properties,

   540 background properties, and 'color'.

   542 <p>The second value describes the alignment of the leader. These values are allowed:

   544 <dl>

   546 <dt>align

   548 <dd>attempt to align corresponding glyphs from the  leader pattern between consecutive lines. This is the default value.

   550 <dt>start

   551 <dd>align leader string with the start

   553 <dt>end

   554 <dd>align leader string with the end

   556 <dt>center

   557 <dd>center leader string

   559 <dt>string-space

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

   562 <dt>letter-space

   563 <dd>add space between letters (both inside the string, and at the start/end of the string) to take up all available space

   565 </dl>

   567 <div class=example>

   568 <pre>

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

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

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

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

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

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

   575 </pre>

   576 </div>

   579 <p>In a more complex example, the 'leader' value is combined with other

   580 values on the 'content' property:

   582 <div class="example">

   583 <pre>

   584 ul.toc a::after {

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

   586 }

   587 </pre>

   588 </div>

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

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

   592 minimum length of the leader.

   594 <div class="example">

   595 <p>Consider this code:

   597 <pre>

   598 &lt;style>

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

   600 &lt;/style>

   601 &lt;div class="entry">

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

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

   604 &lt;/div>

   605 </pre>

   607 <p>If the name and number end up on different lines (e.g., in a narrow column), it may be formatted like this:

   609 <pre>

   610 John Doe....

   611 ...123456789

   612 </pre>

   613 </div>

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

   616 following for each line:

   618 <ol>

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

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

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

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

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

   625 as the minimum leader length must be honored.

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

   628 </ol>

   631 <div class="example">

   632 <p>Consider this code:

   634 <pre>

   635 &lt;style>

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

   637 &lt;/style>

   638 &lt;blockquote>

   639   Bla great bla bla world bla bla

   640   empire bla bla color bla bla

   641   history bla bla forever.

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

   643 &lt;/blockquote>

   644 </pre>

   646 <p>Depending on the width of the containing block, this may be rendered as:

   648 <pre>

   649   Bla great bla bla world bla bla

   650   empire bla bla color bla bla

   651   history bla bla forever.   John

   652   Johnson

   653 </pre>

   655 <p>However, this rendering is preferable:

   657 <pre>

   658   Bla great bla bla world bla bla

   659   empire bla bla color bla bla

   660   history bla bla forever.

   661                      John Johnson

   662 </pre>

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

   665 this rule can be added to the style sheet:

   667 <pre>

   668 cite { text-wrap: suppress }

   669 </pre>

   671 <p>Until 'text-wrap' is widely supported, this rule can also be used:

   673 <pre>

   674 cite { white-space: nowrap }

   675 </pre>

   677 <p>If the containing element is wider, this may be the resultant presentation:

   679 <pre>

   680   Bla great bla bla world bla bla empire

   681   bla bla color bla bla history bla bla

   682   forever.                  John Johnson

   683 </pre>

   686 </div>

   689 <h2>Cross-references</h2>

   691 <p>It is common to refer to other parts of a document by

   692 way of a section number (e.g., "See section 3.4.1"), a page number

   693 (e.g., "See discussion on page 72"), or a string (e.g., "See the

   694 chapter on Europe"). Being able to resolve these cross-references

   695 automatically saves time and reduces the number of errors.

   697 <h3>The ''target-counter'' and ''target-counters'' values</h3>

   699 <p>Numerical cross-references are generated by ''target-counter()''

   700 and ''target-counters()'' values that fetch the value of a counter at

   701 the target end of the link. These functions are similar to the

   702 ''counter()'' and ''counters()'' functions, except that they fetch

   703 counter values from remote elements. ''target-counter()'' has two

   704 required arguments: the url of the link, and the name of a counter.

   705 ''target-counters()'' has three required arguments: the url of the

   706 link, the name of a counter, and a separator string. Both functions

   707 accepts an optional argument at the end that describes which list

   708 style type to use when presenting the resulting number; ''decimal''

   709 being the default.

   711 <div class="example">

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

   713 is added after a link:

   715 <pre>

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

   717 </pre>

   718 </div>

   721 <div class="example">

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

   723 is added after a link:

   725 <pre>

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

   727 </pre>

   728 </div>

   732 <h3>The ''target-text'' value</h3>

   734 <p>Textual cross-references are generated by ''target-text()'' which

   735 fetches the textual content from the target end of the link. Only text

   736 is copied; not style, structure, or replaced content.

   737 ''target-text()'' has one required argument: the url of the link. An

   738 optional second argument specifies exactly which content is fetched.

   739 There are five possible values: ''contents'', ''content-element'',

   740 ''content-before'', ''content-after'', ''content-first-letter''; these

   741 keywords are defined above.

   744 <div class="example">

   745 <p>To generate this text

   747 <blockquote>

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

   749 </blockquote>

   751 from this markup:

   753 <pre>

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

   755 ...

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

   757 </pre>

   759 this CSS code can be used:

   761 <pre>

   762 h2 { counter-increment: chapter }

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

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

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

   766 </pre>

   767 </div>

   771 <h2>Footnotes</h2>

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

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

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

   776 is complex. As far as possible, footnotes try to reuse other parts of

   777 CSS. However, due to the typographic traditions of footnotes, some new

   778 functionality is required to support footnotes in CSS:

   780 <p>In order to support footnotes in CSS, the following functionality is added:

   782 <ul>

   783 <li>one new value on the 'float' property: ''footnote''

   784 <li>one new page area: ''@footnote''

   785 <li>two new pseudo-elements: ''::footnote-call'' and ''::footnote-marker''

   786 <li>one predefined counter: ''footnote''

   787 <li>one new value on the 'content' property: ''target-pull()''

   788 <li>border segments

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

   790 </ul>

   793 <div class=example>

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

   796 <pre>

   797 &lt;style>

   798 .footnote { float: footnote }

   799 &lt;/style>

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

   802 </pre>

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

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

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

   807 possible rendering:

   809 <pre>

   810 A sentence consists of words. &#xB9;

   812 &#xB9; Most often.

   813 </pre>

   815 </div>

   817 <div class=example>

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

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

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

   823 <pre>

   824 &lt;style>

   825 @media print {

   826   .footnote {

   827     float: footnote;

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

   829   .call { display: none }

   830 }

   831 &lt;/style>

   832 ...

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

   834 ...

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

   836 </pre>

   838 <p class=issue>define ''target-pull''

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

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

   842 this specification, there will be a footnote:

   844 <pre>

   845 A sentence consists of words&#xB9;.

   847 &#xB9; Most often.

   848 </pre>

   849 </div>

   851 <div class=example>

   852 Consider this markup:

   853 <pre>

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

   855 </pre>

   857 <p>The content of the "title" attribute can be turned into a footnote with this code:

   859 <pre>

   860 span[title]::after {

   861   content: attr(title);

   862   float: footnote;

   863 }

   864 </pre>

   865 </div>

   868 <h3>Turning elements into footnotes</h3>

   870 <p>An element with ''float: footnote'' (called a <em>footnote

   871 element</em>) is moved to the <em>footnote area</em> and a <em>footnote-call</em>

   872 pseudo-element is put in its original place.

   874 <div class="example">

   875 <pre>

   876 span.footnote {

   877   float: footnote;

   878 }

   879 </pre>

   880 </div>

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

   883 but they inherit through their normal place in the structure of the

   884 document.

   886 <p>The 'display' property on footnote elements is ignored. Instead,

   887 the value of the 'display' property in the @footnote context

   888 determines if footnotes are block or inline elements.

   890 <div class="example">

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

   893 <pre>

   894 @footnote {

   895   display: inline;

   896 }

   897 span.footnote {

   898   float: footnote;

   899 }

   900 </pre>

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

   904 <pre>

   905 &#xB9; The first footnote. &#xBA; The second footnote.

   906 </pre>

   907 </div>

   909 <!--

   910 <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).

   911 -->

   913 <p>For each new footnote element, the ''footnote'' counter is automatically

   914 incremented.

   917 <h3>The footnote area</h3>

   920 <p>All elements with ''float: footnote'' are moved to the <em>footnote

   921 area</em>. The footnote area is described by an @footnote-rule inside

   922 the @page-rule. By default, the footnote area appears at the bottom of

   923 the page, but it can be positioned in other places.

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

   926 or (fixed?) absolute positioning? Or both?

   928 <p class=issue>

   930 <div class="example">

   932 <p>These rules place the footnote area at the bottom of the page, spanning all columns:

   934 <pre>

   935 @page {

   936   @footnote {

   937     float: bottom;

   938     column-span: all;

   939     width: 100%;

   940   }

   941 }

   942 </pre>

   943 </div>

   947 <div class="example">

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

   950 <pre>

   951 @page {

   952   @footnote {

   953     float: bottom;

   954     width: 100%;

   955   }

   956 }

   957 </pre>

   958 </div>

   961 <div class="example issue">

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

   964 <pre>

   965 @page {

   966   @footnote {

   967     float: bottom-corner;

   968     width: 100%;

   969   }

   970 }

   971 </pre>

   973 </div>

   975 <!--

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

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

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

   979 -->

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

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

   984 <div class="example">

   985 <pre>

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

   987 div.figure { float: bottom page }

   988 </pre>

   990 <p>If figures and footnotes are on the same page, the footnotes will appear below the figures as they are floated to the bottom before the figures.

   991 </div>

   994 <p>Potentially, every page has a footnote area. If there

   995 are no footnotes on the page, the footnote area will not take up any

   996 space. If there are footnotes on a page, the layout of the footnote

   997 area will be determined by the properties/values set on it, and by the

   998 footnote elements elements inside it.

  1000 <p>These properties apply to the footnote area: 'content', 'border',

  1001 'padding', 'margin', 'height', 'width', 'max-height', 'max-width',

  1002 'min-height', 'min-width', the background properties.

  1004 <!--

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

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

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

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

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

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

  1011 specification.

  1012 -->

  1015 <div class="example">

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

  1018 <pre>

  1019 @footnote {

  1020   margin-top: 0.5em;

  1021   border-top: thin solid black;

  1022   border-clip: 4em;

  1023   padding-top: 0.5em;

  1024 }

  1025 </pre>

  1027 <p>The result of this code is a footnote area separated from other content above it by margin, border and padding. Only 4em of the border is visible due to the 'border-clip' property, which is defined in <a href="http://dev.w3.org/csswg/css4-background/">CSS Backgrounds and Borders Module Level 4</a>.   <!--[[!CSS4BACKGROUND]]-->.

  1029 </div>

  1034 <!--

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

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

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

  1038 -->

  1040 <h3>Footnote calls</h3>

  1042 <p>When an element is moved to the footnote area,

  1043 a <em>footnote-call</em> is left behind. By default, User Agents must

  1044 behave as if this code is part of the default style sheet:

  1046 <pre>

  1047 ::footnote-call {

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

  1049 }

  1050 </pre>

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

  1055 <h3>Footnote markers</h3>

  1057 <p>A ::footnote-marker pseudo-element is added to each footnote

  1058 element, in the same place, and replacing, the ::before

  1059 pseudo-element. User agents must, by default, show the "footnote"

  1060 counter in the footnote-marker.

  1062 <div class="example">

  1063 <p>User Agents may display footnote-calls and footnote-markers this way by default:

  1065 <pre>

  1066 ::footnote-call {

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

  1068 }

  1069 ::footnote-marker {

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

  1071 }

  1072 </pre>

  1073 </div>

  1075 <p>Marker elements are discussed in more detail in the CSS Lists

  1076 module [[!CSS3LIST]]. One suggested change to that module is to honor

  1077 the value of 'list-style-position' on the ::footnote-marker

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

  1079 Further, one clarification to the horizontal placement of the marker

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

  1081 horizontally aligned with the start of the line box.

  1084 <h3>Counting footnotes</h3>

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

  1087 footnote is generated. That is, the "footnote" counter is incremented

  1088 by one each time an element with ''float: footnote'' appears.

  1090 <p>The footnote counter can be reset with the 'counter-reset' property.

  1092 <div class="example">

  1093 This code resets the "footnote" counter on a per-page page basis:

  1094 <pre>

  1095 @page { counter-reset: footnote }

  1096 </pre>

  1097 </div>

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

  1101 <!--

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

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

  1104 counter is incremented.

  1106 <div class="example">

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

  1109 <pre>

  1110 @page {

  1111   @footnote {

  1112     counter-increment: footnote;

  1113   }

  1114 }

  1115 </pre>

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

  1118 </div>

  1119 -->

  1124 <h3>Laying out footnotes</h3>

  1126 <p>Footnotes must appear as early as possible under the following constraints:

  1128 <ol>

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

  1131     footnote call.

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

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

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

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

  1138     different, due to their occurrence in positioned and floating

  1139     elements.)</span>-->

  1141 <li>The footnote area is limited in size by 'max-height', unless the

  1142     page contains only footnotes. (E.g., if at the end of the document

  1143     there are still footnotes unprinted, the User Agent can use the whole page to

  1144     display footnotes.)

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

  1147     be empty, unless its 'max-height' is too small.

  1149 </ol>

  1152 <h3>Footnote magic</h3>

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

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

  1156 left behind in its place, a footnote marker is displayed before the

  1157 element, and the footnote counter is incremented.

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

  1160 to improve the presentation. For example, the space between a

  1161 footnote-call and surrounding text may be adjusted. Another example is

  1162 the height of the footnote area; it may be heuristically constrained

  1163 to limit the area that is used for footnotes.

  1167 <!--

  1168 <h2>Sidenotes</h2>

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

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

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

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

  1175 often used in the same document.

  1177 <div class="example">

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

  1180 <pre>

  1181 @page :left {

  1182   margin-left: 10em;

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

  1184 }

  1185 @page :right {

  1186   margin-right: 10em;

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

  1188 }

  1189 img { float: sidenote }

  1190 </pre>

  1191 </div>

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

  1194 on every page is that some documents use both.

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

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

  1198 -->

  1200 <!--

  1201 <h2>Hyphenation</h2>

  1202 -->

  1203 <!--

  1204 <table class=hyphenate>

  1205 <tr><th>CSS<th>XSL<th>DSSSL

  1206 <tr><th>hyphens<th>hyphenate<th>hyphenate

  1208 <tr><td>none<td>false

  1209 <tr><td>manual<td>

  1210 <tr><td>auto<td>true

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

  1213 <tr><td>auto

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

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

  1217 <tr><td>auto<td>

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

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

  1221 <tr><td>auto<td>

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

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

  1225 <tr><td>no-limit<td>no-limit

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

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

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

  1230 <tr><td>auto

  1232 <tr><th><th>hyphenation-keep<th>hyphenation-keep

  1233 <tr><td><td>auto

  1234 <tr><td><td>column

  1235 <tr><td><td>page

  1236 <tr><th><th><th>hyphenation-exceptions

  1237 <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.

  1240 </table>

  1242 -->

  1243 <!--

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

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

  1246 hyphenation, but describes six properties that influence hyphenation.

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

  1250 <table class=propdef>

  1251     <tr>

  1252       <td><em>Name:</em>

  1253       <td><dfn>hyphens</dfn>

  1254     <tr>

  1255       <td><em>Value:</em>

  1256       <td>none | manual | auto | all

  1257     <tr>

  1258       <td><em>Initial:</em>

  1259       <td>manual

  1260     <tr>

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

  1262       <td>all elements

  1263     <tr>

  1264       <td><em>Inherited:</em>

  1265       <td>yes

  1266     <tr>

  1267       <td><em>Percentages:</em>

  1268       <td>N/A

  1269     <tr>

  1270       <td><em>Media:</em>

  1271       <td>visual

  1272     <tr>

  1273       <td><em>Computed&nbsp;value:</em>

  1274       <td>specified value

  1275 </table>

  1277 <p>Values are:

  1279 <dl>

  1280 <dt>none

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

  1284 <dt>manual

  1286 <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.

  1288 <div class="example">

  1289 <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.

  1290 </div>

  1292 <div class="example">

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

  1294 <pre>

  1295 ex&amp;shy;ample.

  1296 </pre>

  1297 </div>

  1300 <dt>auto

  1301 <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.

  1303 <dt>all

  1305 <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.

  1308 </dl>

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

  1312 <table class=propdef>

  1313     <tr>

  1314       <td><em>Name:</em>

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

  1316     <tr>

  1317       <td><em>Value:</em>

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

  1319     <tr>

  1320       <td><em>Initial:</em>

  1321       <td>none

  1322     <tr>

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

  1324       <td>all elements

  1325     <tr>

  1326       <td><em>Inherited:</em>

  1327       <td>yes

  1328     <tr>

  1329       <td><em>Percentages:</em>

  1330       <td>N/A

  1331     <tr>

  1332       <td><em>Media:</em>

  1333       <td>visual

  1334     <tr>

  1335       <td><em>Computed&nbsp;value:</em>

  1336       <td>specified value

  1337 </table>

  1339 <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 &ndash; in turn, from the beginning &ndash; 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.

  1341 <div class="example">

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

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

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

  1346 this example:

  1348 <pre>

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

  1350 </pre>

  1352 </div>

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

  1356 <table class=propdef>

  1357     <tr>

  1358       <td><em>Name:</em>

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

  1360     <tr>

  1361       <td><em>Value:</em>

  1362       <td>&lt;integer> | auto

  1363     <tr>

  1364       <td><em>Initial:</em>

  1365       <td>auto

  1366     <tr>

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

  1368       <td>all elements

  1369     <tr>

  1370       <td><em>Inherited:</em>

  1371       <td>yes

  1372     <tr>

  1373       <td><em>Percentages:</em>

  1374       <td>N/A

  1375     <tr>

  1376       <td><em>Media:</em>

  1377       <td>visual

  1378     <tr>

  1379       <td><em>Computed&nbsp;value:</em>

  1380       <td>specified value

  1381 </table>

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

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

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

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

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

  1391 <table class=propdef>

  1392     <tr>

  1393       <td><em>Name:</em>

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

  1395     <tr>

  1396       <td><em>Value:</em>

  1397       <td>&lt;integer> | auto

  1398     <tr>

  1399       <td><em>Initial:</em>

  1400       <td>auto

  1401     <tr>

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

  1403       <td>all elements

  1404     <tr>

  1405       <td><em>Inherited:</em>

  1406       <td>yes

  1407     <tr>

  1408       <td><em>Percentages:</em>

  1409       <td>N/A

  1410     <tr>

  1411       <td><em>Media:</em>

  1412       <td>visual

  1413     <tr>

  1414       <td><em>Computed&nbsp;value:</em>

  1415       <td>specified value

  1416 </table>

  1418 <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.

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

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

  1425 <table class=propdef>

  1426     <tr>

  1427       <td><em>Name:</em>

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

  1429     <tr>

  1430       <td><em>Value:</em>

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

  1432     <tr>

  1433       <td><em>Initial:</em>

  1434       <td>no-limit

  1435     <tr>

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

  1437       <td>all elements

  1438     <tr>

  1439       <td><em>Inherited:</em>

  1440       <td>yes

  1441     <tr>

  1442       <td><em>Percentages:</em>

  1443       <td>N/A

  1444     <tr>

  1445       <td><em>Media:</em>

  1446       <td>visual

  1447     <tr>

  1448       <td><em>Computed&nbsp;value:</em>

  1449       <td>specified value

  1450 </table>

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

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

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

  1455 no limit.

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

  1459 <table class=propdef>

  1460     <tr>

  1461       <td><em>Name:</em>

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

  1463     <tr>

  1464       <td><em>Value:</em>

  1465       <td>auto | &lt;string>

  1466     <tr>

  1467       <td><em>Initial:</em>

  1468       <td>auto

  1469     <tr>

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

  1471       <td>all elements

  1472     <tr>

  1473       <td><em>Inherited:</em>

  1474       <td>yes

  1475     <tr>

  1476       <td><em>Percentages:</em>

  1477       <td>N/A

  1478     <tr>

  1479       <td><em>Media:</em>

  1480       <td>visual

  1481     <tr>

  1482       <td><em>Computed&nbsp;value:</em>

  1483       <td>specified value

  1484 </table>

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

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

  1488 find an appropriate value.

  1490 <div class="example">

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

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

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

  1495 <pre>

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

  1497 </pre>

  1498 </div>

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

  1503 <table class=propdef>

  1504     <tr>

  1505       <td><em>Name:</em>

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

  1507     <tr>

  1508       <td><em>Value:</em>

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

  1510     <tr>

  1511       <td><em>Initial:</em>

  1512       <td>auto

  1513     <tr>

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

  1515       <td>block-level elements

  1516     <tr>

  1517       <td><em>Inherited:</em>

  1518       <td>yes

  1519     <tr>

  1520       <td><em>Percentages:</em>

  1521       <td>N/A

  1522     <tr>

  1523       <td><em>Media:</em>

  1524       <td>visual

  1525     <tr>

  1526       <td><em>Computed&nbsp;value:</em>

  1527       <td>specified value

  1528 </table>

  1530 <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:

  1532 <dl>

  1533 <dt>auto

  1535 <dd>no restrictions imposed

  1537 <dt>always

  1539 <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.

  1541 <dt>column

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

  1545 <dt>page

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

  1549 <dt>spread

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

  1553 </dl>

  1555 <div class=example>

  1556 <pre>

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

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

  1559 </div>

  1560 <div>

  1562 <div class=example>

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

  1565 <pre>

  1566    This is just a

  1567    simple example

  1568    to show Antar-

  1569    ctica.

  1570 </pre>

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

  1574 <pre>

  1575    This is just a

  1576    simple example

  1577    to        show

  1578    Antarctica.

  1579 <pre>

  1580 </div>

  1581 -->

  1583 <!--

  1584 <h2>New counter styles</h2>

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

  1589 <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>)

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

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

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

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

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

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

  1597 glyphs).

  1599 <div class="example">

  1600 This example specifies that footnote markers should consist of

  1601 super-script decimal numbers.

  1603 <pre>

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

  1605 </pre>

  1606 </div>

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

  1609 other glyphs for use in footnote calls.

  1611 -->

  1612 <!--

  1613 <h3>Named counter styles</h3>

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

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

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

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

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

  1620 achieved through CSS without adding many new keywords,

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

  1622 sheet can name new counter styles.

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

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

  1626 space-separated list of strings.

  1628 <div class="example">

  1630 <pre>

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

  1632 ol { list-style-type: daggers }

  1633 </pre>

  1635 </div>

  1637 <div class="example">

  1639 <pre>

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

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

  1642 </pre>

  1644 </div>

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

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

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

  1650 <div class="example">

  1651 <p>Consider this example:

  1653 <pre>

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

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

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

  1657 </pre>

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

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

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

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

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

  1665 </div>

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

  1669 <div class="example">

  1670 <pre>

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

  1672 ol { list-style-type: armenian }

  1673 </pre>

  1674 </div>

  1675 -->

  1677 <!--

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

  1679 <pre>

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

  1681 </pre>

  1682 </div>

  1683 -->

  1684 <!--

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

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

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

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

  1690 arguments.

  1693 <div class="example">

  1694 <pre>

  1695 ::footnote-call {

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

  1697 }

  1698 </pre>

  1699 </div>

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

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

  1704 <div class="example">

  1706 This code:

  1708 <pre>

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

  1710 </pre>

  1712 will result in these list-items markers: * &#x2020; &#x2021; &#xA7; # 6 7 8 ...

  1714 </div>

  1715 -->

  1716 <!--

  1717 <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".

  1718 -->

  1720 <!--

  1721 <h2>Page counters</h2>

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

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

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

  1726 bottom of a page.

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

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

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

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

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

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

  1736 sheet:

  1738 <pre>

  1739 @page {

  1740   counter-increment: page 1;

  1741 }

  1742 </pre>

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

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

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

  1747 not take place.

  1749 <div class="example">

  1751 <pre>

  1752 @page {

  1753   @bottom-center {

  1754      content: counter(page);

  1755   }

  1756 }

  1758 @page introduction {

  1759   counter-reset: page;

  1760 }

  1762 @page :right {

  1763   counter-increment: page 2;

  1764 }

  1765 </pre>

  1766 </div>

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

  1771 <p>The ''pages'' counter is predefined to have the total number of

  1772 pages in the document. In order to find the value of this counter, the

  1773 UA will have to paginate the document. This counter is a constant and

  1774 it cannot be set or incremented by a style sheet.

  1776 <div class=example>

  1777 <pre>

  1778 @page {

  1779   @bottom-center {

  1780      content: "Page " counter(page) " of " counter(pages) " pages in total";

  1781   }

  1782 }

  1783 </pre>

  1784 </div>

  1786 <p>UAs that are not able to paginate the document should display a

  1787 question mark or another symbol that indicates uncertainty.

  1789 <div class=example>

  1791 <p>This code has no effect on the ''pages'' counter which cannot be

  1792 changed by the style sheet. However, the the ''page'' counter reset normally.

  1794 <pre>

  1795 @page :right {

  1796   counter-reset: pages page;

  1797 }

  1798 </pre>

  1799 </div>

  1801 -->

  1803 <!--

  1805 <h2>Image resolution</h2>

  1807 <p>Image resolution, as the term is used in this document, means

  1808 pixels per physical length, e.g., pixels per inch. Some image formats

  1809 can record information about the resolution of images. This

  1810 information can be helpful when determining the actual size of the

  1811 image in the formatting process. However, the information can also be

  1812 wrong, in which case it should be ignored. The 'image-resolution' and

  1813 'background-image-resolution' properties are introduced to determine

  1814 the correct resolution of images.

  1816 <table class=propdef>

  1817     <tr>

  1818       <td><em>Name:</em>

  1819       <td><dfn>image-resolution</dfn>

  1820     <tr>

  1821       <td><em>Value:</em>

  1822     <td>normal | [ from-image || &lt;dpi> ]

  1823     <tr>

  1824       <td><em>Initial:</em>

  1825       <td>normal

  1826     <tr>

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

  1828       <td>replaced elements <span class=issue>and background images?</span>

  1829     <tr>

  1830       <td><em>Inherited:</em>

  1831       <td>yes

  1832     <tr>

  1833       <td><em>Percentages:</em>

  1834       <td>N/A

  1835     <tr>

  1836       <td><em>Media:</em>

  1837       <td>visual

  1838     <tr>

  1839       <td><em>Computed&nbsp;value:</em>

  1840       <td>as specified value <span class=issue>(or, should it be only one value?)</span>

  1841 </table>

  1843 <p>The values are:

  1845 <dl>

  1846 <dt>normal

  1848 <dd>The resolution of the image is unknown, and UAs should not use the

  1849 resolution found in the image. Instead, the image resolution will be

  1850 found by converting the dimension of the image into CSS pixels.

  1852 <dt>from-image

  1854 <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.

  1856 <dt>&lt;dpi>

  1858 <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.

  1860 </dl>

  1862 <div class="example">

  1863 <p>This rule specifies that the UA should use the image resolution found in the image itself.

  1864 <pre>

  1865 img { image-resolution: from-image }

  1866 </pre>

  1867 </div>

  1870 <div class="example">

  1871 <p>Using this rule, the image resolution is set to 300dpi and the resolution in the image, if any, is ignored.

  1872 <pre>

  1873 img { image-resolution: 300dpi }

  1874 </pre>

  1875 </div>

  1878 <div class="example">

  1879 <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.

  1880 <pre>

  1881 img { image-resolution: from-image 300dpi }

  1882 img { image-resolution: 300dpi from-image }

  1883 </pre>

  1884 </div>

  1887 -->

  1889 <!--

  1891 <table class=propdef>

  1892     <tr>

  1893       <td><em>Name:</em>

  1894       <td><dfn>image-resolution</dfn>

  1895     <tr>

  1896       <td><em>Value:</em>

  1897     <td>normal | auto | &lt;dpi> [ , normal | &lt;dpi> ]?

  1898     <tr>

  1899       <td><em>Initial:</em>

  1900       <td>normal

  1901     <tr>

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

  1903       <td>replaced elements

  1904     <tr>

  1905       <td><em>Inherited:</em>

  1906       <td>yes

  1907     <tr>

  1908       <td><em>Percentages:</em>

  1909       <td>N/A

  1910     <tr>

  1911       <td><em>Media:</em>

  1912       <td>visual

  1913     <tr>

  1914       <td><em>Computed&nbsp;value:</em>

  1915       <td>as specified value <span class=issue>(or, should it be only one value?)</span>

  1916 </table>

  1918 <p>This property accepts either a single value, or a comma-separated

  1919 list of two values. The values are:

  1921 <dl>

  1922 <dt>normal

  1924 <dd>The resolution of the image is unknown, and UAs should not use the

  1925 resolution found in the image. Instead, the image resolution will be

  1926 found by making image pixels equivalent to CSS pixels.

  1928 <dt>auto

  1930 <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.

  1932 <dt>&lt;dpi>

  1934 <dd>The value consists of a number with a 'dpi' unit identifier. The

  1935 UA should use the specified resolution.

  1937 </dl>

  1939 <p>If, after evaluating the specified values, no image resolution has been determined, the UA should behave as if ''normal'' had been specified.

  1941 <div class="example">

  1942 <p>This rule specifies that the UA should use the image resolution found in the image itself.

  1943 <pre>

  1944 img { image-resolution: auto }

  1945 </pre>

  1946 </div>

  1948 <div class="example">

  1949 <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.

  1950 <pre>

  1951 img { image-resolution: auto, 300dpi }

  1952 </pre>

  1953 </div>

  1955 <div class="example">

  1956 <p>Using this rule, the image resolution is set to 300dpi and the resolution in the image, if any, is ignored.

  1957 <pre>

  1958 img { image-resolution: 300dpi }

  1959 </pre>

  1960 </div>

  1963 -->

  1966 <!--

  1968 <div class="issue">

  1969 <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.,

  1970 <pre>

  1971 background-image: url(image.png, width, height, resolution);

  1972 background-image: image-url(image.png, width, height, resolution);

  1973 background-image: image(url(image.png), width, height, resolution);

  1974 </pre>

  1975 </div>

  1976 -->

  1979 <!--

  1980 <table class=propdef>

  1981     <tr>

  1982       <td><em>Name:</em>

  1983       <td><dfn>background-image-resolution</dfn>

  1984     <tr>

  1985       <td><em>Value:</em>

  1986     <td>normal | auto | &lt;dpi> [ , normal | &lt;dpi> ]?

  1987     <tr>

  1988       <td><em>Initial:</em>

  1989       <td>normal

  1990     <tr>

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

  1992       <td>replaced elements

  1993     <tr>

  1994       <td><em>Inherited:</em>

  1995       <td>yes

  1996     <tr>

  1997       <td><em>Percentages:</em>

  1998       <td>N/A

  1999     <tr>

  2000       <td><em>Media:</em>

  2001       <td>visual

  2002     <tr>

  2003       <td><em>Computed&nbsp;value:</em>

  2004       <td>as specified value <span class=issue>(or, should it be only one value?)</span>

  2005 </table>

  2007 <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.

  2009 <p>As 'image-resolution', except that it describes the resolution of the element's background image.

  2011 -->

  2014 <h2>Page marks and bleed area</h2>

  2016 <p>The 'marks' property from [[CSS2]] is part of this specification.

  2018 <!--

  2019 http://www.w3.org/TR/2008/REC-CSS2-20080411/page.html#propdef-marks

  2020 -->

  2023 <table class=propdef>

  2024     <tr>

  2025       <td><em>Name:</em>

  2026       <td><dfn>marks</dfn>

  2027     <tr>

  2028       <td><em>Value:</em>

  2029       <td>[ crop || cross ] | none

  2030     <tr>

  2031       <td><em>Initial:</em>

  2032       <td>none

  2033     <tr>

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

  2035       <td>page context

  2036     <tr>

  2037       <td><em>Inherited:</em>

  2038       <td>no

  2039     <tr>

  2040       <td><em>Percentages:</em>

  2041       <td>N/A

  2042     <tr>

  2043       <td><em>Media:</em>

  2044       <td>visual, paged

  2045     <tr>

  2046       <td><em>Computed&nbsp;value:</em>

  2047       <td>specified value

  2048 </table>

  2050 <p>This property adds crop and/or cross marks to the document. Crop

  2051 marks indicate where the page should be cut. Cross marks are used to

  2052 align sheets.

  2054 <p>Crop marks and cross marks are printed outside the page box. To

  2055 have room to show crop and cross marks, the final pages will have to

  2056 be somewhat bigger than the page box.

  2058 <div class="example">

  2059 <p>To set crop and cross marks on a document, this code can be used:

  2060 <pre>

  2061 @page { marks: crop cross }

  2062 </pre>

  2063 </div>

  2066 <table class=propdef>

  2067     <tr>

  2068       <td><em>Name:</em>

  2069       <td><dfn>bleed</dfn>

  2070     <tr>

  2071       <td><em>Value:</em>

  2072     <td>&lt;length&gt;

  2073     <tr>

  2074       <td><em>Initial:</em>

  2075       <td>6pt

  2076     <tr>

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

  2078       <td>page context

  2079     <tr>

  2080       <td><em>Inherited:</em>

  2081       <td>no

  2082     <tr>

  2083       <td><em>Percentages:</em>

  2084       <td>refer to width of page box

  2085     <tr>

  2086       <td><em>Media:</em>

  2087       <td>visual

  2088     <tr>

  2089       <td><em>Computed&nbsp;value:</em>

  2090       <td>as specified value

  2091 </table>

  2093 <p>This property specifies the extent of the page bleed area outside

  2094 the page box. This property only has effect if crop marks are enabled.

  2098 <h2>Bookmarks</h2>

  2100 <p>Some document formats have the capability of holding bookmarks.

  2101 Bookmarks are typically shown outside the document itself, often in a

  2102 tree-structured and clickable table of contents. To generate

  2103 bookmarks, these properties are defined: 'bookmark-level',

  2104 'bookmark-label', and 'bookmark-state'.

  2106 <h3>'bookmark-level'</h3>

  2108 <table class=propdef>

  2109     <tr>

  2110       <td><em>Name:</em>

  2111       <td><dfn>bookmark-level</dfn>

  2112     <tr>

  2113       <td><em>Value:</em>

  2114       <td>none | &lt;integer>

  2115     <tr>

  2116       <td><em>Initial:</em>

  2117       <td>none

  2118     <tr>

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

  2120       <td>all elements

  2121     <tr>

  2122       <td><em>Inherited:</em>

  2123       <td>no

  2124     <tr>

  2125       <td><em>Percentages:</em>

  2126       <td>N/A

  2127     <tr>

  2128       <td><em>Media:</em>

  2129       <td>all

  2130     <tr>

  2131       <td><em>Computed&nbsp;value:</em>

  2132       <td>specified value

  2133 </table>

  2136 <p>This property describes what level a certain bookmark has in a

  2137 hierarchical bookmark structure. The values are:

  2139 <dl>

  2141 <dt>none

  2143 <dd>no bookmark is generated

  2145 <dt>&lt;integer>

  2147 <dd>Indicates the level of the bookmark; the highest level is ''1'', then ''2'', ''3'' etc. A bookmark will be generated only if 'bookmark-label' also has a value different from 'none'.

  2149 </dl>

  2152 <div class="example">

  2153 <pre>

  2154 h1 { bookmark-level: 1 }

  2155 h2 { bookmark-level: 2 }

  2156 h3 { bookmark-level: 3 }

  2157 </pre>

  2158 </div>

  2161 <h3>'bookmark-label'</h3>

  2163 <table class=propdef>

  2164     <tr>

  2165       <td><em>Name:</em>

  2166       <td><dfn>bookmark-label</dfn>

  2167     <tr>

  2168       <td><em>Value:</em>

  2169       <td>&lt;content-list> | none

  2170     <tr>

  2171       <td><em>Initial:</em>

  2172       <td>none

  2173     <tr>

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

  2175       <td>all elements

  2176     <tr>

  2177       <td><em>Inherited:</em>

  2178       <td>no

  2179     <tr>

  2180       <td><em>Percentages:</em>

  2181       <td>N/A

  2182     <tr>

  2183       <td><em>Media:</em>

  2184       <td>all

  2185     <tr>

  2186       <td><em>Computed&nbsp;value:</em>

  2187       <td>specified value

  2188 </table>

  2190 <p>This property specifies the label of the bookmark, i.e., the text that will represent the bookmark in the bookmark structure. The values are:

  2192 <dl>

  2194 <dt>&lt;content-list>, as defined on the 'string-set' property. A bookmark will be generated only if 'bookmark-level' also has a value different from 'none'.

  2196 <dt>none

  2198 <dd>no bookmark is generated

  2200 </dl>

  2203 <div class="example">

  2204 <pre>

  2205 a { bookmark-label: attr(title) }

  2206 h1 { bookmark-label: contents }

  2207 h2 { bookmark-label: content-before }

  2208 h2 { bookmark-label: content-before ": " contents }

  2209 #frog { bookmark-label: "The green frog" }

  2210 </pre>

  2211 </div>

  2213 <!--

  2215 <table class=propdef>

  2216     <tr>

  2217       <td><em>Name:</em>

  2218       <td><dfn>bookmark-target</dfn>

  2219     <tr>

  2220       <td><em>Value:</em>

  2221       <td>none | &lt;uri>

  2222     <tr>

  2223       <td><em>Initial:</em>

  2224       <td>none

  2225     <tr>

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

  2227       <td>all elements

  2228     <tr>

  2229       <td><em>Inherited:</em>

  2230       <td>no

  2231     <tr>

  2232       <td><em>Percentages:</em>

  2233       <td>N/A

  2234     <tr>

  2235       <td><em>Media:</em>

  2236       <td>all

  2237     <tr>

  2238       <td><em>Computed&nbsp;value:</em>

  2239       <td>For URI values, the absolute URI; for 'none', as specified.

  2240 </table>

  2242 <p>This property specifies the target of the bookmark link.

  2244 <div class=example>

  2245 <pre>

  2246 .bookmark {

  2247    bookmark-label: attr(title);

  2248    bookmark-target: attr(href url);

  2249 }

  2250 ...

  2251 &lt;a class="bookmark" title="The green pear" href="#pears"/>

  2252 </pre>

  2253 </div>

  2255 <div class=example>

  2256 .example { bookmark-target: url(http://www.example.com) }

  2257 </div>

  2259 -->

  2261 <h3>'bookmark-state'</h3>

  2263 <table class=propdef>

  2264     <tr>

  2265       <td><em>Name:</em>

  2266       <td><dfn>bookmark-state</dfn>

  2267     <tr>

  2268       <td><em>Value:</em>

  2269       <td>open | closed

  2270     <tr>

  2271       <td><em>Initial:</em>

  2272       <td>open

  2273     <tr>

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

  2275       <td>block-level elements

  2276     <tr>

  2277       <td><em>Inherited:</em>

  2278       <td>no

  2279     <tr>

  2280       <td><em>Percentages:</em>

  2281       <td>N/A

  2282     <tr>

  2283       <td><em>Media:</em>

  2284       <td>all

  2285     <tr>

  2286       <td><em>Computed&nbsp;value:</em>

  2287       <td>specified value

  2288 </table>

  2290 <p>This property describes the initial state of a bookmark.

  2292 <div>

  2293 <pre>

  2294 * { bookmark-state: closed }

  2295 #open { bookmark-state: open }

  2296 </pre>

  2297 </div>

  2301 <h2>CMYK colors</h2>

  2303 <p>Printers do not use RGB colors, they (often) use CMYK: cyan,

  2304 magenta, yellow and black. The ''device-cmyk()'' functional value allows

  2305 style sheets to express device-dependent CMYK colors.

  2307 <div class="example">

  2308 <pre>

  2309 h3 { color: device-cmyk(0.8, 0.5, 0.0, 0.3) }

  2310 </pre>

  2311 </div>

  2313 <p>The values representing the colors are between ''0'' and ''1''.

  2314 Values outside this range are clipped.

  2316 <p>It is not expected that screen-centric user agents support CMYK

  2317 colors and it is therefore important that existing CSS color values can

  2318 be combined with CMYK colors.

  2320 <div class="example">

  2321 <pre>

  2322 h3 {

  2323   color: red;

  2324   color: device-cmyk(0.5, 0.1, 0.0, 0.2);

  2325 }

  2326 </pre>

  2328 <p>User Agents that do not understand the <code>device-cmyk()</code> value, will use the first color (red). User agents that understand <code>device-cmyk()</code> will use the second color (which is bluish).

  2329 </div>

  2332 <h2>Styling blank pages</h2>

  2334 <div class="note">

  2335 <p>

  2336   This section has been moved to [[CSS3PAGE]].

  2337 </p>

  2338 </div>

  2341 <h2>Paged presentations</h2>

  2343 <p>Printed publications are paged, while screen-based presentations of web pages are most often presented in a continous manner with a scrollbar on the side. There are reasons to believe that screen-based presentations also could benefit from using paged presentations. There is nothing in web specifications that prevent browsers from adding a page-based mode today. However, most web content is authored and styled with a continous presentation in mind. This could change if it becomes possible to describe paged presentations in style sheets. This section is an attempt to do so.

  2345 <p>To support paged presentations, four new values are added to the 'overflow-style' property:

  2347 <dl>

  2348 <dt>paged-x

  2350 <dd>overflow content is paged, and the pages are laid out along the x axis, in the x axis component of the writing direction

  2352 <dt>paged-y

  2354 <dd>overflow content is paged, and the pages are laid out along the y axis, in the the y axis component of the writing direction

  2356 <dt>paged-x-controls

  2358 <dd>as 'paged-x', but with added UA-specific controls to change pages

  2360 <dt>paged-y-controls

  2362 <dd>as 'paged-y', but with added UA-specific controls to change pages

  2364 </dl>

  2366 <p class=issue>Is "paginated" a better word?

  2367 <p class=issue>Should controls be specified on a separate property, or on an attribute (like HTML's video element)?

  2368 <p class=issue>Should the axis (x/y) be specified on a separate property?

  2371 <div class=example>

  2372 <p>In this example, the root element is constrained to have the same

  2373 height as the initial containing block. Overflow content will be laid

  2374 out on subsequent pages along the x axis. In LTR languages, this means

  2375 right; in RTL languages this means left; in vertical-rl this means

  2376 right.

  2378 <pre>

  2379   html {

  2380     overflow-style: paged-x;

  2381     height: 100%;

  2382   }

  2383 </pre>

  2384 </div>

  2386 <div class=example>

  2387 <p>In this example, one element within the document is paged, and

  2388 controls are added so that users can navigate from one page to the

  2389 next. As such, the controls have the same effect as scrollbars in

  2390 continous presentations.

  2392 <pre>

  2393   #content {

  2394     overflow-style: paged-x-controls;

  2395     height: 400px;

  2396   }

  2397 </pre>

  2398 </div>

  2400 <p>A paged container cannot be split over multiple columns.

  2402 <h2>Navigation between pages</h2>

  2404 <p>Paged navigation within a page (as described above), can also be

  2405 naturally extended to navigation between web documents. To support

  2406 this, a new @-rule is proposed: @navigation. The purpose of

  2407 @navigation is to describe which documents the user can navigate to by

  2408 moving up, right, down, or left from the current document.

  2410 <p>Four new properties are allowed inside @navigation: nav-up, nav-right, nav-bottom, nav-right.

  2412 <p class=note>The name of the properties inside @navigation are borrowed from <a href="http://www.w3.org/TR/2004/CR-css3-ui-20040511/#nav-dir">CSS3 Basic User Interface Module</a>.

  2414 <p>The properties accept these values:

  2416 <dl>

  2418 <dt>go()

  2420 <dd>the function takes one argument, which refers to the <tt>rel</tt> attribute of the <tt>link</tt> element

  2422 <div class=example>

  2423 <pre>

  2424 &lt;link rel=index href="../index.html">

  2425 &lt;link rel=previous href=g3.html>

  2426 &lt;link rel=next href=g1.html>

  2427 ...

  2428 @navigation {

  2429   nav-up: go(index);

  2430   nav-left: go(previous);

  2431   nav-right: go(next);

  2432 }

  2433 </pre>

  2434 </div>

  2436 <p class=issue>This functionality relies on semantics in HTML and CSS. Other languages may have other other ways to describe such semantics. One possible solution for other languages is  "link[rel=index] { nav-up: attr(href) }"

  2438 <dt>''back''

  2440 <dd>The keyword takes the user one step back in the history of browsed pages.

  2442 <div class=example>

  2443 <pre>

  2444 @navigation {

  2445   nav-left: back;

  2446 }

  2447 </pre>

  2448 </div>

  2450 <dt>url()

  2452 <dd>The funcation takes one argument: a URL. Relative URLs are

  2453 relative to the style sheet.

  2455 <div class=example>

  2456 <pre>

  2457 @navigation {

  2458   nav-up: url(..);

  2459   nav-down: url(a1.html);

  2460 }

  2461 </pre>

  2462 </div>

  2464 <dt>url-doc()

  2466 <dd>The function is identical to url(), except that relative URLs are

  2467 relative to the document, not to the style sheet.

  2469 <div class=example>

  2470 <pre>

  2471 @navigation {

  2472   nav-up: url-doc(..);

  2473   nav-down: url-doc(a1.html);

  2474 }

  2475 </pre>

  2476 </div>

  2478 </dl>

  2484 <div class=example>

  2486 <p>Combined with the <a href="http://www.w3.org/TR/2011/WD-css3-conditional-20110901/#at-document">@document-rule</a>, navigation maps can be described:

  2488 <pre>

  2489 @document url("http://example.com/foo") {

  2490   @navigation {

  2491     nav-right: link-rel(next);

  2492   }

  2493 }

  2495 @document url("http://example.com/bar") {

  2496   @navigation {

  2497     nav-upt: link-rel(next);

  2498   }

  2499 }

  2500 </pre>

  2502 </div>

  2505 <h3>Page shift effects</h3>

  2507 <p>To describe page shift effects, four new properties inside

  2508 @navigation are proposed: nav-up-shift, nav-right-shift,

  2509 nav-down-shift, nav-left-shift. These properties take one of several

  2510 keyword values:

  2512 <dl>

  2514 <dt>pan

  2515 <dd>pans to the new page; this is the initial value

  2517 <dt>turn

  2518 <dd>turns the page, like soft book pages do

  2520 <dt>flip

  2521 <dd>flips the page, like stiff cardbord

  2523 <dt>fold

  2524 <dd>the old page folds, like an accordion

  2526 </dl>

  2528 <p class=issue>The proposed keyword values are loosely described. Are

  2529 there better ways to describe transitions?

  2531 <div class=example>

  2532 <pre>

  2533 @navigation {

  2534    nav-up-shift: pan;

  2535    nav-down-shift: flip;

  2536 }

  2537 </pre>

  2538 </div>

  2541 <h2>Page floats</h2>

  2543 <p>Images and figures are sometimes displayed at the top or bottom of

  2544 pages and columns. This specificaton adds new keywords on the 'float'

  2545 property which, in combination with integer values on 'column-span',

  2546 provides support for common paper-based layouts.

  2548 <p>The values below only have effect in paged mode, and the resulting floats are called "page floats".

  2550 <p class=note>A more accurate term may have been "column floats", as the the elements relate more strongly to columns that to pages.

  2552 <p>Four new keywords on 'float' have been added:

  2554 <dl>

  2556 <dt>top

  2557 <dd>the box is floated to the top of the natural column

  2559 <dt>bottom

  2560 <dd>the box is floated to the bottom of the natural column

  2562 <dt>top-corner

  2563 <dd>the box is floated to the top of the last column (in the inline direction) that fits inside the multicol element on the same page.

  2565 <dt>bottom-corner

  2566 <dd>similar to 'top-corner', exept the box is floated to the bottom

  2568 <!--

  2569 <dt>snap(&lt;length>, [top | bottom])

  2571 <dd>same as 'top' if the box is naturally near the top; same as

  2572 'bottom' if the box is naturally near the bottom. If the box naturally

  2573 leads to a (page/column) break, the box is floated to the top of the

  2574 next page/column. The first optionaloptional length value specifies how far from the

  2575 top/bottom the element can be influenced, The second

  2576 -->

  2578 <dt>snap(&lt;length> &lt;length>? [, top | bottom | near ]?)

  2580 <dd><p>Makes the element float to the top or bottom if it naturally appears within a certain distance from the top or bottom. The length value(s) specifies the maxium distance from the top/bottom that an element must be within in order to be floated; one length value specifies the distance from both the top and the bottom, two length values specify the distance from the top and  bottom, respectively. If an element is within the specified distance from both the top and the bottom, bottom wins.

  2582 <p>The optional keyword value specifies where the element is floated: top, bottom, or the nearest of the two. The initial value is 'near'.

  2584 <p>An element is considered to be a float if it has a snap() value, even if the element does not appear within the specified distance. This way, it can be determined whether an element is float or not without laying out the document.

  2586 <dt>snap

  2588 <dd>same as <tt>snap(2em, near)</tt>

  2590 </dl>

  2592 <p>If the requested position cannot be honored, the page float may be displayed in subsequent columns/pages.

  2594 <div class=example>

  2595 <p>In this example, tables will snap to the top/bottom if the top/bottom of the border box is closer than '3em' from the top/bottom of the page/column.

  2597 <pre>

  2598 table { float: snap }

  2599 table { float: snap(3em) }

  2600 table { float: snap(3em, bottom) }

  2601 table { float: snap(3em 2em, bottom) }

  2602 </pre>

  2603 </div>

  2605 <p class=issue>Should we define a reasonable default (say, 3em) instead of relying on implementation-specific values?

  2606 <p class=issue>Do numberic values (in addition to length values) make sense, like for orphans/widows

  2609 <!--

  2610 The 'widows'/'orphans' properties may be consulted to determine if the box is near the top/bottom.

  2611 -->

  2613 <p>These new keywords only apply in paged media; in continous media declarations with these keywords are ignored.

  2615 <div class=example>

  2616 <p>Float figure to top of natural column:

  2618 <pre>

  2619 .figure { float: top; display: block; }

  2620 </pre>

  2622 <img alt="sample rendering" src=7.png>

  2624 </div>

  2628 <div class=example>

  2630 <pre>

  2631 .figure { float: top; width: 50% }

  2632 </pre>

  2634 <img alt="sample rendering" src=7b.png>

  2636 </div>

  2639 <div class=example>

  2641 <p>Float figure to top of the natural column, spanning all columns:

  2643 <pre>

  2644 .figure { float: top; column-span: all }

  2645 </pre>

  2647 </div>

  2650 <div class=example>

  2651 <p>Float figure to top of the last column of the multicol element on the current page:

  2652 <pre>

  2653 .figure { float: top-corner }

  2654 </pre>

  2656 <img alt="sample rendering" src=6.png>

  2657 </div>

  2659 <p>The 'column-span' property is extended with integer values so that elements can span several columns. If the specified integer value is equal to, or larger than the number of columns in the multicol element, the number of columns spanned will be the same as if 'column-span: all' had been specified.

  2661 <div class=example>

  2662 <p>In combination with 'column-span', the figure is floated to the top corner of the multicol element on that page:

  2663 <pre>

  2664 .figure { float: top-corner; column-span: 2; width: 100% }

  2665 </pre>

  2667 <img alt="sample rendering" src=8.png>

  2668 </div>

  2670 <p>

  2672 <div class=example>

  2674 <img alt="sample rendering" src=regions.png>

  2676 <p>In this example, a commonly used newspaper layout is easily described:

  2678 <pre>

  2679 body { columns: 3 }

  2680 img.A { column-span: 2; width: 100% }  /* image spans two columns */

  2681 .one { column-span: 2 }                /* lead paragraph spans two columns */

  2682 </pre>

  2685 </div>

  2687 <!--

  2688 <h3>Float modifiers</h3>

  2690 <p>These values on 'float' can be combined with one of 'top'/'bottom'/'top-corner'/'bottom-corner' values:

  2692 <dl>

  2694 <dt>next-page

  2696 <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.

  2698 <div class=example>

  2700 <pre>

  2701 .figure { float: top-corner next-page }

  2702 </pre>

  2704 </div>

  2706 <dt>next-column

  2708 <dd>In paged media, float box to the next column.

  2710 <div class=example>

  2712 <pre>

  2713 .figure { float: top next-column }

  2714 .figure { float: next-column top }

  2715 </pre>

  2717 </div>

  2719  !--

  2720 <dt>unless-room

  2722 <dd>Only float the box if it otherwise would have lead to a column or page break.

  2724 <div class=example>

  2726 <pre>

  2727 .figure { float: top unless-room }

  2728 </pre>

  2730 </div>

  2731  --

  2733 <dt>left/right

  2735 <dd>'left'/'right' can be used in combination with 'top'/'bottom'/'top-corner'/'bottom-corner' to allow other content to flow around the box.

  2737 <div class=example>

  2738 <pre>

  2739 .figure { float: top right; width: 60% }

  2740 </pre>

  2741 <img alt="sample rendering" src=13.png>

  2742 </div>

  2746 </dl>

  2748 -->

  2750 <h3>Page float delays</h3>

  2752 <p>A page float can ask to be displayed at a later point by adding a numeric value to the keywords defined above

  2754 <div class=example>

  2755 <p>Float figure to top of the natural column:

  2757 <pre>

  2758 .figure { float: top(1) }

  2759 </pre>

  2760 </div>

  2762 <div class=example>

  2763 <p>Float figure to the top of the column appearing after the natural column:

  2765 <pre>

  2766 .figure { float: top(2) }

  2767 </pre>

  2768 </div>

  2770 <div class=example>

  2771 <p>Float figure to the top corner on the page appearing after the natural page:

  2773 <pre>

  2774 .figure { float: top-corner(2) }

  2775 </pre>

  2776 </div>

  2778 <p class=issue>What should happen if the float request a column/page that would otherwise not exist?

  2781 <h3>Clearing page floats</h3>

  2783 <p>If more than page float request the same position (e.g, the top of a column), they will normally be stacked like other floats. To avoid stacking, two new values on 'clear' can be used:

  2785 <dl>

  2786 <dt>column

  2787 <dd>If there is already a page float at the requested position, the page float is moved to the next column which does not have a page float in the requested position.

  2789 <dt>page

  2790 <dd>If there is already a page float at the requested position, the page float is moved to the next page which does not have a page float in the requested position

  2792 </dl>

  2794 <div class=example>

  2795 <p>In this example, the two figures end up the top corner of two different pages:

  2796 <pre>

  2797 .figure { float: top-corner; clear: page }

  2799 &ltdiv class=figure>&lt;/div>

  2800 &ltdiv class=figure>&lt;/div>

  2801 </pre>

  2803 </div>

  2805 <div class=example>

  2806 <p>In this example, the two figures request different positions, and

  2807 they may therefore end up in the same column:

  2808 <pre>

  2809 .figure.one { float: top; clear: column }

  2810 .figure.two { float: bottom; clear: column }

  2812 &ltdiv class="figure one">&lt;/div>

  2813 &ltdiv class="figure two">&lt;/div>

  2814 </pre>

  2815 </div>

  2819 <h3>Floating inside and outside pages</h3>

  2821 <p>Two allow content to flow to the inside and outside of a page, these keywords are added to the 'float' property:

  2823 <dl>

  2824    <dt>inside

  2826    <dd>On a right page, this value is synonymous with 'left'. On a left page, this value is synonymous with 'right'.

  2828    <dt>outside

  2830    <dd>On a left page, this value is synonymous with 'left', On a right page, this value is synonymous with 'right'.

  2832 </dl>

  2834 <div class=example>

  2835 <pre>

  2836 .figure { float: outside }

  2837 </pre>

  2838 </div>

  2842 <h2>Page and column floats, alternative syntax</h2>

  2844 <p>This section describes an alternative syntax for page and column floats.

  2846 <p>Four new keywords on 'float' have been added:

  2848 <dl>

  2850 <dt>left, right, top, bottom

  2851 <dd>relative to physical viewport

  2853 <dt>line-left, line-right

  2854 <dd>relative to inline axis

  2856 <dt>before, after

  2857 <dd>relative to block direction

  2859 <dt>inside, outside

  2860 <dd>as described in the previous section

  2862 <dt>footnote

  2863 <dd>as described above

  2865 <dt>columns(n)

  2866 <dd>makes the float span n columns, and sets the float context to be the multicol element

  2868 <dt>page

  2869 <dd>sets the float context to be the page

  2871 </dl>

  2875 <div class=example>

  2876 <p>Float figure to the top right corner of the multicol element, spanning two columns:

  2878 <pre>

  2879 .figure { float: top rigth columns(2); width: 100% }

  2880 </pre>

  2882 <img alt="sample rendering" src=8.png>

  2883 </div>

  2885 <div class=example>

  2886 <p>Float figure to top of the last column of the multicol element on the current page:

  2887 <pre>

  2888 .figure { float: top right columns(1) }

  2889 </pre>

  2891 <img alt="sample rendering" src=6.png>

  2892 </div>

  2894 <div class=example>

  2895 <p>Float figure to the top right of the current element, allowing other content on its side:

  2897 <pre>

  2898 .figure { float: top right; width: 60% }

  2899 </pre>

  2900 <img alt="sample rendering" src=13.png>

  2901 </div>

  2904 <div class=example>

  2905 <p>Escape the multicol element and float to the top right of the page area:

  2907 <pre>

  2908 .figure { float: top right page }

  2909 </pre>

  2910 </div>

  2915 <h2>Exclusions</h2>

  2917 <h3>Exclusions based on floats</h3>

  2919 <p>A new value on 'float' is introduced to support intrusion in columns:

  2921 <dl>

  2922 <dt>intrude

  2924 <dd>The element may intrude neighboring columns; if the element is not in a multi-column element, this keyword has no effect.

  2925 </dl>

  2927 </dl>

  2929 <p>The 'intrude' value only works in combination with one of these keywords: 'left'/'right'/'top'/'bottom'/'top-corner'/'bottom-corner'.

  2931 <div class=example>

  2933 <pre class=css>

  2934 img { float: left intrude; width: 120%;  }

  2935 </pre>

  2937 <p>In this example, the image is wider than the column and will

  2938 therefore intrude into the neighboring column. At the bottom of the

  2939 middle column is a long word that is clipped in the middle of the

  2940 column gap.

  2942 <img alt="sample rendering" src=1.png>

  2944 </div>

  2950 <h3>The 'float-offset' property</h3>

  2952 <table class=propdef>

  2953     <tr>

  2954       <td><em>Name:</em>

  2955       <td><dfn>float-offset</dfn>

  2956     <tr>

  2957       <td><em>Value:</em>

  2958     <td>&lt;length> &lt;length> ?

  2959     <tr>

  2960       <td><em>Initial:</em>

  2961       <td>0 0

  2962     <tr>

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

  2964       <td>floated elements

  2965     <tr>

  2966       <td><em>Inherited:</em>

  2967       <td>no

  2968     <tr>

  2969       <td><em>Percentages:</em>

  2970       <td>see prose

  2971     <tr>

  2972       <td><em>Media:</em>

  2973       <td>visual, paged

  2974     <tr>

  2975       <td><em>Computed&nbsp;value:</em>

  2976       <td>one or two absolute lengths

  2977 </table>

  2979 <p>This property pushes a float in opposite direction of the where

  2980 it has been floated with 'float'. If one value is specified, it is

  2981 the horizontal offset. If two values are specified, the first is the

  2982 horizontal and the second is the vertical offset. If no vertical value

  2983 has been specified, the vertical offset is set to zero.

  2985 <p>This property can only influence a float along an axis it has been floated.

  2987 <div class=example>

  2988 <pre>

  2989 img {

  2990   float: left;

  2991   float-offset: 2em 3em;

  2992 }

  2993 </pre>

  2995 <p>In this example, the image is floated to the left. Therefore, 'float-offset' may only push the element in the horizontal direction, and the vertical value is ignored.

  2997 </div>

  2999 <p>Negative values are allowed; a negative values will push the float

  3000 in the same direction as it has been floated with 'float'

  3002 <p>This property may move floats into other column than where they

  3003 naturally appear.

  3005 <div class=example>

  3006 <pre>img {

  3007   float: right;

  3008   float-offset: 5px;

  3009 }

  3010 </pre>

  3012 <img alt="sample rendering" src=14.png>

  3014 </div>

  3016 <p>Percentage values are computed according to this formula:

  3018 <pre>

  3019   (containing-block-width - float-width) * percentage

  3020   (containing-block-height - float-height) * percentage

  3021 </pre>

  3024 <div class=example>

  3025 Pull quotes are often centered in a column. In this example, the pull quote is floated to the right, and then pushed back into the center.

  3027 <img width=213 src="exclusion_wrap_side_left.png">

  3029 <pre>

  3030 .pullquote {

  3031   float: right;

  3032   float-offset: 50%; /* 50% centers the box */

  3033 }

  3034 </pre>

  3036 </div>

  3039 <p>When negative values are set on this property, the column gap is also part of the calculation:

  3041 <pre>

  3042   ((containing-block-width + 2 * column-gap) - float-width) * percentage

  3043 </pre>

  3045 <div class=example>

  3046 <pre>img {

  3047   float: top right;

  3048   float-offset: -50% 3em;  /* 50% centers the box */

  3049   width: 120%;

  3050 }

  3051 </pre>

  3053 <img alt="sample rendering" src=11.png>

  3055 </div>

  3058 <div class="example">

  3060 <pre>

  3061 img {

  3062   float: top right;

  3063   float-offset: -80% 2em;

  3064   width: 100%;

  3065 }

  3066 </pre>

  3068 <img alt="sample rendering" src=12.png>

  3070 </div>

  3073 <h3>The 'clear-side' property</h3>

  3075 <table class=propdef>

  3076     <tr>

  3077       <td><em>Name:</em>

  3078       <td><dfn>clear-side</dfn>

  3079     <tr>

  3080       <td><em>Value:</em>

  3081     <td>auto <!-- | left | right--> | both

  3082     <tr>

  3083       <td><em>Initial:</em>

  3084       <td>auto

  3085     <tr>

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

  3087       <td>floated elements

  3088     <tr>

  3089       <td><em>Inherited:</em>

  3090       <td>no

  3091     <tr>

  3092       <td><em>Percentages:</em>

  3093       <td>N/A

  3094     <tr>

  3095       <td><em>Media:</em>

  3096       <td>visual, paged

  3097     <tr>

  3098       <td><em>Computed&nbsp;value:</em>

  3099       <td>as specified

  3100 </table>

  3102 <p>This property declares if the side of a float should be cleared of

  3103 content. Values have the following meaning:

  3106 <dl>

  3107 <dt>auto

  3108 <dd>if the float is left-floated, there should be no content to the left; if the float is right-floated, there should be no content to the right

  3110 <!_-

  3111 <dt>left

  3112 <dd>there should be no content to the left of the float

  3113 <dt>right

  3114 <dd>there should be no content to the left of the float

  3115 -->

  3116 <dt>none

  3117 <dd>there may be content on either side of the float

  3118 </dl>

  3120 <!--

  3121 <h3>Pull-quotes</h3>

  3123 <div class=example>

  3124 <img width=213 src="exclusion_wrap_side_left.png">

  3126 <pre>

  3127 .pullquote {

  3128   float: right;

  3129   float-offset: 5em;

  3130 }

  3131 </pre>

  3133 <pre>

  3134 .pullquote {

  3135   float: right;

  3136   float-offset: 50%;

  3137 }

  3138 </pre>

  3141 </div>

  3143 <div class=example>

  3144 <p><img width=213 src="exclusion_wrap_side_right.png">

  3146 <pre>

  3147 .pullquote {

  3148   float: left;

  3149   float-offset: 5em;

  3150 }

  3151 </pre>

  3153 <pre>

  3154 .pullquote {

  3155   float: left;

  3156   float-offset: 50%;

  3157 }

  3158 </pre>

  3160 <pre>

  3161 .pullquote {

  3162   float: center;

  3163   clear-side: left;

  3164 }

  3165 </pre>

  3167 </div>

  3169 <pre>

  3170 .pullquote {

  3171   float: left;

  3172   float-offset: 50%; /* center */

  3173 }

  3174 </pre>

  3176 -->

  3178 <div class=example>

  3179 <img width=213 src="exclusion_wrap_side_both.png">

  3181 <!--

  3182 <pre>

  3183 .pullquote {

  3184   float: center;

  3185   clear-side: none;

  3186 }

  3187 </pre>

  3188 -->

  3190 <pre>

  3191 .pullquote {

  3192   float: left;

  3193   float-offset: 50%;

  3194   clear-side: none;

  3195 }

  3196 </pre>

  3198 <!--

  3199 <pre>

  3200 .pullquote {

  3201   float: positioned;

  3202   left: 5em;

  3203   clear-side: none;

  3204 }

  3205 </pre>

  3207 <pre>

  3208 .pullquote {

  3209   float: center;

  3210 }

  3211 </pre>

  3212 -->

  3214 </div>

  3217 <h3>Exclusions based on images</h3>

  3219 <p>Exclusions are often based on shapes found in images. In this specification, background image can carry the shape, around which text is wrapped. The new property 'background-exclude-level' indicates a level in the alpha channel of the background image(s) that defines the shape.

  3222 <div class=example>

  3223 <p>Here is an example that uses the background of the multicol element as a template for exclusions.

  3224 <img src=car1.jpg>

  3225 <pre>

  3226 article {

  3227   padding: 4em;

  3228   columns: 15em;

  3229   background: url(nicecar.jpg);

  3230   background-exclude-level: 0.5;

  3231 }

  3232 article h1 { column-span: all } /* Bonneville Speedway */

  3233 </pre>

  3235 </div>

  3237 <div class=example>

  3238 <p>This example is the same as the above, just with changed column widths.

  3239 <img src=car2.jpg>

  3240 <pre>

  3241 article {

  3242   padding: 4em;

  3243   columns: 6em;

  3244   background: url(nicecar.jpg);

  3245   background-exclude-level: 0.5;

  3246 }

  3247 article h1 { column-span: all } /* Bonneville Speedway */

  3248 </pre>

  3249 </div>

  3251 <p>Background images can be repeated. Therefore exclusions based on images can be repeated.

  3253 <div class=example>

  3255 <img src=exclusions_repeating.jpg>

  3257 <pre>

  3258 article {

  3259   background: repeat-y url(zigzag.png);

  3260   background-exclude-level: 0.5;

  3261 }

  3262 article h1 {

  3263   column-span: all;

  3264 }

  3265 </pre>

  3267 </div>

  3270 <h3>Exclusions based on rendered content</h3>

  3272 <P>A new property. 'exclude-level', is introduced to allow wraps around the rendered content of the element.

  3274 <div class=example>

  3275 <img src=exclusions-dropcap.png>

  3276 <pre>

  3277 #dropcaps {

  3278   font-size: 3em;

  3279   float: left;

  3280   exclude-level: 0.5;

  3281   margin-top: -0.2em;

  3282 }

  3283 &lt;p>&lt;span id="dropcaps">Many&lt;/span> instances ...&lt;/p>

  3284     &lt;p>The text ....&lt;/p>

  3285 </pre>

  3286 </div>

  3288 <p class=issue>Define behavior if both 'exclude-level' and 'background-exclude-level' is set.

  3290 <p class=issue>Some kind of spacing behavior must be defined; 'exclude-margin' may be an option.

  3292 <p class=issue>Define behavior if both 'exclude-level' and 'background-exclude-level' is set.

  3294 <h3>Exclusions based on shapes</h3>

  3296 <p class=issue>I suggest not having exclusions based in shapes in the first generation of exclusions; we may want to definde shapes for CSS in general (e.g., for borders), so we may want to wait until we have a holistic approach.

  3298 <div class=example>

  3299 <img src=heart1.png>

  3300 <pre>

  3301 article::column(1) {

  3302   content-inside: circle(50%, 50%, 30%);

  3303 }

  3305 article::column(2) {

  3306   content-outside: polygon(x1, y1, x2, y2, x3, y3, ... xn, yn);

  3307   color: red;

  3308 }

  3309 </pre>

  3310 </div>

  3312 <div class=example>

  3313 <img src=heart2.png>

  3314 <pre>

  3315 article::column(1) {

  3316   content-outside: circle(x, y, z);

  3317 }

  3318 article::column(2) {

  3319   content-inside: polygon(x1, y1, x2, y2, x3, y3, ... xn, yn);

  3320 }

  3321 </pre>

  3322 </div>

  3325 <!--

  3326 <h2>Aligning baselines in multi-column layouts</h2>

  3328 <p>In multi-column layouts, baselines are typically aligned between

  3329 adjacent columns. This gives the presentation a visual rythm, and text

  3330 in the end of the columns will be alignend. To support this, a new

  3331 value on the <span class=property>'line-box-contain'</span> property is

  3332 defined: ''line-grid'' (or, perhaps, ''gap'', ''crack'', ''snap'', ''snap-gap'', ''void'', ''grid'', ''snap-to-grid'').

  3334 <p>The value means that the height of the line in which the element

  3335 occurs should be rounded up to the smallest multiple of the used

  3336 'line-height' value on the containing block.

  3338 <div class=example>

  3339 <p>In this example, the stacking height of div.figure would be 30px (2 * 15px)

  3341 <pre>

  3342 div.multicol { line-height: 15px }

  3343 div.figure { height: 20px; line-box-contain: block inline replaced line-grid }

  3344 </pre>

  3345 </div>

  3347 <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>.

  3348 -->

  3349 <!--

  3350 http://www.w3.org/Style/Group/css3-src/css3-linebox/Overview.html#LineStacking

  3351 -->

  3352 <!--

  3353 <p class=note>A similar idea &mdash; 'line-stacking-strategy: grid-height' &mdash; 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>.

  3354 -->

  3359 <h2>Regions</h2>

  3361 <p>Regions are series of stylable boxes into which content can be

  3362 poured. Columns are regions that are automatically generated to

  3363 contain all the content of the the multicol element. By adding

  3364 selectors for columns, columns can be styled and positioned and

  3365 thereby escape the rigid patterns that columns naturally live in.

  3368 <div class=example>

  3369 <pre>

  3370 div.chapter::column(3)       /* the 3rd column of the element */

  3371 div.chapter::column(2n)      /* all even columns of the element */

  3372 div.chapter::column(3+)      /* all columns but the 1st and 2nd */

  3373 div.chapter::column(2,2)     /* second column on second page */

  3374 div.chapter::column(*,2)     /* all columns on the second page */

  3375 div.chapter::column(1,*)     /* the first column on all pages */

  3376 </pre>

  3377 </div>

  3380 <p>To underline the fact that columns are regions, the "region" keyword can be used as a substitute for "column".

  3383 <div class=example>

  3384 <pre>

  3385 div.chapter::region(3)       /* the 3rd region of the element */

  3386 div.chapter::region(2n)      /* all even regions of the element */

  3387 div.chapter::region(3+)      /* all regions but the 1st and 2nd */

  3388 div.chapter::region(2,2)     /* second region on second page */

  3389 div.chapter::region(*,2)     /* all regions on the second page */

  3390 div.chapter::region(1,*)     /* the first column on all pages */

  3391 </pre>

  3392 </div>

  3395 <div class=example>

  3396 <img alt="sample rendering" src=regions.png>

  3398 <p>In this example, the multicol layout is changed so that the image (which appears first in the markup) spans two columns and is floated to the top, thereby escaping its natural column. The first column, which holds the start of the textual content is also floated to the top, spanning two columns, and therefore ends up just under the image. When the first column/region is floated away, the second column will move into its space.

  3400 <pre>

  3401 article { columns: 3 }

  3402 img { column-span: 2; width: 100%; float: top }

  3403 article::region(1) {    /* selects column 1 */

  3404   column-span: 2;

  3405   float: top;

  3406   height: 3em;          /* sets preferred height of region */

  3407 }

  3409 &lt;article>

  3410   &lt;img ...>

  3411   &lt;p>...  &lt;p>...  &lt;p>...

  3412 &lt;/article>

  3413 </pre>

  3414 </div>

  3417 <div class=example>

  3418 <pre>

  3419 div.chapter::region(1) {

  3420   transform: rotate(6.5deg);

  3421 }

  3422 div.chapter::region(2) {

  3423   transform: rotate(-5.5deg) translate(0, 40px);

  3424 }

  3425 </pre>

  3427 <img src="regions_rotated_columns.jpg">

  3428 </div>

  3430 <!--

  3431 <div class=example>

  3432 Consider this markup:

  3434 <pre>

  3435 &lt;div class=text>

  3436 &lt;div lang=en>

  3437 Some words in English ...

  3438 &lt;/div>

  3439 &lt;div lang=fr>

  3440 Quelques mots en Francaise...

  3441 &lt;/div>

  3442 &lt;/div>

  3443 </pre>

  3445 <p>Here is the CSS code to lay these out into two columns with

  3446 different background colors:

  3448 <pre>

  3449 div.text {

  3450   columns: 32em;

  3451 }

  3453 div:lang(en) {

  3454   display: table-cell;

  3455   color: black; background: white;

  3456 }

  3458 div:lang(fr) {

  3459   display: table-cell;

  3460   color: white; background: black;

  3461 }

  3462 </pre>

  3464 <p>This example shows that use cases that first seem to require regions may be achieved with other methods.

  3466 </div>

  3467 -->

  3469 <!--

  3470 <div class=example>

  3471 <pre>

  3472   article { columns: 14em; }

  3473   article::column(1) {

  3474      position: absolute;

  3475      font-size: 1.2em;

  3476      visibility: collapse; /* makes space available others to use */

  3477      ...

  3478   }

  3479 </pre>

  3480 </div>

  3481 -->

  3483 <h2>Regions and Exclusions examples</h2>

  3485 <div class=example>

  3486 <img src=exclusion_ordering.png>

  3487 <pre>

  3488 article {

  3489   columns: 15em;

  3490 }

  3491 article::region(1-3) {

  3492   width: 15em;

  3493   height: 15em;

  3494 }

  3495 article::region(2-3) {

  3496   margin: 4em 0 0 -4em;

  3497 }

  3498 </pre>

  3499 </div>

  3501 <div class=example>

  3502 <img src=exclusion_ordering_z_order.png>

  3503 <pre>

  3504 article {

  3505   columns: 15em;

  3506 }

  3507 acticle::region(1-3) {

  3508   height: 15em;

  3509 }

  3510 acticle::region(2-3) {

  3511   margin: 4em 0 0 -4em;

  3512 }

  3513 acticle::region(2) {

  3514   z-index: 1;

  3515 }

  3516 </pre>

  3517 </div>

  3521 <h2>Selecting pages</h2>

  3523 <p>In CSS 2.0, <a href="http://www.w3.org/TR/CSS2/page.html#page-selectors">first, left and right pages</a> can be selected. This specification adds support for selecting a certain page generate by a certain element.

  3525 <p>The 'first-page' pseudo-element is similar to the 'first-letter'

  3526 and 'first-line' elements; it is used to apply styling to the part of

  3527 an element that ends up on the starting page for that element. If the

  3528 whole element appears on the starting page, 'first-page' applies to

  3529 the whole element. The following properties apply to :first-page

  3530 pseudo-elements: column properties, background properties, margin

  3531 properties, border properties, and padding properties. UAs may apply

  3532 other properties as well.

  3534 <div class=example>

  3536 <p>In this example, there will be one column on the starting page of

  3537 each chapter, while subsequent pages will have two columns:

  3539 <pre>

  3540   div.chapter { columns: 2 }

  3541   div.chapter::first-page { columns: 1 }

  3542 </pre>

  3544 </div>

  3546 <div class=example>

  3548 <p>In this example, padding is added on the left side on the starting

  3549 page of each chapter:

  3551 <pre>

  3552   div.chapter { break-before: left }

  3553   div.chapter::first-page { padding-left: 4em }

  3554 </pre>

  3556 </div>

  3558 <p>As a generalization of the 'first-page' pseudo-element, the

  3559 'page()' pseudo-selector allows other pages to be selected.

  3561 <div class=example>

  3562 <pre>

  3563 div.chapter::page(2)             /* second page of the element */

  3564 div.chapter::page(2n)            /* even pages of the element */

  3565 div.chapter::page(2-4)           /* select page 2, 3, and 4 */

  3566 div.chapter::page(2)::column(2)  /* second column, but only if it appears on the second page */

  3567 </pre>

  3568 </div>

  3571 <!--

  3572 nth page in the document, or the nth named page.

  3575 <div class=example>

  3576 <p>This example sets the background color of the second page in the document:

  3578 <pre>

  3579 @page :nth(2) {

  3580   background: green;

  3581 }

  3582 <pre>

  3583 </div>

  3585 <div class=example>

  3586 <p>This example sets the background color of the second page of all chapters in a document:

  3588 <pre>

  3589 @page chapter {

  3590   background: yellow;

  3591 }

  3592 @page chapter:nth(2) {

  3593   background: green;

  3594 }

  3595 div.chapter {

  3596   page: chapter;

  3597 }

  3598 <pre>

  3599 </div>

  3601 <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.

  3603 <div class="example">

  3604 <pre>

  3605 @page chapter:nth(2n+1) {

  3606   background: green;

  3607 }

  3608 </pre>

  3609 </div>

  3611 <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().

  3613 <div class="example">

  3614 <p>Even when the first line is commented out, the second page of all chapters in the document will be green.

  3616 <pre>

  3617 /* @page chapter { ... } */

  3619 @page chapter:nth(2) {

  3620   background: green;

  3621 }

  3623 div.chapter { page: chapter }

  3624 </pre>

  3625 </div>

  3628 <h3>Page pseudo-elements</h3>

  3630 <p class=issue>This may no longer be needed du to generic page selectors

  3631 -->

  3633 <h2>Selecting lines</h2>

  3635 <p>The 'first-line' pseudo-element selects the first formatted line of an element. The 'first-lines(n)' pseudo-element selects the first n formatted lines of an element.

  3637 <div class=example>

  3638 <img alt="sample rendering" src=regions.png>

  3640 <pre>

  3641   article { columns: 3 }

  3642   img, p.lead:first-lines(3) {

  3643     column-span: 2;

  3644   }

  3646   &lt;article>

  3647     &lt;img>

  3648     &lt;p class=lead>

  3649     &lt;p>...    &lt;p>...    &lt;p>...    &lt;p>...    &lt;p>...

  3650   &lt;/article>

  3651 </pre>

  3652 </div>

  3654 <h2>Conditional text</h2>

  3656 <div class=example>

  3657 <pre>

  3658   a:target-layout(attr(href url), same-page) { content: " on this page" }

  3659   a:target-layout(attr(href url), next-page) { content: " on the next page" }

  3660   a:target-layout(attr(href url), previous-page) { content: " on the previous page" }

  3661 </pre>

  3662 </div>

  3665 <h2>Conformance</h2>

  3667 <p>TBD

  3669 <h2>Appendix A: Default style sheet</h2>

  3671 <pre>

  3672 @page {

  3673   counter-reset: footnote;

  3674   @footnote {

  3675     counter-increment: footnote;

  3676     float: page bottom;

  3677     width: 100%;

  3678     height: auto;

  3679   }

  3680 }

  3682 ::footnote-call {

  3683   counter-increment: footnote;

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

  3685 }

  3686 ::footnote-marker {

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

  3688 }

  3691 h1 { bookmark-level: 1 }

  3692 h2 { bookmark-level: 2 }

  3693 h3 { bookmark-level: 3 }

  3694 h4 { bookmark-level: 4 }

  3695 h5 { bookmark-level: 5 }

  3696 h6 { bookmark-level: 6 }

  3697 </pre>

  3699 <p class=issue>Add grammar for functions defined in this spec.

  3701 <h2 class=no-num id=acknowledgments>Acknowledgments</h2>

  3703 <p>This document has been improved by Bert Bos, Michael Day, Melinda

  3704 Grant, David Baron, Markus Mielke, Steve Zilles, Ian Hickson, Elika

  3705 Etemad, Laurens Holst, Mike Bremford, Allan Sandfeld Jensen, Kelly

  3706 Miller, Werner Donn&eacute;, Tarquin (Mark) Wilton-Jones, Michel Fortin,

  3707 Christian Roth, Brady Duga, Del Merritt, Ladd Van Tol, Tab Atkins Jr.,

  3708 Jacob Grundtvig Refstrup,  James Elmore, Ian Tindale, Murakami Shinyu, Paul E.

  3709 Merrell, Philip Taylor, Brad Kemper, Peter Linss, Daniel Glazman, Tantek &#xC7;elik, Florian Rivoal, Alex Mogilevsky, Simon Sapin, Cameron McCormack, Liam R E Quin, Peter Moulder, Morten Stenshorne, Rune Lillesveen, Lars Erik Bolstad, Anton Prowse, Michel Onoff</p>

  3711 <h2 class=no-num id=references>References</h2>

  3713 <h3 class="no-num" id="normative-references">Normative references</h3>

  3714 <!--begin-normative-->

  3717 <p>[Here will be inserted the file "normative.inc"]</p>

  3718 <!--end-normative-->

  3721 <h3 class="no-num" id="other-references">Other references</h3>

  3722 <!--begin-informative-->

  3725 <p>[Here will be inserted the file "informative.inc"]</p>

  3726 <!--end-informative-->

  3729 <h2 class="no-num" id="index">Index</h2>

  3730 <!--index-->

  3732 <h2 class="no-num" id="property-index">Property index</h2>

  3733 <!-- properties -->

  3735 </body>

  3736 </html>

Mercurial > drafts / file revision

css3-gcpm/Overview.src.html@2fa0f76c392e

css3-gcpm/Overview.src.html