Copyright © 2007 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.
This module describes features often used in printed publications. In particular, this specification describes how CSS style sheets can express running headers and footers, leaders, cross-references, footnotes, sidenotes, named flows, hyphenation, new counter styles, character substitution, image resolution, page floats, advanced multi-column layout, conditional content, crop and cross marks, bookmarks, CMYK colors, continuation markers, change bars, line numbers, named page lists, and generated lists. 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 section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than 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. Other features are merely at the brainstorming stage. In general, features presented earlier in this draft are more mature that those presented later in the draft.
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 various functionality which is commonly used in paper-based publishing. Some of the proposed functionality (e.g., hyphenation and the new list style types) 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. 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. The only reason for creating a named string is to display the string later by using the ‘content’ property.
Consider this code:
h1, h2 { string-set: header self }
The result is that, whenever an h1 or h2
element is encountered, its textual content is copied into a named string
called header. By referring to the named string, its content can
be retrieved:
@page :right { @top-right { content: string(header) }}
| Name: | 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 keywords, in any order:
self’ refers to the textual
content of the element, not including the content of its ::before and
::after pseudo-element. The content of the element's descendants,
including their respective ::before and ::after pseudo-elements, are
included in the returned content.
before’ refers to the content of
the element's ::before pseudo-element
after’ refers to the content of
the element's ::after pseudo-element
first-letter’ refers to the
first letter of the textual content of the element, not including the
content of its ::before and ::after pseudo-element. The definition of a
letter is the same as for :first-letter pseudo-elements. The expected
use for this function is to create one-letter headers in, e.g.,
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 lost.
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.
h1 {
string-set: header "Chapter " counter(header) ": " self;
counter-increment: header }
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.
h1:before { content: "Chapter " counter (header) }
h1 {
string-set: header before self;
counter-increment: header }
dt { string-set: index first-letter }
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) self }
dt { string-set: index first-letter, entry self }
If the value of the named string is changed by an element on a certain
page, the named string may have several values. 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
last-except’: the named string's
exit value for that page is used, 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(entry, first) }}
@page { @top-right { content: string(entry, last) }}
@page { @top-center { content: string(index, first) }}
dt { string-set: index first-letter, entry self }
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, last-except) }}
h1 { string-set: chapter self }
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 must 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 are shown in margin boxes, but they 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 which one of these keywords: ‘start’, ‘first’,
‘last’, ‘last-except’. The keywords have the same meaning as
for the ‘string()’ value.
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, last-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 only.
...
<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 as the
‘first’ keyword has been specified.
However, the second "span" element still sets the exit value for "header"
and this value is then used on the next page.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 describe the glyph pattern that make up the
leaders. 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 |
Some fonts may not have suitable glyphs for all patterns. For example, in some Eastern languages, the alignment of the shape within the glyph may not be optimal for creating leaders.
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’.
UAs should attempt to align leader patterns on a page.
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 error.
Cross-references are generated by adding content to the source anchor of a link. For example, the style sheet can specify that the source anchor should be presented with the string " (see page 72)" added after the link.
Here is the CSS code to achieve this on common HTML markup:
a::after { content: "(see page " target-counter(attr(href, url), page, decimal) ")" }
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. An
optional argument at the end indicates which list style type to use when
presenting the resulting number; ‘decimal’ being the default.
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’ refers to the textual
content of the element, not including the content of its ::before and
::after pseudo-element. The content of the element's descendants,
including their respective ::before and ::after pseudo-elements, are
included in the returned content.
before’ refers to the content of
the element's ::before pseudo-element
after’ refers to the content of
the element's ::after pseudo-element
first-letter’ refers to the first
letter of the textual content of the element, not including the content
of its ::before and ::after pseudo-element.
The default value is ‘content’.
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 for a designated part of the text. References to footnotes are marked with a note-call in the main text.
In its simplest form, making a footnote is very 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-move(attr(href, url)) }
.marker { display: none }
}
</style>
...
<p>A sentence consists of words<a class="footnote" href="#words"> [3]</a>.
...
<p id=words><span class="marker">[3]</span> Most often.
When shown in a legacy browser, the note-call will be shown as a clickable link to an end note. When printed according to this specification, there will be a footnote:
A sentence consists of words¹. ¹ Most often.
As far as possible, footnotes try to reuse other parts of CSS. Footnotes, however, have a typographic tradition of their own and supporting them through existing or generic mechanisms is impractical.
In order to support footnotes in CSS, the following functionality is added:
footnote’
@footnote’
::footnote-call’ and ‘::footnote-marker’
footnote’
target-move()’
super-decimal’, and
symbol(...)
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 incremented due to a setting
on ‘counter-increment’ in the
default style sheet.
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 normally
appears at the bottom of the page due to a setting in the default style
sheet.
This code is part of the default style sheet:
@page {
@footnote {
float: bottom page;
width: 100%;
}
}
The box will be the containing block of the footnote area due to the ‘page’ keyword.
An element with ‘float: footnote’
inherits from its parent, not from @footnote.
The footnote area does not have to be placed at the bottom of the page.
It can be floated to anywhere on the page that the ‘float’ property or ‘position: fixed’ allow.
These rules place the footnote area on the left side of the page:
@page {
@footnote {
position: fixed;
top: 10em;
left: 3em;
width: 5em;
}
}
These rules place the footnote area at the bottom of the left column:
@page {
@footnote {
float: bottom left column;
}
}
The ‘column’ keyword specifies that the containing block is a column box. For the footnote area, one of the column boxes of the oldest multicol element on the page will be the containing block. In this example, the right-most column-box is chosen due to the ‘right’ keyword. Finally, the footnote area appears at the bottom of that column due to the ‘bottom’ keyword.
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, and ‘border-length’.
This example uses some of the applicable properties on @footnote:
@footnote {
margin-top: 0.5em;
border-top: thin solid black;
border-length: 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.
| Name: | border-length |
| Value: | <length> | auto |
| Initial: | auto |
| Applies to: | @footnote areas |
| Inherited: | no |
| Percentages: | refer to normal length of horizontal border of footnote area |
| Media: | visual |
| Computed value: | the absolute length |
The purpose of ‘border-width’ is to describe a common way of separating footnotes from other content.
A sentence consists of words¹. ______ ¹ Most often.
The ‘border-length’ property affects the rendering of borders in the inline direction of the footnote area; other border are not affected. If the length of horizontal borders are longer than the value of this property, part of the border will be invisible and the background of the footnote area will be shown instead. Which part of the border is made invisible depends on the inline direction of the text; if the direction is left-to-right, the left part of the border will be visible, and vice versa.
When an element is moved to the footnote area, a note call is
left behind. The content and style of the footnote-call is set on the
‘footnote-call’ pseudo-element.
span.footnote::footnote-call {
content: counter(footnote, super-decimal)
}
In this example, the resulting note call is a super-scripted decimal
number.A ::note-marker pseudo-element is added to each footnote element. It typically contains the same numbers/symbols as the note-call pseudo-element to link the two together.
This code is part of the default style sheet:
.footnote::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 ‘counter-increment’ property
can be set in the @footnote rule. Each time an element with ‘float: footnote’ is found, the corresponding
counter is incremented.
This rule is found in the default style sheet:
@footnote {
counter-increment: footnote;
}
The footnote counter can be reset on a page basis.
@page { reset-counter: footnote }
target-move()’ valueIn order to fetch the content of another element (e.g., a linked note),
the ‘target-move()’ value is
introduced. The value uses a functional notation and expects a URI value
as argument. In combination with the ‘content’ property, target elements can be
moved to the anchor element.
Consider this example:
<style>
@media print {
.footnote {
float: footnote;
content: target-move(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 id=words><span class="marker">[3]</span> Most often.
As a result of the ‘target-move’
value, the last p element is moved from its normal place of
presentation and into the footnote.
Describe target-move in more detail.
Footnotes must appear as early as possible under the following constraints:
Sidenotes are supported the same way as footnotes; only the name and the settings in the default style sheet differentiates the two.
The motivation for having another page-based area into which content can be floated is that footnotes and sidenotes are often used in the same document.
This example moves images to the outside margin of pages:
@page :left {
margin-left: 10em;
@sidenote { position: fixed; left: -8em; width: 6em }
}
@page :right {
margin-right: 10em;
@sidenote { position: fixed; right: -8em; width: 6em }
}
img { float: sidenote }
The reason for having both a footnote and a sidenote area on every page is that some documents use both.
Should there be a mechanism to create new areas like footnote/sidenote, or are two "magic" area enough?
It is sometimes useful to move elements out of their normal flow and into other containers. CSS is not a transformation language, so the motivation for supporting flows is presentational rather than structural. Mechanisms to support footnotes, sidenotes and running headers and footers – which are conventional ways of moving content – have been described above. In this section, a more generic mechanism called named flows is described. It well-suited to support endnotes.
Named flows introduces two new values:
to()’ is introduced to indicate that
the element should be moved away from its natural position and into the
named flow.
from()’ is introduced to indicate
that elements that have been moved into a named flow flow should become
the content of the element.
Elements that are moved into a new flow are removed from their current
position to where ‘from()’ has been
set. Like for footnotes, elements that are moved into a named flow are
only displayed once.
If ‘from(<flow>)’ isn't set
anywhere, the content is lost.
table .note {
float: to(endnote);
}
table::after { content: from(endnote) }
Elements with ‘float: to(endnote)’
are moved to where ‘content:
from(endnote)’ is set.
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) ", " }
will result in this presentation:
Donald E. Knuth, professor
Should there be a "scope" to the moving so that remaining content isn't placed at the end of the document, but at the end of the scope?
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:
| Name: | hyphenate-resource |
| Value: | none | <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" }
super-decimal’ list-style-typeA new list-style-type, ‘super-decimal’, is introduced to better support
footnotes. Small, super-scripted footnote calls are common; the first
three numbers have code points in Latin-1 and some font families have
even more super-scripted glyphs. The ‘super-decimal’ keyword allow these font resources
to be used and replaces the used of ‘font-size’ and ‘vertical-align’ (which prohibit the use of
special-purpose glyphs).
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 lots of 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. If a counter has a value less than one, or
greater than the number of strings in the list, 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.
symbol()’ list-style-typeA new list-style-type with a functional notation is introduced to
avoid the indirection of having to name counter styles. The ‘symbol()’ value takes a comma-separated list of
strings, just like named counter styles described above.
ol { list-style: "*" "\2020" "\2021" "\A7" "#" }
::footnote-call {
content: counter(footnote, symbols(‘*’, ‘+’, ‘!’))
}
Should there be a way to indicate the behavior if there are more items than strings? Proposals include: "alphabetic", "enumerate", "numeric", "cycle", "ideographic".
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.
| Name: | 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 replaces 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, 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" }
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 very powerful. Use with care. The primary purpose is to beautify and correct text where changing the source document is impractical.
Image resolution, as the term is used in this document, means pixels per physical length, e.g., pixels per inch. Some image formats can contain 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 | auto | <dpi> [ , normal | <dpi> ]? |
| Initial: | normal |
| Applies to: | replaced elements |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Computed value: | as specified value (or, should it be only one value?) |
This property accepts either a single value, or a comma-separated list of two values. The values are:
If, after evaluating the specified values, no image resolution has
been determined, the UA should behave as if ‘normal’ had been specified.
This rule specifies that the UA should use the image resolution found in the image itself.
img { image-resolution: auto }
This rule specifies that the UA should use the image resolution found in the image itself. If the image has no resolution, the resolution is set to 300dpi.
img { image-resolution: auto, 300dpi }
Using this rule, the image resolution is set to 300dpi and the resolution in the image, if any, is ignored.
img { image-resolution: 300dpi }
To support page floats, the ‘float’ property is extended with several new values:
‘bottom’, the float is placed on the
bottom of the next page.
These values can appear along with the existing values on ‘float’. In order to float an element wrt. the page, the keywords can be combined this way:
Here are some examples of page floats:
img {
float: next page; /* float to the top next page */
float: top next page; /* float to the top next page */
float: next top page; /* float to the top next page */
float: bottom next page; /* float to the bottom of the next page */
float: outside top page; /* float to the top of the current page, away from the binding */
float: next page bottom left; /* float to the bottom left of the next page
float: bottom page left right; /* illegal, ignored */
}
For non-replaced elements in horizontal text, values 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.
Assuming horizontal text, these rules will result in the width of
div elements being equal to the width of the containing
block:
div { float: top; width: auto;
margin: 0; padding: 0; border: none }
Assuming horizontal text, these rules will result in the width of
div elements being determined by shrink-wrap:
div { float: top left; width: auto;
margin: 0; padding: 0; border: none }
If the width of a floating element is constrained, other content may be placed next to it.
Assuming horizontal text and a containing block wider than 200px,
these rules may result in other content being shown to the right of the
div element:
div { float: top left; width: 200px;
margin: 0; padding: 0; border: none }
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:
column’:
gr’
The strategy for achieving advanced multi-column layout is similar to
page floats; elements escape their normal containing box by setting a
value on ‘float’. In the case of
column-layout, the keyword is ‘column’ (instead of ‘page’) and it indicates that the element should
float to another column. Which column the element floats to is
determined by the same positional keywords as for page floats
(‘left’, ‘right’, ‘inside’, ‘outside’, ‘top’, ‘bottom’). The column box of the column the
element flows to becomes the containing block of the element.
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 of elements. Each column has one grid line on each side corresponding to the content edge of the content box.
The width of a column is therefore ‘1gr’. A value of ‘2gr’ includes one column width and one column
gap. Further, ‘3gr’ is the width of
two columns, including the gap between them, etc. Fractions on the
‘gr’ unit refer to the last
distance added. A value of ‘1.5gr’
includes one column width and half the width of a column gap.
For non-replaced elements in horizontal text, values 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.
The concept of floating to a column will be more powerful
if ‘column’ means current
column. The multicol element can be made a positioning target with
exisiting features, such as ‘position:
relative’. Abspos elements can be turned into floats by a
new property, (e.g., ‘display:
float’). This may be an intuitive way to cover the target
scenarios.
‘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.
img {
float: bottom;
width: 1gr;
}
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 right-most column:
div.figure {
float: top right column;
width: 100% }
div.figure {
float: top right column;
width: 1gr }
The percentage value on ‘width’ refers to the containing block,
which is the column box of the right-most column. The ‘1gr’ value on ‘width’ is equal to the width of the
containing block. The two values are therefore identical. 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 of the right-most column, while the ‘float-offset’ property pushes it to the left so that it ends up in the column next to it:
div.quote {
float: top left column;
float-offset: 2gr;
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 column;
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 column;
width: 3gr;
}
The code above floats the element to the top of the right-most column. 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 column;
width: 2gr;
}
The code above floats the element to the top of the right-most column. 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 column;
width: 1.5gr;
}
The code above floats the element to the top of the right-most column. 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 column;
float-offset: 1.5gr 50%;
width: 8em;
}
The first rule in the code above floats images to the top of the
left-most column. 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.
| Name: | 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.
Two new value on ‘float’ are proposed to handle conditional content:
img { float: next page unless-room }
The image is only shown if there is room on the current page or column.
img { float: hide unless-room }
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 |
To set crop and cross marks on a document, this code can be used:
@page { marks: crop cross }
Some document formats have the capability of holding bookmarks. To generate these bookmarks, three 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 |
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.
a { bookmark-label: attr(title, string) }
h1 { bookmark-label: }
#frog { bookmark-label: "The green frog" }
| Name: | bookmark-target |
| Value: | self | <uri> | <attr> |
| Initial: | self |
| 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"/>
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) }
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);
}
Browsers, who don't understand the cmyk() value, will
use the first color (red). User agents that understand
cmyk() will use the second color (bluish).
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 corresponding 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 document and the end of a change mark is associated with another document.
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.
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.
In CSS 2.0, the ‘page’ property takes one value. The value can be ‘auto’ or a named page. In the case where a named page is specified, a page break is inserted and the element is put on the named page.
In this specification, a list of values is allowed in the ‘page’ property. As content is laid out and new pages are generated, the list is traversed linearly starting at the first list item. One page is created per item in the list. If more pages are required than there are items in the list, the last item is repeated as many times as necessary.
h2 { page: no-header auto }
This means: the content of an h2 element should be laid out on a ‘no-header’ page, thereafter the auto page (which is the initial value). The last value (auto) is repeated if there is need for more pages.
The last value in the list becomes the leaving value which is compared with the first item the ‘page’ property of the next element. If those two values are different, a page break is generated.
Consider this example:
h2 { page: no-header auto }
p { page: auto }
<h2>foo</h2>
<p>bar</p>
There would be no page break between H2 and P elements as the last named page on H2 is the same as the first (and only) named page on the P element.
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 (toc, lof, lot).
To generate lists in CSS, a prototype container must be
established. Other elements will be flowed into the prototype container,
but it can also contain content of its own. Elements with a ‘make-element’ value other than ‘none’ will generate an element inside a prototype
container. The value of ‘make-element’ is the ID of a prototype
entry element which is replicated inside the prototype container,
and a specification of the content which is to be inserted into the
generated list.
Here is an example of how to generate a toc with leaders and page numbers.
...
<style>
#toc { prototype: container }
#toc-entry {
prototype-insert-position: current;
font-size: 14pt }
#toc-entry::after { content: leader(‘. ’) source-counter(page) }
h1.chapter { make-element: 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: container }
declares that the #toc element is a prototype container that accepts generated lists. Prototype containers cannot be nested. Each container keeps a position of where the last generated list item was added. This rule:
prototype-insert-position: current;
specifies that entities in the #toc are to be added at the current position, i.e., 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 ‘make-element’ declaration:
h1.chapter { make-element: 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: container }
#glossary-term { insert-position: sorted }
#glossary-definition { insert-position: current }
</style>
...
<div id="glossary">
<h2>Glossary of terms</h2>
<dl>
<dt id="glossary-term">...</dt>
<dd id="glossary-definition">...</dd>
</dl>
</div>
...
<h1 class="chapter">Introduction</h1>
...
By inserting the term ‘sorted’ and
the definition in the ‘current’
position, terms will be sorted alphabetically with their respective
definition following.
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 ‘insert-policy’ property declares that identical generated list elements are to be deleted.
...
<style>
#index {
prototype: container }
#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 {
make-element: index-marker first-letter, index-entry content }
</style>
...
<p>An <dfn>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 container 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-container {
prototype: container }
#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: container }
#acronym-term {
prototype-insert-position: sorted }
#acronym-definition {
prototype-insert-position: current }
#index {
prototype: container }
#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 {
make-element: toc-entry content }
h3 {
make-element: toc-entry content }
acronym {
make-element:
index-marker first-letter,
index-entry content,
acronym content,
acronym-definition attr(title);
}
dfn { make-element:
index-marker first-letter(),
index-entry content
}
</style>
<div id="toc">
<h2>Table of contents</h2>
<div id="toc-container">
<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;
counter-reset: sidenote;
@footnote {
counter-increment: footnote;
float: page bottom;
width: 100%;
height: auto;
}
@sidenote {
counter-increment: sidenote;
float: outside;
width: 20%; /* a fairly arbitrary number */
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 and Ian Hickson. [more to be added] Laurens Holst, Mike Bremford, Allan Sandfeld Jensen, Kelly Miller, Werner Donné, Tarquin (Mark) Wilton-Jones, Michel Fortin, Christian Roth.
| Property | Values | Initial | Applies to | Inh. | Percentages | Media |
|---|---|---|---|---|---|---|
| bookmark-label | content | <attr> | <string> | content | all elements | no | N/A | all |
| bookmark-level | none | <integer> | none | all elements | no | N/A | all |
| bookmark-target | self | <uri> | <attr> | self | all elements | no | N/A | all |
| border-length | <length> | auto | auto | @footnote areas | no | refer to normal length of horizontal border of footnote area | 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> | none | all elements | yes | N/A | visual |
| hyphens | none | manual | auto | manual | all elements | yes | N/A | visual |
| image-resolution | normal | auto | <dpi> [ , normal | <dpi> ]? | normal | replaced elements | 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 |
| text-replace | [<string> <string>]+ | none | none | all elements | yes or? | N/A | visual |