Skip to content

Commit e236faa

Browse files
fantasaifantasai
committed
[css-text-decor] text-underline-position: under should always draw on the under side of the text. Plus editorial fixes.
1 parent b3520b9 commit e236faa

2 files changed

Lines changed: 43 additions & 36 deletions

File tree

‎css-text-decor/Overview.html‎

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -910,13 +910,24 @@ <h3 id=text-underline-position-property><span class=secno>2.6. </span> Text
910910
<td>no
911911
</table>
912912

913-
<p>This property sets the position of an underline specified on the same
914-
element: it does not affect underlines specified by ancestor elements. If
915-
‘<code class=css>under</code>’ is specified alone, ‘<code
916-
class=css>left</code>’ is also implied. If ‘<code
917-
class=css>left</code>’ or ‘<code class=css>right</code>’ is
918-
specified alone, ‘<code class=css>under</code>’ is also implied.
919-
Values have the following meanings:
913+
<p>This property sets the position of an underline specified on the
914+
element. (It does not affect underlines specified by ancestor elements.)
915+
If ‘<code class=css>left</code>’ or ‘<code class=css>right</code>’
916+
is specified alone, ‘<code class=css>under</code>’ is also implied.
917+
918+
<div class=example>
919+
<p>The following example styles modern Chinese, Japanese, and Korean texts
920+
with the appropriate underline positions in both horizontal and vertical
921+
text:
922+
923+
<pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; }
924+
<!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: under left; }</pre>
925+
926+
<p>(Note that these rules are part of the suggested <a
927+
href="#default-stylesheet">default UA style sheet</a>.)
928+
</div>
929+
930+
<p>Values have the following meanings:
920931

921932
<dl>
922933
<dt><dfn id=underline-auto title="text-underline-position: auto">‘<code
@@ -929,7 +940,7 @@ <h3 id=text-underline-position-property><span class=secno>2.6. </span> Text
929940
otherwise lowered) text, or it affects characters from Asian scripts
930941
such as Han or Tibetan, for which an alphabetic underline is too high:
931942
in such cases, aligning to the em box edge as described for ‘<code
932-
class=css>under left</code>’ is more appropriate.
943+
class=css>under</code>’ is more appropriate.
933944

934945
<dt><dfn id=underline-alphabetic
935946
title="text-underline-position: alphabetic">‘<code
@@ -951,9 +962,12 @@ <h3 id=text-underline-position-property><span class=secno>2.6. </span> Text
951962
title="text-underline-position: under">‘<code
952963
class=css>under</code>’</dfn>
953964

954-
<dd>In horizontal writing modes, the underline is positioned <i>under</i>
955-
the element's text content. In this case the underline usually does not
956-
cross the descenders. (This is sometimes called "accounting" underline.)
965+
<dd>The underline is positioned <i>under</i> the element's text content.
966+
In this case the underline usually does not cross the descenders. (This
967+
is sometimes called "accounting" underline.) This value can be combined
968+
with ‘<code class=css>left</code>’ or ‘<code
969+
class=css>right</code>’ if a particular side is preferred in vertical
970+
writing modes.
957971
<div class=figure>
958972
<p><img
959973
alt="In a typical Latin font, the underline is far enough below the text that it does not cross the bottom of a 'g'."
@@ -1024,15 +1038,6 @@ <h3 id=text-underline-position-property><span class=secno>2.6. </span> Text
10241038
modes, both values are treated as ‘<code class=css>under</code>’.)
10251039
</div>
10261040

1027-
<div class=example>
1028-
<p>The following example styles modern Chinese, Japanese, and Korean texts
1029-
with the appropriate underline positions in both horizontal and vertical
1030-
text:
1031-
1032-
<pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; }
1033-
<!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: under left; }</pre>
1034-
</div>
1035-
10361041
<h3 id=line-position><span class=secno>2.7. </span> Determining the
10371042
Position and Thickness of Line Decorations</h3>
10381043

‎css-text-decor/Overview.src.html‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -576,12 +576,21 @@ <h3 id="text-underline-position-property">
576576
<td>no
577577
</table>
578578

579-
<p>This property sets the position of an underline specified
580-
on the same element: it does not affect underlines specified by
581-
ancestor elements.
582-
If ''under'' is specified alone, ''left'' is also implied.
579+
<p>This property sets the position of an underline specified on the element.
580+
(It does not affect underlines specified by ancestor elements.)
583581
If ''left'' or ''right'' is specified alone, ''under'' is also implied.
584-
Values have the following meanings:</p>
582+
583+
<div class="example">
584+
<p>The following example styles modern Chinese, Japanese, and Korean
585+
texts with the appropriate underline positions in both horizontal
586+
and vertical text:
587+
<pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; }
588+
<!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: under left; }</pre>
589+
<p>(Note that these rules are part of the suggested
590+
<a href="#default-stylesheet">default UA style sheet</a>.)
591+
</div>
592+
593+
<p>Values have the following meanings:
585594

586595
<dl>
587596
<dt><dfn id="underline-auto" title="text-underline-position: auto">''auto''</dfn></dt>
@@ -593,7 +602,7 @@ <h3 id="text-underline-position-property">
593602
otherwise lowered) text, or it affects characters from Asian
594603
scripts such as Han or Tibetan, for which an alphabetic
595604
underline is too high: in such cases, aligning to the em box
596-
edge as described for ''under left'' is more appropriate.
605+
edge as described for ''under'' is more appropriate.
597606
<dt><dfn id="underline-alphabetic" title="text-underline-position: alphabetic">''alphabetic''</dfn></dt>
598607
<dd>The underline is positioned relative to the alphabetic baseline. In
599608
this case the underline is likely to cross some descenders.
@@ -608,10 +617,11 @@ <h3 id="text-underline-position-property">
608617
<p class="caption">''text-underline-position: alphabetic''</p>
609618
</div>
610619
<dt><dfn id="underline-under" title="text-underline-position: under">''under''</dfn></dt>
611-
<dd>In horizontal writing modes, the underline is positioned
612-
<i>under</i> the element's text content.
620+
<dd>The underline is positioned <i>under</i> the element's text content.
613621
In this case the underline usually does not cross the descenders.
614622
(This is sometimes called "accounting" underline.)
623+
This value can be combined with ''left'' or ''right''
624+
if a particular side is preferred in vertical writing modes.
615625
<div class="figure">
616626
<p><img title="text-underline-position: under"
617627
alt="In a typical Latin font, the underline is far enough
@@ -670,14 +680,6 @@ <h3 id="text-underline-position-property">
670680
treated as ''under''.)</p>
671681
</div>
672682

673-
<div class="example">
674-
<p>The following example styles modern Chinese, Japanese, and Korean
675-
texts with the appropriate underline positions in both horizontal
676-
and vertical text:
677-
<pre>:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; }
678-
<!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: under left; }</pre>
679-
</div>
680-
681683
<h3 id="line-position">
682684
Determining the Position and Thickness of Line Decorations</h3>
683685

0 commit comments

Comments
 (0)