You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
4293 lines
121 KiB
4293 lines
121 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
|
|
<html lang=en>
|
|
<head>
|
|
<title>CSS Generated Content for Paged Media Module</title>
|
|
<link href=default.css rel=stylesheet type="text/css">
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
|
|
type="text/css">
|
|
|
|
<style type="text/css">
|
|
.cols { width: 500px; height: 200px; background: #fff; position: relative; border: solid 10px blue; margin: 0.5em 2em 1em 0; font: bold 14px/19px Arial, sans-serif }
|
|
.cols p { padding: 3px; margin: 0 }
|
|
.col { position: absolute; left: 0px; top: 0; z-index: 6; width: 170px }
|
|
.gap { position: absolute; background: black; width: 5px; bottom: 0px; top: 0px; border: 10px solid red; border-top-width: 0; border-bottom-width: 0; }
|
|
.rep { position: absolute; top: 45px; background: #333; height: 110px; width: 100px; color: white; z-index: 4 }
|
|
div.example:before { width: 9em !important }
|
|
div.example { padding-top: 0.5em }
|
|
|
|
table.hyphenate { border-collapse: collapse }
|
|
table.hyphenate th {
|
|
text-align: left; white-space: nowrap; border: 1px solid black; padding: 0.2em }
|
|
table.hyphenate td {
|
|
border: 1px solid black; padding: 0.2em 0.2em 0.2em 1em; font-size: 0.8em }
|
|
|
|
table.border, table.border td, table.border th, table.border table {
|
|
border-collapse: collapse;
|
|
border: thin solid black;
|
|
padding: 0.2em;
|
|
vertical-align: top;
|
|
}
|
|
table.border td + td { white-space: pre }
|
|
table.border table { padding: 0; border-collapse: separate; border: none; }
|
|
table.border table td { border: thin dotted black; padding: 0.2em; margin: 0.2em }
|
|
table.border .comment { margin-top: 0; white-space: normal; font-style: italic }
|
|
|
|
div.out { background: #F55; padding: 0.2em 0.5em }
|
|
div.out div.example { background: #FED }
|
|
h1, h2, h3, h4, h5, h6 { background: transparent }
|
|
|
|
</style>
|
|
|
|
<body>
|
|
<div class=head> <!--begin-logo-->
|
|
<p><a href="http://www.w3.org/"><img alt=W3C height=48
|
|
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo--> <!--
|
|
|
|
/*
|
|
|
|
http://lists.w3.org/Archives/Public/www-style/2009Mar/0065.html
|
|
|
|
- RESOLVED: New syntax is image-resolution: normal | [ <dpi> || auto ]
|
|
RATIONALE: Removes unused combinations and unnecessary comma
|
|
|
|
- RESOLVED: Replace image-resolution: auto; with image-resolution: from-image;
|
|
RATIONALE: ‘<code class=property>auto</code>’ vs. ‘<code class=property>normal</code>’ is hard to understand. (‘<code class=property>normal</code>’ is 1 pixel == 1px)
|
|
|
|
|
|
- Discussed removing ‘<code class=property>background-image-resolution</code>’ in favor of various options.
|
|
So far idea is that ‘<code class=property>image-resolution</code>’ applies to all images and we will
|
|
introduce functional notation in the future to allow setting resolution on a
|
|
per-image basis.
|
|
|
|
|
|
http://lists.w3.org/Archives/Public/www-style/2009Jun/0186.html
|
|
|
|
|
|
|
|
align lines: what did michael suggest?
|
|
|
|
Another approach would be to extend the height of the block to be a
|
|
multiple of the grid height, but then people would probably want to
|
|
control where the extra space gets added.
|
|
|
|
kerning?
|
|
|
|
|
|
-->
|
|
<!--
|
|
http://opengroup.org/onlinepubs/007908775/xbd/locale.html
|
|
|
|
d_t_fmt
|
|
Define the appropriate date and time representation, corresponding to the %c field descriptor. The operand consists of a string, and can contain any combination of characters and field descriptors. In addition, the string can contain escape sequences defined in the table in Escape Sequences and Associated Actions (\\, \a, \b, \f, \n, \r, \t, \v).
|
|
d_fmt
|
|
Define the appropriate date representation, corresponding to the %x field descriptor. The operand consists of a string, and can contain any combination of characters and field descriptors. In addition, the string can contain escape sequences defined in the table in Escape Sequences and Associated Actions .
|
|
t_fmt
|
|
Define the appropriate time representation, corresponding to the %X field descriptor. The operand consists of a string, and can contain any combination of characters and field descriptors. In addition, the string can contain escape sequences defined in the table in Escape Sequences and Associated Actions .
|
|
|
|
|
|
-->
|
|
|
|
|
|
<h1>CSS Generated Content for Paged Media Module</h1>
|
|
|
|
<h2 class="no-num no-toc" id=w3c-working>W3C Working Draft 08 June 2010</h2>
|
|
|
|
<dl>
|
|
<dt>This version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/2010/WD-css3-gcpm-20100608">http://www.w3.org/TR/2010/WD-css3-gcpm-20100608</a>
|
|
|
|
<dt>Latest version:
|
|
|
|
<dd><a href="http://www.w3.org/TR/css3-gcpm">
|
|
http://www.w3.org/TR/css3-gcpm</a>
|
|
|
|
<dt>Previous version:
|
|
|
|
<dd><a href="http://www.w3.org/TR/2007/WD-css3-gcpm-20070504">
|
|
http://www.w3.org/TR/2007/WD-css3-gcpm-20070504</a>
|
|
|
|
<dt>Editor:
|
|
|
|
<dd>Håkon Wium Lie, Opera Software, howcome@opera.com
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class=copyright><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
|
|
rel=license>Copyright</a> © 2010 <a
|
|
href="http://www.w3.org/"><acronym title="World Wide Web
|
|
Consortium">W3C</acronym></a><sup>®</sup> (<a
|
|
href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
|
|
of Technology">MIT</acronym></a>, <a href="http://www.ercim.eu/"><acronym
|
|
title="European Research Consortium for Informatics and
|
|
Mathematics">ERCIM</acronym></a>, <a
|
|
href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
|
|
<a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
|
|
and <a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> rules apply.</p>
|
|
<!--end-copyright-->
|
|
<hr title="Separator for header">
|
|
</div>
|
|
|
|
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
|
|
|
|
<p>This module describes features often used in printed publications. Most
|
|
of the specified functionality involves some sort of generated content
|
|
where content from the document is adorned, replicated, or moved in the
|
|
final presentation of the document. Along with two other CSS3 modules
|
|
– multi-column layout and paged media – this module offers
|
|
advanced functionality for presenting structured documents on paged media.
|
|
This specification only applies to the ‘<code
|
|
class=property>print</code>’ media type.
|
|
|
|
<h2 class="no-num no-toc" id=status-of-this-document>Status of this
|
|
document</h2>
|
|
<!--begin-status-->
|
|
|
|
<p><em>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 <a href="http://www.w3.org/TR/">W3C technical reports
|
|
index at http://www.w3.org/TR/.</a></em>
|
|
|
|
<p>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.
|
|
|
|
<p>The (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
|
|
mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
|
|
<a href="http://www.w3.org/Mail/Request">instructions</a>) 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<!---->] <em>…summary of
|
|
comment…</em>”
|
|
|
|
<p>This document was produced by the <a
|
|
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
|
|
the <a href="http://www.w3.org/Style/">Style Activity</a>).
|
|
|
|
<p>This document was produced by a group operating under the <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
|
|
2004 W3C Patent Policy</a>. W3C maintains a <a
|
|
href="http://www.w3.org/2004/01/pp-impl/32061/status"
|
|
rel=disclosure>public list of any patent disclosures</a> 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 <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
|
|
Claim(s)</a> must disclose the information in accordance with <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
|
|
6 of the W3C Patent Policy</a>.</p>
|
|
<!--end-status-->
|
|
|
|
<p>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.
|
|
|
|
<h2 class="no-num no-toc" id=table-of-contents><a name=contents>Table of
|
|
contents</a></h2>
|
|
<!--begin-toc-->
|
|
|
|
<ul class=toc>
|
|
<li><a href="#introduction"><span class=secno>1. </span>Introduction</a>
|
|
|
|
<li><a href="#running-headers-and-footers"><span class=secno>2.
|
|
</span>Running headers and footers</a>
|
|
<ul class=toc>
|
|
<li><a href="#named-strings"><span class=secno>2.1. </span>Named
|
|
strings</a>
|
|
<ul class=toc>
|
|
<li><a href="#setting-named-strings-the-string-set-pro"><span
|
|
class=secno>2.1.1. </span>Setting named strings: the ‘<code
|
|
class=property>string-set</code>’ property</a>
|
|
|
|
<li><a href="#using-named-strings"><span class=secno>2.1.2.
|
|
</span>Using named strings</a>
|
|
</ul>
|
|
|
|
<li><a href="#running-elements"><span class=secno>2.2. </span>Running
|
|
elements</a>
|
|
</ul>
|
|
|
|
<li><a href="#leaders"><span class=secno>3. </span>Leaders</a>
|
|
|
|
<li><a href="#cross-references"><span class=secno>4.
|
|
</span>Cross-references</a>
|
|
<ul class=toc>
|
|
<li><a href="#the-target-counter-and-target-counters-v"><span
|
|
class=secno>4.1. </span>The ‘<code
|
|
class=css>target-counter</code>’ and ‘<code
|
|
class=css>target-counters</code>’ values</a>
|
|
|
|
<li><a href="#the-target-text-value"><span class=secno>4.2. </span>The
|
|
‘<code class=css>target-text</code>’ value</a>
|
|
</ul>
|
|
|
|
<li><a href="#footnotes"><span class=secno>5. </span>Footnotes</a>
|
|
<ul class=toc>
|
|
<li><a href="#turning-elements-into-footnotes"><span class=secno>5.1.
|
|
</span>Turning elements into footnotes</a>
|
|
|
|
<li><a href="#the-footnote-area"><span class=secno>5.2. </span>The
|
|
footnote area</a>
|
|
|
|
<li><a href="#footnote-calls"><span class=secno>5.3. </span>Footnote
|
|
calls</a>
|
|
|
|
<li><a href="#footnote-markers"><span class=secno>5.4. </span>Footnote
|
|
markers</a>
|
|
|
|
<li><a href="#counting-footnotes"><span class=secno>5.5. </span>Counting
|
|
footnotes</a>
|
|
|
|
<li><a href="#laying-out-footnotes"><span class=secno>5.6. </span>Laying
|
|
out footnotes</a>
|
|
|
|
<li><a href="#footnote-magic"><span class=secno>5.7. </span>Footnote
|
|
magic</a>
|
|
</ul>
|
|
|
|
<li><a href="#hyphenation"><span class=secno>6. </span>Hyphenation</a>
|
|
<ul class=toc>
|
|
<li><a href="#hyphenate-properties"><span class=secno>6.1.
|
|
</span>Hyphenate properties</a>
|
|
</ul>
|
|
|
|
<li><a href="#new-counter-styles"><span class=secno>7. </span>New counter
|
|
styles</a>
|
|
<ul class=toc>
|
|
<li><a href="#the-super-decimal-list-style-type"><span class=secno>7.1.
|
|
</span>The ‘<code class=css>super-decimal</code>’
|
|
list-style-type</a>
|
|
|
|
<li><a href="#named-counter-styles"><span class=secno>7.2. </span>Named
|
|
counter styles</a>
|
|
|
|
<li><a href="#the-symbols-list-style-type"><span class=secno>7.3.
|
|
</span>The ‘<code class=css>symbols()</code>’
|
|
list-style-type</a>
|
|
</ul>
|
|
|
|
<li><a href="#image-resolution"><span class=secno>8. </span>Image
|
|
resolution</a>
|
|
|
|
<li><a href="#page-marks-and-bleed-area"><span class=secno>9. </span>Page
|
|
marks and bleed area</a>
|
|
|
|
<li><a href="#bookmarks"><span class=secno>10. </span>Bookmarks</a>
|
|
|
|
<li><a href="#cmyk-colors"><span class=secno>11. </span>CMYK colors</a>
|
|
|
|
<li><a href="#styling-blank-pages"><span class=secno>12. </span>Styling
|
|
blank pages</a>
|
|
|
|
<li><a href="#page-floats"><span class=secno>13. </span>Page floats</a>
|
|
<ul class=toc>
|
|
<li><a href="#float-intrusion-in-multicol-elements"><span
|
|
class=secno>13.1. </span>Float intrusion in multicol elements</a>
|
|
</ul>
|
|
|
|
<li><a href="#advanced-multi-column-layout"><span class=secno>14.
|
|
</span>Advanced multi-column layout</a>
|
|
<ul class=toc>
|
|
<li><a href="#the-float-offset-property"><span class=secno>14.1.
|
|
</span>The ‘<code class=property>float-offset</code>’
|
|
property</a>
|
|
</ul>
|
|
|
|
<li><a href="#conformance"><span class=secno>15. </span>Conformance</a>
|
|
|
|
<li><a href="#appendix-a-default-style-sheet"><span class=secno>16.
|
|
</span>Appendix A: Default style sheet</a>
|
|
|
|
<li class=no-num><a href="#acknowledgments">Acknowledgments</a>
|
|
|
|
<li class=no-num><a href="#references">References</a>
|
|
<ul class=toc>
|
|
<li class=no-num><a href="#normative-references">Normative
|
|
references</a>
|
|
|
|
<li class=no-num><a href="#other-references">Other references</a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#index">Index</a>
|
|
|
|
<li class=no-num><a href="#property-index">Property index</a>
|
|
</ul>
|
|
<!--end-toc-->
|
|
|
|
<h2 id=introduction><span class=secno>1. </span>Introduction</h2>
|
|
|
|
<p>(This section is not normative.)
|
|
|
|
<p>This specification describes features often used in printed
|
|
publications. Some of the proposed functionality (e.g., hyphenation, the
|
|
new list style types, and border segments) may also used with other media
|
|
types. However, this specification is only concerned with the ‘<code
|
|
class=property>print</code>’ media type.
|
|
|
|
<h2 id=running-headers-and-footers><span class=secno>2. </span>Running
|
|
headers and footers</h2>
|
|
|
|
<p>To aid navigation in printed material, headers and footers are often
|
|
printed in the page margins. <a href="#CSS3PAGE"
|
|
rel=biblioentry>[CSS3PAGE]<!--{{CSS3PAGE}}--></a> 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 <dfn id=named-strings0>named
|
|
strings</dfn> which <em>copies</em> the text (without style, structure, or
|
|
replaced content) from one element for later reuse in margin boxes. The
|
|
second mechanism is <dfn id=running-elements0>running elements</dfn> which
|
|
<em>moves</em> elements (with style, structure, and replaced content) into
|
|
a margin box.
|
|
|
|
<h3 id=named-strings><span class=secno>2.1. </span>Named strings</h3>
|
|
<!--
|
|
<p>Named strings are discussed both in the CSS3 Generated and Replaced
|
|
Content (section 9) and in CSS3 Paged Media (several places). For a
|
|
proposed definition of the property, one has to go back to the <a href="http://www.w3.org/1999/06/WD-css3-page-19990623">CSS3 draft from 1999</a>
|
|
1999:
|
|
-->
|
|
|
|
<p>Named strings can be thought of as variables that can hold one string of
|
|
text each. Named strings are created with the ‘<a
|
|
href="#string-set"><code class=property>string-set</code></a>’
|
|
property which copies a string of text into the named string. Only text is
|
|
copied; not style, structure, or replaced content.
|
|
|
|
<div class=example>
|
|
<p>Consider this code:
|
|
|
|
<pre>
|
|
h1 { string-set: title content() }
|
|
</pre>
|
|
|
|
<p>Whenever an <code>h1</code> element is encountered, its textual content
|
|
is copied into a named string called <em>title</em>. Its content can be
|
|
retrieved in the ‘<code class=property>content</code>’
|
|
property:
|
|
|
|
<pre>
|
|
@page :right { @top-right { content: string(title) }}
|
|
</pre>
|
|
</div>
|
|
|
|
<h4 id=setting-named-strings-the-string-set-pro><span class=secno>2.1.1.
|
|
</span>Setting named strings: the ‘<a href="#string-set"><code
|
|
class=property>string-set</code></a>’ property</h4>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=string-set>string-set</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>[[ <identifier> <content-list>] [, <identifier>
|
|
<content-list>]* ] | none
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>all
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>as specified value
|
|
</table>
|
|
|
|
<p>The ‘<a href="#string-set"><code
|
|
class=property>string-set</code></a>’ 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 ‘<a href="#string-set"><code
|
|
class=property>string-set</code></a>’ different from ‘<code
|
|
class=css>none</code>’ is encountered, the named strings are
|
|
assigned their respective value.
|
|
|
|
<p>For the ‘<a href="#string-set"><code
|
|
class=property>string-set</code></a>’ property, <content-list>
|
|
expands to one or more of these values, in any order:
|
|
|
|
<dl>
|
|
<dt><string>
|
|
|
|
<dd>a string, e.g. "foo"
|
|
|
|
<dt><counter>
|
|
|
|
<dd>the counter() or counters() function, as per <a
|
|
href="http://www.w3.org/TR/CSS21/syndata.html#counter">CSS 2.1 section
|
|
4.3.5</a>
|
|
|
|
<dt><content>
|
|
|
|
<dd>the ‘<code class=css>content()</code>’ function returns
|
|
the content of elements and pseudo-elements. The functional notation
|
|
accepts an optional argument:
|
|
<dl>
|
|
<dt>‘<code class=css>content()</code>’
|
|
|
|
<dd>Without any arguments, the function returns the textual content of
|
|
the element, not including the content of its ::before and ::after
|
|
pseudo-element. The content of the element's descendants, including
|
|
their respective ::before and ::after pseudo-elements, are included in
|
|
the returned content.
|
|
|
|
<dt>‘<code class=css>content(before)</code>’
|
|
|
|
<dd>The function returns the textual content of the ::before
|
|
pseudo-element the content of the element.
|
|
|
|
<dt>‘<code class=css>content(after)</code>’
|
|
|
|
<dd>The function returns the textual content of the ::after
|
|
pseudo-element the content of the element.
|
|
|
|
<dt>‘<code class=css>content(first-letter)</code>’
|
|
|
|
<dd>The function returns the first letter of the content of the element.
|
|
The definition of a letter is the same as for :first-letter
|
|
pseudo-elements.
|
|
<p class=note>The expected use for ‘<code
|
|
class=css>content(first-letter)</code>’ is to create one-letter
|
|
headers, e.g., in dictionaries.</p>
|
|
|
|
<dt>‘<code class=css>env()</code>’
|
|
|
|
<dd>This function returns data from the local environment of the user at
|
|
the time of formatting. The function accepts one of these keywords:
|
|
<ul>
|
|
<li>env(url): returns the URL of the document
|
|
|
|
<li>env(date): returns the date on the user's system at the time of
|
|
formatting
|
|
|
|
<li>env(time): returns the time on the user's system at the time of
|
|
formatting
|
|
|
|
<li>env(date-time): returns the date and time on the user's system at
|
|
the time of formatting
|
|
</ul>
|
|
|
|
<p>Information about date and time is formatted according to the locale
|
|
of the user's system.
|
|
|
|
<p class=issue>Or, should there be a way to specify the locale? Or
|
|
should we simply format all in ISO format (e.g., 2010-03-30)?
|
|
|
|
<p class=note>On many systems, preformatted strings in the user's
|
|
locale can be found through the <a
|
|
href="http://www.opengroup.org/onlinepubs/009695399/functions/strftime.html">strftime</a>
|
|
function. The date, time and date-time strings can be found by using
|
|
the "%x", "%X" and "%c" conversion strings, respectively.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
@page {
|
|
@top-right { content: env(url) }
|
|
@bottom-right { content: env(date-time) }
|
|
}
|
|
</pre>
|
|
</div>
|
|
</dl>
|
|
</dl>
|
|
<!--<p class="issue">Should target-counter() and leader() also be allowed?</p>-->
|
|
|
|
<p>Named strings can only hold the result of one assignment; whenever a new
|
|
assignment is made to a named string, its old value is replaced.
|
|
|
|
<p class=note>User agents, however, must be able to remember the result of
|
|
more than one assignment as the ‘<code
|
|
class=css>string()</code>’ functional value (described below) can
|
|
refer to different assignments.
|
|
|
|
<p>The scope of a named string is the page of the element to which the
|
|
‘<a href="#string-set"><code
|
|
class=property>string-set</code></a>’ property is attached and
|
|
subsequent pages.
|
|
|
|
<p>The name space of named strings is different from other sets of names in
|
|
CSS.
|
|
|
|
<p>The ‘<a href="#string-set"><code
|
|
class=property>string-set</code></a>’ property copies text as well
|
|
as white-space into the named string.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
h2 {
|
|
string-set: header "Chapter " counter(header) ": " content();
|
|
counter-increment: header;
|
|
}
|
|
</pre>
|
|
|
|
<p>Note that the string called "header" is different from the counter with
|
|
the same name. The above code may result in <em>header</em> being set to
|
|
"Chapter 2: Europa".
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This example results in the same value being assigned to
|
|
<em>header</em> as in the previous example. <!--note namespace-->
|
|
|
|
<pre>
|
|
h2:before { content: "Chapter " counter(header) }
|
|
h2 {
|
|
string-set: header content(before) content();
|
|
counter-increment: header }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<pre>
|
|
dt { string-set: index content(first-letter) }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>The content is copied regardless of other settings on the element. In
|
|
this example, H1 elements are not displayed, but their content is copied
|
|
into the named string.
|
|
|
|
<pre>
|
|
h1 {
|
|
display: none;
|
|
string-set: header content();
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<h4 id=using-named-strings><span class=secno>2.1.2. </span>Using named
|
|
strings</h4>
|
|
|
|
<p>The content of named strings can be recalled by using the ‘<code
|
|
class=css>string()</code>’ value on the ‘<code
|
|
class=property>content</code>’ property. The ‘<code
|
|
class=css>string()</code>’ value has one required argument, namely
|
|
the name of the string.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
@page { @top-center { content: string(header) }}
|
|
@page { @right-middle { content: string(index) }}
|
|
@page { @top-left { content: string(entry) }}
|
|
h1 { string-set: header "Chapter " counter(chapter) content() }
|
|
dt { string-set: index content(first-letter), entry content() }
|
|
</pre>
|
|
</div>
|
|
|
|
<p>If the value of the named string is changed by an element on a certain
|
|
page, the named string may have several values on that page. In order to
|
|
specify which of these values should be used, an optional argument is
|
|
accepted on the ‘<code class=css>string()</code>’ value. This
|
|
argument can have one of four keywords:
|
|
|
|
<ul>
|
|
<li>‘<code class=css>start</code>’: the named string's entry
|
|
value for that page is used.
|
|
|
|
<li>‘<code class=css>first</code>’: the value of the first
|
|
assignment is used. If there is no assignment on the page, the start
|
|
value is used. ‘<code class=css>first</code>’ is the default
|
|
value.
|
|
|
|
<li>‘<code class=css>last</code>’: the named string's exit
|
|
value for that page is used
|
|
|
|
<li>‘<code class=css>first-except</code>’: similar to
|
|
‘<code class=css>first</code>’, except on the page where the
|
|
value was assigned. On that page, the empty string is used.
|
|
</ul>
|
|
|
|
<div class=example>
|
|
<p>In this example, the first term on the page will be shown in the top
|
|
left corner and the last term on the page will be shown in the top right
|
|
corner. In top center of the page, the first letter of first term will be
|
|
shown.
|
|
|
|
<pre>
|
|
@page { @top-left { content: string(term, first) }}
|
|
@page { @top-right { content: string(term, last) }}
|
|
@page { @top-center { content: string(index, first) }}
|
|
dt { string-set: index content(first-letter), term content() }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>In this example, the header in the top center will be blank on pages
|
|
where ‘<code class=css>h1</code>’ elements appear. On other
|
|
pages, the string of the previous ‘<code class=css>h1</code>’
|
|
element will be shown.
|
|
|
|
<pre>
|
|
@page { @top-center { content: string(chapter, first-except) }}
|
|
h1 { string-set: chapter content() }
|
|
</pre>
|
|
</div>
|
|
|
|
<p>If the named string referred to in a ‘<code
|
|
class=css>string()</code>’ value has not been assigned a value, the
|
|
empty string is used.
|
|
|
|
<h3 id=running-elements><span class=secno>2.2. </span>Running elements</h3>
|
|
|
|
<p>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.
|
|
|
|
<p>Elements that are moved into headers and footers are repeated on several
|
|
pages; they are said to be <a href="#running-elements0"><em>running
|
|
elements</em></a>. To support running elements, a new value –
|
|
running() – is introduced on the ‘<code
|
|
class=property>position</code>’ 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 ‘<code class=css>display: none</code>’ had been set.
|
|
Instead, the running element may be displayed in a margin box.
|
|
|
|
<p>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.
|
|
|
|
<p class=note>User agents, however, must be able to remember the result of
|
|
more than one assignment as the ‘<code
|
|
class=css>element()</code>’ value (described below) can refer to
|
|
different assignments.
|
|
|
|
<p>Running elements inherit through their normal place in the structure of
|
|
the document.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
title { position: running(header) }
|
|
@page { @top-center {
|
|
content: element(header) }
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Like the ‘<code class=css>string()</code>’ value, the
|
|
‘<code class=css>element()</code>’ value accepts an optional
|
|
second argument:
|
|
|
|
<dl>
|
|
<dt>‘<code class=css>start</code>’
|
|
|
|
<dt>‘<code class=css>first</code>’
|
|
|
|
<dt>‘<code class=css>last</code>’
|
|
|
|
<dt>‘<code class=css>first-except</code>’
|
|
</dl>
|
|
|
|
<p>The keywords have the same meaning as for the ‘<code
|
|
class=css>string()</code>’ value.
|
|
|
|
<p>The ‘<code class=css>element()</code>’ value cannot be
|
|
combined with any other values.
|
|
|
|
<div class=example>
|
|
<p>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.
|
|
|
|
<pre>
|
|
<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>
|
|
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This code illustrates how to change the running header on one page in
|
|
the middle of a run of pages:
|
|
|
|
<pre>
|
|
...
|
|
<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>
|
|
...
|
|
</pre>
|
|
The header is "Not now" from the outset, due to the "div" element. The
|
|
first "span" element changes it to "<b>NOW!</b>" 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
|
|
‘<code class=css>first</code>’ keyword has been specified.
|
|
However, the second "span" element still sets the exit value for "header"
|
|
and this value is used on subsequent pages.</div>
|
|
|
|
<h2 id=leaders><span class=secno>3. </span>Leaders</h2>
|
|
|
|
<p>A leader is a visual pattern that guides the eye. Typically, leaders are
|
|
used to visually connect an entry in a list with a corresponding code. For
|
|
example, there are often leaders between titles and page numbers in a
|
|
table of contents (TOC). Another example is the phone book where there are
|
|
leaders between a name and a telephone number.
|
|
|
|
<p>In CSS3, a leader is composed of series of glyphs through the
|
|
‘<code class=css>leader()</code>’ value on the ‘<code
|
|
class=property>content</code>’ property. The functional notation
|
|
accepts one value which describes the glyph pattern that make up the
|
|
leader. These values are allowed:
|
|
|
|
<ul>
|
|
<li>leader(dotted)
|
|
|
|
<li>leader(solid)
|
|
|
|
<li>leader(space)
|
|
|
|
<li>leader(<string>)
|
|
</ul>
|
|
|
|
<p>Using the keyword values is equivalent to setting a string value. The
|
|
table below shows the equivalents:
|
|
|
|
<table class=border>
|
|
<tbody>
|
|
<tr>
|
|
<th>Keyword
|
|
|
|
<th>String
|
|
|
|
<th>Unicode characters
|
|
|
|
<tr>
|
|
<td>leader(dotted)
|
|
|
|
<td>leader(‘<code class=css>. </code>’)
|
|
|
|
<td>\002E \0020
|
|
|
|
<tr>
|
|
<td>leader(solid)
|
|
|
|
<td>leader(‘<code class=css>_</code>’)
|
|
|
|
<td>\005F
|
|
|
|
<tr>
|
|
<td>leader(space)
|
|
|
|
<td>leader(‘<code class=css> </code>’)
|
|
|
|
<td>\0020
|
|
</table>
|
|
<!--
|
|
<p class="issue">Some fonts may not have suitable glyphs for all
|
|
patterns. For example, in some Eastern languages, the alignment of the
|
|
shape within the glyph may not be optimal for creating leaders.
|
|
-->
|
|
<!--<p class="issue">Are the keywords really necessary?</p>-->
|
|
|
|
<p>The string inside the parenthesis is called the <em>leader string</em>.
|
|
|
|
<p>In its simplest form, the ‘<code
|
|
class=property>content</code>’ property only takes one ‘<code
|
|
class=css>leader()</code>’ value:
|
|
|
|
<div class=example>
|
|
<pre>
|
|
heading::after { content: leader(dotted) }
|
|
</pre>
|
|
</div>
|
|
|
|
<p>The leader string must be shown in full at least once and this
|
|
establishes the minimum length of the leader. To fill the available space,
|
|
the leader string is repeated as many times as possible in the writing
|
|
direction. At the end of the leader, a partial string pattern may be
|
|
shown. White space in leaders is collapsed according to the values on
|
|
white-space properties.
|
|
<!-- <span class="issue">Or, partial strings be avoided?</span> -->
|
|
<!--<p class="issue">Should other properties influence the appearance of leaders?-->
|
|
|
|
|
|
<p>These properties influence the appearance of leaders: all font
|
|
properties, text properties, ‘<code
|
|
class=property>letter-spacing</code>’, white-space properties,
|
|
background properties, and ‘<code
|
|
class=property>color</code>’.
|
|
|
|
<p>User Agents should attempt to align corresponding glyphs from the leader
|
|
pattern between consecutive lines.
|
|
|
|
<p>In a more complex example, the ‘<code
|
|
class=property>leader</code>’ value is combined with other values on
|
|
the ‘<code class=property>content</code>’ property:
|
|
|
|
<div class=example>
|
|
<pre>
|
|
ul.toc a::after {
|
|
content: leader(". . . ") target-counter(attr(href, url), page);
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>If the content connected by a leader end up on different lines, the
|
|
leader will be present on all lines. Each leader fragment honors the
|
|
minimum length of the leader.
|
|
|
|
<div class=example>
|
|
<p>Consider this code:
|
|
|
|
<pre>
|
|
<style>
|
|
.name::after { content: leader(dotted) }
|
|
</style>
|
|
<div class="entry">
|
|
<span class="name">John Doe</span>
|
|
<span class="number">123456789</span>
|
|
</div>
|
|
</pre>
|
|
|
|
<p>If the name and number end up on different lines (e.g., in a narrow
|
|
column), it may be formatted like this:
|
|
|
|
<pre>
|
|
John Doe....
|
|
...123456789
|
|
</pre>
|
|
</div>
|
|
|
|
<p>To determine the length of the leaders, user agents must do the
|
|
following for each line:
|
|
|
|
<ol>
|
|
<li>Lay out the content with leaders of minimum lengths
|
|
|
|
<li>Determine the empty space left on the line.
|
|
|
|
<li>Distribute the empty space between the leaders on the line. Glyphs
|
|
must not be shown partially. All leaders on the line should, to the
|
|
extent possible, have the same length. This may not always be possible as
|
|
the minimum leader length must be honored.
|
|
|
|
<li>Fill the empty space with the specified leader pattern.
|
|
</ol>
|
|
|
|
<div class=example>
|
|
<p>Consider this code:
|
|
|
|
<pre>
|
|
<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>
|
|
</pre>
|
|
|
|
<p>Depending on the width of the containing block, this may be rendered
|
|
as:
|
|
|
|
<pre>
|
|
Bla great bla bla world bla bla
|
|
empire bla bla color bla bla
|
|
history bla bla forever. John
|
|
Johnson
|
|
</pre>
|
|
|
|
<p>However, this rendering is preferable:
|
|
|
|
<pre>
|
|
Bla great bla bla world bla bla
|
|
empire bla bla color bla bla
|
|
history bla bla forever.
|
|
John Johnson
|
|
</pre>
|
|
|
|
<p>To indicate that <q>John Johnson</q> should be kept on one line, this
|
|
rule can be added to the style sheet:
|
|
|
|
<pre>
|
|
cite { text-wrap: suppress }
|
|
</pre>
|
|
|
|
<p>Until ‘<code class=property>text-wrap</code>’ is widely
|
|
supported, this rule can also be used:
|
|
|
|
<pre>
|
|
cite { white-space: nowrap }
|
|
</pre>
|
|
|
|
<p>If the containing element is wider, this may be the resultant
|
|
presentation:
|
|
|
|
<pre>
|
|
Bla great bla bla world bla bla empire
|
|
bla bla color bla bla history bla bla
|
|
forever. John Johnson
|
|
</pre>
|
|
</div>
|
|
|
|
<h2 id=cross-references><span class=secno>4. </span>Cross-references</h2>
|
|
|
|
<p>It is common to refer to other parts of a document by way of a section
|
|
number (e.g., "See section 3.4.1"), a page number (e.g., "See discussion
|
|
on page 72"), or a string (e.g., "See the chapter on Europe"). Being able
|
|
to resolve these cross-references automatically saves time and reduces the
|
|
number of errors.
|
|
|
|
<h3 id=the-target-counter-and-target-counters-v><span class=secno>4.1.
|
|
</span>The ‘<code class=css>target-counter</code>’ and
|
|
‘<code class=css>target-counters</code>’ values</h3>
|
|
|
|
<p>Numerical cross-references are generated by ‘<code
|
|
class=css>target-counter()</code>’ and ‘<code
|
|
class=css>target-counters()</code>’ values that fetch the value of a
|
|
counter at the target end of the link. These functions are similar to the
|
|
‘<code class=css>counter()</code>’ and ‘<code
|
|
class=css>counters()</code>’ functions, except that they fetch
|
|
counter values from remote elements. ‘<code
|
|
class=css>target-counter()</code>’ has two required arguments: the
|
|
url of the link, and the name of a counter. ‘<code
|
|
class=css>target-counters()</code>’ 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; ‘<code
|
|
class=css>decimal</code>’ being the default.
|
|
|
|
<div class=example>
|
|
<p>This style sheet specifies that a string like " (see page 72)" is added
|
|
after a link:
|
|
|
|
<pre>
|
|
a::after { content: "(see page " target-counter(attr(href, url), page, decimal) ")" }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This style sheet specifies that a string like " (see section 1.3.5)" is
|
|
added after a link:
|
|
|
|
<pre>
|
|
a::after { content: "(see section " target-counters(attr(href, url), section, ".", decimal) ")" }
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id=the-target-text-value><span class=secno>4.2. </span>The ‘<code
|
|
class=css>target-text</code>’ value</h3>
|
|
|
|
<p>Textual cross-references are generated by ‘<code
|
|
class=css>target-text()</code>’ which fetches the textual content
|
|
from the target end of the link. Only text is copied; not style,
|
|
structure, or replaced content. ‘<code
|
|
class=css>target-text()</code>’ has one required argument: the url
|
|
of the link. An optional second argument specifies exactly which content
|
|
is fetched. There are four possible values:
|
|
|
|
<dl>
|
|
<dt>‘<code class=css>content()</code>’
|
|
|
|
<dd>refers to the textual content of the element, not including the
|
|
content of its ::before and ::after pseudo-element. The content of the
|
|
element's descendants, including their respective ::before and ::after
|
|
pseudo-elements, are included in the returned content.
|
|
|
|
<dt>‘<code class=css>content(before)</code>’
|
|
|
|
<dd>refers to the content of the element's ::before pseudo-element. This
|
|
is the default value.
|
|
|
|
<dt>‘<code class=css>content(after)</code>’
|
|
|
|
<dd>refers to the content of the element's ::after pseudo-element
|
|
|
|
<dt>‘<code class=css>content(first-letter)</code>’
|
|
|
|
<dd>refers to the first letter of the textual content of the element, not
|
|
including the content of its ::before and ::after pseudo-element.
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<p>To generate this text
|
|
|
|
<blockquote>
|
|
<p>See Chapter 3 ("A better way") on page 31 for an in-depth evaluation.
|
|
</blockquote>
|
|
from this markup:
|
|
<pre>
|
|
<p>See <a href="#chx">this chapter</a> for an in-depth evaluation.
|
|
...
|
|
<h2 id="chx">A better way</h2>
|
|
</pre>
|
|
this CSS code can be used:
|
|
<pre>
|
|
h2 { counter-increment: chapter }
|
|
a { content: "Chapter " target-counter(attr(href, url), chapter)
|
|
' ("' target-text(attr(href), content()) '") on page '
|
|
target-counter(attr(href, url), page);
|
|
</pre>
|
|
</div>
|
|
|
|
<h2 id=footnotes><span class=secno>5. </span>Footnotes</h2>
|
|
|
|
<p>A footnote is a note typically placed at the bottom of a page that
|
|
comments on or cites a reference. References to footnotes are marked with
|
|
a <em>note-call</em> in the main text. The rendering of footnotes is
|
|
complex. As far as possible, footnotes try to reuse other parts of CSS.
|
|
However, due to the typographic traditions of footnotes, some new
|
|
functionality is required to support footnotes in CSS:
|
|
|
|
<p>In order to support footnotes in CSS, the following functionality is
|
|
added:
|
|
|
|
<ul>
|
|
<li>one new value on the ‘<code class=property>float</code>’
|
|
property: ‘<code class=css>footnote</code>’
|
|
|
|
<li>one new page area: ‘<code class=css>@footnote</code>’
|
|
|
|
<li>two new pseudo-elements: ‘<code
|
|
class=css>::footnote-call</code>’ and ‘<code
|
|
class=css>::footnote-marker</code>’
|
|
|
|
<li>one predefined counter: ‘<code class=css>footnote</code>’
|
|
|
|
<li>one new value on the ‘<code class=property>content</code>’
|
|
property: ‘<code class=css>target-pull()</code>’
|
|
|
|
<li>border segments
|
|
|
|
<li>two new ‘<code class=property>list-style-type</code>’
|
|
values: ‘<code class=css>super-decimal</code>’, and
|
|
symbol(...)
|
|
</ul>
|
|
|
|
<div class=example>
|
|
<p>In its simplest form, making a footnote is simple.
|
|
|
|
<pre>
|
|
<style>
|
|
.footnote { float: footnote }
|
|
</style>
|
|
|
|
<p>A sentence consists of words. <span class="footnote">Most often.</span>.
|
|
</pre>
|
|
|
|
<p>In this example, the text <q>Most often.</q> will be placed in a
|
|
footnote. A note-call will be left behind in the main text and a
|
|
corresponding marker will be shown next to the footnote. Here is one
|
|
possible rendering:
|
|
|
|
<pre>
|
|
A sentence consists of words. ¹
|
|
|
|
¹ Most often.
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>To support legacy browsers, it is often better to make a link to the
|
|
note rather than including the text inline. This example shows how to
|
|
fetch the content of a note and place it in a footnote.
|
|
|
|
<pre>
|
|
<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.
|
|
</pre>
|
|
|
|
<p>When shown in a legacy browser, the content of the element will be
|
|
shown as a clickable link to an endnote. When printed according to this
|
|
specification, there will be a footnote:
|
|
|
|
<pre>
|
|
A sentence consists of words¹.
|
|
|
|
¹ Most often.
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example> Consider this markup:
|
|
<pre>
|
|
<p>Sorry, <span title="This is, of course, a lie.">we're closing for lunch</span>.
|
|
</pre>
|
|
|
|
<p>The content of the "title" attribute can be turned into a footnote with
|
|
this code:
|
|
|
|
<pre>
|
|
span[title]::after {
|
|
content: attr(title);
|
|
float: footnote;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<h3 id=turning-elements-into-footnotes><span class=secno>5.1.
|
|
</span>Turning elements into footnotes</h3>
|
|
|
|
<p>An element with ‘<code class=css>float: footnote</code>’
|
|
(called a <em>footnote element</em>) is moved to the <em>footnote
|
|
area</em> and a <em>footnote-call</em> pseudo-element is put in its
|
|
original place.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
span.footnote {
|
|
float: footnote;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Footnote elements are presented inside the <em>footnote area</em>, but
|
|
they inherit through their normal place in the structure of the document.
|
|
|
|
<p>The ‘<code class=property>display</code>’ property on
|
|
footnote elements is ignored. Instead, the value of the ‘<code
|
|
class=property>display</code>’ property in the @footnote context
|
|
determines if footnotes are block or inline elements.
|
|
|
|
<div class=example>
|
|
<p>In this example, the footnotes are displayed inline:
|
|
|
|
<pre>
|
|
@footnote {
|
|
display: inline;
|
|
}
|
|
span.footnote {
|
|
float: footnote;
|
|
}
|
|
</pre>
|
|
|
|
<p>Here is one possible presentation of inline footnotes:
|
|
|
|
<pre>
|
|
¹ The first footnote. º The second footnote.
|
|
</pre>
|
|
</div>
|
|
<!--
|
|
<p class=issue>Another way to achieve this would be to introduce different keywords for inline and block footnotes (e.g., float: footnote-inline, float: footnote-block).
|
|
-->
|
|
|
|
<p>For each new footnote element, the ‘<code
|
|
class=css>footnote</code>’ counter is automatically incremented.
|
|
|
|
<h3 id=the-footnote-area><span class=secno>5.2. </span>The footnote area</h3>
|
|
|
|
<p>All elements with ‘<code class=css>float: footnote</code>’
|
|
are moved to the <em>footnote area</em>. The footnote area is described by
|
|
an @footnote-rule inside the @page-rule. By default, the footnote area
|
|
appears at the bottom of the page, but it can be positioned in other
|
|
places.
|
|
|
|
<p class=issue>Should the footnote are be positioned using page floats or
|
|
(fixed?) absolute positioning? Or both?
|
|
|
|
<p class=issue>
|
|
|
|
<div class=example>
|
|
<pre>
|
|
@page {
|
|
@footnote {
|
|
float: bottom page;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>These rules place the footnote area in the bottom left corner of the
|
|
page:
|
|
|
|
<pre>
|
|
@page {
|
|
@footnote {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 5em;
|
|
}
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Inside @footnote, the ‘<code class=property>gr</code>’ unit
|
|
is based on the oldest multicol element in the document.
|
|
|
|
<div class="example issue">
|
|
<p>This code places the footnote area at the bottom of the right column:
|
|
|
|
<pre>
|
|
@page {
|
|
@footnote {
|
|
float: bottom right multicol;
|
|
width: 1gr;
|
|
}
|
|
}
|
|
</pre>
|
|
</div>
|
|
<!--
|
|
<p class=issue>How should one indicate that the footnote area should
|
|
span columns? Typically, footnotes are put inside columns rather than
|
|
spanning the full width, but there could be exceptions.
|
|
-->
|
|
|
|
<p>The content of the footnote area is considered to come before other
|
|
content which may compete for the same space on the same page.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
@page { @footnote { float: bottom page}}
|
|
div.figure { float: bottom page }
|
|
</pre>
|
|
|
|
<p>If figures and footnotes are on the same page, the footnotes will
|
|
appear below the figures as they are floated to the bottom before the
|
|
figures.
|
|
</div>
|
|
|
|
<p>Potentially, every page has a footnote area. If there are no footnotes
|
|
on the page, the footnote area will not take up any space. If there are
|
|
footnotes on a page, the layout of the footnote area will be determined by
|
|
the properties/values set on it, and by the footnote elements elements
|
|
inside it.
|
|
|
|
<p>These properties apply to the footnote area: ‘<code
|
|
class=property>content</code>’, ‘<code
|
|
class=property>border</code>’, ‘<code
|
|
class=property>padding</code>’, ‘<code
|
|
class=property>margin</code>’, ‘<code
|
|
class=property>height</code>’, ‘<code
|
|
class=property>width</code>’, ‘<code
|
|
class=property>max-height</code>’, ‘<code
|
|
class=property>max-width</code>’, ‘<code
|
|
class=property>min-height</code>’, ‘<code
|
|
class=property>min-width</code>’, the background properties. <!--
|
|
<p class="note">In published books, it is customary for the footnote
|
|
area to be limited to less than half the height of the page area. Long
|
|
footnotes may need more space, and the customary solution is for
|
|
footnotes to span several pages. To achieve this, the ‘<code class=property>max-height</code>’
|
|
property should be used. However, footnotes spanning several pages is
|
|
an advanced feature which is not a conformance requirement for this
|
|
specification.
|
|
-->
|
|
|
|
|
|
<div class=example>
|
|
<p>This example uses some of the applicable properties on @footnote:
|
|
|
|
<pre>
|
|
@footnote {
|
|
margin-top: 0.5em;
|
|
border-top: thin solid black;
|
|
border-clip: 4em;
|
|
padding-top: 0.5em;
|
|
}
|
|
</pre>
|
|
|
|
<p>The result of this code is a footnote area separated from other content
|
|
above it by margin, border and padding. Only 4em of the border is visible
|
|
due to the ‘<code class=property>border-clip</code>’
|
|
property, which is defined in <a
|
|
href="http://dev.w3.org/csswg/css4-background/">CSS Backgrounds and
|
|
Borders Module Level 4</a> <a href="#CSS4BACKGROUND"
|
|
rel=biblioentry>[CSS4BACKGROUND]<!--{{!CSS4BACKGROUND}}--></a>.
|
|
</div>
|
|
<!--
|
|
<p class="issue">Footnotes in tables and floats may be problematic. In
|
|
some cases, the author may want the footnote to go at the end of the
|
|
table or float instead of the bottom of the page.
|
|
-->
|
|
|
|
<h3 id=footnote-calls><span class=secno>5.3. </span>Footnote calls</h3>
|
|
|
|
<p>When an element is moved to the footnote area, a <em>footnote-call</em>
|
|
is left behind. By default, User Agents must behave as if this code is
|
|
part of the default style sheet:
|
|
|
|
<pre>
|
|
::footnote-call {
|
|
content: counter(footnote, super-decimal);
|
|
}
|
|
</pre>
|
|
|
|
<p>The resulting note call is a super-script decimal number.
|
|
|
|
<h3 id=footnote-markers><span class=secno>5.4. </span>Footnote markers</h3>
|
|
|
|
<p>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.
|
|
|
|
<div class=example>
|
|
<p>User Agents may display footnote-calls and footnote-markers this way by
|
|
default:
|
|
|
|
<pre>
|
|
::footnote-call {
|
|
content: counter(footnote, super-decimal);
|
|
}
|
|
::footnote-marker {
|
|
content: counter(footnote, super-decimal);
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Marker elements are discussed in more detail in the CSS Lists module <a
|
|
href="#CSS3LIST" rel=biblioentry>[CSS3LIST]<!--{{!CSS3LIST}}--></a>. One
|
|
suggested change to that module is to honor the value of ‘<code
|
|
class=property>list-style-position</code>’ on the ::footnote-marker
|
|
pseudo-element itself rather than the corresponding list-item element.
|
|
Further, one clarification to the horizontal placement of the marker is
|
|
suggested: the <em>margin</em> box of the marker box is horizontally
|
|
aligned with the start of the line box.
|
|
|
|
<h3 id=counting-footnotes><span class=secno>5.5. </span>Counting footnotes</h3>
|
|
|
|
<p>The "footnote" counter is automatically incremented each time a footnote
|
|
is generated. That is, the "footnote" counter is incremented by one each
|
|
time an element with ‘<code class=css>float: footnote</code>’
|
|
appears.
|
|
|
|
<p>The footnote counter can be reset with the ‘<code
|
|
class=property>counter-reset</code>’ property.
|
|
|
|
<div class=example> This code resets the "footnote" counter on a per-page
|
|
page basis:
|
|
<pre>
|
|
@page { counter-reset: footnote }
|
|
</pre>
|
|
</div>
|
|
|
|
<p class=issue>Should one also be able to manually increment the "footnote"
|
|
counter? <!--
|
|
<p>The ‘<code class=property>counter-increment</code>’ property can be set in the @footnote rule.
|
|
Each time an element with ‘<code class=css>float: footnote</code>’ is found, the corresponding
|
|
counter is incremented.
|
|
|
|
<div class="example">
|
|
<p>This rule is part of the default style sheet:
|
|
|
|
<pre>
|
|
@page {
|
|
@footnote {
|
|
counter-increment: footnote;
|
|
}
|
|
}
|
|
</pre>
|
|
|
|
As a result, the "footnote" counter is incremented each time a footnote is generated.
|
|
</div>
|
|
-->
|
|
|
|
|
|
<h3 id=laying-out-footnotes><span class=secno>5.6. </span>Laying out
|
|
footnotes</h3>
|
|
|
|
<p>Footnotes must appear as early as possible under the following
|
|
constraints:
|
|
|
|
<ol>
|
|
<li>A footnote marker may not appear on an earlier page than the footnote
|
|
call.
|
|
|
|
<li>Footnotes may not appear out of document order.
|
|
<!--<span class="issue">(What order is that: the document order or the visual order?
|
|
Probably the document order, the same order as the footnote counter
|
|
values, although the visual order of the footnote calls may be
|
|
different, due to their occurrence in positioned and floating
|
|
elements.)</span>-->
|
|
|
|
|
|
<li>The footnote area is limited in size by ‘<code
|
|
class=property>max-height</code>’, unless the page contains only
|
|
footnotes. (E.g., if at the end of the document there are still footnotes
|
|
unprinted, the User Agent can use the whole page to display footnotes.)
|
|
|
|
<li>If there is a footnote call on a page, the footnote area may not be
|
|
empty, unless its ‘<code class=property>max-height</code>’ is
|
|
too small.
|
|
</ol>
|
|
|
|
<h3 id=footnote-magic><span class=secno>5.7. </span>Footnote magic</h3>
|
|
|
|
<p>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.
|
|
|
|
<p>When rendering footnotes, User Agents may apply certain heuristics to
|
|
improve the presentation. For example, the space between a footnote-call
|
|
and surrounding text may be adjusted. Another example is the height of the
|
|
footnote area; it may be heuristically constrained to limit the area that
|
|
is used for footnotes. <!--
|
|
<h2>Sidenotes</h2>
|
|
|
|
<p>Sidenotes are supported the same way as footnotes; only the name
|
|
and the settings in the default style sheet differentiates the two.
|
|
|
|
<p class=note>The motivation for having another page-based area into
|
|
which content can be floated is that footnotes and sidenotes are
|
|
often used in the same document.
|
|
|
|
<div class="example">
|
|
<p>This example moves images to the outside margin of pages:
|
|
|
|
<pre>
|
|
@page :left {
|
|
margin-left: 10em;
|
|
@sidenote { position: fixed; left: -8em; width: 6em }
|
|
}
|
|
@page :right {
|
|
margin-right: 10em;
|
|
@sidenote { position: fixed; right: -8em; width: 6em }
|
|
}
|
|
img { float: sidenote }
|
|
</pre>
|
|
</div>
|
|
|
|
<p class=note>The reason for having both a footnote and a sidenote area
|
|
on every page is that some documents use both.
|
|
|
|
<p class=issue>Should there be a mechanism to create new areas like
|
|
footnote/sidenote, or are two "magic" areas enough?
|
|
-->
|
|
|
|
|
|
<h2 id=hyphenation><span class=secno>6. </span>Hyphenation</h2>
|
|
<!--
|
|
<table class=hyphenate>
|
|
<tr><th>CSS<th>XSL<th>DSSSL
|
|
<tr><th>hyphens<th>hyphenate<th>hyphenate
|
|
|
|
<tr><td>none<td>false
|
|
<tr><td>manual<td>
|
|
<tr><td>auto<td>true
|
|
|
|
<tr><th>hyphenate-resource<th>country, language, script<th>?
|
|
<tr><td>auto
|
|
<tr><td><uri>
|
|
|
|
<tr><th>hyphenate-before<th>hyphenation-remain-character-count<th>hyphenation-remain-char-count
|
|
<tr><td>auto<td>
|
|
<tr><td><integer><td><integer>
|
|
|
|
<tr><th>hyphenate-after<th>hyphenation-push-character-count<th>hyphenation-push-char-count
|
|
<tr><td>auto<td>
|
|
<tr><td><integer><td><integer>
|
|
|
|
<tr><th>hyphenate-lines<th>hyphenation-ladder-count<th>hyphenation-ladder-count
|
|
<tr><td>no-limit<td>no-limit
|
|
<tr><td><integer>
|
|
|
|
<tr><th>hyphenate-character<th>hyphenation-character<th>hyphenation-char
|
|
<tr><td><string><td><character>
|
|
<tr><td>auto
|
|
|
|
<tr><th><th>hyphenation-keep<th>hyphenation-keep
|
|
<tr><td><td>auto
|
|
<tr><td><td>column
|
|
<tr><td><td>page
|
|
<tr><th><th><th>hyphenation-exceptions
|
|
<tr><td><td><td>The value is a list of strings. Each string is a word which may contain hyphen characters, #\-, indicating where hyphenation may occur. If a word to be hyphenated occurs in the list, it may only be hyphenated in the specified places. The initial value is the empty list.
|
|
|
|
|
|
</table>
|
|
|
|
-->
|
|
|
|
<p>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.
|
|
|
|
<h3 id=hyphenate-properties><span class=secno>6.1. </span>Hyphenate
|
|
properties</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=hyphens>hyphens</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>none | manual | auto
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>manual
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>Values are:
|
|
|
|
<dl>
|
|
<dt>none
|
|
|
|
<dd>Words are not broken at line breaks, even if characters inside the
|
|
word suggest line break points.
|
|
|
|
<dt>manual
|
|
|
|
<dd>Words are only broken at line breaks where there are characters inside
|
|
the word that suggest line break opportunities. Characters can be
|
|
explicit or conditional.
|
|
<div class=example>
|
|
<p>In Unicode, U+00AD is a conditional "soft hyphen" and U+2010 is an
|
|
explicit hyphen. Unicode Standard Annex #14 describes the <a
|
|
href="http://unicode.org/reports/tr14/#SoftHyphen">role of soft hyphens
|
|
in the</a> Unicode Line breaking algorithm.
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>In HTML, &shy; represents the soft hyphen character which
|
|
suggests a line break opportunity.
|
|
|
|
<pre>
|
|
ex&shy;ample.
|
|
</pre>
|
|
</div>
|
|
|
|
<dt>auto
|
|
|
|
<dd>Words can be broken at appropriate hyphenation points, as determined
|
|
by characters inside the word, resources listed in ‘<a
|
|
href="#hyphenate-resource"><code
|
|
class=property>hyphenate-resource</code></a>’, or other
|
|
UA-dependent resources. Characters inside the word take priority over
|
|
hyphenation points determined by other resources.
|
|
</dl>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=hyphenate-resource>hyphenate-resource</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>none | <uri> [, <uri> ]*
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property specifies a comma-separated list of external resources
|
|
that can help the UA determine hyphenation points. If more than one
|
|
resource is specified, the UA should consult each resource until it finds
|
|
one that is able to determine hyphenation points in a word. The
|
|
‘<code class=property>none</code>’ value indicates that no
|
|
external resources are available. In any case, the UA can also use local
|
|
resources not listed on this property.
|
|
|
|
<div class=example>
|
|
<p>Often, finding the right hyphenate resource is based on knowing the
|
|
language of the text. The <code>lang</code> attribute is recommended for
|
|
encoding the language, and the corresponding selector is used in this
|
|
example:
|
|
|
|
<pre>
|
|
:lang(dk) { hyphenate-resource: url("hyph_da_DK.dic"), url("hyph_da_NO.dic") }
|
|
</pre>
|
|
</div>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=hyphenate-before>hyphenate-before</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><integer> | auto
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property specifies the minimum number of characters in a hyphenated
|
|
word before the hyphenation character. The ‘<code
|
|
class=css>auto</code>’ value means that the UA chooses a value that
|
|
adapts to the current layout.
|
|
|
|
<p class=note>Unless the UA is able to calculate a better value, it is
|
|
suggested that ‘<code class=css>auto</code>’ means 2.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=hyphenate-after>hyphenate-after</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><integer> | auto
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property specifies the minimum number of characters in a hyphenated
|
|
word after the hyphenation character. The ‘<code
|
|
class=css>auto</code>’ value means that the UA chooses a value that
|
|
adapts to the current layout.
|
|
|
|
<p class=note>Unless the UA is able to calculate a better value, it is
|
|
suggested that ‘<code class=css>auto</code>’ means 2.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=hyphenate-lines>hyphenate-lines</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>no-limit | <integer>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>no-limit
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property indicates the maximum number of successive hyphenated
|
|
lines in an element. In some cases, user agents may not be able to honor
|
|
the specified value. The ‘<code class=css>no-limit</code>’
|
|
value means that there is no limit.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=hyphenate-character>hyphenate-character</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>auto | <string>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>auto
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property specifies a string that is shown when a hyphenate-break
|
|
occurs. The ‘<code class=property>auto</code>’ value means
|
|
that the user agent should find an appropriate value. <!--
|
|
<p class=issue>Which character is it, "minus hyphen" or U+2010?
|
|
-->
|
|
|
|
|
|
<div class=example>
|
|
<p>In Latin scripts, the hyphen character (U+2010) is often used to
|
|
indicate that a word has been split. Normally, it will not be necessary
|
|
to set it explicitly. However, this can easily be done:
|
|
|
|
<pre>
|
|
article { hyphenate-character: "\2010" }
|
|
</pre>
|
|
</div>
|
|
<!--
|
|
<p class=issue>XSL uses a different list of <a href="http://www.w3.org/TR/2006/CR-xsl11-20060220/#common-hyphenation-properties">properties</a>. Reuse of these properties has been considered.
|
|
-->
|
|
|
|
<h2 id=new-counter-styles><span class=secno>7. </span>New counter styles</h2>
|
|
|
|
<h3 id=the-super-decimal-list-style-type><span class=secno>7.1. </span>The
|
|
‘<code class=css>super-decimal</code>’ list-style-type</h3>
|
|
|
|
<p class=issue>This section will be moved to css3-lists (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/2009Jun/0186.html">minutes</a>)
|
|
|
|
|
|
<p>A new list-style-type, ‘<code
|
|
class=css>super-decimal</code>’, 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 ‘<code
|
|
class=css>super-decimal</code>’ keyword allow these font resources
|
|
to be used and replaces the use of ‘<code
|
|
class=property>font-size</code>’ and ‘<code
|
|
class=property>vertical-align</code>’ (which prohibit the use of
|
|
special-purpose glyphs).
|
|
|
|
<div class=example> This example specifies that footnote markers should
|
|
consist of super-script decimal numbers.
|
|
<pre>
|
|
::footnote-marker { content: counter(footnote, super-decimal) }
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Using super-script glyphs is optional; UAs may also scale and position
|
|
other glyphs for use in footnote calls.
|
|
|
|
<h3 id=named-counter-styles><span class=secno>7.2. </span>Named counter
|
|
styles</h3>
|
|
|
|
<p>CSS defines a number of predefined list style types for the ‘<code
|
|
class=property>list-style-type</code>’ property and other places
|
|
where a list-style-type value is accepted. Some styles repeat the same
|
|
glyph (e.g., ‘<code class=css>disc</code>’ and ‘<code
|
|
class=css>circle</code>’) while others have lists of glyphs (e.g.,
|
|
‘<code class=css>decimal</code>’, and ‘<code
|
|
class=css>lower-roman</code>’). To increase the range of lists that
|
|
can be achieved through CSS without adding many new keywords,
|
|
@counter-style rules are introduced. By using @counter-style, a style
|
|
sheet can name new counter styles.
|
|
|
|
<p>An @counter-style rule consists of the keyword ‘<code
|
|
class=css>@counter-style</code>’, followed by the name of the symbol
|
|
counter style, followed by a space-separated list of strings.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
@counter-style daggers "*" "\2020" "\2021" "\A7" "#";
|
|
ol { list-style-type: daggers }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<pre>
|
|
@counter-style ordinal "1st" "2nd" "3rd" "4th";
|
|
h1:before { content: counter(chapter, ordinal) " chapter" }
|
|
</pre>
|
|
</div>
|
|
|
|
<p>The first string in the list represents number one, the second string
|
|
represents number two, etc. Outside the range of specified values, the
|
|
rendering will be as if the ‘<code class=css>decimal</code>’
|
|
list style type had been specified.
|
|
|
|
<div class=example>
|
|
<p>Consider this example:
|
|
|
|
<pre>
|
|
@counter-style ordinal "1st" "2nd" "3rd" "4th";
|
|
ordered-list { counter-reset: items -1 }
|
|
list-item { counter-increment: items 2 }
|
|
</pre>
|
|
|
|
<p>For a series of <tt>list-item</tt> elements inside an
|
|
<tt>ordered-list</tt> element, the value of the <tt>items</tt> counter
|
|
will be -1, 1, 3, 5, 7 etc. Given that the <tt>ordinal</tt> counter style
|
|
only defines a counter style for 1, 2, 3, and 4, the list will be
|
|
numbered "-1", "1st", "3rd", "5", "7" etc.
|
|
</div>
|
|
|
|
<p>Named counter styles can be imported through @import statements.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
@import url(http://www.example.com/armenian-counters.css); /* defines 'armenian' */
|
|
ol { list-style-type: armenian }
|
|
</pre>
|
|
</div>
|
|
<!--
|
|
<div class="issue">Should we allow images in addition to strings?
|
|
<pre>
|
|
@counter-style graphic url("1.gif") url("2.gif") url("3.gif")
|
|
</pre>
|
|
</div>
|
|
-->
|
|
|
|
<h3 id=the-symbols-list-style-type><span class=secno>7.3. </span>The
|
|
‘<code class=css>symbols()</code>’ list-style-type</h3>
|
|
|
|
<p>A new list-style-type with a functional notation is introduced to avoid
|
|
the indirection of having to name counter styles. The ‘<code
|
|
class=css>symbols()</code>’ value takes a comma-separated list of
|
|
strings as arguments.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
::footnote-call {
|
|
content: counter(footnote, symbols('*', '+', '!'))
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>Outside the range of specified values, the rendering will be as if the
|
|
‘<code class=css>decimal</code>’ list style type had been
|
|
specified.
|
|
|
|
<div class=example> This code:
|
|
<pre>
|
|
ol { list-style: symbols("*", "\2020", "\2021", "\A7", "#") }
|
|
</pre>
|
|
will result in these list-items markers: * † ‡ § # 6 7
|
|
8 ...</div>
|
|
<!--
|
|
<p class="issue">Should there be a way to indicate the behavior if there are more items than strings? Proposals include: "alphabetic", "enumerate", "numeric", "cycle", "ideographic".
|
|
-->
|
|
<!--
|
|
<h2>Page counters</h2>
|
|
|
|
<p>Printed publications often show page numbers to indicate the
|
|
sequence of papes. Also, it is common to show the total number of
|
|
pages in the document. For example, "page 3 of 5" may be shown at the
|
|
bottom of a page.
|
|
|
|
<p>This specifiction describes two counters that can be used to
|
|
indicate page numbers: ‘<code class=css>page</code>’ and ‘<code class=css>pages</code>’.
|
|
|
|
<h3>The ‘<code class=css>page</code>’ counter</h3>
|
|
|
|
<p>The ‘<code class=css>page</code>’ counter is predefined to start with a value of zero,
|
|
and to be automatically incremented by one before every page. That is,
|
|
UAs must behave as if this code fragment is part of the default style
|
|
sheet:
|
|
|
|
<pre>
|
|
@page {
|
|
counter-increment: page 1;
|
|
}
|
|
</pre>
|
|
|
|
<p>The ‘<code class=css>page</code>’ counter can be reset and incremented in style sheets
|
|
just like other counters. On pages where the counter is incremented by
|
|
the style sheet in the page context, the automatic incrementation does
|
|
not take place.
|
|
|
|
<div class="example">
|
|
|
|
<pre>
|
|
@page {
|
|
@bottom-center {
|
|
content: counter(page);
|
|
}
|
|
}
|
|
|
|
@page introduction {
|
|
counter-reset: page;
|
|
}
|
|
|
|
@page :right {
|
|
counter-increment: page 2;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
<h3>The ‘<code class=css>pages</code>’ counter</h3>
|
|
|
|
<p>The ‘<code class=css>pages</code>’ counter is predefined to have the total number of
|
|
pages in the document. In order to find the value of this counter, the
|
|
UA will have to paginate the document. This counter is a constant and
|
|
it cannot be set or incremented by a style sheet.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
@page {
|
|
@bottom-center {
|
|
content: "Page " counter(page) " of " counter(pages) " pages in total";
|
|
}
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>UAs that are not able to paginate the document should display a
|
|
question mark or another symbol that indicates uncertainty.
|
|
|
|
<div class=example>
|
|
|
|
<p>This code has no effect on the ‘<code class=css>pages</code>’ counter which cannot be
|
|
changed by the style sheet. However, the the ‘<code class=css>page</code>’ counter reset normally.
|
|
|
|
<pre>
|
|
@page :right {
|
|
counter-reset: pages page;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
-->
|
|
|
|
<h2 id=image-resolution><span class=secno>8. </span>Image resolution</h2>
|
|
|
|
<p>Image resolution, as the term is used in this document, means pixels per
|
|
physical length, e.g., pixels per inch. Some image formats can record
|
|
information about the resolution of images. This information can be
|
|
helpful when determining the actual size of the image in the formatting
|
|
process. However, the information can also be wrong, in which case it
|
|
should be ignored. The ‘<a href="#image-resolution0"><code
|
|
class=property>image-resolution</code></a>’ and ‘<code
|
|
class=property>background-image-resolution</code>’ properties are
|
|
introduced to determine the correct resolution of images.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=image-resolution0>image-resolution</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>normal | [ from-image || <dpi> ]
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>normal
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>replaced elements <span class=issue>and background images?</span>
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>yes
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>as specified value <span class=issue>(or, should it be only one
|
|
value?)</span>
|
|
</table>
|
|
|
|
<p>The values are:
|
|
|
|
<dl>
|
|
<dt>normal
|
|
|
|
<dd>The resolution of the image is unknown, and UAs should not use the
|
|
resolution found in the image. Instead, the image resolution will be
|
|
found by converting the dimension of the image into CSS pixels.
|
|
|
|
<dt>from-image
|
|
|
|
<dd>The UA must look for the resolution in the image itself. If the image
|
|
does not have a resolution, the specified <dpi> value is used. If no
|
|
<dpi> value is specified, the behavior is as if ‘<code
|
|
class=css>normal</code>’ had been specified.
|
|
|
|
<dt><dpi>
|
|
|
|
<dd>The value consists of a number with a ‘<code
|
|
class=property>dpi</code>’ unit identifier. The <dpi> value sets
|
|
the resolution of the image. In combination with ‘<code
|
|
class=css>from-image</code>’, the specified dpi is only used if the
|
|
image does not have a resolution.
|
|
</dl>
|
|
|
|
<div class=example>
|
|
<p>This rule specifies that the UA should use the image resolution found
|
|
in the image itself.
|
|
|
|
<pre>
|
|
img { image-resolution: from-image }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Using this rule, the image resolution is set to 300dpi and the
|
|
resolution in the image, if any, is ignored.
|
|
|
|
<pre>
|
|
img { image-resolution: 300dpi }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>These rules both specify that the UA should use the image resolution
|
|
found in the image itself. If the image has no resolution, the resolution
|
|
is set to 300dpi.
|
|
|
|
<pre>
|
|
img { image-resolution: from-image 300dpi }
|
|
img { image-resolution: 300dpi from-image }
|
|
</pre>
|
|
</div>
|
|
<!--
|
|
|
|
<table class=propdef>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
<td><dfn>image-resolution</dfn>
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
<td>normal | auto | <dpi> [ , normal | <dpi> ]?
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
<td>normal
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
<td>replaced elements
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
<td>yes
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
<td>N/A
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
<td>visual
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
<td>as specified value <span class=issue>(or, should it be only one value?)</span>
|
|
</table>
|
|
|
|
<p>This property accepts either a single value, or a comma-separated
|
|
list of two values. The values are:
|
|
|
|
<dl>
|
|
<dt>normal
|
|
|
|
<dd>The resolution of the image is unknown, and UAs should not use the
|
|
resolution found in the image. Instead, the image resolution will be
|
|
found by making image pixels equivalent to CSS pixels.
|
|
|
|
<dt>auto
|
|
|
|
<dd>The UA must look for the resolution in the image itself. If the image has no image resolution, the next value in the comma-separated list is evaluated.
|
|
|
|
<dt><dpi>
|
|
|
|
<dd>The value consists of a number with a ‘<code class=property>dpi</code>’ unit identifier. The
|
|
UA should use the specified resolution.
|
|
|
|
</dl>
|
|
|
|
<p>If, after evaluating the specified values, no image resolution has been determined, the UA should behave as if ‘<code class=css>normal</code>’ had been specified.
|
|
|
|
<div class="example">
|
|
<p>This rule specifies that the UA should use the image resolution found in the image itself.
|
|
<pre>
|
|
img { image-resolution: auto }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>This rule specifies that the UA should use the image resolution found in the image itself. If the image has no resolution, the resolution is set to 300dpi.
|
|
<pre>
|
|
img { image-resolution: auto, 300dpi }
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<p>Using this rule, the image resolution is set to 300dpi and the resolution in the image, if any, is ignored.
|
|
<pre>
|
|
img { image-resolution: 300dpi }
|
|
</pre>
|
|
</div>
|
|
|
|
|
|
-->
|
|
<!--
|
|
|
|
<div class="issue">
|
|
<p>Should there be a way of setting width, height, resolution on images that are referenced by a URL in the style sheet? E.g.,
|
|
<pre>
|
|
background-image: url(image.png, width, height, resolution);
|
|
background-image: image-url(image.png, width, height, resolution);
|
|
background-image: image(url(image.png), width, height, resolution);
|
|
</pre>
|
|
</div>
|
|
-->
|
|
<!--
|
|
<table class=propdef>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
<td><dfn>background-image-resolution</dfn>
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
<td>normal | auto | <dpi> [ , normal | <dpi> ]?
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
<td>normal
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
<td>replaced elements
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
<td>yes
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
<td>N/A
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
<td>visual
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
<td>as specified value <span class=issue>(or, should it be only one value?)</span>
|
|
</table>
|
|
|
|
<p class=issue>Introducing one new property in all places where an image can be loaded may not be a scalable solution. Therefore this property is at risk.
|
|
|
|
<p>As ‘<code class=property>image-resolution</code>’, except that it describes the resolution of the element's background image.
|
|
|
|
-->
|
|
|
|
<h2 id=page-marks-and-bleed-area><span class=secno>9. </span>Page marks and
|
|
bleed area</h2>
|
|
|
|
<p>The ‘<a href="#marks"><code class=property>marks</code></a>’
|
|
property from <a href="#CSS2" rel=biblioentry>[CSS2]<!--{{CSS2}}--></a> is
|
|
part of this specification.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=marks>marks</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>[ crop || cross ] | none
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>page context
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual, paged
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property adds crop and/or cross marks to the document. Crop marks
|
|
indicate where the page should be cut. Cross marks are used to align
|
|
sheets.
|
|
|
|
<p>Crop marks and cross marks are printed outside the page box. To have
|
|
room to show crop and cross marks, the final pages will have to be
|
|
somewhat bigger than the page box.
|
|
|
|
<div class=example>
|
|
<p>To set crop and cross marks on a document, this code can be used:
|
|
|
|
<pre>
|
|
@page { marks: crop cross }
|
|
</pre>
|
|
</div>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=bleed>bleed</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><length>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>6pt
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>page context
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>refer to width of page box
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>as specified value
|
|
</table>
|
|
|
|
<p>This property specifies the extent of the page bleed area outside the
|
|
page box. This property only has effect if crop marks are enabled.
|
|
|
|
<h2 id=bookmarks><span class=secno>10. </span>Bookmarks</h2>
|
|
|
|
<p>Some document formats have the capability of holding bookmarks.
|
|
Bookmarks are typically shown outside the document itself, often a
|
|
tree-structured and clickable table of contents to help navigate in the
|
|
electronic version of the document. To generate bookmarks, these
|
|
properties are defined:
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=bookmark-level>bookmark-level</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>none | <integer>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>all
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property describes what level a certain bookmark has in a
|
|
hierarchical bookmark structure. The highest level is ‘<code
|
|
class=css>1</code>’, then ‘<code class=css>2</code>’,
|
|
‘<code class=css>3</code>’ etc.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
h1 { bookmark-level: 1 }
|
|
h2 { bookmark-level: 2 }
|
|
h3 { bookmark-level: 3 }
|
|
</pre>
|
|
</div>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=bookmark-label>bookmark-label</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>content() | attr() | <string>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>content()
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>all
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property specifies the label of the bookmark, i.e., the text that
|
|
will represent the bookmark in the bookmark structure.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
a { bookmark-label: attr(title, string) }
|
|
h1 { bookmark-label: content() }
|
|
h2 { bookmark-label: content(before) }
|
|
#frog { bookmark-label: "The green frog" }
|
|
</pre>
|
|
</div>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=bookmark-target>bookmark-target</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>none | <uri> | <attr>
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>none
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>all elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>all
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>For URI values, the absolute URI; for attr() values, the resulting
|
|
URI or string; for other keywords, as specified.
|
|
</table>
|
|
|
|
<p>This property specifies the target of the bookmark link.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
.bookmark {
|
|
bookmark-label: attr(title, string);
|
|
bookmark-target: attr(href, url);
|
|
}
|
|
...
|
|
<a class="bookmark" title="The green pear" href="#pears"/>
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example> .exable { bookmark-label: url(http://www.example.com) }
|
|
</div>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=bookmark-state>bookmark-state</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td>open | closed
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>open
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>block-level elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>N/A
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>all
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>specified value
|
|
</table>
|
|
|
|
<p>This property describes the initial state of a bookmark.
|
|
|
|
<div>
|
|
<pre>
|
|
* { bookmark-state: closed }
|
|
#open { bookmark-state: open }
|
|
</pre>
|
|
</div>
|
|
|
|
<h2 id=cmyk-colors><span class=secno>11. </span>CMYK colors</h2>
|
|
|
|
<p>Printers do not use RGB colors, they (often) use CMYK: cyan, magenta,
|
|
yellow and black. The ‘<code class=css>cmyk()</code>’
|
|
functional value allows style sheets to express device-dependent CMYK
|
|
colors.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
h3 { color: cmyk(0.8, 0.5, 0.0, 0.3) }
|
|
</pre>
|
|
</div>
|
|
|
|
<p>The values representing the colors are between ‘<code
|
|
class=css>0</code>’ and ‘<code class=css>1</code>’.
|
|
Values outside this range are clipped.
|
|
|
|
<p>It is not expected that screen-centric user agents support CMYK colors
|
|
and it is therefore important that existing CSS color values can be
|
|
combined with CMYK colors.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
h3 {
|
|
color: red;
|
|
color: cmyk(0.5, 0.1, 0.0, 0.2);
|
|
}
|
|
</pre>
|
|
|
|
<p>User Agents that do not understand the <code>cmyk()</code> value, will
|
|
use the first color (red). User agents that understand
|
|
<code>cmyk()</code> will use the second color (which is bluish).
|
|
</div>
|
|
|
|
<h2 id=styling-blank-pages><span class=secno>12. </span>Styling blank pages</h2>
|
|
|
|
<p>Blank pages that appear as a result of forced page breaks can be styled
|
|
with the <code>:blank</code> pseudo-class.
|
|
|
|
<div class=example>
|
|
<p>In this example, forced page break may occur before <code>h1</code>
|
|
elements.
|
|
|
|
<pre>
|
|
h1 { page-break-before: left }
|
|
|
|
@page :blank {
|
|
@top-center { content: "This page is intentionally left blank" }
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>The <code>:blank</code> pseudo-class has the same specificity as the
|
|
<code>:first</code> pseudo-class. A page matched by <code>:blank</code>
|
|
will still be matched by other page selectors.
|
|
|
|
<div class=example>
|
|
<p>If headers have been specified on all right pages, a blank right page
|
|
will be matched by both <code>:blank</code> and <code>:right</code>.
|
|
Therefore, margin boxes set on right pages will have to be removed unless
|
|
they are wanted on blank pages. Here is an example where the top center
|
|
header is removed from blank pages, while the page number remains:
|
|
|
|
<pre>
|
|
h1 { page-break-before: left }
|
|
|
|
@page :blank {
|
|
@top-center { content: none }
|
|
}
|
|
|
|
@page :right {
|
|
@top-center { content: "Preliminary edition" }
|
|
@bottom-center { content: counter(page) }
|
|
}
|
|
</pre>
|
|
|
|
<p>Due to the higher specificity of <code>:blank</code> over
|
|
<code>:right</code>, the top center header is removed even if
|
|
<code>content: none</code> comes before <code>content: "Preliminary
|
|
edition"</code>.
|
|
</div>
|
|
|
|
<h2 id=page-floats><span class=secno>13. </span>Page floats</h2>
|
|
|
|
<p>Images and figures are sometimes displayed at the top or bottom of
|
|
pages. Also, an element may be moved to the next page or not displayed at
|
|
all if there is not enough room on its native page. These types of floats
|
|
are called "page floats" in this specification.
|
|
|
|
<p>To support page floats, the <span class=property>‘<code
|
|
class=property>float</code>’</span> property is extended with
|
|
several new values: <!--
|
|
|
|
<p>Further, the ‘<code class=property>float</code>’ property is extended to accept a
|
|
comma-separated list of sets of keywords. If the first set of keywords
|
|
cannot be honored with the element remaining on the current page, the
|
|
second set of keywords will determine how the element is floated.
|
|
|
|
<div class="example">
|
|
|
|
<p>In this example, the element will be floated to the top of the next page unless it fits on the current page.
|
|
|
|
<pre>
|
|
.figure {
|
|
float: none, top next page;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
-->
|
|
|
|
|
|
<dl>
|
|
<dt>inside
|
|
|
|
<dd>On a right page, this value is synonymous with ‘<code
|
|
class=property>left</code>’. On a left page, this value is
|
|
synonymous with ‘<code class=property>right</code>’.
|
|
|
|
<dt>outside
|
|
|
|
<dd>On a left page, this value is synonymous with ‘<code
|
|
class=property>left</code>’, On a right page, this value is
|
|
synonymous with ‘<code class=property>right</code>’.
|
|
|
|
<dt>page
|
|
|
|
<dd>Indicates that the page area is the flow root for the element.
|
|
|
|
<dt>multicol
|
|
|
|
<dd>Indicates that the multicol element is the flow root for the element.
|
|
|
|
<dt>intrude
|
|
|
|
<dd>The element may intrude neighboring columns; if the element is not in
|
|
a multi-column element, this keyword has no effect.
|
|
|
|
<dt>unless-room
|
|
|
|
<dd>If the element can be laid out in its natural position without causing
|
|
a page break, it should be laid out there disregarding the ‘<code
|
|
class=property>float</code>’ property; in other cases the other
|
|
values on ‘<code class=property>float</code>’ will determine
|
|
its floating behavior.
|
|
|
|
<dt>top
|
|
|
|
<dd>This keyword indicates that the element is floated to the top of the
|
|
flow root.
|
|
|
|
<dt>bottom
|
|
|
|
<dd>This keyword indicates that the element is floated to the bottom of
|
|
the flow root.
|
|
|
|
<dt>next
|
|
|
|
<dd>The float is placed on top of the next page from its source location.
|
|
If combined with ‘<code class=property>bottom</code>’, the
|
|
float is placed on the bottom of the next page.
|
|
|
|
<dt>page()
|
|
|
|
<dd>The element is floated to a named page. The named page is created for
|
|
the element, unless a suitable named page already has been created by
|
|
another ‘<code class=css>page()</code>’ value. The name page
|
|
should appear as early as possible, but any ‘<code
|
|
class=property>next</code>’ keywords should be honored.
|
|
|
|
<dd>The element is floated to one or more named pages of the type
|
|
specified. These named pages are created for the purpose of showing the
|
|
element, and they are presented as early as possible after the page from
|
|
which they are displaced. If the element is not the first page float to
|
|
be displaced from this page area to this named page name, its contents
|
|
should continue on the last of the previously established named pages
|
|
(unless precluded, for example by page-breaking properties).
|
|
|
|
<dt>hide
|
|
|
|
<dd>As if ‘<code class=css>display: none</code>’ is set.
|
|
</dl>
|
|
|
|
<p>The values on float are categorized as such:
|
|
|
|
<ul>
|
|
<li>horizontal keywords: left right inside outside
|
|
|
|
<li>vertical keywords: top bottom
|
|
|
|
<li>flow root keywords: page multicol
|
|
|
|
<li>modifier keyword: next unless-room
|
|
|
|
<li>other keywords: none hide footnote page()
|
|
</ul>
|
|
|
|
<p>The keywords can be combined to form more complex expressions with these
|
|
restrictions:
|
|
|
|
<ul>
|
|
<li>only one horizontal keyword can appear in a set
|
|
|
|
<li>only one vertical keyword can appear in a set
|
|
|
|
<li>at least one horizontal or vertical keyword must appear, except that
|
|
‘<code class=css>none</code>’, ‘<code
|
|
class=css>hide</code>’, and ‘<code
|
|
class=css>footnote</code>’ must appear alone
|
|
|
|
<li>‘<code class=property>next</code>’ may appear once along
|
|
with ‘<code class=property>page</code>’
|
|
|
|
<li>keywords can appear in any order
|
|
</ul>
|
|
|
|
<div class=example>
|
|
<p>Float element to the top of the page:
|
|
|
|
<pre>
|
|
.figure {
|
|
float: top page;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Float element to the top of the next page:
|
|
|
|
<pre>
|
|
.figure {
|
|
float: top next page;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Place footnotes at the bottom of the inside columns:
|
|
|
|
<pre>
|
|
@footnote {
|
|
float: bottom inside multicol;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Place figure on top of current column:
|
|
|
|
<pre>
|
|
.figure {
|
|
float: top;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Float the figure to the top of the next page, unless it fits in its
|
|
natural position without causing a page break:
|
|
|
|
<pre>
|
|
.figure {
|
|
float: top next page unless-room;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Hide the element unless it fits in its natural position without causing
|
|
a page break:
|
|
|
|
<pre>
|
|
.figure {
|
|
float: hide unless-room;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>In this example, wide tables are floated to landscape pages:
|
|
|
|
<pre>
|
|
table.wide {
|
|
float: page(landscape);
|
|
}
|
|
</pre>
|
|
In the above code, the element is take out of the flow, which is allowed
|
|
to continue on the same page. If the flow should be broken, this code can
|
|
be used:
|
|
<pre>
|
|
table.wide {
|
|
page: landscape;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Consider this code:
|
|
|
|
<pre>
|
|
table {
|
|
float: page(landscape);
|
|
}
|
|
</pre>
|
|
|
|
<p>If two tables appear consecutively, they will both, space permitting,
|
|
be placed on the same named page. To ensure that each table appears on
|
|
its own page, this code can be used:
|
|
|
|
<pre>
|
|
table {
|
|
float: page(landscape);
|
|
page-break-before: always;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>For non-replaced elements in horizontal text, values on ‘<code
|
|
class=property>float</code>’ that have a horizontal component
|
|
(‘<code class=property>right</code>’, ‘<code
|
|
class=property>left</code>’, ‘<code
|
|
class=property>outside</code>’, ‘<code
|
|
class=property>inside</code>’) will result in shrink-wrap width
|
|
calculations as per CSS 2.1 section 10.3.5. Values that only have a
|
|
vertical component (‘<code class=property>top</code>’,
|
|
‘<code class=property>bottom</code>’, ‘<code
|
|
class=property>next</code>’, 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.
|
|
|
|
<h3 id=float-intrusion-in-multicol-elements><span class=secno>13.1.
|
|
</span>Float intrusion in multicol elements</h3>
|
|
|
|
<p>In multi-column layouts <a href="#CSS3COL"
|
|
rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>, floats appear within
|
|
columns; they never intrude into neighboring columns.
|
|
|
|
<div class=example>
|
|
<pre class=css>
|
|
img { float: left; width: 120% }
|
|
</pre>
|
|
|
|
<p>In this example, the image is wider than the column and will therefore
|
|
intrude into the neighboring column. At the bottom of the middle column
|
|
is a long word that is clipped in the middle of the column gap.
|
|
|
|
<div class=cols>
|
|
<p>Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
|
|
<div class=col style="left: 175px">
|
|
<p>hi jklmno. Pqrstu vw<br>
|
|
x yz. Abc def ghi jkl.<br>
|
|
<span style="padding-left: 30px">M nop qrst uvw</span><br>
|
|
<span style="padding-left: 30px">x yz. Ab cde fgh</span><br>
|
|
<span style="padding-left: 30px">i jkl. Mnopqr stu</span><br>
|
|
<span style="padding-left: 30px">vw xyz. A bcdef</span><br>
|
|
<span style="padding-left: 30px">ghij klm nopqrs</span><br>
|
|
<span style="padding-left: 30px">tuv wxy z. Abc</span><br>
|
|
de fghi jk klmop qrst<br>
|
|
uvwxyzabcdefghijklmn<br>
|
|
</div>
|
|
|
|
<div class=col style="left: 350px">
|
|
<p> Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
hi jklmno. Pqrstu vw<br>
|
|
x yz. Abc def ghi jkl.<br>
|
|
M nop qrst uv wx yz.<br>
|
|
Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz.
|
|
</div>
|
|
|
|
<div class=rep style="width: 200px"></div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<pre class=css>
|
|
img { float: right; width: 120% }
|
|
</pre>
|
|
|
|
<p>In this example, the image naturally appears in the last column. Due to
|
|
being floated to the right, the image will intrude into the neighboring
|
|
column to the left.
|
|
|
|
<div class=cols style="height: 186px">
|
|
<p> Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nopqrs<br>
|
|
tuv wxy z. Abc de fg<br>
|
|
hi jklmno. Pqrstu vw<br>
|
|
x yz. Abc def ghi j<br>
|
|
kl. M nop qrst uv wx<br>
|
|
yz. Ab cde fgh i jkl<br>
|
|
mno pqr stu vw xyz.
|
|
|
|
<div class=col style="left: 175px">
|
|
<p> Ab cde fgh i jkl. Mno<br>
|
|
pqr stu vw xyz. A bc<br>
|
|
def g hij klm nop<br>
|
|
qrs tuv wxy z.<br>
|
|
Rst uvw x yz. Ab<br>
|
|
c def ghi jkl m.<br>
|
|
Nop qrst uv wx<br>
|
|
Ryz. Ab cdef gh<br>
|
|
i jklmno pqr stu vw
|
|
</div>
|
|
|
|
<div class=col style="left: 350px">
|
|
<p> xyz. Abc def ghi jkl<br>
|
|
mno. Pqr stu vw xyz.<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
Ab cde fgh ij klm no.
|
|
</div>
|
|
|
|
<div class=rep style="width: 200px; right: 0"></div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id=advanced-multi-column-layout><span class=secno>14. </span>Advanced
|
|
multi-column layout</h2>
|
|
|
|
<p>In paged media, it is common for figures, captions, images, and quotes
|
|
to be laid out in certain positions for typographical reasons, rather than
|
|
for structural (as in content order) reasons. For example, an image that
|
|
illustrates a news story is often placed in the upper right corner of the
|
|
article, irrespective of its order in the content. A poignant quote from
|
|
the article may be shown in large type in the column gap, pushing aside
|
|
text in both columns, to get the attention of the reader.
|
|
|
|
<p>Basic multi-column layouts is described in a separated CSS3 module <a
|
|
href="#CSS3COL" rel=biblioentry>[CSS3COL]<!--{{CSS3COL}}--></a>. This
|
|
section extends multi-column functionality so that more advanced, but
|
|
commonly used, layouts can be achieved.
|
|
|
|
<p>The proposed functionality relies on three new components:
|
|
|
|
<ul>
|
|
<li>one new value on float: ‘<code class=css>multicol</code>’
|
|
(listed in the previous section)
|
|
|
|
<li>one new property: ‘<a href="#float-offset"><code
|
|
class=property>float-offset</code></a>’
|
|
|
|
<li>one new unit: ‘<code class=css>gr</code>’
|
|
</ul>
|
|
|
|
<p>The strategy for achieving advanced multi-column layout is similar to
|
|
page floats; elements escape their normal flow root by setting a value on
|
|
‘<code class=property>float</code>’. In the case of
|
|
multi-column layout, the keyword is ‘<code
|
|
class=css>multicol</code>’ (instead of ‘<code
|
|
class=css>page</code>’) and it indicates that the element should
|
|
floated with regard to. the multi-column element instead of the column
|
|
where it naturally occurs.
|
|
|
|
<p>To further enhance positioning, the ‘<a href="#float-offset"><code
|
|
class=property>float-offset</code></a>’ property is introduced. It
|
|
pushes elements in the opposite direction of the positional keywords, both
|
|
horizontally and vertically.
|
|
|
|
<p>The ‘<code class=css>gr</code>’ unit is introduced to allow
|
|
the grid lines of columns (and, potentially, tables) to be used in the
|
|
positioning ans sizing of elements. Each column has one grid line on each
|
|
side corresponding to the content edge of the content box.
|
|
|
|
<p>The ‘<code class=css>gr</code>’ unit has two purposes. When
|
|
used on the ‘<a href="#float-offset"><code
|
|
class=property>float-offset</code></a>’ property it identifies a
|
|
position by counting columns and gaps from the position established by the
|
|
‘<code class=property>float</code>’ property. Fractions on the
|
|
‘<code class=property>gr</code>’ unit refer to fractions of
|
|
the last counted gap or column.
|
|
|
|
<p>When used on the ‘<code class=property>width</code>’
|
|
property, the ‘<code class=property>gr</code>’ unit identifies
|
|
a length by counting gaps and columns, starting at the point where the
|
|
element naturally finds itself and continuing in the direction of box
|
|
expansion. Fractions on the ‘<code class=property>gr</code>’
|
|
unit refer to the last gap or column counted.
|
|
|
|
<h3 id=the-float-offset-property><span class=secno>14.1. </span>The
|
|
‘<a href="#float-offset"><code
|
|
class=property>float-offset</code></a>’ property</h3>
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td><em>Name:</em>
|
|
|
|
<td><dfn id=float-offset>float-offset</dfn>
|
|
|
|
<tr>
|
|
<td><em>Value:</em>
|
|
|
|
<td><length> <length> ?
|
|
|
|
<tr>
|
|
<td><em>Initial:</em>
|
|
|
|
<td>0 0
|
|
|
|
<tr>
|
|
<td><em>Applies to:</em>
|
|
|
|
<td>floated elements
|
|
|
|
<tr>
|
|
<td><em>Inherited:</em>
|
|
|
|
<td>no
|
|
|
|
<tr>
|
|
<td><em>Percentages:</em>
|
|
|
|
<td>refer to width and height of containing block
|
|
|
|
<tr>
|
|
<td><em>Media:</em>
|
|
|
|
<td>visual, paged
|
|
|
|
<tr>
|
|
<td><em>Computed value:</em>
|
|
|
|
<td>one or two absolute lengths
|
|
</table>
|
|
|
|
<p>This property pushes floated elements in the opposite direction of the
|
|
where they have been floated with ‘<code
|
|
class=property>float</code>’. 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 ‘<code class=css>float:
|
|
right</code>’), this property will only offset the float
|
|
horizontally, even if a vertical value also has been specified. Likewise,
|
|
if an element has only been floated vertically, this property will only
|
|
offset the float vertically. If an element has been floated both
|
|
horizontally and vertically, this property will offset both horizontally
|
|
and vertically. If no vertical value has been specified, the vertical
|
|
offset is set to zero.
|
|
|
|
<p>If the ‘<code class=property>gr</code>’ unit or percentage
|
|
unit is used, it means that the middle of the float should be aligned with
|
|
the specified grid line (or portion thereof).
|
|
|
|
<p>If another unit is used, it means that the float is pushed a distance
|
|
equal to the specified length.
|
|
|
|
<p class=issue>‘<a href="#float-offset"><code
|
|
class=property>float-offset</code></a>’ 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, ‘<code
|
|
class=property>right</code>’, or call it ‘<code
|
|
class=css>shift left, </code>’shift right' etc.).
|
|
|
|
<div class=example>
|
|
<p>This code serves as the base document for the examples of this section:
|
|
|
|
|
|
<pre>
|
|
<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>
|
|
</pre>
|
|
|
|
<p>This code can be rendered as:
|
|
|
|
<div class=cols>
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus. <br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.
|
|
|
|
<div style="position: absolute; left: 175px; top: 0; z-index: 6;">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.<br>
|
|
Vivamus a metus.<br>
|
|
Aenean at risus<br>
|
|
pharetra ante luctu<br>
|
|
feugiat quis enim.<br>
|
|
Cum sociis natoque<br>
|
|
penatibus et magni.
|
|
</div>
|
|
|
|
<div style="position: absolute; left: 350px; top: 0; z-index: 6;">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.<br>
|
|
Vivamus a metus.<br>
|
|
Aenean at risus<br>
|
|
pharetra ante luctu<br>
|
|
feugiat quis enim.<br>
|
|
Cum sociis natoque<br>
|
|
penatibus et magni.
|
|
</div>
|
|
|
|
<div class=rep></div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>If this code is added to the base document:
|
|
|
|
<pre>
|
|
img { float: right }
|
|
</pre>
|
|
|
|
<p>it may be rendered as:
|
|
|
|
<div class=cols>
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus. <br>
|
|
Sed<br>
|
|
imp<br>
|
|
er di<br>
|
|
et ris.<br>
|
|
Cur<br>
|
|
abi<br>
|
|
tur et sapen. Fusce<br>
|
|
sed ligula a turpis.
|
|
|
|
<div style="position: absolute; left: 175px; top: 0; z-index: 6;">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.<br>
|
|
Vivamus a metus.<br>
|
|
Aenean at risus<br>
|
|
pharetra ante luctu<br>
|
|
feugiat quis enim.<br>
|
|
Cum sociis natoque<br>
|
|
penatibus et magni.
|
|
</div>
|
|
|
|
<div style="position: absolute; left: 350px; top: 0; z-index: 6;">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.<br>
|
|
Vivamus a metus.<br>
|
|
Aenean at risus<br>
|
|
pharetra ante luctu<br>
|
|
feugiat quis enim.<br>
|
|
Cum sociis natoque<br>
|
|
penatibus et magni.
|
|
</div>
|
|
|
|
<div class=rep style="left: 50px"></div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This code floats images to the bottom of their containing block and
|
|
sets the width to be that of the column:
|
|
|
|
<pre>
|
|
img {
|
|
float: bottom;
|
|
width: 1gr;
|
|
}
|
|
</pre>
|
|
|
|
<p>The column box is the containing block for floats, so if an image
|
|
naturally appears in the first column it will float to its bottom:
|
|
|
|
<div class=cols>
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.
|
|
|
|
<div style="position: absolute; left: 175px; top: 0; z-index: 6;">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.<br>
|
|
Vivamus a metus.<br>
|
|
Aenean at risus<br>
|
|
pharetra ante luctu<br>
|
|
feugiat quis enim.<br>
|
|
Cum sociis natoque<br>
|
|
penatibus et magni.
|
|
</div>
|
|
|
|
<div style="position: absolute; left: 350px; top: 0; z-index: 6;">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.<br>
|
|
Vivamus a metus.<br>
|
|
Aenean at risus<br>
|
|
pharetra ante luctu<br>
|
|
feugiat quis enim.<br>
|
|
Cum sociis natoque<br>
|
|
penatibus et magni.
|
|
</div>
|
|
|
|
<div class=rep style="width: 150px; top: 90px"></div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>This code floats figures to the top of the multi-column element.
|
|
|
|
<pre>
|
|
div.figure {
|
|
float: top right multicol;
|
|
width: 1gr }
|
|
</pre>
|
|
|
|
<p>The ‘<code class=css>1gr</code>’ value on ‘<code
|
|
class=property>width</code>’ is equal to the width of the
|
|
containing block. Here is a possible rendering:
|
|
|
|
<div class=cols>
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.<br>
|
|
Vivamus a metus.<br>
|
|
Aenean at risus<br>
|
|
pharetra ante luctu<br>
|
|
feugiat quis enim.<br>
|
|
Cum sociis natoque<br>
|
|
penatibus et magni.
|
|
|
|
<div style="position: absolute; left: 175px; top: 0px; z-index: 6">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.<br>
|
|
Vivamus a metus.<br>
|
|
Aenean at risus<br>
|
|
pharetra ante luctu<br>
|
|
feugiat quis enim.<br>
|
|
Cum sociis natoque<br>
|
|
penatibus et magni.
|
|
</div>
|
|
|
|
<div style="position: absolute; left: 350px; top: 115px; z-index: 6">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.
|
|
</div>
|
|
|
|
<div class=rep style="top: 0; left: 350px; width: 150px"></div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>In this code, the ‘<code class=property>float</code>’
|
|
property floats the element to the top left of the multi-column element,
|
|
while the ‘<a href="#float-offset"><code
|
|
class=property>float-offset</code></a>’ property pushes it to the
|
|
right so that it ends up in the column next to it:
|
|
|
|
<pre>
|
|
div.quote {
|
|
float: top left multicol;
|
|
float-offset: 2.5gr;
|
|
width: 1gr }
|
|
</pre>
|
|
|
|
<div class=cols>
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.<br>
|
|
Vivamus a metus.<br>
|
|
Aenean at risus<br>
|
|
pharetra ante luctu<br>
|
|
feugiat quis enim.<br>
|
|
Cum sociis natoque<br>
|
|
penatibus et magni.
|
|
|
|
<div style="position: absolute; left: 175px; top: 115px; z-index: 6">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.
|
|
</div>
|
|
|
|
<div style="position: absolute; left: 350px; top: 0px; z-index: 6">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.<br>
|
|
Vivamus a metus.<br>
|
|
Aenean at risus<br>
|
|
pharetra ante luctu<br>
|
|
feugiat quis enim.<br>
|
|
Cum sociis natoque<br>
|
|
penatibus et magni.
|
|
</div>
|
|
|
|
<div class=rep style="top: 0; left: 175px; width: 150px"></div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
</div>
|
|
|
|
<p>Assuming a three-column layout, the same rendering can be achieved by
|
|
floating the element to the right instead:
|
|
|
|
<pre>
|
|
div.quote {
|
|
float: top right multicol;
|
|
float-offset: 2gr;
|
|
width: 1gr }
|
|
</pre>
|
|
</div>
|
|
|
|
<p>The floated element will never be pushed outside the content edges of
|
|
the multicol element due to ‘<a href="#float-offset"><code
|
|
class=property>float-offset</code></a>’.
|
|
|
|
<div class=example>
|
|
<pre>
|
|
img {
|
|
float: top right multicol;
|
|
width: 3gr;
|
|
}
|
|
</pre>
|
|
|
|
<p>The code above floats the element to the top right of the multi-column
|
|
element. Further, it sets the width of images to the width of two columns
|
|
plus the gap between them. Here is a possible rendering.
|
|
|
|
<div class=cols>
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.<br>
|
|
Vivamus a metus.<br>
|
|
Aenean at risus<br>
|
|
pharetra ante luctu<br>
|
|
feugiat quis enim.<br>
|
|
Cum sociis natoque<br>
|
|
penatibus et magni.
|
|
|
|
<div style="position: absolute; left: 175px; top: 115px; z-index: 6">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.
|
|
</div>
|
|
|
|
<div style="position: absolute; left: 350px; top: 115px; z-index: 6">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.
|
|
</div>
|
|
|
|
<div class=rep style="top: 0; left: 175px; width: 325px"></div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<pre>
|
|
img {
|
|
float: top right multicol;
|
|
width: 2gr;
|
|
}
|
|
</pre>
|
|
|
|
<p>The code above floats the element to the top right of the multi-column
|
|
element. Further, it sets the width of the image to the width of one
|
|
column plus one column gap. Here is a possible rendering.
|
|
|
|
<div class=cols>
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.<br>
|
|
Vivamus a metus.<br>
|
|
Aenean at risus<br>
|
|
pharetra ante luctu<br>
|
|
feugiat quis enim.<br>
|
|
Cum sociis natoque<br>
|
|
penatibus et magni.
|
|
|
|
<div style="position: absolute; left: 175px; top: 0px; z-index: 6">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.<br>
|
|
Vivamus a metus.<br>
|
|
Aenean at risus<br>
|
|
pharetra ante luctu<br>
|
|
feugiat quis enim.<br>
|
|
Cum sociis natoque<br>
|
|
penatibus et magni.
|
|
</div>
|
|
|
|
<div style="position: absolute; left: 350px; top: 115px; z-index: 6">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.
|
|
</div>
|
|
|
|
<div class=rep style="top: 0; left: 325px; width: 175px"></div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<pre>
|
|
img {
|
|
float: top right multicol;
|
|
width: 1.5gr;
|
|
}
|
|
</pre>
|
|
|
|
<p>The code above floats the element to the top right of the multi-column
|
|
element. Further, it sets the width of the image to the width of one
|
|
column plus half the column gap.
|
|
|
|
<div class=cols>
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.<br>
|
|
Vivamus a metus.<br>
|
|
Aenean at risus<br>
|
|
pharetra ante luctu<br>
|
|
feugiat quis enim.<br>
|
|
Cum sociis natoque<br>
|
|
penatibus et magni.
|
|
|
|
<div style="position: absolute; left: 175px; top: 0px; z-index: 6">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.<br>
|
|
Vivamus a metus.<br>
|
|
Aenean at risus<br>
|
|
pharetra ante luctu<br>
|
|
feugiat quis enim.<br>
|
|
Cum sociis natoque<br>
|
|
penatibus et magni.
|
|
</div>
|
|
|
|
<div style="position: absolute; left: 350px; top: 115px; z-index: 6">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.
|
|
</div>
|
|
|
|
<div class=rep style="top: 0; left: 337.5px; width: 163px"></div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<pre>
|
|
img {
|
|
float: top left multicol;
|
|
float-offset: 1.5gr 50%;
|
|
width: 8em;
|
|
}
|
|
</pre>
|
|
|
|
<p>The first rule in the code above floats images to the top left of the
|
|
multi-column element. The second rule pushes the float in the opposite
|
|
directions: to the right and downwards. The horizontal component
|
|
(‘<code class=css>1.5gr</code>’) means that the horizontal
|
|
middle of the element should be in the middle of the gap between the
|
|
left-most column and the one next to it. Vertically, element should be in
|
|
the middle of the column. Here is a possible rendering:
|
|
|
|
<div class=cols>
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus. <br>
|
|
Sed<br>
|
|
imp<br>
|
|
er di<br>
|
|
et ris.<br>
|
|
Cur<br>
|
|
abi<br>
|
|
tur et sapen. Fusce<br>
|
|
sed ligula a turpis.
|
|
|
|
<div style="position: absolute; left: 175px; top: 0; z-index: 6;">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.
|
|
|
|
<div style="margin-left: 100px"> Sed<br>
|
|
imp<br>
|
|
er di<br>
|
|
et ris.<br>
|
|
Cur<br>
|
|
abi</div>
|
|
tur et sapen. Fusce <br>
|
|
sed ligula a turpis.</div>
|
|
|
|
<div style="position: absolute; left: 350px; top: 0; z-index: 6;">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.<br>
|
|
Vivamus a metus.<br>
|
|
Aenean at risus<br>
|
|
pharetra ante luctu<br>
|
|
feugiat quis enim.<br>
|
|
Cum sociis natoque<br>
|
|
penatibus et magni.
|
|
</div>
|
|
|
|
<div class=rep style="left: 50px; width: 220px"></div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class=example>
|
|
<p>Consider this code:
|
|
|
|
<pre>
|
|
img {
|
|
float: top left multicol;
|
|
float-offset: 1.25gr 50%;
|
|
width: 6em;
|
|
}
|
|
</pre>
|
|
|
|
<p>The only difference between this and the previous example is the
|
|
horizontal value on ‘<a href="#float-offset"><code
|
|
class=property>float-offset</code></a>’. The value ‘<code
|
|
class=css>1.25gr</code>’ means that a point 25% into the image in
|
|
the inline direction will be aligned with a point 25% into the column
|
|
gap. Here is a possible rendering:
|
|
|
|
<div class=cols>
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus. <br>
|
|
Sed imper di et<br>
|
|
ris. Cur abi tur<br>
|
|
et sapen. Fusce<br>
|
|
sed ligula a sic<br>
|
|
turpis. Lorem<br>
|
|
ipsum dolor sit<br>
|
|
amet. Namat jus. Sed<br>
|
|
imper di et ris curit.
|
|
|
|
<div style="position: absolute; left: 175px; top: 0; z-index: 6;">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.
|
|
|
|
<div style="margin-left: 100px"> Sed<br>
|
|
imp<br>
|
|
er di<br>
|
|
et ris.<br>
|
|
Cur<br>
|
|
abi</div>
|
|
tur et sapen. Fusce <br>
|
|
sed ligula a turpis.</div>
|
|
|
|
<div style="position: absolute; left: 350px; top: 0; z-index: 6;">
|
|
<p>Lorem ipsum dolor<br>
|
|
sit amet. Nam at jus.<br>
|
|
Sed imp er di et ris.<br>
|
|
Cur abi tur et sapen.<br>
|
|
Vivamus a metus.<br>
|
|
Aenean at risus<br>
|
|
pharetra ante luctu<br>
|
|
feugiat quis enim.<br>
|
|
Cum sociis natoque<br>
|
|
penatibus et magni.
|
|
</div>
|
|
|
|
<div class=rep style="left: 120px; width: 150px"></div>
|
|
|
|
<div class=gap style="left: 150px"></div>
|
|
|
|
<div class=gap style="left: 325px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id=conformance><span class=secno>15. </span>Conformance</h2>
|
|
<!--User agents that support hyphenation and support this specification must a-->
|
|
|
|
<h2 id=appendix-a-default-style-sheet><span class=secno>16. </span>Appendix
|
|
A: Default style sheet</h2>
|
|
|
|
<p class=issue>
|
|
|
|
<pre>
|
|
@page {
|
|
counter-reset: footnote;
|
|
@footnote {
|
|
counter-increment: footnote;
|
|
float: page bottom;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
::footnote-call {
|
|
counter-increment: footnote;
|
|
content: counter(footnote, super-decimal);
|
|
}
|
|
::footnote-marker {
|
|
content: counter(footnote, super-decimal);
|
|
}
|
|
|
|
|
|
h1 { bookmark-level: 1 }
|
|
h2 { bookmark-level: 2 }
|
|
h3 { bookmark-level: 3 }
|
|
h4 { bookmark-level: 4 }
|
|
h5 { bookmark-level: 5 }
|
|
h6 { bookmark-level: 6 }
|
|
</pre>
|
|
|
|
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
|
|
|
|
<p>This document has been improved by Bert Bos, Michael Day, Melinda Grant,
|
|
David Baron, Markus Mielke, Steve Zilles, Ian Hickson, Elika Etemad,
|
|
Laurens Holst, Mike Bremford, Allan Sandfeld Jensen, Kelly Miller, Werner
|
|
Donné, 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.
|
|
|
|
<h2 class=no-num id=references>References</h2>
|
|
|
|
<h3 class=no-num id=normative-references>Normative references</h3>
|
|
<!--begin-normative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS3LIST>[CSS3LIST]
|
|
|
|
<dd>Ian Hickson; Tantek Çelik. <a
|
|
href="http://www.w3.org/TR/2002/WD-css3-lists-20021107"><cite>CSS3
|
|
module: Lists.</cite></a> 7 November 2002. W3C Working Draft. (Work in
|
|
progress.) URL: <a
|
|
href="http://www.w3.org/TR/2002/WD-css3-lists-20021107">http://www.w3.org/TR/2002/WD-css3-lists-20021107</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS4BACKGROUND>[CSS4BACKGROUND]
|
|
|
|
<dd>Elika J. Etemad; Håkon Wium Lie. <a
|
|
href="http://dev.w3.org/csswg/css4-background/"><cite>CSS Backgrounds and
|
|
Borders Module Level 4.</cite></a> Proposal for a CSS module.
|
|
(Retrieved 2 June 2010) URL: <a
|
|
href="http://dev.w3.org/csswg/css4-background/">http://dev.w3.org/csswg/css4-background/</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-normative-->
|
|
|
|
<h3 class=no-num id=other-references>Other references</h3>
|
|
<!--begin-informative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS2>[CSS2]
|
|
|
|
<dd>Ian Jacobs; et al. <a
|
|
href="http://www.w3.org/TR/2008/REC-CSS2-20080411"><cite>Cascading Style
|
|
Sheets, level 2 (CSS2) Specification.</cite></a> 11 April 2008. W3C
|
|
Recommendation. URL: <a
|
|
href="http://www.w3.org/TR/2008/REC-CSS2-20080411">http://www.w3.org/TR/2008/REC-CSS2-20080411</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3COL>[CSS3COL]
|
|
|
|
<dd>Håkon Wium Lie. <a
|
|
href="http://www.w3.org/TR/2009/CR-css3-multicol-20091217"><cite>CSS
|
|
Multi-column Layout Module.</cite></a> 17 December 2009. W3C Candidate
|
|
Recommendation. (Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2009/CR-css3-multicol-20091217">http://www.w3.org/TR/2009/CR-css3-multicol-20091217</a>
|
|
</dd>
|
|
<!---->
|
|
|
|
<dt id=CSS3PAGE>[CSS3PAGE]
|
|
|
|
<dd>Melinda Grant; Håkon Wium Lie. <a
|
|
href="http://www.w3.org/TR/2006/WD-css3-page-20061010"><cite>CSS3 Module:
|
|
Paged Media.</cite></a> 10 October 2006. W3C Working Draft. (Work in
|
|
progress.) URL: <a
|
|
href="http://www.w3.org/TR/2006/WD-css3-page-20061010">http://www.w3.org/TR/2006/WD-css3-page-20061010</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-informative-->
|
|
|
|
<h2 class=no-num id=index>Index</h2>
|
|
<!--begin-index-->
|
|
|
|
<ul class=indexlist>
|
|
<li>bleed, <a href="#bleed" title=bleed><strong>9.</strong></a>
|
|
|
|
<li>bookmark-label, <a href="#bookmark-label"
|
|
title=bookmark-label><strong>10.</strong></a>
|
|
|
|
<li>bookmark-level, <a href="#bookmark-level"
|
|
title=bookmark-level><strong>10.</strong></a>
|
|
|
|
<li>bookmark-state, <a href="#bookmark-state"
|
|
title=bookmark-state><strong>10.</strong></a>
|
|
|
|
<li>bookmark-target, <a href="#bookmark-target"
|
|
title=bookmark-target><strong>10.</strong></a>
|
|
|
|
<li>float-offset, <a href="#float-offset"
|
|
title=float-offset><strong>14.1.</strong></a>
|
|
|
|
<li>hyphenate-after, <a href="#hyphenate-after"
|
|
title=hyphenate-after><strong>6.1.</strong></a>
|
|
|
|
<li>hyphenate-before, <a href="#hyphenate-before"
|
|
title=hyphenate-before><strong>6.1.</strong></a>
|
|
|
|
<li>hyphenate-character, <a href="#hyphenate-character"
|
|
title=hyphenate-character><strong>6.1.</strong></a>
|
|
|
|
<li>hyphenate-lines, <a href="#hyphenate-lines"
|
|
title=hyphenate-lines><strong>6.1.</strong></a>
|
|
|
|
<li>hyphenate-resource, <a href="#hyphenate-resource"
|
|
title=hyphenate-resource><strong>6.1.</strong></a>
|
|
|
|
<li>hyphens, <a href="#hyphens" title=hyphens><strong>6.1.</strong></a>
|
|
|
|
<li>image-resolution, <a href="#image-resolution0"
|
|
title=image-resolution><strong>8.</strong></a>
|
|
|
|
<li>marks, <a href="#marks" title=marks><strong>9.</strong></a>
|
|
|
|
<li>named strings, <a href="#named-strings0" title="named
|
|
strings"><strong>2.</strong></a>
|
|
|
|
<li>running elements, <a href="#running-elements0" title="running
|
|
elements"><strong>2.</strong></a>
|
|
|
|
<li>string-set, <a href="#string-set"
|
|
title=string-set><strong>2.1.1.</strong></a>
|
|
</ul>
|
|
<!--end-index-->
|
|
|
|
<h2 class=no-num id=property-index>Property index</h2>
|
|
<!--begin-properties-->
|
|
|
|
<table class=proptable>
|
|
<thead>
|
|
<tr>
|
|
<th>Property
|
|
|
|
<th>Values
|
|
|
|
<th>Initial
|
|
|
|
<th>Applies to
|
|
|
|
<th>Inh.
|
|
|
|
<th>Percentages
|
|
|
|
<th>Media
|
|
|
|
<tbody>
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#bleed">bleed</a>
|
|
|
|
<td><length>
|
|
|
|
<td>6pt
|
|
|
|
<td>page context
|
|
|
|
<td>no
|
|
|
|
<td>refer to width of page box
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#bookmark-label">bookmark-label</a>
|
|
|
|
<td>content() | attr() | <string>
|
|
|
|
<td>content()
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>all
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#bookmark-level">bookmark-level</a>
|
|
|
|
<td>none | <integer>
|
|
|
|
<td>none
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>all
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#bookmark-state">bookmark-state</a>
|
|
|
|
<td>open | closed
|
|
|
|
<td>open
|
|
|
|
<td>block-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>all
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#bookmark-target">bookmark-target</a>
|
|
|
|
<td>none | <uri> | <attr>
|
|
|
|
<td>none
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>all
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#float-offset">float-offset</a>
|
|
|
|
<td><length> <length> ?
|
|
|
|
<td>0 0
|
|
|
|
<td>floated elements
|
|
|
|
<td>no
|
|
|
|
<td>refer to width and height of containing block
|
|
|
|
<td>visual, paged
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#hyphenate-after">hyphenate-after</a>
|
|
|
|
<td><integer> | auto
|
|
|
|
<td>auto
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#hyphenate-before">hyphenate-before</a>
|
|
|
|
<td><integer> | auto
|
|
|
|
<td>auto
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property
|
|
href="#hyphenate-character">hyphenate-character</a>
|
|
|
|
<td>auto | <string>
|
|
|
|
<td>auto
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#hyphenate-lines">hyphenate-lines</a>
|
|
|
|
<td>no-limit | <integer>
|
|
|
|
<td>no-limit
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#hyphenate-resource">hyphenate-resource</a>
|
|
|
|
<td>none | <uri> [, <uri> ]*
|
|
|
|
<td>none
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#hyphens">hyphens</a>
|
|
|
|
<td>none | manual | auto
|
|
|
|
<td>manual
|
|
|
|
<td>all elements
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#image-resolution0">image-resolution</a>
|
|
|
|
<td>normal | [ from-image || <dpi> ]
|
|
|
|
<td>normal
|
|
|
|
<td>replaced elements and background images?
|
|
|
|
<td>yes
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#marks">marks</a>
|
|
|
|
<td>[ crop || cross ] | none
|
|
|
|
<td>none
|
|
|
|
<td>page context
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual, paged
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#string-set">string-set</a>
|
|
|
|
<td>[[ <identifier> <content-list>] [, <identifier>
|
|
<content-list>]* ] | none
|
|
|
|
<td>none
|
|
|
|
<td>all elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>all
|
|
</table>
|
|
<!--end-properties-->
|