Copyright © 2011 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 functionality described in this WD is scaled down compared to earlier versions. The remaining functionality is considered to be useful, to fit well into the CSS framework, and to be within reach of implementations. Indeed, significant parts of the draft has already been implemented.
(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.
env()
’
Information about date and time is formatted according to the locale of the user's system.
Or, should there be a way to specify the locale? Or should we simply format all in ISO format (e.g., 2010-03-30)?
On many systems, preformatted strings in the user's locale can be found through the strftime function. The date, time and date-time strings can be found by using the "%x", "%X" and "%c" conversion strings, respectively.
@page { @top-right { content: env(url) } @bottom-right { content: env(date-time) } }
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 |
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; }
Footnote elements are presented inside the footnote area, but they inherit through their normal place in the structure of the document.
The ‘display
’ property on
footnote elements is ignored. Instead, the value of the ‘display
’ property in the @footnote context
determines if footnotes are block or inline elements.
In this example, the footnotes are displayed inline:
@footnote { display: inline; } span.footnote { float: footnote; }
Here is one possible presentation of inline footnotes:
¹ The first footnote. º The second footnote.
For each new footnote element, the ‘footnote
’ counter is automatically incremented.
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 in other
places.
Should the footnote are be positioned using page floats or (fixed?) absolute positioning? Or both?
These rules place the footnote area at the bottom of the page, spanning all columns:
@page { @footnote { float: bottom; column-span: all; width: 100%; } }
These rules place the footnote area at the bottom of the first column:
@page { @footnote { float: bottom; width: 100%; } }
This code places the footnote area at the bottom of the right column:
@page { @footnote { float: bottom-corner; width: 100%; } }
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 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-clip: 4em; padding-top: 0.5em; }
The result of this code is a footnote area separated from other content
above it by margin, border and padding. Only 4em of the border is visible
due to the ‘border-clip
’
property, which is defined in CSS Backgrounds and
Borders Module Level 4. .
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, in the same place, and replacing, the ::before pseudo-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 an element is turned into a footnote, certain magical things happen. The element is moved to the footnote area, a footnote call is left behind in its place, a footnote marker is displayed before the element, and the footnote counter is incremented.
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.
Hyphenation means splitting words to improve the layout of paragraphs. This specifications does not define the exact rules for hyphenation, but describes six properties that influence hyphenation.
hyphens
’ propertyName: | hyphens |
Value: | none | manual | auto | all |
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.
hyphenate-resource
’, or other
UA-dependent resources, are marked. The visual appearance of the mark is
UA-dependent.
hyphenate-resource
’ propertyName: | 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 – in
turn, from the beginning – until it finds one that is able to
determine hyphenation points in a word. The ‘none
’ value indicates that no external
resources are available. In any case, the UA can also use local resources
not listed on this property.
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") }
hyphenate-before
’ and ‘hyphenate-after
’ propertiesName: | 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.
hyphenate-lines
’ propertyName: | 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.
hyphenate-character
’ propertyName: | 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 strings that are shown between parts of
hyphenated words. 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" }
hyphenate-last-line-avoid
’ propertyName: | hyphenate-last-line-avoid |
Value: | auto | always | column | page | spread |
Initial: | auto |
Applies to: | block-level elements |
Inherited: | yes |
Percentages: | N/A |
Media: | visual |
Computed value: | specified value |
This property indicates hyphenation behavior at the end of elements, column, pages and spreads. A spread is a set of two pages that are visible to the reader at the same time. Values are:
p { hyphenate-last-line-avoid: always } div.chapter { hyphenate-last-line-avoid: spread }
A paragraph may be formatted like this when ‘hyphenate: auto
’ is set:
This is just a simple example to show Antar- ctica.
With ‘hyphenate-last-line-avoid:
always
’ one would get:
This is just a simple example to show Antarctica.
super-decimal
’ list-style-typeThis section will be moved to css3-lists (minutes)
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).
::footnote-marker { content: counter(footnote, super-decimal) }
Using super-script glyphs is optional; UAs may also scale and position other glyphs for use in footnote calls.
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 ...
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
’ and ‘background-image-resolution
’ properties are
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: | as specified value (or, should it be only one value?) |
The values are:
normal
’ had been specified.
dpi
’ unit identifier. The <dpi> value
sets the resolution of the image. In combination with ‘from-image
’, the specified dpi is only used if
the image does not have a resolution.
This rule specifies that the UA should use the image resolution found in the image itself.
img { image-resolution: 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 }
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 }
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 }
Printers do not use RGB colors, they (often) use CMYK: cyan, magenta,
yellow and black. The ‘device-cmyk()
’
functional value allows style sheets to express device-dependent CMYK
colors.
h3 { color: device-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.
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: device-cmyk(0.5, 0.1, 0.0, 0.2); }
User Agents that do not understand the device-cmyk()
value, will use the first color (red). User agents that understand
device-cmyk()
will use the second color (which is bluish).
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"
.
Printed publications are paged, while screen-based presentations of web pages are most often presented in a continous manner with a scrollbar on the side. There are reasons to believe that screen-based presentations also could benefit from using paged presentations. There is nothing in web specifications that prevent browsers from adding a page-based mode today. However, most web content is authored and styled with a continous presentation in mind. This could change if it becomes possible to describe paged presentations in style sheets. This section is an attempt to do so.
To support paged presentations, four new values are added to the
‘overflow
’ property:
paged-x
’, but with added
UA-specific controls to change pages
paged-y
’, but with added
UA-specific controls to change pages
In this example, the root element is constrained to have the same height as the initial containing block. Overflow content will be laid out on subsequent pages along the x axis. In LTR languages, this means right; in RTL languages this means left; in vertical-rl this means right.
html { overflow: paged-x; height: 100%; }
In this example, one element within the document is paged, and controls are added so that users can navigate from one page to the next. As such, the controls have the same effect as scrollbars in continous presentations.
#content { overflow: paged-x-controls; height: 400px; }
Paged navigation within a page (as described above), can also be naturally extended to navigation between web documents. To support this, a new @-rule is proposed: @navigation. The purpose of @navigation is to describe which documents the user can navigate to by moving up, right, down, or left from the current document.
Four new properties are allowed inside @navigation: nav-up, nav-right, nav-bottom, nav-right.
The name of the properties inside @navigation are borrowed from CSS3 Basic User Interface Module.
The properties accept these values:
<link rel=index href="../index.html"> <link rel=previous href=g3.html> <link rel=next href=g1.html> ... @-o-navigation { nav-up: link-rel(index); nav-left: link-rel(previous); nav-right: link-rel(next); }
The "link-rel" name is a bit academic, perhaps the "go()" name can be used instead?
@navigation { nav-left: go(back); }
@navigation { nav-up: url-doc(..); nav-down: url-doc(a1.html); }
@navigation { nav-up: url(..); nav-down: url(a1.html); }
Combined with the @document-rule, navigation maps can be described:
@document url("http://example.com/foo") { @navigation { nav-right: link-rel(next); } } @document url("http://example.com/bar") { @navigation { nav-upt: link-rel(next); } }
To describe page shift effects, four new properties inside @navigation are proposed: nav-up-shift, nav-right-shift, nav-down-shift, nav-left-shift. These properties take one of several keyword values:
The proposed keyword values are loosely described. Are there better ways to describe transitions?
@navigation { nav-up-shift: pan; nav-down-shift: flip; }
Images and figures are sometimes displayed at the top or bottom of
pages and columns. This specificaton adds new keywords on the
‘float
’ property which, in
combination with integer values on ‘column-span
’ and the new ‘float-modifier
’, provides support for common
paper-based layouts.
Four new keywords on ‘float
’
have been added:
top-corner
’,
exept the box is floated to the bottom
top
’ if the box is
naturally near the top; same as ‘bottom
’ if the box is naturally near the
bottom. The ‘widows
’/‘orphans
’ properties may be consulted to
determine if the box is near the top/bottom.
These new keywords only apply in paged media; in continous media declarations with these keywords are ignored.
Float figure to top of natural column:
.figure { float: top; display: block; }
.figure { float: top; width: 50% }
Float figure to top of the natural column, spanning all columns:
.figure { float: top; column-span: all }
Float figure to top/bottom of the last column of the multicol element on that page:
.figure { float: top-corner }
The ‘column-span
’ property is
extended with integer values so that elements can span several columns.
If the specified integer value is equal to, or larger than the number of
columns in the multicol element, the number of columns spanned will be
the same as if ‘column-span: all
’ had
been specified.
In combination with ‘column-span
’, the figure is floated to the
top corner of the multicol element on that page:
.figure { float: top-corner; column-span: 2; width: 100% }
body { columns: 3 } img.A { column-span: 2; width: 100% } .one { column-span: 2 }
These new values on ‘float
’ can
be combined with the other values:
Can this value be combined with all other values? E.g., does "left unless-room" make sense?
.figure { float: top next-column } .figure { float: top unless-room } .figure { float: top-corner next-page }
img { float: left intrude; width: 120%; }
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.
Would it be better to have these modifiers on a new
property, e.g. ‘float-adjust
’.
This way, the ‘float
’ property
would only need to take one value.
Two allow content to flow to the inside and outside of a page, these
keywords are added to the ‘float
’
property:
left
’. On a left page, this value is
synonymous with ‘right
’.
left
’, On a right page, this value is
synonymous with ‘right
’.
.figure { float: outside }
In multi-column layouts, baselines are typically aligned between
adjacent columns. This gives the presentation a visual rythm, and text in
the end of the columns will be alignend. To support this, a new value on
the ‘line-box-contain
’ property is defined:
‘line-grid
’ (or, perhaps, ‘gap
’, ‘crack
’,
‘snap
’, ‘snap-gap
’, ‘void
’, ‘grid
’,
‘snap-to-grid
’).
The value means that the height of the line in which the element occurs
should be rounded up to the smallest multiple of the used ‘line-height
’ value on the containing block.
In this example, the stacking height of div.figure would be 30px (2 * 15px)
div.multicol { line-height: 15px } div.figure { height: 20px; line-box-contain: block inline replaced line-grid }
The line-box-contain property is defined in CSS3 module: line.
A similar idea — ‘line-stacking-strategy: grid-height
’ — was
proposed in a previous
version of the CSS3 line module. The ‘line-stacking-strategy
’ property is used in XSL.
In CSS 2.0, first, left and right pages can be selected. This specification adds support for selecting the nth page in the document, or the nth named page.
This example sets the background color of the second page in the document:
@page :nth(2) { background: green; }
This example sets the background color of the second page of all chapters in a document:
@page chapter { background: yellow; } @page chapter:nth(2) { background: green; } div.chapter { page: chapter; }
The arguments to the nth() functional notation is the same as for the nth-child() pseudo-class.
@page chapter:nth(2n+1) { background: green; }
Even when a named page is not defined through an @page
name { .. }
construct, the name can still be used with
:nth().
Even when the first line is commented out, the second page of all chapters in the document will be green.
/* @page chapter { ... } */ @page chapter:nth(2) { background: green; } div.chapter { page: chapter }
@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 |
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-last-line-avoid | auto | always | column | page | spread | auto | block-level 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 | all | 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 |
string-set | [[ <identifier> <content-list>] [, <identifier> <content-list>]* ] | none | none | all elements | no | N/A | all |