Copyright © 2009 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
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
– multi-column layout and paged media – this module offers
advanced functionality for presenting structured documents on paged media.
This specification only applies to the ‘print
’ media type.
This is a public copy of the editors' draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don't cite this document other than as work in progress.
The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. When sending e-mail, please put the text “css3-gcpm” in the subject, preferably like this: “[css3-gcpm] …summary of comment…”
This document was produced by the CSS Working Group (part of the Style Activity).
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
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.
target-pull()
’ value
This CSS3 module has normative references to the following other CSS3 modules:
This CSS3 module has non-normative references to the following other CSS3 modules:
(This section is not normative.)
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.
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 offers two ways to achieve this. The first mechanism is named strings which copies the text (without style, structure, or replaced content) from one element for later reuse in margin boxes. The second mechanism is running elements which moves elements (with style, structure, and replaced content) into a margin box.
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.
Consider this code:
h1 { string-set: title content() }
Whenever an h1
element is encountered, its textual content
is copied into a named string called title. Its content can be
retrieved in the ‘content
’
property:
@page :right { @top-right { content: string(title) }}
string-set
’ propertyName: | string-set |
Value: | [[ <identifier> <content-list>] [, <identifier> <content-list>]* ] | none |
Initial: | none |
Applies to: | all elements |
Inherited: | no |
Percentages: | N/A |
Media: | all |
Computed value: | as specified value |
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.
For the ‘string-set
’ property,
<content-list> expands to one or more of these values, in any order:
content()
’ function returns
the content of elements and pseudo-elements. The functional notation
accepts an optional argument:
content()
’
content(before)
’
content(after)
’
content(first-letter)
’
The expected use for ‘content(first-letter)
’ is to create one-letter
headers, e.g., in dictionaries.
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.
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.
The scope of a named string is the page of the element to which the
‘string-set
’ property is attached and
subsequent pages.
The name space of named strings is different from other sets of names in CSS.
The ‘string-set
’ property copies text as
well as white-space into the named string.
h2 { string-set: header "Chapter " counter(header) ": " content(); counter-increment: header; }
Note that the string called "header" is different from the counter with the same name. The above code may result in header being set to "Chapter 2: Europa".
This example results in the same value being assigned to header as in the previous example.
h2:before { content: "Chapter " counter(header) } h2 { string-set: header content(before) content(); counter-increment: header }
dt { string-set: index content(first-letter) }
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.
h1 { display: none; string-set: header content(); }
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.
@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() }
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:
start
’: the named string's entry
value for that page is used.
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.
last
’: the named string's exit
value for that page is used
first-except
’: similar to
‘first
’, except on the page where the
value was assigned. On that page, the empty string is used.
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.
@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() }
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.
@page { @top-center { content: string(chapter, first-except) }} h1 { string-set: chapter content() }
If the named string referred to in a ‘string()
’ value has not been assigned a value, the
empty string is used.
Named strings, as described above, can only hold textual content; any style, structure or replaced content associated with the element is ignored. To overcome this limitation, a way of moving elements into running headers and footers is introduced.
Elements that are moved into headers and footers are repeated on
several pages; they are said to be running elements. To support running
elements, a new value – running() – is introduced on the
‘position
’ property. It has one
required argument: the name by which the running element can be referred
to. A running element is not shown in its natural place; there it is
treated as if ‘display: none
’ had been
set. Instead, the running element may be displayed in a margin box.
Like counters and named strings, the name of a running element is chosen by the style sheet author, and the names have a separate name space. A running element can hold one element, including its pseudo-elements and its descendants. Whenever a new element is assigned to a running element, the old element is lost.
User agents, however, must be able to remember the result of
more than one assignment as the ‘element()
’ value (described below) can refer to
different assignments.
Running elements inherit through their normal place in the structure of the document.
title { position: running(header) } @page { @top-center { content: element(header) } }
Like the ‘string()
’ value, the
‘element()
’ value accepts an optional
second argument:
start
’
first
’
last
’
first-except
’
The keywords have the same meaning as for the ‘string()
’ value.
The ‘element()
’ value cannot be
combined with any other values.
In this example, the header is hidden from view in all media types except print. On printed pages, the header is displayed top center on all pages, except where h1 elements appear.
<style> div.header { display: none } @media print { div.header { display: block; position: running(header); } @page { @top-center { content: element(header, first-except) }} </style> ... <div class="header">Introduction</div> <h1 class="chapter">An introduction</div>
This code illustrates how to change the running header on one page in the middle of a run of pages:
... <style> @page { @top-center { content: element(header, first) }} .header { position: running(header) } .once { font-weight: bold } </style> ... <div class="header">Not now</div> <p>Da di ha di da di ... <span class="header once">NOW!</span> <span class="header">Not now</span> ... da di ha di hum.</p> ...The header is "Not now" from the outset, due to the "div" element. The first "span" element changes it to "NOW!" on the page where the "span" element would have appeared. The second "span" element, which would have appeared on the same page as the first is not used because the ‘
first
’ keyword has been specified.
However, the second "span" element still sets the exit value for "header"
and this value is used on subsequent pages.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.
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:
Using the keyword values is equivalent to setting a string value. The table below shows the equivalents:
Keyword | String | Unicode characters |
---|---|---|
leader(dotted) | leader(‘. ’)
| \002E \0020 |
leader(solid) | leader(‘_ ’)
| \005F |
leader(space) | leader(‘ ’)
| \0020 |
Can leaders also be composed of images or SVG?
The string inside the parenthesis is called the leader string.
In its simplest form, the ‘content
’ property only takes one ‘leader()
’ value:
heading::after { content: leader(dotted) }
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.
These properties influence the appearance of leaders: all font
properties, text properties, ‘letter-spacing
’, white-space properties,
background properties, and ‘color
’.
User Agents should attempt to align corresponding glyphs from the leader pattern between consecutive lines.
In a more complex example, the ‘leader
’ value is combined with other values on
the ‘content
’ property:
ul.toc a::after { content: leader(". . . ") target-counter(attr(href, url), page); }
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.
Consider this code:
<style> .name::after { content: leader(dotted) } </style> <div class="entry"> <span class="name">John Doe</span> <span class="number">123456789</span> </div>
If the name and number end up on different lines (e.g., in a narrow column), it may be formatted like this:
John Doe.... ...123456789
To determine the length of the leaders, user agents must do the following for each line:
Consider this code:
<style> cite::before { content: leader(' ') } </style> <blockquote> Bla great bla bla world bla bla empire bla bla color bla bla history bla bla forever. <cite>John Johnson</cite> </blockquote>
Depending on the width of the containing block, this may be rendered as:
Bla great bla bla world bla bla empire bla bla color bla bla history bla bla forever. John Johnson
However, this rendering is preferable:
Bla great bla bla world bla bla empire bla bla color bla bla history bla bla forever. John Johnson
To indicate that John Johnson
should be kept on one line, this
rule can be added to the style sheet:
cite { text-wrap: suppress }
Until ‘text-wrap
’ is widely
supported, this rule can also be used:
cite { white-space: nowrap }
If the containing element is wider, this may be the resultant presentation:
Bla great bla bla world bla bla empire bla bla color bla bla history bla bla forever. John Johnson
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.
target-counter
’ and
‘target-counters
’ valuesNumerical 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.
This style sheet specifies that a string like " (see page 72)" is added after a link:
a::after { content: "(see page " target-counter(attr(href, url), page, decimal) ")" }
This style sheet specifies that a string like " (see section 1.3.5)" is added after a link:
a::after { content: "(see section " target-counters(attr(href, url), section, ".", decimal) ")" }
target-text
’ valueTextual 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:
content()
’
content(before)
’
content(after)
’
content(first-letter)
’
To generate this text
from this markup:See Chapter 3 ("A better way") on page 31 for an in-depth evaluation.
<p>See <a href="#chx">this chapter</a> for an in-depth evaluation. ... <h2 id="chx">A better way</h2>this CSS code can be used:
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);
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 note-call 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:
In order to support footnotes in CSS, the following functionality is added:
float
’
property: ‘footnote
’
@footnote
’
::footnote-call
’ and ‘::footnote-marker
’
footnote
’
content
’
property: ‘target-pull()
’
list-style-type
’
values: ‘super-decimal
’, and
symbol(...)
In its simplest form, making a footnote is simple.
<style> .footnote { float: footnote } </style> <p>A sentence consists of words. <span class="footnote">Most often.</span>.
In this example, the text Most often.
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:
A sentence consists of words. ¹ ¹ Most often.
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.
<style> @media print { .footnote { float: footnote; content: target-pull(attr(href, url)) } .call { display: none } } </style> ... <p>A sentence consists of words<a class="footnote" href="#words"> [3]</a>. ... <p id=words><span class="call">[3]</span> Most often.
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:
A sentence consists of words¹. ¹ Most often.
<p>Sorry, <span title="This is, of course, a lie.">we're closing for lunch</span>.
The content of the "title" attribute can be turned into a footnote with this code:
span[title]::after { content: attr(title); float: footnote; }
An element with ‘float: footnote
’
(called a footnote element) is moved to the footnote
area and a footnote-call pseudo-element is put in its
original place.
span.footnote { float: footnote; }
For each new footnote element, the ‘footnote
’ counter is automatically incremented.
Footnote elements are presented inside the footnote area, but they inherit through their normal place in the structure of the document.
All elements with ‘float: footnote
’
are moved to the footnote area. 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
’.
@page { @footnote { float: bottom page; width: 100%; } }
These rules place the footnote area on the left side of the page:
@page { @footnote { position: fixed; top: 10em; left: 3em; width: 5em; } }
How do we place the footnote area in a certain column? Perhaps:
@page { @footnote { float: bottom left multicol; width: 1gr; } }
The content of the footnote area is considered to come before other content which may compete for the same space on the same page.
@page { @footnote { float: bottom page}} div.figure { float: bottom page }
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.
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.
These properties apply to the footnote area: ‘content
’, ‘border
’, ‘padding
’, ‘margin
’, ‘height
’, ‘width
’, ‘max-height
’, ‘max-width
’, ‘min-height
’, ‘min-width
’, the background properties.
This example uses some of the applicable properties on @footnote:
@footnote { margin-top: 0.5em; border-top: thin solid black; border-length: 4em; /* border-parts: 4em */ padding-top: 0.5em; }
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.
When an element is moved to the footnote area, a footnote-call is left behind. By default, User Agents must behave as if this code is part of the default style sheet:
::footnote-call { content: counter(footnote, super-decimal); }
The resulting note call is a super-script decimal number.
A ::footnote-marker pseudo-element is added to each footnote element. User agents must, by default, show the "footnote" counter in the footnote-marker.
User Agents may display footnote-calls and footnote-markers this way by default:
::footnote-call { content: counter(footnote, super-decimal); } ::footnote-marker { content: counter(footnote, super-decimal); }
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 margin box of the marker box is horizontally
aligned with the start of the line box.
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.
The footnote counter can be reset with the ‘counter-reset
’ property.
@page { counter-reset: footnote }
Should one also be able to manually increment the "footnote" counter?
Footnotes must appear as early as possible under the following constraints:
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.)
max-height
’ is
too small.
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.
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.
CSS borders traditionally cover an entire border edge. Sometimes, however, it can be useful to hide some parts of the border.
border-parts
’ propertiesName: | border-parts, border-parts-top, border-parts-right, border-parts-bottom, border-parts-left |
Value: | normal | [ <length> | <percentage> | <fraction> | repeat() ]+ |
Initial: | normal |
Applies to: | all elements |
Inherited: | no |
Percentages: | refer to width of element height for vertical borders? |
Media: | visual |
Computed value: | ‘normal ’, or a list consisting of
absolute lengths, or percentages as specified
|
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 editor's edition), and the
‘repeat()
’ function. The ‘normal
’ value means that the border is not
split, but shown normally.
‘border-parts
’ is a shorthand
property for the four individual properties.
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.
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.
For horizontal borders, parts are listed from left to right. For vertical borders, parts are listed from top to bottom.
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.
The value of the repeat() function is disputed.
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.
border-parts: 10px 1fr 10px;
border-parts-top: 10px 1fr 10px; border-parts-bottom: 10px 1fr 10px; border-parts-right: 5px 1fr 5px; border-parts-left: 5px 1fr 5px;
By making the first part have zero length, the inverse border of the previous example can easily be created:
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;
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;
border-top: thin solid black; border-bottom: thin solid black; border-parts-top: 10px; border-parts-bottom: 10px;
border-top: thin solid black; border-parts: 10px;
This rendering:
A sentence consists of words¹.
¹ Most often.
@footnote { border-top: thin solid black; border-parts: 4em; }
border: 2px solid black; border-top-parts: repeat(10px 10px);
In this example, the repeat pattern is shown five times and there is, by coincidence, no remaining border.
border: 2px solid black; border-top-parts: repeat(10px 10px);
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:
border: 2px solid black; border-top-parts: repeat(10px 10px) 1fr;
The fragment is shown in red for illustrative purposes; it should be shown in black by a compliant UA.
border: 4px solid black; border-top-parts: 40px 20px 0 1fr repeat(20px 20px) 0 1fr 40px;
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.
The fragments are shown in red for illustrative purposes; they should not be visible in compliant UAs.
border: 4px solid black; border-top-parts: 40px 20px 0 1fr 20px 20px 0 1fr 40px;
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.
The fragments are shown in red for illustrative purposes; they should not be visible in compliant UAs.
border: 4px solid black; border-parts-top: 3fr 10px 2fr 10px 1fr 10px 10px 10px 1fr 10px 2fr 10px 3fr;
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:
Here is another rendering where 1fr ends up being 30px:
The fragments are shown in red for illustrative purposes; they should be black in compliant UAs.
In order to move an element from one place in the presentation to another, the ''target-pull()'' value is introduced on the 'content' property. The value uses a functional notation and takes a URI value as argument. In combination with the 'content' property, target elements can be pulled to the anchor element. The content of the anchor element is lost. The target element is only moved in the presentation of the document and not in the structure of the document.
Consider this code:
<style> @media print { .footnote { float: footnote; content: target-pull(attr(href, url)) } .footnote::footnote-call { content: counter(footnote, super-decimal) } .footnote::footnote-marker { content: counter(footnote, super-decimal) } .marker { display: none } } </style> ... <p>A sentence consists of words<a class="footnote" href="#words"> [3]</a>.</p> ... <p id="words"><span class="marker">[3]</span> Most often.</p>
As a result of the ‘target-pull()
’
value, the last p
element is moved from its normal place of
presentation and into the footnote.
Footnotes and running elements are print-specific conventions that move content from one place to another in the presentation of a document. In this section, a generic mechanism for moving content is described: named flows make it possible to push elements from one place in the presentation to another. Different from footnotes, named flows are not counted by default. Also, while UAs are allowed to employ certain heuristics when formatting footnotes, this is not the case for named flows.
Named flows introduce two new values:
float
’ property,
‘to()
’ is introduced to indicate that
the element should be pushed from its natural position in the
presentation and into a named flow.
content
’ property,
‘from()
’ is introduced to indicate
that a named flow should be emptied and that the emptied elements should
become the content of the element. The ‘from()
’ value cannot be combined with any other
values.
Elements that are moved into a new flow are removed from their current
position to where ‘from()
’ has been
set. Elements that are moved into a named flow are only displayed once.
Named flows can be used to create endnotes:
.note { float: to(endnote); } div.chapter::after { content: from(endnote) }
Consider this markup:
<contrib contrib-type="author"> <name> <surname>Knuth</surname> <given-names>Donald E.</given-names> </name> <role>professor</role> </contrib>
combined with this style sheet:
surname { float: to(lastname) } given-names::after { content: from(lastname) } role::before { content: ", " }will result in this presentation:
Donald E. Knuth, professor
Just like footnotes, elements in named flows can have call and marker pseudo-elements. However, these pseudo-elements are not shown by default.
Notes inside tables can be moved to after the table by way of a named flow.
table .note { float: to(tablenote); counter-increment: tablenotes } table .note::note-marker { content: counter(tablenotes, super-decimal) } table .note::note-call { content: counter(tablenotes, super-decimal) } table::after { content: from(tablenote) }
How does one remove identical table notes?
If a named flow isn't emptied, its content is lost.
Consider this code:
.remove { to(dev-null) }
If there is no corresponding ‘from(dev-null)
’ value, elements with class names
"remove" are not displayed. The effect is identical to this code:
.remove { display: none }
Named flows can be used to create sidenotes. In this example, notes are floated into margin boxes in the outside margins:
.note { float: to(sidenote); } @page :left { @left-bottom { content: from(sidenote); } } @page :right { @right-bottom { content: from(sidenote); } }
This specification defines six new properties to describe hyphenation.
Name: | hyphens |
Value: | none | manual | auto |
Initial: | manual |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value |
Values are:
In Unicode, U+00AD is a conditional "soft hyphen" and U+2010 is an explicit hyphen. Unicode Standard Annex #14 describes the role of soft hyphens in the Unicode Line breaking algorithm.
In HTML, ­ represents the soft hyphen character which suggests a line break opportunity.
ex­ample.
hyphenate-resource
’, or other
UA-dependent resources. Characters inside the word take priority over
hyphenation points determined by other resources.
Name: | hyphenate-resource |
Value: | none | <uri> [, <uri> ]* |
Initial: | none |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value |
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.
Often, finding the right hyphenate resource is based on knowing the
language of the text. The lang
attribute is recommended for
encoding the language, and the corresponding selector is used in this
example:
:lang(dk) { hyphenate-resource: url("hyph_da_DK.dic"), url("hyph_da_NO.dic") }
Name: | hyphenate-before |
Value: | <integer> | auto |
Initial: | auto |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value |
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.
Unless the UA is able to calculate a better value, it is
suggested that ‘auto
’ means 2.
Name: | hyphenate-after |
Value: | <integer> | auto |
Initial: | auto |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value |
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.
Unless the UA is able to calculate a better value, it is
suggested that ‘auto
’ means 2.
Name: | hyphenate-lines |
Value: | no-limit | <integer> |
Initial: | no-limit |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value |
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.
Name: | hyphenate-character |
Value: | auto | <string> |
Initial: | auto |
Applies to: | all elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value |
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.
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:
article { hyphenate-character: "\2010" }
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.
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.
@counter-style daggers "*" "\2020" "\2021" "\A7" "#"; ol { list-style-type: daggers }
@counter-style ordinal "1st" "2nd" "3rd" "4th"; h1:before { content: counter(chapter, ordinal) " chapter" }
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.
Consider this example:
@counter-style ordinal "1st" "2nd" "3rd" "4th"; ordered-list { counter-reset: items -1 } list-item { counter-increment: items 2 }
For a series of list-item elements inside an ordered-list element, the value of the items counter will be -1, 1, 3, 5, 7 etc. Given that the ordinal counter style only defines a counter style for 1, 2, 3, and 4, the list will be numbered "-1", "1st", "3rd", "5", "7" etc.
Named counter styles can be imported through @import statements.
@import url(http://www.example.com/armenian-counters.css); /* defines 'armenian' */ ol { list-style-type: armenian }
symbols()
’ list-style-typeA 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.
::footnote-call { content: counter(footnote, symbols('*', '+', '!')) }
Outside the range of specified values, the rendering will be as if the
‘decimal
’ list style type had been
specified.
ol { list-style: symbols("*", "\2020", "\2021", "\A7", "#") }will result in these list-items markers: * † ‡ § # 6 7 8 ...
It is sometimes convenient to replace one character with another
without changing the source document. For example, the apostrophe
character is easily found on keyboards, but in print it is often better
to replace it with a quotation character. The ‘text-replace
’
property offers a way to perform the replacement in the style sheet.
This property only applies to batch processors.
text-replace
’ propertyName: | text-replace |
Value: | [<string> <string>]+ | none |
Initial: | none |
Applies to: | all elements |
Inherited: | yes or? |
Percentages: | N/A |
Media: | visual |
Computed value: | as specified value |
This property is used to replace all occurrences of a certain string
with another string in the content of the element. The property accepts
pairs of strings as value, in addition to the initial ‘none
’ value. For each pair of strings, occurrences
of the first string in the content will be replaced with the second
string. If ‘none
’ is specified, no
replacements will occur.
In this example, the apostrophe character is converted to a quotation character.
body { text-replace: "'" "\2019" }
In this example, the string "--" is replaced with the em-dash character:
body { text-replace: "--" "\2014" }
In this example, the string "..." is replaced with the ellipsis character:
body { text-replace: "..." "\2026" }
In this example, all references to ‘Soviet
Union
’ are replaced with ‘Russia
’.
body { text-replace: "Soviet Union" "Russia" }
Text replacements are applied sequentially.
The two rules below yield the same result. In the first rule all
‘a
’ characters are converted to
‘b
’. Subsequently, all
‘b
’ characters are converted to
‘c
’. In the second rule, all
‘a
’ and ‘b
’ characters are converted directly to
‘c
’.
body { text-replace: "a" "b" "b" "c" } body { text-replace: "a" "c" "b" "c" }
If text replacements are specified on two elements that have an ancestor-descender relationship, only the setting on the youngest element is applied.
In this example, only the second declaration has any effect on text inside the body element.
html { text-replace: "a" "b" } body { text-replace: "c" "d" }
The first string in a pair must have at least one character, while the second may be empty.
In this example, all ‘a
’
characters are removed.
body { text-replace: "a" "" }
If the first string of a pair is empty, or if an odd number of strings has been specified, the whole value is ignored and no text replacements are performed.
This property is evaluated after the ‘content
’ property, and before ‘text-transform
’.
This property is applied after the ‘white-space
’ property.
Consider this CSS code:
p { text-replace: "Soviet Union" "Russia"; }
Text replacements would occur in both these paragraphs:
<p>Hello Soviet Union!</p> <p>Hello Soviet Union!</p>
Consider this CSS code:
p { text-replace: "Soviet Union" "Russia"; white-space: pre; }
Due to the preservation of white space, a text replacement would only occur in the first of these paragraphs:
<p>Hello Soviet Union!</p> <p>Hello Soviet Union!</p>
This property is very powerful and must be used with great care. The purpose of this property is to beautify the presentation of text when changing the source document is impractical.
One weakness is that it is not able to perform a the commonly requested task of replacing pairs of double quotes with proper quote marks. One way of addressing this would be to add support for regular expressions. For example:
body { text-replace: 's/"([^"]*?)"/«$1»/g' }
Another option is to allow uneven number of strings in the value:
body { text-replace: '"' '«' '»' }
In the example above, the first double quote (") would be replace by "«", the second would be replaced by "»" etc. In order for this to work, commas would have to be introduced in order to distinguish between the different sets of replacements:
body { text-replace: "Soviet Union" "Russia", '"' '«' '»' }
Another approach is to select the text to be replaced in the selector:
*::text("Soviet Union") { content: "Russia" }
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.
Name: | image-resolution |
Value: | normal | [ from-image || <dpi> ] |
Initial: | normal |
Applies to: | replaced elements and background images |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | a <dpi> value |
This property accepts either a single value, or a comma-separated list of two values. The values are:
dpi
’ unit identifier. The UA must use the
specified resolution.
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.
This rule specifies that the UA should use the image resolution found in the image itself.
img { image-resolution: from-image }
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.
img { image-resolution: from-image 300dpi } img { image-resolution: 300dpi from-image }
Using this rule, the image resolution is set to 300dpi and the resolution in the image, if any, is ignored.
img { image-resolution: 300dpi }
The ‘marks
’
property from [CSS2] is
part of this specification.
Name: | marks |
Value: | [ crop || cross ] | none |
Initial: | none |
Applies to: | page context |
Inherited: | no |
Percentages: | N/A |
Media: | visual, paged |
Computed value: | specified value |
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.
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.
To set crop and cross marks on a document, this code can be used:
@page { marks: crop cross }
Name: | bleed |
Value: | <length> |
Initial: | 6pt |
Applies to: | page context |
Inherited: | no |
Percentages: | refer to width of page box |
Media: | visual |
Computed value: | as specified value |
This property specifies the extent of the page bleed area outside the page box. This property only has effect if crop marks are enabled.
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:
Name: | bookmark-level |
Value: | none | <integer> |
Initial: | none |
Applies to: | all elements |
Inherited: | no |
Percentages: | N/A |
Media: | all |
Computed value: | specified value |
This property describes what level a certain bookmark has in a
hierarchical bookmark structure. The highest level is ‘1
’, then ‘2
’,
‘3
’ etc.
h1 { bookmark-level: 1 } h2 { bookmark-level: 2 } h3 { bookmark-level: 3 }
Name: | bookmark-label |
Value: | content() | attr() | <string> |
Initial: | content() |
Applies to: | all elements |
Inherited: | no |
Percentages: | N/A |
Media: | all |
Computed value: | specified value |
This property specifies the label of the bookmark, i.e., the text that will represent the bookmark in the bookmark structure.
a { bookmark-label: attr(title, string) } h1 { bookmark-label: content() } h2 { bookmark-label: content(before) } #frog { bookmark-label: "The green frog" }
Name: | bookmark-target |
Value: | none | <uri> | <attr> |
Initial: | none |
Applies to: | all elements |
Inherited: | no |
Percentages: | N/A |
Media: | all |
Computed value: | For URI values, the absolute URI; for attr() values, the resulting URI or string; for other keywords, as specified. |
This property specifies the target of the bookmark link.
.bookmark { bookmark-label: attr(title, string); bookmark-target: attr(href, url); } ... <a class="bookmark" title="The green pear" href="#pears"/>
Name: | bookmark-state |
Value: | open | closed |
Initial: | open |
Applies to: | block-level elements |
Inherited: | no |
Percentages: | N/A |
Media: | all |
Computed value: | specified value |
This property describes the initial state of a bookmark.
* { bookmark-state: closed } #open { bookmark-state: open }
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.
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.
h3 { color: cmyk(0.8, 0.5, 0.0, 0.3) }
The values representing the colors are between ‘0
’ and ‘1
’.
Values outside this range are clipped.
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.
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.
h3 { color: red; color: cmyk(0.5, 0.1, 0.0, 0.2); }
User Agents that do not understand the cmyk()
value, will
use the first color (red). User agents that understand
cmyk()
will use the second color (which is bluish).
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.
The simplest way to signal that a paged presentation is preferable is to
add a value to the ‘overflow
’
property. For example:
body { overflow: paged }
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.
Blank pages that appear as a result of forced page breaks can be styled
with the :blank
pseudo-class.
In this example, forced page break may occur before h1
elements.
h1 { page-break-before: left } @page :blank { @top-center { content: "This page is intentionally left blank" } }
The :blank
pseudo-class has the same specificity as the
:first
pseudo-class. A page matched by :blank
will still be matched by other page selectors.
If headers have been specified on all right pages, a blank right page
will be matched by both :blank
and :right
.
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:
h1 { page-break-before: left } @page :blank { @top-center { content: none } } @page :right { @top-center { content: "Preliminary edition" } @bottom-center { content: counter(page) } }
Due to the higher specificity of :blank
over
:right
, the top center header is removed even if
content: none
comes before content: "Preliminary
edition"
.
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.
To support page floats, the ‘float
’ 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):
The keywords can be combined to form more complex expressions.
This code floats figures to the top of the next page:
.figure { float: top next page; }
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.
In this example, the element will be floated to the top of the next page unless it fits on the current page.
.figure { float: none, top next page; }
The new values have the following meaning:
left
’. On a left page, this value is
synonymous with ‘right
’.
left
’, On a right page, this value is
synonymous with ‘right
’.
bottom
’, the
float is placed on the bottom of the next page.
page()
’
value. The name page should appear as early as possible, but any
‘next
’ keywords should be
honored.
display: none
’ is set.
The keywords can be combined into sets this way:
none
’, ‘hide
’, and ‘footnote
’ must appear alone
next
’ may appear once along
with ‘page
’
Float element to the top of the page:
.figure { float: top page; width: 1gr; }
Float element to the top of the next page:
.figure { float: top next page; width: 1gr; }
Float figure to the top right of the multi-column element:
.figure { float: top right multicol; width: 1gr; }
Place footnotes at the bottom of the inside columns:
@footnote { float: bottom inside multicol; width: 1gr; }
Place figure on top of current column:
.figure { float: top; }
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.
.figure { float: none, hide; }
In this example, wide tables are floated to landscape pages:
table.wide { float: page(landscape); }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:
table.wide { page: landscape; }
Consider this code:
table { float: page(landscape); }
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:
table { float: page(landscape); page-break-before: always; }
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.
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.
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.
The proposed functionality relies on three new components:
multicol
’:
float-offset
’
gr
’
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.
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.
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.
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.
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.
float-offset
’ propertyName: | float-offset |
Value: | <length> <length> ? |
Initial: | 0 0 |
Applies to: | floated elements |
Inherited: | no |
Percentages: | refer to width and height of containing block |
Media: | visual, paged |
Computed value: | one or two absolute lengths |
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.
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).
If another unit is used, it means that the float is pushed a distance equal to the specified length.
‘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.).
This code serves as the base document for the examples of this section:
<html> <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 */ } </style> <body> <div> Lorem ipsum dolor sit amet. Nam at jus. <img src="foo"/> Sed imp er di et ris. Cur abi tur et sapen. ... </div> </body> </html>
This code can be rendered as:
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Vivamus a metus.
Aenean at risus
pharetra ante luctu
feugiat quis enim.
Cum sociis natoque
penatibus et magni.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Vivamus a metus.
Aenean at risus
pharetra ante luctu
feugiat quis enim.
Cum sociis natoque
penatibus et magni.
If this code is added to the base document:
img { float: right }
it may be rendered as:
Lorem ipsum dolor
sit amet. Nam at jus.
Sed
imp
er di
et ris.
Cur
abi
tur et sapen. Fusce
sed ligula a turpis.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Vivamus a metus.
Aenean at risus
pharetra ante luctu
feugiat quis enim.
Cum sociis natoque
penatibus et magni.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Vivamus a metus.
Aenean at risus
pharetra ante luctu
feugiat quis enim.
Cum sociis natoque
penatibus et magni.
This code floats images to the bottom of their containing block and sets the width to be that of the column:
img { float: bottom; width: 1gr; }
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:
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Vivamus a metus.
Aenean at risus
pharetra ante luctu
feugiat quis enim.
Cum sociis natoque
penatibus et magni.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Vivamus a metus.
Aenean at risus
pharetra ante luctu
feugiat quis enim.
Cum sociis natoque
penatibus et magni.
This code floats figures to the top of the multi-column element.
div.figure { float: top right multicol; width: 1gr }
The ‘1gr
’ value on ‘width
’ is equal to the width of the
containing block. Here is a possible rendering:
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Vivamus a metus.
Aenean at risus
pharetra ante luctu
feugiat quis enim.
Cum sociis natoque
penatibus et magni.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Vivamus a metus.
Aenean at risus
pharetra ante luctu
feugiat quis enim.
Cum sociis natoque
penatibus et magni.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
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:
div.quote { float: top left multicol; float-offset: 2.5gr; width: 1gr }
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Vivamus a metus.
Aenean at risus
pharetra ante luctu
feugiat quis enim.
Cum sociis natoque
penatibus et magni.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Vivamus a metus.
Aenean at risus
pharetra ante luctu
feugiat quis enim.
Cum sociis natoque
penatibus et magni.
Assuming a three-column layout, the same rendering can be achieved by floating the element to the right instead:
div.quote { float: top right multicol; float-offset: 2gr; width: 1gr }
The floated element will never be pushed outside the content edges of
the multicol element due to ‘float-offset
’.
img { float: top right multicol; width: 3gr; }
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.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Vivamus a metus.
Aenean at risus
pharetra ante luctu
feugiat quis enim.
Cum sociis natoque
penatibus et magni.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
img { float: top right multicol; width: 2gr; }
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.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Vivamus a metus.
Aenean at risus
pharetra ante luctu
feugiat quis enim.
Cum sociis natoque
penatibus et magni.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Vivamus a metus.
Aenean at risus
pharetra ante luctu
feugiat quis enim.
Cum sociis natoque
penatibus et magni.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
img { float: top right multicol; width: 1.5gr; }
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.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Vivamus a metus.
Aenean at risus
pharetra ante luctu
feugiat quis enim.
Cum sociis natoque
penatibus et magni.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Vivamus a metus.
Aenean at risus
pharetra ante luctu
feugiat quis enim.
Cum sociis natoque
penatibus et magni.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
img { float: top left multicol; float-offset: 1.5gr 50%; width: 8em; }
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:
Lorem ipsum dolor
sit amet. Nam at jus.
Sed
imp
er di
et ris.
Cur
abi
tur et sapen. Fusce
sed ligula a turpis.
Lorem ipsum dolor
sit amet. Nam at jus.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Vivamus a metus.
Aenean at risus
pharetra ante luctu
feugiat quis enim.
Cum sociis natoque
penatibus et magni.
img { float: top left multicol; float-offset: 1.25gr 50%; width: 6em; }
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:
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imper di et
ris. Cur abi tur
et sapen. Fusce
sed ligula a sic
turpis. Lorem
ipsum dolor sit
amet. Namat jus. Sed
imper di et ris curit.
Lorem ipsum dolor
sit amet. Nam at jus.
Lorem ipsum dolor
sit amet. Nam at jus.
Sed imp er di et ris.
Cur abi tur et sapen.
Vivamus a metus.
Aenean at risus
pharetra ante luctu
feugiat quis enim.
Cum sociis natoque
penatibus et magni.
In CSS 2.0, the ‘page
’ property takes one value, and the
value can be ‘auto
’ or a named
page.
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.
page
’ propertyName: | page |
Value: | auto | [ <identifier> ]+ auto? |
Initial: | auto |
Applies to: | block-level elements |
Inherited: | no |
Percentages: | N/A |
Media: | all |
Computed value: | specified value |
The content of the element is laid out on the list of pages specified on this property. The values mean:
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.
auto
’
auto
’ keyword, the page list continues after
the end of the element, otherwise the page list reverts back to that of
the parent element.
<div class="chapter"> <h1>The beginning</h1> .... </div> <div class="chapter"> <h1>The end</h1> .... </div>
Given the above markup, this style sheet will put the content on pages that have chapter titles at the top — except the first page of each chapter.
@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() }
This code will do the same using the :first pseudo-class:
@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() }
Note that chapter:first
only applies if the is a forced
page break before the first chapter
page.
<h1>The beginning</h1> .... <h1>The end</h1> ....
Given the above markup, this style sheet will put the content on pages that have chapter titles at the top — except the first page of each chapter.
@page chapter { @top-center { content: string(title) } } @page chapter-start { @top-center { content: none } } h1 { page: chapter-start chapter auto; string-set: title content() }
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.
<table>...</table>
Given the above markup, this style sheet will put all tables on "rotated" pages, with a page break before and after each table:
@page rotated { size: landscape } table { page: rotated }
<div> <table>...</table> <table>...</table> <p>This text is rendered on a 'narrow' page</p> </div>
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.
@page narrow { size: 9cm 18cm } @page rotated { size: landscape } div { page: narrow } table { page: rotated }
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.
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); }
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.
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.
Change bars do not take up space in the layout.
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; }
This model is borrowed from XSL-FO.
This is an early sketch of what may turn into a more complete proposal.
Line numbers are sometimes used to reference particular lines of a document. Line numbers can be generated through pseudo-elements.
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.
::line-number-left(5) { font: 10pt serif; content: counter(line); } @page { counter-reset: line }
These are the pseudo-elements that can set line numbers: ‘line-number-left
’, ‘line-number-right
’, ‘line-number-inside
’, ‘line-number-outside
’.
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.
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.
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 generated lists; 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).
To generate lists in CSS, a prototype list 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.
Name: | prototype |
Value: | list | none |
Initial: | none |
Applies to: | all elements |
Inherited: | no |
Percentages: | N/A |
Media: | all |
Computed value: | specified value |
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.
Strictly, this property isn't necessary -- one could infer
from ‘prototype-insert-position
’
or ‘prototype-insert-policy
’
that something is a prototype list.
Name: | prototype-insert |
Value: | <identifier> [ content() || content(before) || content(after) || content(first-letter) [, <identifier> [ content() || content(before) || content(after) || content(first-letter) ] ]* | none |
Initial: | none |
Applies to: | all elements |
Inherited: | no |
Percentages: | N/A |
Media: | all |
Computed value: | specified value |
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.
Name: | prototype-insert-position |
Value: | current | sorted |
Initial: | current |
Applies to: | all elements |
Inherited: | no |
Percentages: | N/A |
Media: | all |
Computed value: | specified value |
Name: | prototype-insert-policy |
Value: | normal | unique |
Initial: | normal |
Applies to: | all elements |
Inherited: | no |
Percentages: | N/A |
Media: | all |
Computed value: | specified value |
Here is an example of how to generate a TOC with leaders and page numbers.
... <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() } </style> ... <div id="toc"> <h1>Table of contents</h1> <div id="toc-entry"></div> </div> ... <h1 class="chapter">Introduction</h1> ...
There are three new properties and one new value on the ‘content
’ property in the above example. This
rule:
#toc { prototype: list }
declares that the #toc element is a prototype list that accepts generated lists. This rule:
prototype-insert-position: current;
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:
#toc-entry::after { content: leader('. ') source-counter(page)}
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:
h1.chapter { prototype-insert: toc-entry content() }
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.
Glossaries provide a new kind of challenge: entries are sorted alphabetically.
Here is an example of how to generate a glossary:
... <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) } </style> ... <div id="glossary"> <h2>Glossary of terms</h2> <dl> <dt id="glossary-term">...</dt> <dd id="glossary-definition">...</dd> </dl> </div> ... <p>The <dfn title="Leading paragraph">introduction</dfn> comes first.</p>
By inserting the term ‘sorted
’ and
the definition in the ‘current
’
position, terms will be sorted alphabetically with their respective
definition following.
Tables are commonly used to display lists. For example, a list of terms and their definition can be presented this way:
Term | Definition |
---|---|
yes | expresses assent or agreement |
no | expresses negation, dissent, denial, or refusal |
#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) } </style> ... <table id="glossary"> <th style="border: thin solid black">Term</th> <th style="border: thin solid black">Definition</th> <tr id="glossary-term"> <td></td> <td id="glossary-definition"></td> </tr> </table> ... <p>The <dfn title="Leading paragraph">introduction</dfn> comes first.</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.
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.
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.
... <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() } </style> ... <div id="index"> <h2>Index</h2> <div id="index-marker"></div> <div id="index-entry"></div> </div> <p>An <dfn class="entry">emphasized element</dfn> stands out.</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.
<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(); } </style> <div id="toc"> <h2>Table of contents</h2> <div id="toc-list"> <div id="toc-entry-section"></div> <div id="toc-entry-subsection"></div> </div> </div> <div id="acronym-list"> <h2>List of acronyms</h2> <dl> <dt id="acronym"></dt> <dd id="acronym-definition"></dd> </dl> </div> <div id="index"> <h2>Index</h2> <div id="index-marker"></div> <div id="index-entry"></div> </div> <body> <h2>Introduction</h2> <p>This part defines the a acronym: <acronym title="HyperText Markup Language">HTML</acronym>. <h3>More to learn</h3> <p>An <dfn>emphasized element</dfn> element stands out. </body>
@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 }
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é, 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.
Property | Values | Initial | Applies to | Inh. | Percentages | Media |
---|---|---|---|---|---|---|
bleed | <length> | 6pt | page context | no | refer to width of page box | visual |
bookmark-label | content() | attr() | <string> | content() | all elements | no | N/A | all |
bookmark-level | none | <integer> | none | all elements | no | N/A | all |
bookmark-state | open | closed | open | block-level elements | no | N/A | all |
bookmark-target | none | <uri> | <attr> | none | all elements | no | N/A | all |
border-parts, border-parts-top, border-parts-right, border-parts-bottom, border-parts-left | normal | [ <length> | <percentage> | <fraction> | repeat() ]+ | normal | all elements | no | refer to width of element height for vertical borders? | visual |
float-offset | <length> <length> ? | 0 0 | floated elements | no | refer to width and height of containing block | visual, paged |
hyphenate-after | <integer> | auto | auto | all elements | yes | N/A | visual |
hyphenate-before | <integer> | auto | auto | all elements | yes | N/A | visual |
hyphenate-character | auto | <string> | auto | all elements | yes | N/A | visual |
hyphenate-lines | no-limit | <integer> | no-limit | all elements | yes | N/A | visual |
hyphenate-resource | none | <uri> [, <uri> ]* | none | all elements | yes | N/A | visual |
hyphens | none | manual | auto | manual | all elements | yes | N/A | visual |
image-resolution | normal | [ from-image || <dpi> ] | normal | replaced elements and background images | yes | N/A | visual |
marks | [ crop || cross ] | none | none | page context | no | N/A | visual, paged |
page | auto | [ <identifier> ]+ auto? | auto | block-level elements | no | N/A | all |
prototype | list | none | none | all elements | no | N/A | all |
prototype-insert | <identifier> [ content() || content(before) || content(after) || content(first-letter) [, <identifier> [ content() || content(before) || content(after) || content(first-letter) ] ]* | none | none | all elements | no | N/A | all |
prototype-insert-policy | normal | unique | normal | all elements | no | N/A | all |
prototype-insert-position | current | sorted | current | all elements | no | N/A | all |
string-set | [[ <identifier> <content-list>] [, <identifier> <content-list>]* ] | none | none | all elements | no | N/A | all |
text-replace | [<string> <string>]+ | none | none | all elements | yes or? | N/A | visual |