css-gcpm-3/2009-06-10.src.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>CSS3 module: Generated Content for Paged Media</title>

/*

http://lists.w3.org/Archives/Public/www-style/2009Mar/0065.html

   - RESOLVED: New syntax is image-resolution: normal | [ <dpi> || auto ]
     RATIONALE: Removes unused combinations and unnecessary comma

   - RESOLVED: Replace image-resolution: auto; with image-resolution: from-image;
     RATIONALE: 'auto' vs. 'normal' is hard to understand. ('normal' is 1 pixel == 1px)

   - RESOLVED: URLs inside functional notation where URL is expected should be able
               to take either url() or bare strings (like @import), preference for
               examples is bare strings.

   - Discussed removing 'background-image-resolution' in favor of various options.
     So far idea is that 'image-resolution' applies to all images and we will
     introduce functional notation in the future to allow setting resolution on a
     per-image basis.


http://lists.w3.org/Archives/Public/www-style/2009Jun/0186.html


targets in pdf documents?

aligning lines vertically?

  Another approach would be to extend the height of the block to be a
  multiple of the grid height, but then people would probably want to
  control where the extra space gets added.

should we deprecate @page {} in favor of @media .. { ?


*/

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


<style type="text/css">
.cols { width: 500px; height: 200px; background: #fff; position: relative; border: solid 10px blue; margin: 0.5em 2em 1em 0; font: bold 14px/19px Arial, sans-serif }
.cols p { padding: 3px; margin: 0 }
.col { position: absolute; left: 0px; top: 0; z-index: 6; width: 170px }
.gap { position: absolute; background: black; width: 5px; bottom: 0px; top: 0px; border: 10px solid red; border-top-width: 0; border-bottom-width: 0;  }
.rep { position: absolute; top: 45px; background: #333; height: 110px; width: 100px;  color: white; z-index: 4 }
div.example:before { width: 9em !important }
div.example { padding-top: 0.5em }

table.hyphenate { border-collapse: collapse }
table.hyphenate th { 
  text-align: left; white-space: nowrap; border: 1px solid black; padding: 0.2em }
table.hyphenate td { 
  border: 1px solid black; padding: 0.2em 0.2em 0.2em 1em; font-size: 0.8em }

table.border, table.border td, table.border th, table.border table { 
  border-collapse: collapse;
  border: thin solid black;
  padding: 0.2em;
  vertical-align: top;
}
table.border td + td { white-space: pre }
table.border table { padding: 0; border-collapse: separate; border: none; }
table.border table td { border: thin dotted black; padding: 0.2em; margin: 0.2em  }
table.border .comment { margin-top: 0; white-space: normal; font-style: italic }

div.out { background: #F55; padding: 0.2em 0.5em }
div.out div.example { background: #FED }
h1, h2, h3, h4, h5, h6 { background: transparent }
</style>


<body>

<div class="head">

<!--logo-->

<h1>CSS3 module: Generated Content for Paged Media</h1>

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

<dl>
<dt>This version:</dt>
<dd><a href="[VERSION]">https://www.w3.org/TR/[YEAR]/ED-css3-gcpm-[CDATE]</a></dd>

<dt>Latest version:

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

<dt>Previous version:

<dd><a href="https://www.w3.org/TR/2007/WD-css3-gcpm-20070205">
https://www.w3.org/TR/2007/WD-css3-gcpm-20070205</a>


<dt>Editor:
<dd>H&aring;kon Wium Lie, Opera Software, howcome@opera.com
</dl>

<!--begin-copyright-->
<p>[If you keep the &lt;!--comment-->, the copyright will be included
here automatically]</p>
<!--end-copyright-->

<hr title="Separator for header">
</div>


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

<p>This module describes features often used in printed publications.
Most of the specified functionality involves some sort of generated
content where content from the document is adorned, replicated, or
moved in the final presentation of the document. Along with two other
CSS3 modules &ndash; multi-column layout and paged media &ndash; this
module offers advanced functionality for presenting structured
documents on paged media. This specification only applies to the
'print' media type. 


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

<!--begin-status-->
<p>[If you keep the &lt;!--comment-->, the status boilerplate will be
included here automatically.]</p>
<!--end-status-->

<p>This WD describes functionality at various levels of maturity. Some
features have been part of other WDs in the past and have already been
implemented. These parts are fairly stable and unlikely to change
much. Other features are still at the sketching stage. In general,
features presented earlier in this draft are more mature that those
presented later in the draft.


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

<!--begin-toc-->
<p>[If you keep the &lt;!--comment--> the table of contents will be
included here automatically.]</p>
<!--end-toc-->

<h2 id=dependencies>Dependencies on other modules</h2>

<p>This CSS3 module has normative references to the following other CSS3
modules:</p>
<ul>
  <li>[[!CSS3LIST]]</li>
  <li>[[!CSS3VAL]]</li>
</ul>


<p>This CSS3 module has non-normative references to the following other CSS3
modules:</p>

<ul>
  <li>[[CSS3COL]]</li>
  <li>[[CSS3PAGE]]</li>
  <li>[[CSS3MULTICOL]]</li>
</ul>


<h2>Introduction</h2>

<p>(This section is not normative.)

<p>This specification describes features often used in printed
publications. Some of the proposed functionality (e.g., hyphenation,
the new list style types, and border segments) may also
used with other media types. However, this specification is only
concerned with the 'print' media type.

<h2>Running headers and footers</h2>

To aid navigation in printed material, headers and footers are often
printed in the page margins. [[CSS3PAGE]] describes how to place
headers and footers on a page, but not how to fetch headers and
footers from elements in the document. This specification
describes <dfn>named strings</dfn> which <em>copies</em> the text
(without style, structure, or replaced content) from one element for
later reuse in margin boxes.

<h3>Named strings</h3>

<!--
<p>Named strings are discussed both in the CSS3 Generated and Replaced
Content (section 9) and in CSS3 Paged Media (several places). For a
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>
1999:
-->

<p>Named strings can be thought of as variables that can hold one
string of text each. Named strings are created with the 'string-set'
property which copies a string of text into the named string. Only
text is copied; not style, structure, or replaced content. 

<div class="example">

<p>Consider this code:

<pre>
h1 { string-set: title content() }
</pre>

<p>Whenever an <code>h1</code> element is encountered,
its textual content is copied into a named string called
<em>title</em>. Its content can be retrieved in the 'content'
property:

<pre>
@page :right { @top-right { content: string(title) }}
</pre>

</div>


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

<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>string-set</dfn>
    <tr>
      <td><em>Value:</em>
      <td>[[ &lt;identifier> &lt;content-list>] [, &lt;identifier> &lt;content-list>]* ] | none 
    <tr>
      <td><em>Initial:</em>
      <td>none
    <tr>
      <td><em>Applies to:</em>
      <td>all elements
    <tr>
      <td><em>Inherited:</em>
      <td>no
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>all
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>as specified value
</table>

<p>The 'string-set' property accepts a comma-separated list of named
strings. Each named string is followed by a content list that
specifies which text to copy into the named string. Whenever an
element with value of 'string-set' different from ''none'' is
encountered, the named strings are assigned their respective value.

<p>For the 'string-set' property, &lt;content-list> expands to 
one or more of these values, in any order:

<dl>

<dt>&lt;string&gt;
<dd>a string, e.g. "foo"

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

<dt>&lt;content&gt;

<dd>the ''content()'' function returns the content of elements and pseudo-elements. The functional notation accepts an optional argument:
 
<dl>

<dt>''content()''

<dd>Without any arguments, the function returns 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.

<dt>''content(before)''

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

<dt>''content(after)''

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

<dt>''content(first-letter)''

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

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

</dl>
</dl>


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

<p>Named strings can only hold the result of one assignment; whenever
a new assignment is made to a named string, its old value is replaced.

<p class='note'>User agents, however, must be able to remember the
result of more than one assignment as the ''string()'' functional value
(described below) can refer to different assignments.

<p>The scope of a named string is the page of the element to which the
'string-set' property is attached and subsequent pages. 

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

<p>The 'string-set' property copies text as well as white-space into
the named string. 


<div class="example">
<pre>
h2 { 
  string-set: header "Chapter " counter(header) ": " content();
  counter-increment: header;
}
</pre>

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

</div>


<div class="example">
<p>This example results in the same value being assigned to
<em>header</em> as in the previous example. <!--note namespace-->

<pre>
h2:before { content: "Chapter " counter(header) } 
h2 { 
  string-set: header content(before) content();
  counter-increment: header } 
</pre> 
</div>

<div class="example">
<pre>
dt { string-set: index content(first-letter) }
</pre>
</div>

<div class="example">
<p>The content is copied regardless of other settings on the element. In this example, H1 elements are not displayed, but their content is copied into the named string.

<pre>
h1 { 
  display: none;
  string-set: header content();
}
</div>


<h4>Using named strings</h4>

<p>The content of named strings can be recalled by using the
''string()'' value on the 'content' property. The ''string()'' value has
one required argument, namely the name of the string.

<div class="example">
<pre>
@page { @top-center { content: string(header) }}
@page { @right-middle { content: string(index) }}
@page { @top-left { content: string(entry) }}
h1 { string-set: header "Chapter " counter(chapter) content() }
dt { string-set: index content(first-letter), entry content() }
</pre>
</div>

<p>If the value of the named string is changed by an element on a certain
page, the named string may have several values on that page. In order to specify
which of these values should be used, an optional argument is accepted
on the ''string()'' value. This argument can have one of four keywords:

<ul>
<li>''start'': the named string's entry value for that page is used. 
<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.
<li>''last'': the named string's exit value for that page is used
<li>''first-except'': similar to ''first'', except on the page where the value was assigned. On that page, the empty string is used.
</ul>

<div class="example">
<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. 
<pre>
@page { @top-left { content: string(term, first) }}
@page { @top-right { content: string(term, last) }}
@page { @top-center { content: string(index, first) }}
dt { string-set: index content(first-letter), term content() }
</pre>
</div>


<div class="example">
<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. 
<pre>
@page { @top-center { content: string(chapter, first-except) }}
h1 { string-set: chapter content() }
</pre>
</div>

<p>If the named string referred to in a 'string()' value has not been
assigned a value, the empty string is used.


<h2>Leaders</h2>

<p>A leader is a visual pattern that guides the eye.
Typically, leaders are used to visually connect an entry in a list
with a corresponding code. For example, there are often leaders between
titles and page numbers in a table of contents (TOC). Another example is the
phone book where there are leaders between a name and a telephone
number. 

<p>In CSS3, a leader is composed of series of glyphs through the
''leader()'' value on the 'content' property. The functional notation
accepts one value which describes the glyph pattern that make up the
leader. These values are allowed:

<ul>
<li>leader(dotted)
<li>leader(solid)
<li>leader(space)
<li>leader(&lt;string&gt;)
</ul>

<p>Using the keyword values is equivalent to setting a string value.
The table below shows the equivalents:

<table class=border>
<tr><th>Keyword<th>String<th>Unicode characters
<tr><td>leader(dotted)<td>leader('. ')<td>\002E \0020
<tr><td>leader(solid)<td>leader('_')<td>\005F
<tr><td>leader(space)<td>leader(' ')<td>\0020
</table>

<p class=issue>Can leaders also be composed of images or SVG?


<!--
<p class="issue">Some fonts may not have suitable glyphs for all
patterns. For example, in some Eastern languages, the alignment of the
shape within the glyph may not be optimal for creating leaders.
-->

<!--<p class="issue">Are the keywords really necessary?</p>-->

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

<p>In its simplest form, the 'content' property only takes one
''leader()'' value:

<div class="example">
<pre>
heading::after { content: leader(dotted) }
</pre>
</div>

<P>The leader string must be shown in full at least once and this
establishes the minimum length of the leader. To fill the available
space, the leader string is repeated as many times as possible in the
writing direction. At the end of the leader, a partial string pattern
may be shown.  White space in leaders is collapsed according to the
values on white-space properties. 

<!-- <span class="issue">Or, partial strings be avoided?</span> -->
<!--<p class="issue">Should other properties influence the appearance of leaders?-->

<p>These properties influence the appearance of leaders: all font
properties, text properties, 'letter-spacing', white-space properties,
background properties, and 'color'.

<p>User Agents should attempt to align corresponding glyphs from the  
leader pattern between consecutive lines.

<p>In a more complex example, the 'leader' value is combined with other
values on the 'content' property:

<div class="example">
<pre>
ul.toc a::after {
  content: leader(". . . ") target-counter(attr(href, url), page);
}
</pre>
</div>

<p>If the content connected by a leader end up on different lines, the
leader will be present on all lines. Each leader fragment honors the
minimum length of the leader.

<div class="example">
<p>Consider this code:

<pre>
&lt;style>
.name::after { content: leader(dotted) }
&lt;/style>
&lt;div class="entry">
&lt;span class="name">John Doe&lt;/span>
&lt;span class="number">123456789&lt;/span>
&lt;/div>
</pre>

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

<pre>
John Doe....
...123456789
</pre>
</div>

<p>To determine the length of the leaders, user agents must do the
following for each line:

<ol>
<li>Lay out the content with leaders of minimum lengths
<li>Determine the empty space left on the line. 

<li>Distribute the empty space between the leaders on the line. Glyphs
must not be shown partially. All leaders on the line should, to the
extent possible, have the same length. This may not always be possible
as the minimum leader length must be honored. 

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


<div class="example">
<p>Consider this code:

<pre>
&lt;style>
cite::before { content: leader('  ') }
&lt;/style>
&lt;blockquote>
  Bla great bla bla world bla bla
  empire bla bla color bla bla
  history bla bla forever.
    &lt;cite>John Johnson&lt;/cite>
&lt;/blockquote>
</pre>

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

<pre>
  Bla great bla bla world bla bla
  empire bla bla color bla bla
  history bla bla forever.   John 
  Johnson
</pre>

<p>However, this rendering is preferable:

<pre>
  Bla great bla bla world bla bla
  empire bla bla color bla bla
  history bla bla forever.
                     John Johnson
</pre>

<p>To indicate that <q>John Johnson</q> should be kept on one line,
this rule can be added to the style sheet:

<pre>
cite { text-wrap: suppress }
</pre>

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

<pre>
cite { white-space: nowrap }
</pre>

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

<pre>
  Bla great bla bla world bla bla empire
  bla bla color bla bla history bla bla 
  forever.                  John Johnson
</pre>


</div>


<h2>Cross-references</h2>

<p>It is common to refer to other parts of a document by
way of a section number (e.g., "See section 3.4.1"), a page number
(e.g., "See discussion on page 72"), or a string (e.g., "See the
chapter on Europe"). Being able to resolve these cross-references
automatically saves time and reduces the number of errors. 

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

<p>Numerical cross-references are generated by ''target-counter()''
and ''target-counters()'' values that fetch the value of a counter at
the target end of the link. These functions are similar to the
''counter()'' and ''counters()'' functions, except that they fetch
counter values from remote elements. ''target-counter()'' has two
required arguments: the url of the link, and the name of a counter.
''target-counters()'' has three required arguments: the url of the
link, the name of a counter, and a separator string. Both functions
accepts an optional argument at the end that describes which list
style type to use when presenting the resulting number; ''decimal''
being the default.

<div class="example">
<p>This style sheet specifies that a string like " (see page 72)"
is added after a link:

<pre>
a::after { content: "(see page " target-counter(attr(href, url), page, decimal) ")" }
</pre>
</div>


<div class="example">
<p>This style sheet specifies that a string like " (see section 1.3.5)" 
is added after a link:

<pre>
a::after { content: "(see section " target-counters(attr(href, url), section, ".", decimal) ")" }
</pre>
</div>


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

<p>Textual cross-references are generated by ''target-text()'' which
fetches the textual content from the target end of the link. Only text
is copied; not style, structure, or replaced content.
''target-text()'' has one required argument: the url of the link. An
optional second argument specifies exactly which content is fetched.
There are four possible values:

<dl>
<dt>''content()''

<dd>refers to 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.

<dt>''content(before)'' 

<dd>refers to the content of the element's ::before pseudo-element. This is the default value.

<dt>''content(after)'' 

<dd>refers to the content of the element's ::after pseudo-element

<dt>''content(first-letter)'' 

<dd>refers to the first letter of the textual content of the element, not including the content of its ::before and ::after pseudo-element.

</dl>


<div class="example">
<p>To generate this text

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

from this markup:

<pre>
&lt;p>See &lt;a href="#chx">this chapter&lt;/a> for an in-depth evaluation.
...
&lt;h2 id="chx">A better way&lt;/h2>
</pre>

this CSS code can be used:

<pre>
h2 { counter-increment: chapter }
a { content: "Chapter " target-counter(attr(href, url), chapter) 
   ' ("'  target-text(attr(href), content()) '") on page '
   target-counter(attr(href, url), page);
</pre>
</div>


<h2>Footnotes</h2>

<p>A footnote is a note typically placed at the bottom of a page that
comments on or cites a reference. References to footnotes are marked
with a <em>note-call</em> in the main text. The rendering of footnotes
is complex. As far as possible, footnotes try to reuse other parts of
CSS. However, due to the typographic traditions of footnotes, some new
functionality is required to support footnotes in CSS:

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

<ul>
<li>one new value on the 'float' property: ''footnote''
<li>one new page area: ''@footnote''
<li>two new pseudo-elements: ''::footnote-call'' and ''::footnote-marker''
<li>one predefined counter: ''footnote''
<li class=out>one new value on the 'content' property: ''target-pull()''
<li>border segments
<li>two new 'list-style-type' values: ''super-decimal'', and symbol(...)
</ul>


<div class=example>
<p>In its simplest form, making a footnote is simple. 

<pre>
&lt;style>
.footnote { float: footnote }
&lt;/style>

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

<p>In this example, the text <q>Most often.</q> will be placed in a
footnote. A note-call will be left behind in the main text and a
corresponding marker will be shown next to the footnote. Here is one
possible rendering:

<pre>
A sentence consists of words. &#xB9;

&#xB9; Most often.
</pre>

</div>

<div class=example>

<p>To support legacy browsers, it is often better to make a link to
the note rather than including the text inline. This example shows how
to fetch the content of a note and place it in a footnote.

<pre>
&lt;style>
@media print {
  .footnote { 
    float: footnote;
    content: target-pull(attr(href, url)) }
  .call { display: none }
}
&lt;/style>
...
&lt;p>A sentence consists of words&lt;a class="footnote" href="#words"> [3]&lt;/a>.
...
&lt;p id=words>&lt;span class="call">[3]&lt;/span> Most often.
</pre>

<p>When shown in a legacy browser, the content of the element will be
shown as a clickable link to an endnote. When printed according to
this specification, there will be a footnote:

<pre>
A sentence consists of words&#xB9;.

&#xB9; Most often.
</pre>
</div>

<div class=example>
Consider this markup:
<pre>
&lt;p>Sorry, &lt;span title="This is, of course, a lie.">we're closing for lunch&lt;/span>.
</pre>

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

<pre>
span[title]::after { 
  content: attr(title);
  float: footnote;
}
</pre>
</div>


<h3>Turning elements into footnotes</h3>

<p>An element with ''float: footnote'' (called a <em>footnote
element</em>) is moved to the <em>footnote area</em> and a <em>footnote-call</em>
pseudo-element is put in its original place.

<div class="example">
<pre>
span.footnote { 
  float: footnote;
}
</pre>
</div>

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

<p>Footnote elements are presented inside the <em>footnote area</em>,
but they inherit through their normal place in the structure of the
document.

<!--
<p class="issue">There has been a number of proposals on how to achieve this, including ''position: footnote'', ''flow: footnote'', and ''display: footnote''. The current thinking is that 'float' is suitable as the content still takes up space.
-->


<h3>The footnote area</h3>

<p>All elements with ''float: footnote'' are moved to the <em>footnote
area</em>. The footnote area is described by an @footnote-rule inside
the @page-rule. By default, the footnote area appears at the bottom of
the page, but it can be positioned using page floats (as described
below) and 'position: fixed'.


<div class="example">

<pre>
@page {
  @footnote { 
    float: bottom page;
    width: 100%;
  }
}
</pre>
</div>


<!--<p>An element with 'float: footnote' inherits from its parent, not from @footnote.-->

<!--
<p>The footnote area does not have to be placed at the bottom of the
page. It can be moved to anywhere on the page using the 'float' property or
''position: fixed''. 
-->


<div class="example">
<p>These rules place the footnote area on the left side of the page:

<pre>
@page {
  @footnote { 
    position: fixed;
    top: 10em;
    left: 3em;
    width: 5em;
  }
}
</pre>
</div>

<div class="example issue">
<p>How do we place the footnote area in a certain column? Perhaps:

<pre>
@page {
  @footnote { 
    float: bottom left multicol;
    width: 1gr;
  }
}
</pre>

</div>

<!--
<p class=issue>How should one indicate that the footnote area should
span columns? Typically, footnotes are put inside columns rather than
spanning the full width, but there could be exceptions.
-->

<p>The content of the footnote area is considered to come before other
content which may compete for the same space on the same page.

<div class="example">
<pre>
@page { @footnote { float: bottom page}}
div.figure { float: bottom page }
</pre>

<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. 
</div>


<p>Potentially, every page has a footnote area. If there
are no footnotes on the page, the footnote area will not take up any
space. If there are footnotes on a page, the layout of the footnote
area will be determined by the properties/values set on it, and by the
footnote elements inside it.

<p>These properties apply to the footnote area: 'content', 'border',
'padding', 'margin', 'height', 'width', 'max-height', 'max-width',
'min-height', 'min-width', the background properties. 

<!--
<p class="note">In published books, it is customary for the footnote
area to be limited to less than half the height of the page area. Long
footnotes may need more space, and the customary solution is for
footnotes to span several pages. To achieve this, the 'max-height'
property should be used. However, footnotes spanning several pages is
an advanced feature which is not a conformance requirement for this
specification.
-->


<div class="example">
<p>This example uses some of the applicable properties on @footnote:

<pre>
@footnote {
  margin-top: 0.5em;
  border-top: thin solid black;
  border-length: 4em; /* border-parts: 4em */
  padding-top: 0.5em;
}
</pre>

<p>The result of this code is that a footnote area will have
some margin above the border. Unlike normal borders, only part of the
border is visible due to the 'border-length' property. Underneath the
border, there will be padding. 

</div>


<!--
<p class="issue">Footnotes in tables and floats may be problematic. In
some cases, the author may want the footnote to go at the end of the
table or float instead of the bottom of the page.
-->

<h3>Footnote calls</h3>

<p>When an element is moved to the footnote area,
a <em>footnote-call</em> is left behind. By default, User Agents must
behave as if this code is part of the default style sheet:

<pre>
::footnote-call {
  content: counter(footnote, super-decimal);
}
</pre>

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

<!--
<div class="example">

The content and style of the footnote-call is set on the
''footnote-call'' pseudo-element.

</div>
-->
<!--
<p class="issue">Should any white space characters between the
note-call and the preceding content be removed?
-->
<!--
<div class="example">
The goal is to achieve this result:

<pre>
  ... some notion¹
</pre>

<p>rather than this:

<pre>
  ... some notion ¹
</pre>
</div>
-->


<h3>Footnote markers</h3>

<p>A ::footnote-marker pseudo-element is added to each footnote
element. User agents must, by default, show the "footnote" counter in
the footnote-marker.

<div class="example">
<p>User Agents may display footnote-calls and footnote-markers this way by default:

<pre>
::footnote-call {
  content: counter(footnote, super-decimal);
}
::footnote-marker {
  content: counter(footnote, super-decimal);
}
</pre>
</div>

<p>Marker elements are discussed in more detail in the CSS Lists
module [[!CSS3LIST]]. One suggested change to that module is to honor
the value of 'list-style-position' on the ::footnote-marker
pseudo-element itself rather than the corresponding list-item element.
Further, one clarification to the horizontal placement of the marker
is suggested: the <em>margin</em> box of the marker box is
horizontally aligned with the start of the line box.


<h3>Counting footnotes</h3>

<p>The "footnote" counter is automatically incremented each time a
footnote is generated. That is, the "footnote" counter is incremented
by one each time an element with ''float: footnote'' appears.

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

<div class="example">
This code resets the "footnote" counter on a per-page page basis:
<pre>
@page { counter-reset: footnote }
</pre>
</div>

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

<!--
<p>The 'counter-increment' property can be set in the @footnote rule.
Each time an element with 'float: footnote' is found, the corresponding
counter is incremented.

<div class="example">
<p>This rule is part of the default style sheet:

<pre>
@page {
  @footnote {
    counter-increment: footnote;
  }
}
</pre>

As a result, the "footnote" counter is incremented each time a footnote is generated.
</div>
-->


<h3>Laying out footnotes</h3>

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

<ol>

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

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

<!--<span class="issue">(What order is that: the document order or the visual order?
    Probably the document order, the same order as the footnote counter
    values, although the visual order of the footnote calls may be
    different, due to their occurrence in positioned and floating
    elements.)</span>-->

<li>The footnote area is limited in size by 'max-height', unless the
    page contains only footnotes. (E.g., if at the end of the document
    there are still footnotes unprinted, the User Agent can use the whole page to
    display footnotes.)

<li>If there is a footnote call on a page, the footnote area may not
    be empty, unless its 'max-height' is too small.

</ol>


<h3>Footnote magic</h3>

<p>When rendering footnotes, User Agents may apply certain heuristics
to improve the presentation. For example, the space between a
footnote-call and surrounding text may be adjusted. Another example is
the height of the footnote area; it may be heuristically constrained
to limit the area that is used for footnotes.

<p>The "footnote" counter represents another kind of magic; it is
automatically created and incremented each time an element is turned
into a footnote, and the footnotes and footnote-calls are
automatically labeled with the value of the footnote counter.


<!--
<h2>Sidenotes</h2>

<p>Sidenotes are supported the same way as footnotes; only the name
and the settings in the default style sheet differentiates the two.

<p class=note>The motivation for having another page-based area into
which content can be floated is that footnotes and sidenotes are
often used in the same document. 

<div class="example">
<p>This example moves images to the outside margin of pages:

<pre>
@page :left { 
  margin-left: 10em;
  @sidenote { position: fixed; left: -8em; width: 6em }
}
@page :right { 
  margin-right: 10em;
  @sidenote { position: fixed; right: -8em; width: 6em }
}
img { float: sidenote }
</pre>
</div>

<p class=note>The reason for having both a footnote and a sidenote area
on every page is that some documents use both.

<p class=issue>Should there be a mechanism to create new areas like
footnote/sidenote, or are two "magic" areas enough?
-->

<h2>Border parts</h2>

<p>CSS borders traditionally cover an entire border edge. Sometimes,
however, it can be useful to hide some parts of the border. 


<h3>The 'border-parts' properties</h3>

<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>border-parts</dfn>, <dfn>border-parts-top</dfn>, <dfn>border-parts-right</dfn>, <dfn>border-parts-bottom</dfn>, <dfn>border-parts-left</dfn>
    <tr>
      <td><em>Value:</em>
      <td>normal | [ &lt;length&gt; | &lt;percentage&gt; | &lt;fraction&gt; | repeat() ]+
    <tr>
      <td><em>Initial:</em>
      <td>normal
    <tr>
      <td><em>Applies to:</em>
      <td>all elements
    <tr>
      <td><em>Inherited:</em>
      <td>no
    <tr>
      <td><em>Percentages:</em>
      <td>refer to width of element <span class="issue">height for vertical borders?</span>
    <tr>
      <td><em>Media:</em>
      <td>visual
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>''normal'', or a list consisting of absolute lengths, or percentages as specified
</table>

<p>These properties split their respective borders into parts along
the border edge. The first part is visible, the second is invisible,
the third part is visible, etc. Parts can be specified with lengths,
percentages, fractions (expressed by the 'fr' unit, as per
[[CSS3GRID]] or its <a href="https://drafts.csswg.org/css3-grid/">editor's
edition</a>), and the 'repeat()' function. The 'normal' value means
that the border is not split, but shown normally.

<p>'border-parts' is a shorthand property for the four individual properties.

<p>If the listed parts are shorter than the border, any remaining
border is split proportionally between the specified fractions. If
there are no fractions, the behavior is as if ''1fr'' had been
specified at the end of the list.

<p>If the listed parts are longer than the border, the specified parts
will be shown in full until the end of the border. In this case, all
fractions will be zero.

<p>For horizontal borders, parts are listed from left to right. For
vertical borders, parts are listed from top to bottom.

<p>The ''repeat()'' function specifies a "repeat pattern" that is
repeated as many times as possible. Only one ''repeat()'' function is
allowed in a value. The repeat pattern must contain at least one
length or percentage, otherwise the declaration must be ignored. The
exact border parts are determined by laying out the specified border
parts with all fractions initially set to zero. The border parts
specified before and after the ''repeat()'' function are laid out
first. Thereafter, the repeat pattern is inserted between them at
least once, and as many times as possible without making the sum of
border parts longer than the border length. Any remaining border is
split proportionally between the fractions specified.

<p class=issue>The value of the repeat() function is disputed. 

<p>The exact border parts are determined by laying out the specified border
parts with all fractions initially set to zero. Any remaining border is
split proportionally between the fractions specified.


<div class="example">

<pre>
border-parts: 10px 1fr 10px;
</pre>


<div style="position: relative; width: 250px; height: 150px; background: white;">
<div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
<div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 170px"></div>
<div style="position: absolute; background: white; left: -5px; top: 15px; height: 70px; width: 210px"></div>
</div>

</div>
</div>


<div class="example">

<pre>
border-parts-top: 10px 1fr 10px;
border-parts-bottom: 10px 1fr 10px;
border-parts-right: 5px 1fr 5px;
border-parts-left: 5px 1fr 5px;
</pre>


<div style="position: relative; width: 250px; height: 150px; background: white;">
<div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
<div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 170px"></div>
<div style="position: absolute; background: white; left: -5px; top: 5px; height: 90px; width: 210px"></div>
</div>

</div>
</div>


<div class="example">

<p>By making the first part have zero length, the inverse border of
the previous example can easily be created:

<pre>
border-parts-top: 0 10px 1fr 10px;
border-parts-bottom: 0 10px 1fr 10px;
border-parts-right: 0 5px 1fr 5px;
border-parts-left: 0 5px 1fr 5px;
</pre>


<div style="position: relative; width: 250px; height: 150px; background: white;">
<div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
<div style="position: absolute; background: white; left: -5px; top: -5px; height: 10px; width: 15px"></div>
<div style="position: absolute; background: white; right: -5px; top: -5px; height: 10px; width: 15px"></div>
<div style="position: absolute; background: white; left: -5px; top: 95px; height: 10px; width: 15px"></div>
<div style="position: absolute; background: white; right: -5px; top: 95px; height: 10px; width: 15px"></div>

</div>

</div>
</div>


<div class="example">

<pre>
border: thin solid black;
border-parts: 0 1fr; /* hide borders */
border-parts-top: 10px 1fr 10px; /* make certain borders visible */
border-parts-bottom: 10px 1fr 10px;
</pre>


<div style="position: relative; width: 250px; height: 150px; background: white;">
<div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
<div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 170px"></div>
<div style="position: absolute; background: white; left: -5px; top: 0px; height: 100px; width: 210px"></div>
</div>
</div>


</div>


<div class="example">

<pre>
border-top: thin solid black;
border-bottom: thin solid black;
border-parts-top: 10px;
border-parts-bottom: 10px;
</pre>


<div style="position: relative; width: 250px; height: 150px; background: white;">
<div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
<div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 200px"></div>
<div style="position: absolute; background: white; left: -5px; top: 0px; height: 100px; width: 210px"></div>
</div>

</div>
</div>


<div class="example">

<pre>
border-top: thin solid black;
border-parts: 10px;
</pre>


<div style="position: relative; width: 250px; height: 150px; background: white;">
<div style="border: 2px solid black; width: 200px; height: 100px; position: absolute; top: 20px; left: 20px">
<div style="position: absolute; background: white; left: 15px; top: -5px; height: 110px; width: 200px"></div>
<div style="position: absolute; background: white; left: -5px; top: 0px; height: 110px; width: 210px"></div>
</div>

</div>
</div>


<div class="example">

<p>This rendering:

<div style="background: white; padding: 0.2em 0.5em">
<pre style="margin-left: 0">
A sentence consists of words&#xB9;.
</pre>
<div style="width: 3em; height: 2px; background: black"></div>
<pre style="margin-left: 0">
&#xB9; Most often.
</pre>
</div>

can be achieved with this style sheet:

<pre>
@footnote {
  border-top: thin solid black;
  border-parts: 4em;
}
</pre>

</div>


<div class="example">

<pre>
border: 2px solid black;
border-top-parts: repeat(10px 10px);
</pre>

<p>In this example, the repeat pattern is shown five times and there is, by coincidence,  no remaining border.

<div style="position: relative; width: 100px; background: white; padding: 20px">

<div style="border: 2px solid black; height: 40px"></div>

<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 30px"></div>
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 50px"></div>
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 70px"></div>
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 90px"></div>
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 110px"></div>


</div>
</div>


<div class="example">

<pre>
border: 2px solid black;
border-top-parts: repeat(10px 10px);
</pre>

<p>In this example, the repeat pattern is shown five times. The box in this example is slightly wider than the box in the previous example. The remaining border is taken up by a fraction, as if this code had been specified:

<pre>
border: 2px solid black;
border-top-parts: repeat(10px 10px) 1fr;
</pre>


<div style="position: relative; width: 105px; background: white; padding: 20px">

<div style="border: 2px solid black; height: 40px"></div>

<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 30px"></div>
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 50px"></div>
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 70px"></div>
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 90px"></div>
<div style="position: absolute; background: white; width: 10px; height: 2px; top: 20px; left: 110px"></div>

<div style="position: absolute; background: red; width: 5px; height: 2px; top: 20px; left: 120px"></div>


</div>

<p>The fragment is shown in red for illustrative purposes; it should be shown in black by a compliant UA.

</div>


<div class="example">

<pre>
border: 4px solid black;
border-top-parts: 40px 20px 0 1fr repeat(20px 20px) 0 1fr 40px;
</pre>

<p>In this example, there will be a visible 40px border part on each end of the top border. Inside the 40px border parts, there will be an invisible border part of at least 20px. Inside these invisible border parts, there will be visible border parts, each 20px long with 20px invisible border parts between them.
<div style="position: relative; width: 192px; background: white; padding: 40px">

<div style="border: 4px solid black; height: 40px"></div>

<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 80px"></div>
<div style="position: absolute; background: red; width: 6px; height: 4px; top: 40px; left: 100px"></div>
<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 126px"></div>
<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 166px"></div>
<div style="position: absolute; background: red; width: 6px; height: 4px; top: 40px; left: 186px"></div>

</div>

<p>The fragments are shown in red for illustrative purposes; they should not be visible in compliant UAs.

</div>


<div class="example">

<pre>
border: 4px solid black;
border-top-parts: 40px 20px 0 1fr 20px 20px 0 1fr 40px;
</pre>

<p>In this example, there will be a visible 40px border part on each end of the top border. Inside the 40px border parts, there will be an invisible border part of at least 20px. Inside these invisible border parts, there will be visible border parts, each 20px long with 20px invisible border parts between them.
<div style="position: relative; width: 192px; background: white; padding: 40px">

<div style="border: 4px solid black; height: 40px"></div>

<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 80px"></div>
<div style="position: absolute; background: red; width: 6px; height: 4px; top: 40px; left: 100px"></div>
<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 126px"></div>
<div style="position: absolute; background: white; width: 20px; height: 4px; top: 40px; left: 166px"></div>
<div style="position: absolute; background: red; width: 6px; height: 4px; top: 40px; left: 186px"></div>

</div>

<p>The fragments are shown in red for illustrative purposes; they should not be visible in compliant UAs.

</div>


<div class="example">

<pre>
border: 4px solid black;
border-parts-top: 3fr 10px 2fr 10px 1fr 10px 10px 10px 1fr 10px 2fr 10px 3fr;
</pre>

<p>All but one of the visible border parts are represented as fractions in this example. The length of these border parts will change when the width of the element changes. Here is one rendering where 1fr ends up being 10px:


<div style="position: relative; width: 190px; background: white; padding: 40px">
<div style="border: 4px solid black; border-top: none; height: 40px"></div>
<div style="position: absolute; background: red; width: 30px; height: 4px; top: 40px; left: 40px"></div>
<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 70px"></div>
<div style="position: absolute; background: red; width: 20px; height: 4px; top: 40px; left: 80px"></div>
<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 100px"></div>
<div style="position: absolute; background: red; width: 10px; height: 4px; top: 40px; left: 110px"></div>
<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 120px"></div>
<div style="position: absolute; background: black; width: 10px; height: 4px; top: 40px; left: 130px"></div>
<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 140px"></div>
<div style="position: absolute; background: red; width: 10px; height: 4px; top: 40px; left: 150px"></div>
<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 160px"></div>
<div style="position: absolute; background: red; width: 20px; height: 4px; top: 40px; left: 170px"></div>
<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 190px"></div>
<div style="position: absolute; background: red; width: 30px; height: 4px; top: 40px; left: 200px"></div>
</div>

<p>Here is another rendering where 1fr ends up being 30px:

<div style="position: relative; width: 440px; background: white; padding: 40px">
<div style="border: 4px solid black; border-top: none; height: 40px"></div>
<div style="position: absolute; background: red; width: 90px; height: 4px; top: 40px; left: 40px"></div>
<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 130px"></div>
<div style="position: absolute; background: red; width: 60px; height: 4px; top: 40px; left: 140px"></div>
<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 200px"></div>
<div style="position: absolute; background: red; width: 30px; height: 4px; top: 40px; left: 210px"></div>
<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 240px"></div>
<div style="position: absolute; background: black; width: 10px; height: 4px; top: 40px; left: 250px"></div>
<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 260px"></div>
<div style="position: absolute; background: red; width: 30px; height: 4px; top: 40px; left: 270px"></div>
<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 300px"></div>
<div style="position: absolute; background: red; width: 60px; height: 4px; top: 40px; left: 310px"></div>
<div style="position: absolute; background: white; width: 10px; height: 4px; top: 40px; left: 370px"></div>
<div style="position: absolute; background: red; width: 90px; height: 4px; top: 40px; left: 390px"></div>

</div>

<p>The fragments are shown in red for illustrative purposes; they should be black in compliant UAs.

</div>


<!--

<div class="example">

<p>Consider this code:

<pre>
border-parts-top: 10px 5px repeat(5px 5px) 10px;
<pre>

<p>If top border of an element is 44px long, the parts will be as follows: 

<table>
<tr><td>specified<td>absolute<td>visible?
<tr><td>10px<td>10px<td>yes
<tr><td>1fr<td>2px<td>no
<tr><td>5px<td>5px<td>yes
<tr><td>5px<td>5px<td>no
<tr><td>0<td>0px<td>no
<tr><td>1fr<td>2px<td>no
<tr><td>10px<td>10px<td>yes
</table>

</div>

-->


<h2>Hyphenation</h2>

<!--
<table class=hyphenate>
<tr><th>CSS<th>XSL<th>DSSSL
<tr><th>hyphens<th>hyphenate<th>hyphenate

<tr><td>none<td>false
<tr><td>manual<td>
<tr><td>auto<td>true

<tr><th>hyphenate-resource<th>country, language, script<th>?
<tr><td>auto
<tr><td>&lt;uri>

<tr><th>hyphenate-before<th>hyphenation-remain-character-count<th>hyphenation-remain-char-count
<tr><td>auto<td>
<tr><td>&lt;integer><td>&lt;integer>

<tr><th>hyphenate-after<th>hyphenation-push-character-count<th>hyphenation-push-char-count
<tr><td>auto<td>
<tr><td>&lt;integer><td>&lt;integer>

<tr><th>hyphenate-lines<th>hyphenation-ladder-count<th>hyphenation-ladder-count
<tr><td>no-limit<td>no-limit
<tr><td>&lt;integer>

<tr><th>hyphenate-character<th>hyphenation-character<th>hyphenation-char
<tr><td>&lt;string><td>&lt;character>
<tr><td>auto

<tr><th><th>hyphenation-keep<th>hyphenation-keep
<tr><td><td>auto
<tr><td><td>column
<tr><td><td>page
<tr><th><th><th>hyphenation-exceptions
<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.


</table>

-->


<h3>Hyphenate properties</h3>

<p>This specification defines six new properties to describe hyphenation.

<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>hyphens</dfn>
    <tr>
      <td><em>Value:</em>
      <td>none | manual | auto
    <tr>
      <td><em>Initial:</em>
      <td>manual
    <tr>
      <td><em>Applies to:</em>
      <td>all elements
    <tr>
      <td><em>Inherited:</em>
      <td>yes
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>visual
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>specified value
</table>

<p>Values are:

<dl>
<dt>none

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

<dt>manual

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

<div class="example">
<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.
</div>

<div class="example">
<p>In HTML, &amp;shy; represents the soft hyphen character which suggests a line break opportunity.
<pre>
ex&amp;shy;ample.
</pre>
</div>


<dt>auto
<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. 

</dl>

<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>hyphenate-resource</dfn>
    <tr>
      <td><em>Value:</em>
      <td>none | &lt;uri&gt; [, &lt;uri&gt; ]*
    <tr>
      <td><em>Initial:</em>
      <td>none
    <tr>
      <td><em>Applies to:</em>
      <td>all elements
    <tr>
      <td><em>Inherited:</em>
      <td>yes
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>visual
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>specified value
</table>

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

<div class="example">

<p>Often, finding the right hyphenate resource is based on knowing the
language of the text. The <code>lang</code> attribute is recommended
for encoding the language, and the corresponding selector is used in
this example:

<pre>
:lang(dk) { hyphenate-resource: url("hyph_da_DK.dic"), url("hyph_da_NO.dic") }
</pre>

</div>


<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>hyphenate-before</dfn>
    <tr>
      <td><em>Value:</em>
      <td>&lt;integer> | auto
    <tr>
      <td><em>Initial:</em>
      <td>auto
    <tr>
      <td><em>Applies to:</em>
      <td>all elements
    <tr>
      <td><em>Inherited:</em>
      <td>yes
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>visual
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>specified value
</table>

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

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


<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>hyphenate-after</dfn>
    <tr>
      <td><em>Value:</em>
      <td>&lt;integer> | auto
    <tr>
      <td><em>Initial:</em>
      <td>auto
    <tr>
      <td><em>Applies to:</em>
      <td>all elements
    <tr>
      <td><em>Inherited:</em>
      <td>yes
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>visual
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>specified value
</table>

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

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


<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>hyphenate-lines</dfn>
    <tr>
      <td><em>Value:</em>
      <td>no-limit | &lt;integer>
    <tr>
      <td><em>Initial:</em>
      <td>no-limit
    <tr>
      <td><em>Applies to:</em>
      <td>all elements
    <tr>
      <td><em>Inherited:</em>
      <td>yes
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>visual
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>specified value
</table>

<p>This property indicates the maximum number of successive hyphenated
lines in an element. In some cases, user agents may not be able to
honor the specified value. The ''no-limit'' value means that there is
no limit.

<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>hyphenate-character</dfn>
    <tr>
      <td><em>Value:</em>
      <td>auto | &lt;string>
    <tr>
      <td><em>Initial:</em>
      <td>auto
    <tr>
      <td><em>Applies to:</em>
      <td>all elements
    <tr>
      <td><em>Inherited:</em>
      <td>yes
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>visual
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>specified value
</table>

<p>This property specifies a string that is shown when a
hyphenate-break occurs. The 'auto' value means that the User Agent
should find an appropriate value. 

<!--
<p class=issue>Which character is it, "minus hyphen" or U+2010?
-->

<div class="example">
<p>In Latin scripts, the hyphen character (U+2010) is often used to
indicate that a word has been split. Normally, it will not be
necessary to set it explicitly. However, this can easily be done:

<pre>
article { hyphenate-character: "\2010" }
</pre>
</div>

<!--
<p class=issue>XSL uses a different list of <a href="https://www.w3.org/TR/2006/CR-xsl11-20060220/#common-hyphenation-properties">properties</a>. Reuse of these properties has been considered.
-->

<!--
<h2>New counter styles</h2>

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

<p>A new list-style-type, ''super-decimal'', is introduced to better support
footnotes. Small, super-script footnote calls are common; the first
three numbers have code points in Latin-1 and some font families have
even more super-script glyphs. The ''super-decimal'' keyword allow
these font resources to be used and replaces the use of 'font-size'
and 'vertical-align' (which prohibit the use of special-purpose
glyphs).

<div class="example">
This example specifies that footnote markers should consist of
super-script decimal numbers.

<pre>
::footnote-marker { content: counter(footnote, super-decimal) }
</pre>
</div>

<p>Using super-script glyphs is optional; UAs may also scale and position
other glyphs for use in footnote calls.

<p class=issue>There are three things this could mean: (a) this implies the use of a font feature if the font has that feature (b) this implies that the counter is translated into the unicode characters (c) the issue of accessing font features should be 
-->


<h3>Named counter styles</h3>

<p>CSS defines a number of predefined list style types for the
'list-style-type' property and other places where a list-style-type
value is accepted. Some styles repeat the same glyph (e.g., ''disc''
and ''circle'') while others have lists of glyphs (e.g., ''decimal'',
and ''lower-roman''). To increase the range of lists that can be
achieved through CSS without adding many new keywords,
@counter-style rules are introduced. By using @counter-style, a style
sheet can name new counter styles.

<p>An @counter-style rule consists of the keyword ''@counter-style'',
followed by the name of the symbol counter style, followed by a
space-separated list of strings. 

<div class="example">

<pre>
@counter-style daggers "*" "\2020" "\2021" "\A7" "#";
ol { list-style-type: daggers }
</pre>

</div>


<div class="example">

<pre>
@counter-style ordinal "1st" "2nd" "3rd" "4th";
h1:before { content: counter(chapter, ordinal) " chapter" }
</pre>

</div>

<p>The first string in the list represents number one, the second
string represents number two, etc. Outside the range of specified values, the rendering
will be as if the ''decimal'' list style type had been specified.

<div class="example">
<p>Consider this example:

<pre>
@counter-style ordinal "1st" "2nd" "3rd" "4th";
ordered-list { counter-reset: items -1 }
list-item { counter-increment: items 2 }
</pre>

<p>For a series of <tt>list-item</tt> elements inside an
<tt>ordered-list</tt> element, the value of the <tt>items</tt> counter
will be -1, 1, 3, 5, 7 etc. Given that the <tt>ordinal</tt> counter
style only defines a counter style for 1, 2, 3, and 4, the list will
be numbered "-1", "1st", "3rd", "5", "7" etc.

</div>

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

<div class="example">
<pre>
@import url(http://www.example.com/armenian-counters.css); /* defines 'armenian' */
ol { list-style-type: armenian }
</pre>
</div>

<!--
<div class="issue">Should we allow images in addition to strings? 
<pre>
  @counter-style graphic url("1.gif") url("2.gif") url("3.gif")
</pre>
</div>
-->

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

<p>A new list-style-type with a functional notation is introduced to
avoid the indirection of having to name counter styles. The
''symbols()'' value takes a comma-separated list of strings as
arguments.


<div class="example">
<pre>
::footnote-call {
    content: counter(footnote, symbols('*', '+', '!'))
}
</pre>
</div>

<p>Outside the range of specified values, the rendering will be as if
the ''decimal'' list style type had been specified.

<div class="example">

This code:

<pre>
ol { list-style: symbols("*", "\2020", "\2021", "\A7", "#") }
</pre>

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

</div>

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

<!--
<h2>Page counters</h2>

<p>Printed publications often show page numbers to indicate the
sequence of pages. Also, it is common to show the total number of
pages in the document. For example, "page 3 of 5" may be shown at the
bottom of a page.

<p>This specification describes two counters that can be used to
indicate page numbers: ''page'' and ''pages''.

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

<p>The ''page'' counter is predefined to start with a value of zero,
and to be automatically incremented by one before every page. That is,
UAs must behave as if this code fragment is part of the default style
sheet:

<pre>
@page {
  counter-increment: page 1;
}
</pre>

<p>The ''page'' counter can be reset and incremented in style sheets
just like other counters. On pages where the counter is incremented by
the style sheet in the page context, the automatic incrementation does
not take place.

<div class="example">

<pre>
@page {
  @bottom-center {
     content: counter(page);
  }
}

@page introduction {
  counter-reset: page;
}

@page :right {
  counter-increment: page 2;
}
</pre>
</div>


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

<p>The ''pages'' counter is predefined to have the total number of
pages in the document. In order to find the value of this counter, the
UA will have to paginate the document. This counter is a constant and
it cannot be set or incremented by a style sheet.

<div class=example>
<pre>
@page {
  @bottom-center {
     content: "Page " counter(page) " of " counter(pages) " pages in total";
  }
}
</pre>
</div>

<p>UAs that are not able to paginate the document should display a
question mark or another symbol that indicates uncertainty.

<div class=example>

<p>This code has no effect on the ''pages'' counter which cannot be
changed by the style sheet. However, the ''page'' counter reset normally.

<pre>
@page :right {
  counter-reset: pages page;
}
</pre>
</div>

-->


<h2>Image resolution</h2>

<p>Image resolution, as the term is used in this document, means
pixels per physical length, e.g., pixels per inch. Some image formats
can record information about the resolution of images. This
information can be helpful when determining the actual size of the
image in the formatting process. However, the information can also be
wrong, in which case it should be ignored. The 'image-resolution'
property is introduced to determine the correct resolution of images.

<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>image-resolution</dfn>
    <tr>
      <td><em>Value:</em>
    <td>normal | [ from-image || &lt;dpi> ]
    <tr>
      <td><em>Initial:</em>
      <td>normal
    <tr>
      <td><em>Applies to:</em>
      <td>replaced elements and background images
    <tr>
      <td><em>Inherited:</em>
      <td>yes
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>visual
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>a &lt;dpi> value
</table>

<p>This property accepts either a single value, or a comma-separated
list of two values. The values are:

<dl>
<dt>normal

<dd>The resolution of the image is unknown, and UAs must not use the
resolution found in the image. Instead, the image resolution will be
found by making image pixels equivalent to CSS pixels.

<dt>from-image

<dd>The UA must look for the resolution in the image itself.

<dt>&lt;dpi>

<dd>The value consists of a number with a 'dpi' unit identifier. The UA must use the specified resolution.

</dl>

<p>If the 'from-image' keyword is combined with a dpi value, the resolution of the image is used if it can be found. Otherwise, the specified resolution is used. 

<div class="example">
<p>This rule specifies that the UA should use the image resolution found in the image itself.
<pre>
img { image-resolution: from-image }
</pre>
</div>

<div class="example">
<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.
<pre>
img { image-resolution: from-image 300dpi }
img { image-resolution: 300dpi from-image }
</pre>
</div>

<div class="example">
<p>Using this rule, the image resolution is set to 300dpi and the resolution in the image, if any, is ignored. 
<pre>
img { image-resolution: 300dpi }
</pre>
</div>


<!--

<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>image-resolution</dfn>
    <tr>
      <td><em>Value:</em>
    <td>normal | auto | &lt;dpi> [ , normal | &lt;dpi> ]?
    <tr>
      <td><em>Initial:</em>
      <td>normal
    <tr>
      <td><em>Applies to:</em>
      <td>replaced elements
    <tr>
      <td><em>Inherited:</em>
      <td>yes
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>visual
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>as specified value <span class=issue>(or, should it be only one value?)</span>
</table>

<p>This property accepts either a single value, or a comma-separated
list of two values. The values are:

<dl>
<dt>normal

<dd>The resolution of the image is unknown, and UAs should not use the
resolution found in the image. Instead, the image resolution will be
found by making image pixels equivalent to CSS pixels.

<dt>auto

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

<dt>&lt;dpi>

<dd>The value consists of a number with a 'dpi' unit identifier. The
UA should use the specified resolution.

</dl>

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

<div class="example">
<p>This rule specifies that the UA should use the image resolution found in the image itself.
<pre>
img { image-resolution: auto }
</pre>
</div>

<div class="example">
<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.
<pre>
img { image-resolution: auto, 300dpi }
</pre>
</div>

<div class="example">
<p>Using this rule, the image resolution is set to 300dpi and the resolution in the image, if any, is ignored. 
<pre>
img { image-resolution: 300dpi }
</pre>
</div>


-->


<!--

<div class="issue">
<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., 
<pre>
background-image: url(image.png, width, height, resolution);
background-image: image-url(image.png, width, height, resolution);
background-image: image(url(image.png), width, height, resolution);
</pre>
</div>


<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>background-image-resolution</dfn>
    <tr>
      <td><em>Value:</em>
    <td>normal | auto | &lt;dpi> [ , normal | &lt;dpi> ]?
    <tr>
      <td><em>Initial:</em>
      <td>normal
    <tr>
      <td><em>Applies to:</em>
      <td>replaced elements
    <tr>
      <td><em>Inherited:</em>
      <td>yes
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>visual
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>as specified value <span class=issue>(or, should it be only one value?)</span>
</table>

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

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

-->

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

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

<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>marks</dfn>
    <tr>
      <td><em>Value:</em>
      <td>[ crop || cross ] | none 
    <tr>
      <td><em>Initial:</em>
      <td>none
    <tr>
      <td><em>Applies to:</em>
      <td>page context 
    <tr>
      <td><em>Inherited:</em>
      <td>no
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>visual, paged
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>specified value
</table>

<p>This property adds crop and/or cross marks to the document. Crop
marks indicate where the page should be cut. Cross marks are used to
align sheets.

<p>Crop marks and cross marks are printed outside the page box. To
have room to show crop and cross marks, the final pages will have to
be somewhat bigger than the page box.

<div class="example">
<p>To set crop and cross marks on a document, this code can be used:
<pre>
@page { marks: crop cross }
</pre>
</div>


<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>bleed</dfn>
    <tr>
      <td><em>Value:</em>
    <td>&lt;length&gt;
    <tr>
      <td><em>Initial:</em>
      <td>6pt
    <tr>
      <td><em>Applies to:</em>
      <td>page context
    <tr>
      <td><em>Inherited:</em>
      <td>no
    <tr>
      <td><em>Percentages:</em>
      <td>refer to width of page box
    <tr>
      <td><em>Media:</em>
      <td>visual
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>as specified value
</table>

<p>This property specifies the extent of the page bleed area outside
the page box. This property only has effect if crop marks are enabled.


<h2>Bookmarks</h2>

<p>Some document formats have the capability of holding bookmarks.
Bookmarks are typically shown outside the document itself, often a
tree-structured and clickable table of contents to help navigate in
the electronic version of the document. To generate bookmarks, these
properties are defined:

<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>bookmark-level</dfn>
    <tr>
      <td><em>Value:</em>
      <td>none | &lt;integer>
    <tr>
      <td><em>Initial:</em>
      <td>none
    <tr>
      <td><em>Applies to:</em>
      <td>all elements
    <tr>
      <td><em>Inherited:</em>
      <td>no
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>all
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>specified value
</table>

<p>This property describes what level a certain bookmark has in a
hierarchical bookmark structure. The highest level is ''1'', then
''2'', ''3'' etc.

<div class="example">
<pre>
h1 { bookmark-level: 1 }
h2 { bookmark-level: 2 }
h3 { bookmark-level: 3 }
</pre>
</div>


<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>bookmark-label</dfn>
    <tr>
      <td><em>Value:</em>
      <td>content() | attr() | &lt;string>
    <tr>
      <td><em>Initial:</em>
      <td>content()
    <tr>
      <td><em>Applies to:</em>
      <td>all elements
    <tr>
      <td><em>Inherited:</em>
      <td>no
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>all
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>specified value
</table>

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

<div class="example">
<pre>
a { bookmark-label: attr(title, string) }
h1 { bookmark-label: content() }
h2 { bookmark-label: content(before) }
#frog { bookmark-label: "The green frog" }
</pre>
</div>

<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>bookmark-target</dfn>
    <tr>
      <td><em>Value:</em>
      <td>none | &lt;uri> | &lt;attr>
    <tr>
      <td><em>Initial:</em>
      <td>none
    <tr>
      <td><em>Applies to:</em>
      <td>all elements
    <tr>
      <td><em>Inherited:</em>
      <td>no
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>all
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>For URI values, the absolute URI; for attr() values, the resulting URI or string; for other keywords, as specified.
</table>

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

<div class=example>
<pre>
.bookmark {
   bookmark-label: attr(title, string);
   bookmark-target: attr(href, url);
}
...
&lt;a class="bookmark" title="The green pear" href="#pears"/>
</pre>
</div>

<div class=example>
.exable { bookmark-label: url(http://www.example.com) }
</div>


<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>bookmark-state</dfn>
    <tr>
      <td><em>Value:</em>
      <td>open | closed
    <tr>
      <td><em>Initial:</em>
      <td>open
    <tr>
      <td><em>Applies to:</em>
      <td>block-level elements
    <tr>
      <td><em>Inherited:</em>
      <td>no
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>all
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>specified value
</table>

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

<div>
<pre>
* { bookmark-state: closed }
#open { bookmark-state: open }
</pre>
</div>


<h2>CMYK colors</h2>

<p class=issue>PDF can hold two types of CMYK values: device-specific and color-profile-specific. In the latter case, we may need to point to a color profile.

<p>Printers do not use RGB colors, they (often) use CMYK: cyan,
magenta, yellow and black. A new functional value allows style sheets
to express CMYK colors.

<div class="example">
<pre>
h3 { color: cmyk(0.8, 0.5, 0.0, 0.3) }
</pre>
</div>

<p>The values representing the colors are between ''0'' and ''1''. 
Values outside this range are clipped. 

<p>Unless a color profile is specified, the cmyk() value refers to
device-specific colors. A future version of this specification will
describe how to link to color profiles.

<p>It is not expected that screen-centric user agents support CMYK
colors and it is therefore important that existing CSS color values can
be combined with CMYK colors.

<div class="example">
<pre>
h3 {
  color: red;
  color: cmyk(0.5, 0.1, 0.0, 0.2);
}
</pre>

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


<h2>Creating paged presentations</h2>

<p>Printed publications are paged, while screen-based presentations of
web pages are most often presented in a continuous 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 continuous presentation in mind. This could change if it
becomes possible to describe paged presentations in style sheets.

<p>The simplest way to signal that a paged presentation is preferable
is to add a value to the 'overflow' property. For example:

<div class="example">
<pre>
body { overflow: paged }
</pre>
</div>

<p>One challenge when introducing paged presentations on screens is
that the user will need navigational tools to reach the next and
previous pages. For scrolled presentations, the user agent
automatically provides scrollbars. This solution could also work for
paged presentations. However, it must be expected that authors want to
design their own navigational tools. For example, authors may want to
make their own buttons from images. In order to separate the style and
the presentation, these navigational tools should not be part of the
document.


<h2>Styling blank pages</h2>

<p>Blank pages that appear as a result of forced page breaks can be
styled with the <code>:blank</code> pseudo-class. 

<div class="example">
<p>In this example, forced page break may occur before <code>h1</code> elements. 
<pre>
h1 { page-break-before: left }

@page :blank {
  @top-center { content: "This page is intentionally left blank" }
}
</pre>
</div>

<p>The <code>:blank</code> pseudo-class has the same specificity as
the <code>:first</code> pseudo-class. A page matched
by <code>:blank</code> will still be matched by other page selectors.

<div class="example">

<p>If headers have been specified on all right pages, a blank right
page will be matched by both <code>:blank</code>
and <code>:right</code>. Therefore, margin boxes set on right pages
will have to be removed unless they are wanted on blank pages. Here is
an example where the top center header is removed from blank pages,
while the page number remains:

<pre>
h1 { page-break-before: left }

@page :blank {
  @top-center { content: none }
}

@page :right {
  @top-center { content: "Preliminary edition" }
  @bottom-center { content: counter(page) }
}
</pre>

<p>Due to the higher specificity of <code>:blank</code>
over <code>:right</code>, the top center header is removed even
if <code>content: none</code> comes before <code>content: "Preliminary
edition"</code>.

</div>


<h2>Float intrusion in multicol elements</h2>

<p class=issue>We need a switch for turning on intrusion inside multicol element

<p>Floats that are wider than the column box intrude into neighboring columns. 


<div class=example>

<pre class=css>
img { float: left; width: 120% }
</pre>

<p>In this example, the image is wider than the column and will
therefore intrude into the neighboring column. At the bottom of the
middle column is a long word that is clipped in the middle of the
column gap.

<div class=cols>

<p>Ab cde fgh i jkl. Mno<br> 
pqr stu vw xyz. A bc<br>

<br><br><br><br><br><br>

def g hij klm nopqrs<br> 
tuv wxy z. Abc de fg<br>


<div class="col" style="left: 175px">
<p>hi jklmno. Pqrstu vw<br>
x yz. Abc def ghi jkl.<br>
<span style="padding-left: 30px">M nop qrst uvw</span><br>
<span style="padding-left: 30px">x yz. Ab cde fgh</span><br> 
<span style="padding-left: 30px">i jkl. Mnopqr stu</span><br>
<span style="padding-left: 30px">vw xyz. A bcdef</span><br>
<span style="padding-left: 30px">ghij klm nopqrs</span><br>
<span style="padding-left: 30px">tuv wxy z. Abc</span><br>
de fghi jk klmop qrst<br>
uvwxyzabcdefghijklmn<br>

</div>

<div class="col" style="left: 350px">
<p>
Ab cde fgh i jkl. Mno<br> 
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
hi jklmno. Pqrstu vw<br>
x yz. Abc def ghi jkl.<br>

M nop qrst uv wx yz.<br>

Ab cde fgh i jkl. Mno<br> 
pqr stu vw xyz.

</div>


<div class=rep style="width: 200px"></div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>

</div>


<div class=example>

<pre class=css>
img { float: right; width: 120% }
</pre>

<p>In this example, the image naturally appears in the last column. Due to being floated to the right, the image will intrude into the neighboring column to the left.

<div class=cols>

<p>
Ab cde fgh i jkl. Mno<br> 
pqr stu vw xyz. A bc<br>
def g hij klm nopqrs<br>
tuv wxy z. Abc de fg<br>
hi jklmno. Pqrstu vw<br>
x yz. Abc def ghi j<br>
kl. M nop qrst uv wx<br>
yz. Ab cde fgh i jkl<br> 
mno pqr stu vw xyz.


<div class="col" style="left: 175px">
<p>
Ab cde fgh i jkl. Mno<br> 
pqr stu vw xyz. A bc<br>
def g hij klm nop<br>
qrs tuv wxy z.<br>
Rst uvw x yz. Ab<br>
c def ghi jkl m.<br>
Nop qrst uv wx<br>
yz. Ab cdef gh<br> 
i jklmno pqr stu vw

</div>

<div class="col" style="left: 350px">
<p>
xyz. Abc def ghi jkl<br>
mno. Pqr stu vw xyz.<br>
<br><br><br><br><br><br>
Ab cde fgh ij klm no.
</div>


<div class=rep style="width: 200px; right: 0"></div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>

</div>


<h2>Page floats</h2>

<p>Images and figures are sometimes displayed at the top or bottom of
pages. Also, an element may be moved to the next page or not displayed
at all if there is not enough room on its native page. These types of
floats are called "page floats" in this specification.


<p>To support page floats, the <span class=property>'float'</span>
property is extended with several new values. In this list, the new
values are listed and categorized (along with the existing 'left',
'right' and 'none' keywords, and the 'footnote' and 'to()' as described above):

<ul>
<li>horizontal keywords: left right inside outside
<li>vertical keywords: top bottom 
<li>reference keywords: page multicol
<li>modifier keyword: next 
<li>other keywords: none hide footnote to() page()
</ul>

<p>The keywords can be combined to form more complex expressions.

<div class="example">
<p>This code floats figures to the top of the next page:

<pre>
.figure { 
  float: top next page;
}
</pre>
</div>

<p>Further, the 'float' property is extended to accept a
comma-separated list of sets of keywords. If the first set of keywords
cannot be honored with the element remaining on the current page, the
second set of keywords will determine how the element is floated.

<div class="example">

<p>In this example, the element will be floated to the top of the next page unless it fits on the current page. 

<pre>
.figure { 
  float: none, top next page;
}
</pre>
</div>


<p>The new values have the following meaning:

<dl>
   <dt>inside

   <dd>On a right page, this value is synonymous with 'left'. On a left page, this value is synonymous with 'right'.

   <dt>outside

   <dd>On a left page, this value is synonymous with 'left', On a right page, this value is synonymous with 'right'.

   <dt>page
   <dd>Indicates that the page area is the containing block for the element.

   <dt>multicol
   <dd>Indicates that the multicol element is the containing block for the element. The float may will intrude into neighboring columns.

   <dt class=issue>intrude
   <dd>if the float is in a multicol element, it may intrude into neighboring columns. (If the element is not in a multicol element, it will always intrude.)

   <dt>top
   <dd>This keyword indicates that the element is floated to the top of the flow root.

   <dt>bottom

   <dd>This keyword indicates that the element is floated to the bottom of the flow root. 

   <dt>next

   <dd>The float is placed on top of the next page from its source location.
    If combined with 'bottom', the float is placed on
    the bottom of the next page.

   <dt>page()

   <dd>The element is floated to a named page. The named page is created for the element, unless a suitable named page already has been created by another 'page()' value. The name page should appear as early as possible, but any 'next' keywords should be honored.


   <dd>The element is floated to one or more named pages of the type specified. These named pages are created for the purpose of showing the element, and they are presented as early as possible after the page from which they are displaced. If the element is not the first page float to be displaced from this page area to this named page name, its contents should continue on the last of the previously established named pages (unless precluded, for example by page-breaking properties).


   <dt>hide
   <dd>As if 'display: none' is set.

</dl>


<p>The keywords can be combined into sets this way: 

<ul>
<li>only one horizontal keyword can appear in a set
<li>only one vertical keyword can appear in a set
<li>at least one horizontal or vertical keyword must appear, except that 'none', 'hide', and 'footnote' must appear alone
<li>'next' may appear once along with 'page'
<li>keywords can appear in any order 
</ul>


<div class="example">
<p>Float element to the top of the page:

<pre>
.figure { 
  float: top page;
  width: 1gr;
}
</pre>
</div>

<div class="example">
<p>Float element to the top of the next page:

<pre>
.figure { 
  float: top next page;
  width: 1gr;
}
</pre>
</div>

<div class="example">
<p>Float figure to the top right of the multi-column element:

<pre>
.figure { 
  float: top right multicol;
  width: 1gr;
}
</pre>
</div>


<div class="example">
<p>Place footnotes at the bottom of the inside columns:

<pre>
@footnote { 
  float: bottom inside multicol; 
  width: 1gr;
}
</pre>
</div>


<div class="example">
<p>Place figure on top of current column:

<pre>
.figure { 
  float: top;
}
</pre>
</div>


<div class="example">
<p>If there is room on the current page, show the element in place.  If
there isn't room on the current page, hide the element. 

<pre>
.figure { 
  float: none, hide;
}
</pre>
</div>


<div class="example">

<p>In this example, wide tables are floated to landscape pages:

<pre>
table.wide { 
  float: page(landscape);
}
</pre>

In the above code, the element is take out of the flow, which is
allowed to continue on the same page. If the flow should be broken,
this code can be used:

<pre>
table.wide { 
  page: landscape;
}
</pre>

</div>


<div class="example">

<p>Consider this code:

<pre>
table { 
  float: page(landscape);
}
</pre>

<p>If two tables appear consecutively, they will both, space
permitting, be placed on the same named page. To ensure that each
table appears on its own page, this code can be used:

<pre>
table { 
  float: page(landscape);
  page-break-before: always;
}
</pre>

</div>


<p>For non-replaced elements in horizontal text, values on 'float'
that have a horizontal component ('right', 'left', 'outside',
'inside') will result in shrink-wrap width calculations as per CSS 2.1
section 10.3.5. Values that only have a vertical component ('top',
'bottom', 'next', not in combination with other values) will result in
width calculations as per CSS 2.1 section 10.3.3. In vertical text,
width calculations are vice versa.


<h2>Advanced multi-column layout</h2>

<p>In paged media, it is common for figures, captions, images, and
quotes to be laid out in certain positions for typographical reasons,
rather than for structural (as in content order) reasons. For example,
an image that illustrates a news story is often placed in the upper
right corner of the article, irrespective of its order in the content.
A poignant quote from the article may be shown in large type in the
column gap, pushing aside text in both columns, to get the attention
of the reader. 

<p>Basic multi-column layouts is described in a separated CSS3 module
[[CSS3COL]]. This section extends multi-column functionality so that
more advanced, but commonly used, layouts can be achieved.

<p>The proposed functionality relies on three new components:

<ul>
<li>one new value on float: ''multicol'':
<li>one new property: 'float-offset'
<li>one new unit: ''gr''
</ul>

<p>The strategy for achieving advanced multi-column layout is similar
to page floats; elements escape their normal flow root by setting
a value on 'float'. In the case of multi-column layout, the keyword is
''multicol'' (instead of ''page'') and it indicates that the
element should floated wrt. the multi-column element instead of the
column where it naturally occurs.

<p>To further enhance positioning, the 'float-offset' property is
introduced. It pushes elements in the opposite direction of the
positional keywords, both horizontally and vertically.

<p>The ''gr'' unit is introduced to allow the grid lines of columns
(and, potentially, tables) to be used in the positioning ans sizing of elements.
Each column has one grid line on each side corresponding to the
content edge of the content box. 

<p>The 'gr' unit has two purposes. When used on the 'float-offset'
property it identifies a position by counting columns and gaps from
the position established by the 'float' property. Fractions on the
'gr' unit refer to fractions of the last counted gap or column.

<p>When used on the 'width' property, the 'gr' unit identifies a
length by counting gaps and columns, starting at the point where the
element naturally finds itself and continuing in the direction of
box expansion. Fractions on the 'gr' unit refer to the last gap or
column counted.


<h3>The 'float-offset' property</h3>

<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>float-offset</dfn>
    <tr>
      <td><em>Value:</em>
    <td>&lt;length> &lt;length> ? 
    <tr>
      <td><em>Initial:</em>
      <td>0 0 
    <tr>
      <td><em>Applies to:</em>
      <td>floated elements
    <tr>
      <td><em>Inherited:</em>
      <td>no
    <tr>
      <td><em>Percentages:</em>
      <td>refer to width and height of containing block
    <tr>
      <td><em>Media:</em>
      <td>visual, paged
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>one or two absolute lengths
</table>

<p>This property pushes floated elements in the opposite direction of
the where they have been floated with 'float'. If one value is
specified, it is the horizontal offset. If two values are specified,
the first is the horizontal and the second is the vertical offset. If
an element has only been floated horizontally (e.g., by setting
'float: right'), this property will only offset the float
horizontally, even if a vertical value also has been specified.
Likewise, if an element has only been floated vertically, this
property will only offset the float vertically. If an element has been
floated both horizontally and vertically, this property will offset
both horizontally and vertically. If no vertical value has been
specified, the vertical offset is set to zero.

<p>If the 'gr' unit or percentage unit is used, it means that the
middle of the float should be aligned with the specified grid line (or
portion thereof).

<p>If another unit is used, it means that the float is pushed a
distance equal to the specified length.


<p class="issue">'float-offset' is a good concept for moving a float into
  the right position. For completeness it should apply to absolute
  positioning as well. We should reuse existing naming conventions
  already in place for abspos elements (e.g., 'offset-left, 'right',
  or call it 'shift left, 'shift right' etc.).


<div class="example">
<p>This code serves as the base document for the examples of this section:
<pre>
&lt;html>
&lt;style>
div {
  column-width: 15em;
  column-gap: 2em;               /* shown in red below */
  column-rule: thin solid black; /* shown in black below */
  padding: 1em;                  /* shown in blue below */
}
img {
  display: block;                /* shown in dark gray below */
}
&lt;/style>
&lt;body>
&lt;div>
Lorem ipsum dolor sit amet. Nam at jus.
&lt;img src="foo"/>
Sed imp er di et ris. Cur abi tur et sapen.
...
&lt;/div>
&lt;/body>
&lt;/html>
</pre>

<p>This code can be rendered as:

<div class=cols>
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.
<br><br><br><br><br><br><br>
Sed imp er di et ris.<br>Cur abi tur et sapen.

<div style="position: absolute; left: 175px; top: 0; z-index: 6;">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
penatibus et magni.</div>

<div style="position: absolute; left: 350px; top: 0; z-index: 6;">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
penatibus et magni.</div>

<div class=rep></div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>

</div>


<div class="example">

<p>If this code is added to the base document:

<pre>
img { float: right }
</pre>

<p>it may be rendered as:

<div class=cols>

<p>Lorem ipsum dolor<br>sit amet. Nam at jus.
<br>Sed<br> imp<br> er di<br> et ris.<br>Cur<br> abi<br> tur et sapen. Fusce<br> sed ligula a turpis.

<div style="position: absolute; left: 175px; top: 0; z-index: 6;">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
penatibus et magni.</div>

<div style="position: absolute; left: 350px; top: 0; z-index: 6;">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
penatibus et magni.</div>


<div class=rep style="left: 50px"></div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>


</div>


<div class="example">
<p>This code floats images to the bottom of their containing block and
sets the width to be that of the column:

<pre>
img { 
  float: bottom;
  width: 1gr;
}
</pre>

<p>The column box is the containing block for floats, so if an image naturally appears in the first column it will float to its bottom:

<div class=cols>

<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.


<div style="position: absolute; left: 175px; top: 0; z-index: 6;">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
penatibus et magni.</div>

<div style="position: absolute; left: 350px; top: 0; z-index: 6;">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
penatibus et magni.</div>


<div class=rep style="width: 150px; top: 90px"></div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>

</div>


<div class=example>
<p>This code floats figures to the top of the multi-column element. 

<pre>
div.figure { 
  float: top right multicol; 
  width: 1gr }
</pre>

<p>The '1gr' value on
'width' is equal to the width of the containing block. Here is a possible rendering:


<div class=cols>

<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
penatibus et magni.

<div style="position: absolute; left: 175px; top: 0px; z-index: 6">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
penatibus et magni.
</div>

<div style="position: absolute; left: 350px; top: 115px; z-index: 6">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.
</div>


<div class=rep style="top: 0; left: 350px; width: 150px"></div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>


</div>


<div class=example>
<p>In this code, the 'float' property floats the element to the top left of the multi-column element, while the 'float-offset' property pushes it to 
the right so that it ends up in the column next to it:

<pre>
div.quote { 
  float: top left multicol; 
  float-offset: 2.5gr; 
  width: 1gr }
</pre>

<div class=cols>

<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
penatibus et magni.

<div style="position: absolute; left: 175px; top: 115px; z-index: 6">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.
</div>

<div style="position: absolute; left: 350px; top: 0px; z-index: 6">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
penatibus et magni.
</div>


<div class=rep style="top: 0; left: 175px; width: 150px"></div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>

<p>Assuming a three-column layout, the same rendering can be achieved
by floating the element to the right instead:

<pre>
div.quote { 
  float: top right multicol; 
  float-offset: 2gr; 
  width: 1gr }
</pre>


</div>

<p>The floated element will never be pushed outside the content edges
of the multicol element due to 'float-offset'.

<div class="example">

<pre>
img {
  float: top right multicol;
  width: 3gr;
}
</pre>

<p>The code above floats the element to the top right of the
multi-column element. Further, it sets the width of images to the
width of two columns plus the gap between them. Here is a possible
rendering.


<div class=cols>

<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
penatibus et magni.

<div style="position: absolute; left: 175px; top: 115px; z-index: 6">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.
</div>

<div style="position: absolute; left: 350px; top: 115px; z-index: 6">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.
</div>


<div class=rep style="top: 0; left: 175px; width: 325px"></div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>

</div>


<div class="example">

<pre>
img {
  float: top right multicol;
  width: 2gr;
}
</pre>

<p>The code above floats the element to the top right of the multi-column element. Further, it sets the width of the image to the width of one
column plus one column gap. Here is a possible rendering. 


<div class=cols>

<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
penatibus et magni.

<div style="position: absolute; left: 175px; top: 0px; z-index: 6">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
penatibus et magni.
</div>

<div style="position: absolute; left: 350px; top: 115px; z-index: 6">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.
</div>


<div class=rep style="top: 0; left: 325px; width: 175px"></div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>

</div>


<div class="example">

<pre>
img {
  float: top right multicol;
  width: 1.5gr;
}
</pre>

<p>The code above floats the element to the top right of the multi-column element. Further, it sets the width of the image to the width of one
column plus half the column gap.


<div class=cols>

<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
penatibus et magni.

<div style="position: absolute; left: 175px; top: 0px; z-index: 6">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
penatibus et magni.
</div>

<div style="position: absolute; left: 350px; top: 115px; z-index: 6">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.
</div>


<div class=rep style="top: 0; left: 337.5px; width: 163px"></div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>

</div>


<div class="example">

<pre>
img { 
  float: top left multicol;
  float-offset: 1.5gr 50%;
  width: 8em;
}
</pre>

<p>The first rule in the code above floats images to the top left of
the multi-column element. The second rule pushes the float in the
opposite directions: to the right and downwards. The horizontal
component (''1.5gr'') means that the horizontal middle of the element
should be in the middle of the gap between the left-most column and
the one next to it. Vertically, element should be in the middle of the
column. Here is a possible rendering:
 
<div class=cols>

<p>Lorem ipsum dolor<br>sit amet. Nam at jus.
<br>Sed<br> imp<br> er di<br> et ris.<br>Cur<br> abi<br> tur et sapen. Fusce<br> sed ligula a turpis.

<div style="position: absolute; left: 175px; top: 0; z-index: 6;">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.
<div style="margin-left: 100px">
Sed<br> imp<br> er di<br> et ris.<br>Cur<br> abi</div>
tur et sapen. Fusce
<br>
sed ligula a turpis.
</div>

<div style="position: absolute; left: 350px; top: 0; z-index: 6;">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
penatibus et magni.</div>


<div class=rep style="left: 50px; width: 220px"></div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>

</div>


<div class="example">

<pre>
img { 
  float: top left multicol;
  float-offset: 1.25gr 50%;
  width: 6em;
}
</pre>

<p>The only difference between this and the previous example is the horizontal value on 'float-offset'. The value ''1.25gr'' means that a point 25% into the image in the inline direction will be aligned with a point 25% into the column gap. Here is a possible rendering:
 
<div class=cols>

<p>Lorem ipsum dolor<br>sit amet. Nam at jus.
<br>Sed imper di et<br>ris. Cur abi tur<br> et sapen. Fusce<br> sed ligula a sic<br> turpis.
Lorem<br> ipsum dolor sit<br> amet. Namat jus.
Sed<br> imper di et ris curit.


<div style="position: absolute; left: 175px; top: 0; z-index: 6;">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.
<div style="margin-left: 100px">
Sed<br> imp<br> er di<br> et ris.<br>Cur<br> abi</div>
tur et sapen. Fusce
<br>
sed ligula a turpis.
</div>

<div style="position: absolute; left: 350px; top: 0; z-index: 6;">
<p>Lorem ipsum dolor<br>sit amet. Nam at jus.<br>
Sed imp er di et ris.<br>Cur abi tur et sapen.<br>
Vivamus a metus.<br> Aenean at risus<br> pharetra ante 
luctu<br> feugiat quis enim.<br> Cum sociis natoque<br> 
penatibus et magni.</div>


<div class=rep style="left: 120px; width: 150px"></div>
<div class=gap style="left: 150px"></div>
<div class=gap style="left: 325px"></div>
</div>

</div>


<h2>Page lists</h2>

<p>In CSS 2.0, the 'page' property takes one value, and the value can
be 'auto' or a named page.

<p>In this specification, a space-separated list of named pages
(called a "page list") is allowed in the 'page' property and the
property is changed from inherited to non-inherited. 


<h3>The 'page' property</h3>

<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>page</dfn>
    <tr>
      <td><em>Value:</em>
      <td>auto | [ &lt;identifier> ]+ auto? 
    <tr>
      <td><em>Initial:</em>
      <td>auto
    <tr>
      <td><em>Applies to:</em>
      <td>block-level elements
    <tr>
      <td><em>Inherited:</em>
      <td>no
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>all
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>specified value
</table>


<p>The content of the element is laid out on the list of pages specified on this property. The values mean:

<dl>
<dt>auto

<dd>A single 'auto' value means that the element is laid out on the
established page list. If no page list has been established, unnamed
pages are created as necessary.

<dt>one or more named pages, optionally followed by 'auto'

<dd>The element is laid out on the named pages specified in the page
list. A page break is generated before the element unless the first
named page in the list is the same as the current page. If more pages
are required than there are items in the page list, the last item is
repeated so that the element can be displayed. If the page list ends
with the 'auto' keyword, the page list continues after the end of the
element, otherwise the page list reverts back to that of the parent
element.

</dl>


<div class=example>

<pre>
  &lt;div class="chapter">
    &lt;h1>The beginning&lt;/h1>
    ....
  &lt;/div>

  &lt;div class="chapter">
    &lt;h1>The end&lt;/h1>
    ....
  &lt;/div>
</pre>

<p>Given the above markup, this style sheet will put the content on
pages that have chapter titles at the top &mdash; except the first
page of each chapter.

<pre>
  @page chapter { 
    @top-center { content: string(title) }
  }
  @page chapter-start { 
    @top-center { content: none }
  }

  div.chapter { page: chapter-start chapter }
  h1 { string-set: title content() }
</pre>

<p>This code will do the same using the :first pseudo-class:

<pre>
  @page chapter { 
    @top-center { content: string(title) }
  }
  @page chapter:first { 
    @top-center { content: none }
  }

  div.chapter { page: chapter; page-break-before: always; }
  h1 { string-set: title content() }
</pre>

<p>Note that <code>chapter:first</code> only applies if the is a forced page break before the first <code>chapter</code> page.

<!--
http://lists.w3.org/Archives/Public/www-style/2008Sep/0162.html
-->

</div>


<div class=example>
<pre>
  &lt;h1>The beginning&lt;/h1>
    ....
  &lt;h1>The end&lt;/h1>
    ....
</pre>

<p>Given the above markup, this style sheet will put the content on pages that have chapter titles at the top &mdash; except the first page of each chapter. 

<pre>
  @page chapter { 
    @top-center { content: string(title) }
  }
  @page chapter-start { 
    @top-center { content: none }
  }
  h1 { page: chapter-start chapter auto;
       string-set: title content() }
</pre>

<p>Elements following h1 elements will continue on page sequence specified on the h1 elements due to the 'auto' value at the end of the page list.

</div>


<div class=example>

<pre>
  &lt;table>...&lt;/table>
</pre>

<p>Given the above markup, this style sheet will put all tables on "rotated" pages, with a page break before and after each table:

<pre>
  @page rotated { size: landscape }
  table { page: rotated }
</pre>

</div>


<div class=example>
<pre>
  &lt;div>
    &lt;table>...&lt;/table>
    &lt;table>...&lt;/table>
    &lt;p>This text is rendered on a 'narrow' page&lt;/p>
  &lt;/div>
</pre>

<p>Given the above markup, this style sheet will put the two tables on
"rotated" pages. The tables will be placed on the same pages if there
is room. The paragraph following the tables will be placed on the
"narrow" page.

<pre>
  @page narrow { size: 9cm 18cm }
  @page rotated { size: landscape }
  div { page: narrow }
  table { page: rotated }
</pre>

</div>


<div class=out>

<h2>Continuation markers</h2>

<p>Continuation markers are used to indicate that an element continues
from one page to the next. The ::before-page-break pseudo-element is shown
after the last line before the page break. The ::after-page-break
pseudo-element is shown before the first line after the page break.
Continuation markers otherwise act as ::marker pseudo-elements
[[!CSS3LIST]], except that the value of 'list-style-position' is
honored on the pseudo-elements rather than the host element.


<div class="example">
<pre>
p::before-page-break { 
   list-style-position: outside;
   content: url(to-arrow.png);
}
p::after-page-break { 
   list-style-position: outside;
   content: url(from-arrow.png);
}
</pre>
</div>


<h2>Change bars</h2>

<p>Change bars are used to indicate that a change has occurred in a
section of a document. The changed section does not necessarily
correspond to an element and (given the tree structure of common
markup languages) it is not always possible to create any such
element.

<p>To avoid these limitations, the beginning of a change mark is
associated with one element and the end of a change mark is
associated with another element.

<p>Change bars do not take up space in the layout.

<div class="example">
<pre>
p.change-start { 
  change-bar: thin solid red;
  change-bar-class: change1;
  change-bar-offset: 0.3em;
  change-bar-side: left; /* or right, inside, outside */
}

p.change-end { 
  change-bar-class: change1;
}
</pre>
</div>

<p class="note">This model is borrowed from <a
href="https://www.w3.org/TR/2006/CR-xsl11-20060220/#fo_change-bar-begin">XSL-FO</a>. 


<h2>Line numbers</h2>

<p class="issue">This is an early sketch of what may turn into a more complete proposal.

<p>Line numbers are sometimes used to reference particular lines of a
document. Line numbers can be generated through pseudo-elements.

<div class="example">
<p>In this example, line numbers are shown on the left side of every fifth line. Also, the line number counter is reset on every page.

<pre>
::line-number-left(5) { 
   font: 10pt serif; 
   content: counter(line);
}

@page { counter-reset: line }
</pre>
</div>

<p>These are the pseudo-elements that can set line numbers: 'line-number-left', 'line-number-right', 'line-number-inside', 'line-number-outside'.

<p>The ''line'' counter is set to zero at the beginning of the document and incremented by one for each line box of elements in the normal flow, excluding tables. 

<p class="issue">The use of multiple pseudo-elements to control where
the line counter appears seems clumsy, but there doesn't seem to be
any other way to get that functionality without adding more
properties.


<h2>Generated lists</h2>

<p>Books typically have sections that are extracted from the main
content, for example, a the table of contents (TOC) in the front and
an index at the back. Also, there are glossaries and lists of figures
(LOF) and lists of tables (LOT). These sections can all be referred to
as <em>generated lists</em>; they are generated from the main content,
and have the nature of lists. Some lists are sorted alphabetically
(e.g., an index and a glossary), and others reflect the order of the
content (e.g., TOCs, LOFs, and LOTs).

<p>To generate lists in CSS, a <em>prototype list</em> must be
established. Generated list items will be flowed into the prototype
list, but it can also contain content of its own. The prototype
list is identified with the 'prototype' property. To add generated
list items to the prototype list, the 'prototype-insert' property
is used. The 'prototype-insert-position' and 'prototype-insert-policy'
properties describe where and how generated list items are inserted
into the prototype list.

<h3>The prototype properties</h3>

<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>prototype</dfn>
    <tr>
      <td><em>Value:</em>
      <td>list | none
    <tr>
      <td><em>Initial:</em>
      <td>none
    <tr>
      <td><em>Applies to:</em>
      <td>all elements
    <tr>
      <td><em>Inherited:</em>
      <td>no
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>all
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>specified value
</table>

<p>This property declares that an element is a prototype list. A
prototype list can hold generated list items inside it. Prototype
lists cannot be nested. For each prototype list, the user
agent must remember the current insert position.

<p class="issue">Strictly, this property isn't necessary -- one could
infer from 'prototype-insert-position' or 'prototype-insert-policy'
that something is a prototype list.


<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>prototype-insert</dfn>
    <tr>
      <td><em>Value:</em>
      <td>&lt;identifier> [ content() || content(before) || content(after) || content(first-letter) [, &lt;identifier> [ content() || content(before) || content(after) || content(first-letter) ] ]* | none
    <tr>
      <td><em>Initial:</em>
      <td>none
    <tr>
      <td><em>Applies to:</em>
      <td>all elements
    <tr>
      <td><em>Inherited:</em>
      <td>no
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>all
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>specified value
</table>

<p>This property specifies a comma-separated list of elements that
should be generated in generated lists. The initial ''none'' value
means that no elements are generated. The comma-separated list
consists of the name of the ID attribute of a prototype element with a
starting '#', and a specification of the content which is to be
generated. The content is one or more of these, in any order:
content(), content(before), content(after), content(first-letter). The
content is inserted into prototype element if it is empty, otherwise
into the first empty element inside the prototype element.


<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>prototype-insert-position</dfn>
    <tr>
      <td><em>Value:</em>
      <td>current | sorted
    <tr>
      <td><em>Initial:</em>
      <td>current
    <tr>
      <td><em>Applies to:</em>
      <td>all elements
    <tr>
      <td><em>Inherited:</em>
      <td>no
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>all
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>specified value
</table>


<table class=propdef>
    <tr>
      <td><em>Name:</em>
      <td><dfn>prototype-insert-policy</dfn>
    <tr>
      <td><em>Value:</em>
      <td>normal | unique 
    <tr>
      <td><em>Initial:</em>
      <td>normal
    <tr>
      <td><em>Applies to:</em>
      <td>all elements
    <tr>
      <td><em>Inherited:</em>
      <td>no
    <tr>
      <td><em>Percentages:</em>
      <td>N/A
    <tr>
      <td><em>Media:</em>
      <td>all
    <tr>
      <td><em>Computed&nbsp;value:</em>
      <td>specified value
</table>


<h3>TOC</h3>

<div class="example">
<p>Here is an example of how to generate a TOC with leaders and page numbers.
<pre>
...
&lt;style>
  #toc { prototype: list }
  #toc-entry { 
    prototype-insert-position: current;
    font-size: 14pt }
  #toc-entry::after { content: leader('. ') source-counter(page) }
  h1.chapter { prototype-insert: #toc-entry content() }
&lt;/style>
...
&lt;div id="toc">
  &lt;h1>Table of contents&lt;/h1>
  &lt;div id="toc-entry">&lt;/div>
&lt;/div>
...
&lt;h1 class="chapter">Introduction&lt;/h1>
...
</pre>
</div>

<p>There are three new properties and one new value on the 'content'
property in the above example. This rule:

<pre>
  #toc { prototype: list }
</pre>

<p>declares that the #toc element is a prototype list that accepts
generated lists. This rule:

<pre>
    prototype-insert-position: current;
</pre>

<p>specifies that entities in the #toc are to be added at the current
position, i.e., inside or after the previous generated list item. This code:

<pre>
  #toc-entry::after { content: leader('. ') source-counter(page)} 
</pre>

<p>has one new value (''source-counter(page)'') which fetches the value
of the ''page'' counter from the source element, i.e., the element
which has a 'prototype-insert' declaration:

<pre>
  h1.chapter { prototype-insert: toc-entry content() }
</pre>

<p>The above rule creates one new element. The new element is
isomorphic to the #toc-entry element and is inserted according to the
'prototype-insert-position' of #toc-entry.


<h3>Glossary</h3>

<p>Glossaries provide a new kind of challenge: entries are sorted
alphabetically. 

<div class="example">
<p>Here is an example of how to generate a glossary:
<pre>
...
&lt;style>
#glossary { prototype: list }
#glossary-term { prototype-insert-position: sorted }
#glossary-definition { prototype-insert-position: current }
dfn { prototype-insert: glossary-term content(), glossary-definition attr(title) }

&lt;/style>
...
&lt;div id="glossary">
&lt;h2>Glossary of terms&lt;/h2>
&lt;dl>
  &lt;dt id="glossary-term">...&lt;/dt>
  &lt;dd id="glossary-definition">...&lt;/dd>
&lt;/dl>
&lt;/div>
...

&lt;p>The &lt;dfn title="Leading paragraph">introduction&lt;/dfn> comes first.&lt;/p>

</pre>

<p>By inserting the term ''sorted'' and the definition in the
''current'' position, terms will be sorted alphabetically with their
respective definition following.

</div>

<div class="example">

<p>Tables are commonly used to display lists. For example, a list of
terms and their definition can be presented this way:

<table style="border: thin solid black; border-collapse: collapse">
<tr>
	<th style="border: thin solid black">Term</th>
	<th style="border: thin solid black">Definition</th>

<tr>
	<td style="border: thin solid black">yes</td>
	<td style="border: thin solid black">expresses assent or agreement</td>
</tr>
<tr>
	<td style="border: thin solid black">no</td>
	<td style="border: thin solid black">expresses negation, dissent, denial, or refusal</td>
</tr>
</table>

<pre>
#glossary { prototype: container }
#glossary-term { prototype-insert-position: sorted  }
#glossary-definition { prototype-insert-position: current }
dfn { prototype-insert: #glossary-term content(), #glossary-definition attr(title) }

&lt;/style>
...
&lt;table id="glossary">
	&lt;th style="border: thin solid black">Term&lt;/th>
	&lt;th style="border: thin solid black">Definition&lt;/th>
&lt;tr id="glossary-term">
	&lt;td>&lt;/td>
	&lt;td id="glossary-definition">&lt;/td>
&lt;/tr>
&lt;/table>
...
&lt;p>The &lt;dfn title="Leading paragraph">introduction&lt;/dfn> comes first.&lt;/p>
</pre>

<p>Note that the #glossary-term element is a table row, while the
element is inserted into a table cell. This is due to the table row
being a non-empty element and that the first td element is the first
empty element.

</div>


<h3>Index</h3>

<p>An index is a generated list that is sorted alphabetically, just
like glossaries. In addition, indexes often have single letters in
large font sizes to help humans navigate. For example, all index
entries starting with "s" is placed under a large capital "S". There
should only be one large capital "S", and if there are no index entries
starting with "s" the large "S" isn't shown.

<p>To achieve this kind of presentation, the following strategy is
suggested: for every index entry that is encountered, two elements are
generated. One is the large capital letter, and the other is the index
entry itself. To avoid having one large capital letter before each
index entry, the 'prototype-insert-policy' property declares that identical
generated list elements are to be deleted.

<div class="example">
<pre>
...
&lt;style>
#index {
  prototype: list }
#index-marker {
  prototype-insert-position: sorted 
  prototype-insert-policy: unique; 
  text-transform: uppercase }
#index-entry {
  prototype-insert-position: sorted }
#index-entry::after {
  content: leader(". . ") source-counter(page) }
dfn.entry { 
  prototype-insert: #index-marker content(first-letter), #index-entry content() }
&lt;/style>
...

&lt;div id="index">
&lt;h2>Index&lt;/h2>
&lt;div id="index-marker">&lt;/div>
&lt;div id="index-entry">&lt;/div>
&lt;/div>

&lt;p>An &lt;dfn class="entry">emphasized element&lt;/dfn> stands out.&lt;/p>
...
</pre>
</div>


<h3>A more complex example</h3>

<div class=example>

<p>Here is a more complex example with several types of generated lists. Note how multilevel TOCs require a prototype list without any additional content. Also, notice how the "acronym" element generates an entry both in the index and in the list of acronyms.

<pre>
&lt;style>
#toc-list {
  prototype: list }

#toc-entry-section {
  font-size: large;
  prototype-insert-position: current }

#toc-entry-subsection {
  font-size: medium;
  prototype-insert-position: current }

#toc-entry-section::after, #toc-entry-subsection::after {
  content: leader('. ') source-counter(page) }

#acronym-list {
  prototype: list }

#acronym-term {
  prototype-insert-position: sorted }

#acronym-definition {
  prototype-insert-position: current }

#index {
  prototype: list }

#index-marker {
  prototype-insert-position: sorted 
  prototype-insert-policy: unique;
}

#index-entry {
  prototype-insert-position: sorted }

#index-entry::after {
  content: leader('. . ') source-counter(page) }

h2 {
  prototype-insert: #toc-entry content() }

h3 {
  prototype-insert: #toc-entry content() }

acronym { 
  prototype-insert:
          #index-marker content(first-letter), 
          #index-entry content(), 
          #acronym content(), 
          #acronym-definition attr(title);
}

dfn { prototype-insert: 
          #index-marker content(first-letter), 
          #index-entry content();
}
&lt;/style>

&lt;div id="toc">
&lt;h2>Table of contents&lt;/h2>
  &lt;div id="toc-list">
    &lt;div id="toc-entry-section">&lt;/div>
    &lt;div id="toc-entry-subsection">&lt;/div>
  &lt;/div>
&lt;/div>

&lt;div id="acronym-list">
&lt;h2>List of acronyms&lt;/h2>
&lt;dl>
  &lt;dt id="acronym">&lt;/dt>
  &lt;dd id="acronym-definition">&lt;/dd>
&lt;/dl>
&lt;/div>

&lt;div id="index">
&lt;h2>Index&lt;/h2>
&lt;div id="index-marker">&lt;/div>
&lt;div id="index-entry">&lt;/div>
&lt;/div>

&lt;body>

&lt;h2>Introduction&lt;/h2>

&lt;p>This part defines the a acronym: &lt;acronym title="HyperText
Markup Language">HTML&lt;/acronym>.

&lt;h3>More to learn&lt;/h3>

&lt;p>An &lt;dfn>emphasized element&lt;/dfn> element stands out.

&lt;/body>

</pre>
</div>

</div>


<h2>Conformance</h2>

<h2>Appendix A: Default style sheet</h2>

<p class=issue>

<pre>
@page {
  counter-reset: footnote;
  @footnote {
    counter-increment: footnote;
    float: page bottom;
    width: 100%;
    height: auto;
  }
}

::footnote-call {
  counter-increment: footnote;
  content: counter(footnote, super-decimal); 
}
::footnote-marker {
  content: counter(footnote, super-decimal); 
}


h1 { bookmark-level: 1 }
h2 { bookmark-level: 2 }
h3 { bookmark-level: 3 }
h4 { bookmark-level: 4 }
h5 { bookmark-level: 5 }
h6 { bookmark-level: 6 }
</pre>


<h2 class=no-num id=acknowledgments>Acknowledgments</h2>

<p>This document has been improved by Bert Bos, Michael Day, Melinda
Grant, David Baron, Markus Mielke, Steve Zilles, Ian Hickson, Elika
Etemad, Laurens Holst, Mike Bremford, Allan Sandfeld Jensen, Kelly
Miller, Werner Donn&eacute;, Tarquin (Mark) Wilton-Jones, Michel Fortin,
Christian Roth, Brady Duga, Del Merritt, Ladd Van Tol, Tab Atkins Jr.,
Jacob Grundtvig Refstrup,  James Elmore, Ian Tindale, Murakami Shinyu, Paul E.
Merrell, Philip Taylor.</p>

<h2 class=no-num id=references>References</h2>

<h3 class="no-num" id="normative-references">Normative references</h3>
<!--begin-normative-->


<p>[Here will be inserted the file "normative.inc"]</p>
<!--end-normative-->


<h3 class="no-num" id="other-references">Other references</h3>
<!--begin-informative-->


<p>[Here will be inserted the file "informative.inc"]</p>
<!--end-informative-->


<h2 class="no-num" id="index">Index</h2>
<!--index-->

<h2 class="no-num" id="property-index">Property index</h2>
<!-- properties -->


</body>
</html>