8000 csswg-drafts/css-gcpm/2009-06-10.html at baacd623d5ffebcc4a45e19e7d9b58daec736dbe · 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
<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;, 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