8000 csswg-drafts/css-gcpm/2009-06-10.html at 47e085366a49bade54ca057c5d0d4b16adc10602 · w3c/csswg-drafts · GitHub
Skip to content

2009-06-10.html

Latest commit

 

History

History
6112 lines (4609 loc) · 172 KB

2009-06-10.html

File metadata and controls

6112 lines (4609 loc) · 172 KB
</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 &lsquo;<code class=css>string()</code>&rsquo; value. This
argument can have one of four keywords:
<ul>
<li>&lsquo;<code class=css>start</code>&rsquo;: the named string's entry
value for that page is used.
<li>&lsquo;<code class=css>first</code>&rsquo;: the value of the first
assignment is used. If there is no assignment on the page, the start
value is used. &lsquo;<code class=css>first</code>&rsquo; is the default
value.
<li>&lsquo;<code class=css>last</code>&rsquo;: the named string's exit
value for that page is used
<li>&lsquo;<code class=css>first-except</code>&rsquo;: similar to
&lsquo;<code class=css>first</code>&rsquo;, 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 &lsquo;<code class=css>h1</code>&rsquo; elements appear. On other
pages, the string of the previous &lsquo;<code class=css>h1</code>&rsquo;
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 &lsquo;<code
class=css>string()</code>&rsquo; value has not been assigned a value, the
empty string is used.
<div class=out>
<h3 id=running-elements><span class=secno>3.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 <em><a
href="#running-elements0">running elements</a></em>. To support running
elements, a new value &ndash; running() &ndash; is introduced on the
&lsquo;<code class=property>position</code>&rsquo; 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 &lsquo;<code class=css>display: none</code>&rsquo; 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 &lsquo;<code
class=css>element()</code>&rsquo; 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 &lsquo;<code class=css>string()</code>&rsquo; value, the
&lsquo;<code class=css>element()</code>&rsquo; value accepts an optional
second argument:
<dl>
<dt>&lsquo;<code class=css>start</code>&rsquo;
<dt>&lsquo;<code class=css>first</code>&rsquo;
<dt>&lsquo;<code class=css>last</code>&rsquo;
<dt>&lsquo;<code class=css>first-except</code>&rsquo;
</dl>
<p>The keywords have the same meaning as for the &lsquo;<code
class=css>string()</code>&rsquo; value.
<p>The &lsquo;<code class=css>element()</code>&rsquo; 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>
&lt;style>
div.header { display: none }
@media print {
div.header {
display: block;
position: running(header);
}
@page { @top-center { content: element(header, first-except) }}
&lt;/style>
...
&lt;div class="header">Introduction&lt;/div>
&lt;h1 class="chapter">An introduction&lt;/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>
...
&lt;style>
@page { @top-center {
content: element(header, first) }}
.header { position: running(header) }
.once { font-weight: bold }
&lt;/style>
...
&lt;div class="header">Not now&lt;/div>
&lt;p>Da di ha di da di ...
&lt;span class="header once">NOW!&lt;/span>
&lt;span class="header">Not now&lt;/span>
... da di ha di hum.&lt;/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
&lsquo;<code class=css>first</code>&rsquo; 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>
</div>
<h2 id=leaders><span class=secno>4 </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
&lsquo;<code class=css>leader()</code>&rsquo; value on the &lsquo;<code
class=property>content</code>&rsquo; property. The functional notation
accepts one value which describes the glyph pattern that make up the
leader. These values are allowed:
<ul>
<li>leader(dotted)
<li>leader(solid)
<li>leader(space)
<li>leader(&lt;string&gt;)
</ul>
<p>Using the keyword values is equivalent to setting a string value. The
table below shows the equivalents:
<table class=border>
<tbody>
<tr>
<th>Keyword
<th>String
<th>Unicode characters
<tr>
<td>leader(dotted)
<td>leader(&lsquo;<code class=css>. </code>&rsquo;)
<td>\002E \0020
<tr>
<td>leader(solid)
<td>leader(&lsquo;<code class=css>_</code>&rsquo;)
<td>\005F
<tr>
<td>leader(space)
<td>leader(&lsquo;<code class=css> </code>&rsquo;)
<td>\0020
</table>
<p class=issue>Can leaders also be composed of images or SVG? <!--
<p class="issue">Some fonts may not have suitable glyphs for all
patterns. For example, in some Eastern languages, the alignment of the
shape within the glyph may not be optimal for creating leaders.
-->
<!--<p class="issue">Are the keywords really necessary?</p>-->
<p>The string inside the parenthesis is called the <em>leader string</em>.
<p>In its simplest form, the &lsquo;<code
class=property>content</code>&rsquo; property only takes one &lsquo;<code
class=css>leader()</code>&rsquo; 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, &lsquo;<code
class=property>letter-spacing</code>&rsquo 311 ;, white-space properties,
background properties, and &lsquo;<code
class=property>color</code>&rsquo;.
<p>User Agents should attempt to align corresponding glyphs from the leader
pattern between consecutive lines.
<p>In a more complex example, the &lsquo;<code
class=property>leader</code>&rsquo; value is combined with other values on
the &lsquo;<code class=property>content</code>&rsquo; property:
<div class=example>
<pre>
ul.toc a::after {
content: leader(". . . ") target-counter(attr(href, url), page);
}
</pre>
</div>
<p>If the content connected by a leader end up on different lines, the
leader will be present on all lines. Each leader fragment honors the
minimum length of the leader.
<div class=example>
<p>Consider this code:
<pre>
&lt;style>
.name::after { content: leader(dotted) }
&lt;/style>
&lt;div class="entry">
&lt;span class="name">John Doe&lt;/span>
&lt;span class="number">123456789&lt;/span>
&lt;/div>
</pre>
<p>If the name and number end up on different lines (e.g., in a narrow
column), it may be formatted like this:
<pre>
John Doe....
...123456789
</pre>
</div>
<p>To determine the length of the leaders, user agents must do the
following for each line:
<ol>
<li>Lay out the content with leaders of minimum lengths
<li>Determine the empty space left on the line.
<li>Distribute the empty space between the leaders on the line. Glyphs
must not be shown partially. All leaders on the line should, to the
extent possible, have the same length. This may not always be possible as
the minimum leader length must be honored.
<li>Fill the empty space with the specified leader pattern.
</ol>
<div class=example>
<p>Consider this code:
<pre>
&lt;style>
cite::before { content: leader(' ') }
&lt;/style>
&lt;blockquote>
Bla great bla bla world bla bla
empire bla bla color bla bla
history bla bla forever.
&lt;cite>John Johnson&lt;/cite>
&lt;/blockquote>
</pre>
<p>Depending on the width of the containing block, this may be rendered
as:
<pre>
Bla great bla bla world bla bla
empire bla bla color bla bla
history bla bla forever. John
Johnson
</pre>
<p>However, this rendering is preferable:
<pre>
Bla great bla bla world bla bla
empire bla bla color bla bla
history bla bla forever.
John Johnson
</pre>
<p>To indicate that <q>John Johnson</q> should be kept on one line, this
rule can be added to the style sheet:
<pre>
cite { text-wrap: suppress }
</pre>
<p>Until &lsquo;<code class=property>text-wrap</code>&rsquo; 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>5 </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>5.1
</span>The &lsquo;<code class=css>target-counter</code>&rsquo; and
&lsquo;<code class=css>target-counters</code>&rsquo; values</h3>
<p>Numerical cross-references are generated by &lsquo;<code
class=css>target-counter()</code>&rsquo; and &lsquo;<code
class=css>target-counters()</code>&rsquo; values that fetch the value of a
counter at the target end of the link. These functions are similar to the
&lsquo;<code class=css>counter()</code>&rsquo; and &lsquo;<code
class=css>counters()</code>&rsquo; functions, except that they fetch
counter values from remote elements. &lsquo;<code
class=css>target-counter()</code>&rsquo; has two required arguments: the
url of the link, and the name of a counter. &lsquo;<code
class=css>target-counters()</code>&rsquo; 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; &lsquo;<code
class=css>decimal</code>&rsquo; 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
View remainder of file in raw view