Skip to content

Commit 832b42a

Browse files
fantasaifantasai
committed
text decoration edits: first draft complete
1 parent a71c37c commit 832b42a

2 files changed

Lines changed: 194 additions & 30 deletions

File tree

‎css3-text/Overview.src.html‎

Lines changed: 194 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080

8181
<div class="head">
8282

83-
<p><a href="http://www.w3.org/"><img height="48" width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home"/></a></p>
83+
<p><a href="http://www.w3.org/"><img height="48" width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home"></a></p>
8484

8585
<h1>CSS Text Level 3</h1>
8686

@@ -326,6 +326,23 @@ <h2 class="no-num no-toc" id="contents">Table of Contents</h2>
326326

327327
<li><a href="#decoration"><span class="secno">8.</span> Text Decoration</a>
328328
<ul class="toc">
329+
<li><a href="#line-decoration"><span class="secno">8.1.</span>
330+
Line Decoration: Underline, Overline, and Strike-Through</a>
331+
<ul>
332+
<li><a href="#text-decoration-line"><span class="secno">8.1.1</span>
333+
Text Decoration Lines: the 'text-decoration-line' property</a>
334+
<li><a href="#text-decoration-color"><span class="secno">8.1.2</span>
335+
Text Decoration Color: the 'text-decoration-color' property</a>
336+
<li><a href="#text-decoration-style"><span class="secno">8.1.3</span>
337+
Text Decoration Style: the 'text-decoration-style' property</a>
338+
<li><a href="#text-decoration"><span class="secno">8.1.4</span>
339+
Text Decoration Shorthand: the 'text-decoration' property</a>
340+
<li><a href="#text-decoration-skip"><span class="secno">8.1.5</span>
341+
Text Decoration Line Continuity: the 'text-decoration-skip' property</a>
342+
<li><a href="#text-underline-position"><span class="secno">8.1.6</span>
343+
Text Underline Position: the 'text-underline-position' property</a>
344+
</ul>
345+
329346
<li><a href="#text-emphasis"><span class="secno">8.2.</span>
330347
Emphasis Marks: the 'text-emphasis' property</a>
331348

@@ -2070,7 +2087,7 @@ <h2 id="decoration"><span class="secno">8.</span>
20702087
<a name="text-decoration">Text Decoration</a></h2>
20712088

20722089
<h3 id="line-decoration"><span class="secno">8.1</span>
2073-
Line Decoration</h3>
2090+
Line Decoration: Underline, Overline, and Strike-Through</h3>
20742091

20752092
<p>The following properties describe line decorations that are added
20762093
to the content of an element. When specified on an inline element,
@@ -2082,10 +2099,82 @@ <h3 id="line-decoration"><span class="secno">8.1</span>
20822099
descendants, nor to the contents of
20832100
<a href="http://www.w3.org/TR/CSS21/visuren.html#display-prop"><code>inline-table</code></a>
20842101
and <a href="http://www.w3.org/TR/CSS21/visuren.html#display-prop"><code>inline-block</code></a>
2085-
descendants.</p>
2102+
descendants. The value of the <code>text-decoration-line</code>
2103+
property on descendant elements therefore cannot have any effect on
2104+
the decoration of the ancestor; to skip descendants, use the
2105+
<code>text-decoration-skip</code> property.</p>
2106+
2107+
<p>By default underlines, overlines, and line-throughs are applied only
2108+
to text (including white space, letter spacing, and word spacing):
2109+
margins, borders, and padding are skipped. Elements containing
2110+
no text, such as images, are likewise not decorated.
2111+
The <a href="#text-decoration-skip"><code>text-decoration-skip</code></a>
2112+
property can be used to modify this behavior, for example allowing
2113+
inline replaced elements to be underlined or requiring that white
2114+
space be skipped.</p>
2115+
2116+
<p>In determining the position of and thickness of text decoration lines,
2117+
user agents may consider the font sizes of and dominant baselines
2118+
of descendants, but must use the same baseline and thickness on each
2119+
line. Relatively positioning a descendant moves all text decorations
2120+
affecting it along with the descendant's text; it does not affect
2121+
calculation of the decoration's initial position on that line. The
2122+
<a href="#text-decoration-color">color</a> and
2123+
<a href="#text-decoration-style">line style</a> of decorations must
2124+
remain the same on all decorations applied by a given element, even
2125+
if descendant elements have different color or line style values.</p>
2126+
2127+
<div class="example">
2128+
<p>The following figure shows the averaging for underline:
2129+
<p><img alt="In the first rendering of the underlined text '1st a'
2130+
with 'st' as a superscript, both the '1st' and the 'a'
2131+
are rendered in a small font. In the second rendering,
2132+
the 'a' is rendered in a larger font. In the third, both
2133+
'1st' and 'a' are large."
2134+
height="105" src="underline-averaging.gif" width="326">
2135+
<p>In the three fragments of underlined text, the underline is drawn
2136+
consecutively lower and thicker as the ratio of large text to small
2137+
text increases.</p>
2138+
</div>
2139+
2140+
<div class="example">
2141+
<p>In the following style sheet and document fragment:</p>
2142+
<pre><code class="css">
2143+
<!-- --> blockquote { text-decoration: underline; color: blue; }
2144+
<!-- --> em { display: block; }
2145+
<!-- --> cite { color: fuchsia; }
2146+
<!----></code></pre>
2147+
<pre><code class="html">
2148+
<!-- --> &lt;blockquote&gt;
2149+
<!-- --> &lt;p&gt;
2150+
<!-- --> &lt;span&gt;
2151+
<!-- --> Help, help!
2152+
<!-- --> &lt;em&gt; I am under a hat! &lt;/em&gt;
2153+
<!-- -->
2154+
<!-- --> &lt;cite&gt; &mdash;GwieF &lt;/cite&gt;
2155+
<!-- --> &lt;/span&gt;
2156+
<!-- --> &lt;/p&gt;
2157+
<!-- --> &lt;/blockquote&gt;
2158+
<!----></code></pre>
2159+
<p>...the underlining for the blockquote element is propagated to an
2160+
anonymous inline element that surrounds the span element, causing
2161+
the text "Help, help!" to be blue, with the blue underlining from
2162+
the anonymous inline underneath it, the color being taken from the
2163+
blockquote element. The <code>&lt;em&gt;text&lt;/em&gt;</code>
2164+
in the em block is also underlined, as it is in an in-flow block to
2165+
which the underline is propagated. The final line of text is fuchsia,
2166+
but the underline underneath it is still the blue underline from the
2167+
anonymous inline element.</p>
2168+
<p><img src="images/underline-example.png" alt="Sample rendering of the above underline example"></p>
2169+
<p>This diagram shows the boxes involved in the example above. The
2170+
rounded aqua line represents the anonymous inline element wrapping
2171+
the inline contents of the paragraph element, the rounded blue line
2172+
represents the span element, and the orange lines represent the
2173+
blocks.</p>
2174+
</div>
20862175

20872176
<h4 id="text-decoration-line"><span class="secno">8.1.1</span>
2088-
Text Decoration Lines</h4>
2177+
Text Decoration Lines: the 'text-decoration-line' property</h4>
20892178

20902179
<table class="propdef">
20912180
<tbody>
@@ -2125,8 +2214,22 @@ <h4 id="text-decoration-line"><span class="secno">8.1.1</span>
21252214
</tbody>
21262215
</table>
21272216

2217+
<p>Specifies what line decorations, if any, are added to the element.
2218+
Values have the following meanings:</p>
2219+
2220+
<dl>
2221+
<dt>none</dt>
2222+
<dd>Produces no text decoration.</dd>
2223+
<dt>underline</dt>
2224+
<dd>Each line of text is underlined.</dd>
2225+
<dt>overline</dt>
2226+
<dd>Each line of text has a line above it.</dd>
2227+
<dt>line-through</dt>
2228+
<dd>Each line of text has a line through the middle.</dd>
2229+
</dl>
2230+
21282231
<h4 id="text-decoration-color"><span class="secno">8.1.2</span>
2129-
Text Decoration Color</h4>
2232+
Text Decoration Color: the 'text-decoration-color' property</h4>
21302233

21312234
<table class="propdef">
21322235
<tbody>
@@ -2168,10 +2271,10 @@ <h4 id="text-decoration-color"><span class="secno">8.1.2</span>
21682271

21692272
<p>This property specifies the color of text decoration (underlines
21702273
overlines, and line-throughs) set on the element with
2171-
'text-decoration-line'.
2274+
<code>text-decoration-line</code>.</p>
21722275

21732276
<h4 id="text-decoration-style"><span class="secno">8.1.3</span>
2174-
Text Decoration Style</h4>
2277+
Text Decoration Style: the 'text-decoration-style' property</h4>
21752278

21762279
<table class="propdef">
21772280
<tbody>
@@ -2213,12 +2316,12 @@ <h4 id="text-decoration-style"><span class="secno">8.1.3</span>
22132316

22142317
<p>This property specifies the style of the line(s) drawn for
22152318
text decoration specified on the element. Values have the
2216-
same meaning as for the 'border-style' properties. The
2217-
'wave' value specifies a wavy line, similar to that produced
2218-
by the sin(x) function.</p>
2319+
same meaning as for the
2320+
<a href="http://www.w3.org/TR/css3-background/#the-border-style">border-style
2321+
properties</a> [<a href="#CSS3BG">CSS3BG</a>].</p>
22192322

22202323
<h4 id="text-decoration"><span class="secno">8.1.4</span>
2221-
Text Decoration Shorthand</h4>
2324+
Text Decoration Shorthand: the 'text-decoration' property</h4>
22222325

22232326
<table class="propdef">
22242327
<tbody>
@@ -2260,12 +2363,29 @@ <h4 id="text-decoration"><span class="secno">8.1.4</span>
22602363
</tbody>
22612364
</table>
22622365

2263-
<p>This property is a shorthand for setting 'text-decoration-line',
2264-
'text-decoration-color', and 'text-decoration-style' in one
2265-
declaration. Omitted values are set to their initial values.</p>
2266-
2267-
<h4 id="text-decoration-skip"><span class="secno">8.1.3</span>
2268-
Text Decoration Line Continuity</h4>
2366+
<p>This property is a shorthand for setting
2367+
<code>text-decoration-line</code>, <code>text-decoration-color</code>,
2368+
and <code>text-decoration-style</code> in one declaration. Omitted
2369+
values are set to their initial values. A <code>text-decoration</code>
2370+
declaration that omits both the <code>text-decoration-color</code>
2371+
and <code>text-decoration-style</code> values is backwards-compatible
2372+
with CSS Levels 1 and 2.</p>
2373+
2374+
<div class="example">
2375+
<p>The following example underlines unvisited links with a solid blue
2376+
underline in CSS1 and CSS2 UAs and a navy dotted underline in CSS3 UAs.</p>
2377+
2378+
<pre><code class="css">
2379+
<!-- -->:link {
2380+
<!-- --> color: blue;
2381+
<!-- --> text-decoration: underline;
2382+
<!-- --> text-decoration: navy dotted underline; /* <a href="http://www.w3.org/TR/CSS21/syndata.html#ignore">Ignored</a> in CSS1/CSS2 UAs */
2383+
<!-- -->}
2384+
<!-- --></code></pre>
2385+
</div>
2386+
2387+
<h4 id="text-decoration-skip"><span class="secno">8.1.5</span>
2388+
Text Decoration Line Continuity: the 'text-decoration-skip' property</h4>
22692389

22702390
<table class="propdef">
22712391
<tbody>
@@ -2305,22 +2425,24 @@ <h4 id="text-decoration-skip"><span class="secno">8.1.3</span>
23052425
</tbody>
23062426
</table>
23072427

2308-
<p>This value specifies what parts of the element's content
2309-
text decoration affecting element should skip over. It
2310-
affects all text decoration lines drawn by this element
2428+
<p>This property specifies what parts of the element's content
2429+
any text decoration affecting the element must skip over. It
2430+
controls all text decoration lines drawn by the element
23112431
and also any text decoration lines drawn by its ancestors.
23122432
Values have the following meanings:
23132433

23142434
<dl>
23152435
<dt><dfn title="text-decoration-skip:none">none</dfn></dt>
2316-
<dd>Skip nothing: text-decoration is drawn for all content,
2317-
including white space and replaced elements.</dd>
2436+
<dd>Skip nothing: text-decoration is drawn for all text content
2437+
and for inline replaced elements.</dd>
23182438
<dt><dfn title="text-decoration-skip:images">images</dfn></dt>
2319-
<dd>Skip this element if it is a replaced element.</dd>
2439+
<dd>Skip this element if it is an inline replaced element.</dd>
23202440
<dt><dfn title="text-decoration-skip:spaces">spaces</dfn></dt>
23212441
<dd>Skip white space: this includes regular spaces (U+0020) and
2322-
tabs (U+0009), as well as nbsp (U+....), ideographic space
2323-
(U+...) and all fixed width spaces (such as U+...&ndash;U+....).</dd>
2442+
tabs (U+0009), as well as nbsp (U+00A0), ideographic space
2443+
(U+3000), all fixed width spaces (such as U+2000&ndash;U+200A,
2444+
U+202F and U+205F), and any adjacent letter-spacing or
2445+
word-spacing.</dd>
23242446
<dt><dfn title="text-decoration-skip:ink">ink</dfn></dt>
23252447
<dd>Skip over where glyphs are drawn: interrupt the decoration
23262448
line to let text show through where the text decoration would
@@ -2330,14 +2452,17 @@ <h4 id="text-decoration-skip"><span class="secno">8.1.3</span>
23302452
<dd>Skip over all content in this element.</dd>
23312453
</dl>
23322454

2455+
<p class="issue">Do we need a value that <em>doesn't</em> skip
2456+
margins and padding?</p>
2457+
23332458
<p>Note that this property inherits and that descendant elements
23342459
can have a different setting. Therefore a child of an element
23352460
with <code>text-decoration-skip: all</code> can cause its
23362461
grandparent's underline to be drawn by specifying
23372462
<code>text-decoration-skip: none</code>.</p>
23382463

2339-
<h4 id="text-decoration-skip"><span class="secno">8.1.4</span>
2340-
Text Underline Position</h4>
2464+
<h4 id="text-underline-position"><span class="secno">8.1.6</span>
2465+
Text Underline Position: the 'text-underline-position' property</h4>
23412466

23422467
<table class="propdef">
23432468
<tbody>
@@ -2377,6 +2502,37 @@ <h4 id="text-decoration-skip"><span class="secno">8.1.4</span>
23772502
</tbody>
23782503
</table>
23792504

2505+
<p>This property sets the position of an underline specified
2506+
on the same element: it does not affect underlines specified by
2507+
ancestor elements. The can appear either "before" (above in
2508+
horizontal layout) or "after" (below in an horizontal layout)
2509+
the run of text in relation to its baseline orientation.
2510+
This property is typically used in vertical writing contexts
2511+
such as in Japanese documents where it often desired to have
2512+
the underline appear "before" (to the right of) the affected
2513+
run of text. Values have the following meanings:</p>
2514+
2515+
<dl>
2516+
<dt>auto</dt>
2517+
<dd>The user agent may use any algorithm to determine the
2518+
underline's position. In horizontal line layout, the underline
2519+
should be aligned as for <code>alphabetic</code>. In vertical
2520+
line layout, if the language is set to Japanese or Korean,
2521+
the underline should be aligned as for <code>before-edge</code>.
2522+
<span class="issue">this suggestion needs some refinement</span></dd>
2523+
<dt>alphabetic</dt>
2524+
<dd>The underline is aligned with the alphabetic baseline. In
2525+
this case the underline is likely to cross some descenders.</dd>
2526+
<dt>after-edge</dt>
2527+
<dd>The underline is aligned with the "after" (bottom in horizontal
2528+
writing) edge of the element's em-box. In this case the underline
2529+
usually does not cross the descenders. This is sometimes called
2530+
"accounting" underline.</dd>
2531+
<dt>before-edge</dt>
2532+
<dd>The underline is aligned with the "before" (top in horizontal
2533+
writing) edge of the element's em-box.</dd>
2534+
</dl>
2535+
23802536
<h3 id="text-emphasis"><span class="secno">8.2</span>
23812537
Emphasis Marks: the 'text-emphasis' property</h3>
23822538

@@ -2978,12 +3134,20 @@ <h3 id="normative-ref"><span class="secno">13.1.</span>
29783134

29793135
<dl>
29803136
<dt id="CSS21">[CSS21]</dt>
2981-
<dd>Bert Bos; et al. <cite>Cascading Style Sheets, level 2 revision 1.</cite>
2982-
06 November 2006. W3C Working Draft. (Work in progress.)
2983-
URL: <a href="http://www.w3.org/TR/2006/WD-CSS21-20061106/">http://www.w3.org/TR/2006/WD-CSS21-20061106/</a></dd>
3137+
<dd>Bert Bos; et al. <cite>Cascading Style Sheets Level 2 Revision 1.</cite>
3138+
19 July 2007. W3C Candidate Recommendation. (Work in progress.)
3139+
URL: <a href="http://www.w3.org/TR/2007/CR-CSS21-20070719/">http://www.w3.org/TR/2007/CR-CSS21-20070719/</a></dd>
29843140
<dt id="RFC2119">[RFC2119]</dt>
29853141
<dd>S. Bradner. <cite>Key words for use in RFCs to Indicate Requirement
29863142
Levels.</cite> Internet RFC 2119.URL: <a href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a></dd>
3143+
<dt id="CSS3BG">[CSS3BG]</dt>
3144+
<dd>Bert Bos; et al. <cite>CSS Backgrounds and Borders Module Level 3.</cite>
3145+
16 February 2005. W3C Working Draft. (Work in progress.)
3146+
URL: <a href="http://www.w3.org/TR/2005/WD-css3-background-20050216">http://www.w3.org/TR/2005/WD-css3-background-20050216</a></dd>
3147+
<dt id="CSS3COLOR">[CSS3COLOR]</dt>
3148+
<dd>Tantek &Ccedil;elik, Chris Lilley. <cite>CSS Color Module Level 3.</cite>
3149+
14 May 2003. W3C Working Draft. (Work in progress.)
3150+
URL: <a href="http://www.w3.org/TR/2003/CR-css3-color-20030514/">http://www.w3.org/TR/2003/CR-css3-color-20030514/</a></dd>
29873151
<dt id="UAX11">[UAX11]</dt>
29883152
<dd>Asmus Freytag. <cite>East Asian Width.</cite> 15 September 2006.
29893153
Unicode Standard Annex #11.

‎css3-text/underline-averaging.gif‎

1.94 KB
Loading

0 commit comments

Comments
 (0)