- From: Elika Etemad via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 13 Jan 2012 02:00:10 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-text
In directory hutz:/tmp/cvs-serv28688
Modified Files:
Overview.html Overview.src.html
Log Message:
Tweak text-underline-position syntax to be more friendly to non-Far-East users. Add examples. Shift around images and add better alt text.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-text/Overview.html,v
retrieving revision 1.209
retrieving revision 1.210
diff -u -d -r1.209 -r1.210
--- Overview.html 12 Jan 2012 23:36:47 -0000 1.209
+++ Overview.html 13 Jan 2012 02:00:08 -0000 1.210
@@ -32,15 +32,15 @@
<h1>CSS Text Level 3</h1>
- <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 12 January
+ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 13 January
2012</h2>
<dl>
<dt>This version:
<dd><a href="http://dev.w3.org/csswg/css3-text/">$Date: 2012/01/12
- 09:09:41 $ (CVS $Revision$)</a> <!--
- <dd><a href="http://www.w3.org/TR/2012/WD-css3-text-20120112/">http://www.w3.org/TR/2012/WD-css3-text-20120112/</a></dd>
+ 23:36:47 $ (CVS $Revision$)</a> <!--
+ <dd><a href="http://www.w3.org/TR/2012/WD-css3-text-20120113/">http://www.w3.org/TR/2012/WD-css3-text-20120113/</a></dd>
-->
@@ -3666,7 +3666,7 @@
<tr>
<th><a href="#values">Value</a>:
- <td>auto | alphabetic | below && left | below && right
+ <td>auto | alphabetic | [ below || [ left | right ] ]
<tr>
<th>Initial:
@@ -3707,7 +3707,7 @@
<dt><dfn id=auto2>‘<code class=css>auto</code>’</dfn>
<dd>The user agent may use any algorithm to determine the underline's
- position.
+ position; however it must be placed at or below the alphabetic baseline.
<p class=note>It is suggested that the underline position be ‘<code
class=css>alphabetic</code>’ unless it crosses either subscripted
(or otherwise lowered) text, or it affects characters from Asian scripts
@@ -3720,65 +3720,112 @@
<dd>The underline is positioned relative to the alphabetic baseline. In
this case the underline is likely to cross some descenders.
+ <div class=figure>
+ <p><img
+ alt="In a typical Latin font, the underline is positioned slightly below the alphabetic baseline, leaving a gap between the line and the bottom of most Latin letters, but crossing through descenders such as the stem of a 'p'."
+ src=underline-position-alphabetic.png
+ title="text-underline-position: alphabetic">
- <dt><dfn id=below-left>‘<code class=css>below
- left</code>’</dfn>
+ <p class=caption>‘<code class=css>text-underline-position:
+ alphabetic</code>’</p>
+ </div>
- <dd>The underline is positioned relative to the under edge of the
- element's content box. In this case the underline usually does not cross
- the descenders. (This is sometimes called "accounting" underline.) If the
- underline affects descendants with a lower content edge, the user agent
- should shift the underline down further to the lowest underlined content
- box edge. The user agent may ignore elements with ‘<code
- class=css>vertical-align</code>’ values given as lengths,
- percentages, ‘<code class=css>top</code>’, or ‘<code
+ <dt><dfn id=below>‘<code class=css>below</code>’</dfn>
+
+ <dd>In horizontal typographic modes, the underline is positioned relative
+ to the under edge of the element's content box. In this case the
+ underline usually does not cross the descenders. (This is sometimes
+ called "accounting" underline.) If the underline affects descendants with
+ a lower content edge, the user agent should shift the underline down
+ further to the lowest underlined content box edge. The user agent may
+ ignore elements with ‘<code class=css>vertical-align</code>’
+ values given as lengths, percentages, ‘<code
+ class=css>top</code>’, or ‘<code
class=css>bottom</code>’ when making this adjustment. (Note that
images that are not affected by the underline per ‘<a
href="#text-decoration-skip0"><code
class=property>text-decoration-skip</code></a>’ will not affect the
position of the underline.)
+ <div class=figure>
+ <p><img
+ alt="In a typical Latin font, the underline is far enough below the text that it does not cross the bottom of a 'g'."
+ src=underline-position-below.png
+ title="text-underline-position: below">
- <dt><dfn id=below-right>‘<code class=css>below
- right</code>’</dfn>
+ <p class=caption>‘<code class=css>text-underline-position:
+ below</code>’</p>
+ </div>
- <dd>In horizontal typographic mode, this value is equivalent to
- ‘<code class=css>below left</code>’. In vertical typographic
- mode, the underline is aligned as for ‘<code class=css>below
- left</code>’, except it is aligned to the right edge of the text.
- If this causes the underline to be drawn on the "over" side of the text,
- then an overline also switches sides and is drawn on the "under" side.
+ <div class=example>
+ <p>Because ‘<a href="#text-underline-position0"><code
+ class=property>text-underline-position</code></a>’ inherits, and
+ is not reset by the ‘<a href="#text-decoration0"><code
+ class=property>text-decoration</code></a>’ shorthand, the
+ following example switches the document to use ‘<code
+ class=css>below</code>’ underlining, which can be more
+ appropriate for writing systems with long, complicated descenders. It
+ is also often useful for mathematical or chemical texts that use many
+ subscripts.
+
+ <pre>:root { text-underline-position: below; }</pre>
+ </div>
+
+ <dt><dfn id=left0>‘<code class=css>left</code>’</dfn>
+
+ <dd>In vertical typographic modes, the underline is aligned as for
+ ‘<code class=css>below</code>’, on the left edge of the text.
+
+ <dt><dfn id=right0>‘<code class=css>right</code>’</dfn>
+
+ <dd>In vertical typographic modes, the underline is aligned as for
+ ‘<code class=css>below</code>’, except it is aligned to the
+ right edge of the text. If this causes the underline to be drawn on the
+ "over" side of the text, then an overline also switches sides and is
+ drawn on the "under" side.
</dl>
+ <p>If ‘<code class=css>below</code>’ is specified alone,
+ ‘<code class=css>left</code>’ is also implied. If ‘<code
+ class=css>left</code>’ or ‘<code class=css>right</code>’
+ is specified alone, ‘<code class=css>below</code>’ is also
+ implied.
+
<div class=figure class=data id=fig-text-underline-position>
<table>
<tbody>
<tr>
- <td> <img alt="text-underline-position: alphabetic"
- src=underline-position-alphabetic.png>
-
- <td rowspan=3> <img alt="text-underline-position: left"
- src=underline-position-left.png>
-
- <td rowspan=3> <img alt="text-underline-position: right"
- src=underline-position-right.png>
-
- <tr>
- <td>‘<code class=css>alphabetic</code>’
+ <td> <img
+ alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left' places the underline on the left side of the text."
+ src=underline-position-left.png title="text-underline-position: left">
+
- <tr>
- <td> <img alt="text-underline-position: below"
- src=underline-position-below.png>
+ <td> <img
+ alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right' places the underline on the right side of the text."
+ src=underline-position-right.png
+ title="text-underline-position: right">
<tr>
- <td>‘<code class=css>below</code>’
-
<td>‘<code class=css>left</code>’
<td>‘<code class=css>right</code>’
</table>
- <p class=caption>‘<a href="#text-underline-position0"><code
- class=property>text-underline-position</code></a>’ values</p>
+ <p class=caption>In vertical typographic modes, the ‘<a
+ href="#text-underline-position0"><code
+ class=property>text-underline-position</code></a>’ values
+ ‘<code class=css>left</code>’ and ‘<code
+ class=css>right</code>’ allow placing the underline on either side
+ of the text. (In horizontal typographic modes, both values are treated as
+ ‘<code class=css>below</code>’.)</p>
+ </div>
+
+ <div class=example>
+ <p>The following example styles modern Chinese, Japanese, and Korean texts
+ with the appropriate underline positions in both horizontal and vertical
+ text:
+
+ <pre>:lang(ja), :lang(ko) { text-underline-position: below right; }
+<!-- -->:lang(zh) { text-underline-position: below left; }</pre>
</div>
<div class=note>
@@ -4025,7 +4072,7 @@
<td>as specified
</table>
- <p>This property describes the foreground color of the emphasis marks.
+ <p>This property specifies the foreground color of the emphasis marks.
<h4 id=text-emphasis><span class=secno>10.2.3. </span> Emphasis Mark
Shorthand: the ‘<a href="#text-emphasis0"><code
@@ -4146,17 +4193,17 @@
<dd>Draw marks over the text in horizontal typographic mode.
- <dt><dfn id=below title="text-emphasis:below">‘<code
+ <dt><dfn id=below0 title="text-emphasis:below">‘<code
class=css>below</code>’</dfn>
<dd>Draw marks under the text in horizontal typographic mode.
- <dt><dfn id=right0 title="text-emphasis:right">‘<code
+ <dt><dfn id=right1 title="text-emphasis:right">‘<code
class=css>right</code>’</dfn>
<dd>Draw marks to the right of the text in vertical typographic mode.
- <dt><dfn id=left0 title="text-emphasis:left">‘<code
+ <dt><dfn id=left1 title="text-emphasis:left">‘<code
class=css>left</code>’</dfn>
<dd>Draw marks to the left of the text in vertical typographic mode.
@@ -4252,7 +4299,7 @@
<tr>
<th><a href="#values">Value</a>:
- <td>none | [ <length>{2,3} && >color>? ]#
+ <td>none | [ <length>{2,3} && <color>? ]#
<tr>
<th>Initial:
@@ -4716,6 +4763,11 @@
<!-- -->/* default emphasis mark position is 'below right' for Chinese */
<!-- --> text-emphasis-position: below right;
<!-- -->}
+<!-- -->
+<!-- -->:root:lang(zh), [lang|=zh] {
+<!-- -->/* default underline position is 'below left' for Japanese and Korean */
+<!-- --> text-underline-position: below right;
+<!-- -->}
</code></pre>
</div>
@@ -5628,7 +5680,7 @@
<tr>
<th><a class=property href="#text-shadow0">text-shadow</a>
- <td>none | [ <length>{2,3} && >color>? ]#
+ <td>none | [ <length>{2,3} && <color>? ]#
<td>none
@@ -5676,7 +5728,7 @@
<th><a class=property
href="#text-underline-position0">text-underline-position</a>
- <td>auto | alphabetic | below && left | below && right
+ <td>auto | alphabetic | [ below || [ left | right ] ]
<td>auto
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-text/Overview.src.html,v
retrieving revision 1.308
retrieving revision 1.309
diff -u -d -r1.308 -r1.309
--- Overview.src.html 12 Jan 2012 23:36:47 -0000 1.308
+++ Overview.src.html 13 Jan 2012 02:00:08 -0000 1.309
@@ -2727,7 +2727,7 @@
</tr>
<tr>
<th><a href="#values">Value</a>:
- <td>auto | alphabetic | below && left | below && right
+ <td>auto | alphabetic | [ below || [ left | right ] ]
</td>
</tr>
<tr>
@@ -2764,7 +2764,8 @@
<dl>
<dt><dfn>''auto''</dfn></dt>
<dd>The user agent may use any algorithm to determine the
- underline's position.
+ underline's position; however it must be placed at or below
+ the alphabetic baseline.
<p class="note">It is suggested that the underline position
be ''alphabetic'' unless it crosses either subscripted (or
otherwise lowered) text, or it affects characters from Asian
@@ -2773,11 +2774,22 @@
edge as described for ''below left'' is more appropriate.
<dt><dfn>''alphabetic''</dfn></dt>
<dd>The underline is positioned relative to the alphabetic baseline. In
- this case the underline is likely to cross some descenders.</dd>
- <dt><dfn>''below left''</dfn></dt>
- <dd>The underline is positioned relative to the under edge of the element's
- content box. In this case the underline usually does not cross
- the descenders. (This is sometimes called "accounting" underline.)
+ this case the underline is likely to cross some descenders.
+ <div class="figure">
+ <p><img title="text-underline-position: alphabetic"
+ alt="In a typical Latin font, the underline is positioned slightly
+ below the alphabetic baseline, leaving a gap between the line
+ and the bottom of most Latin letters, but crossing through
+ descenders such as the stem of a 'p'."
+ src="underline-position-alphabetic.png"
+ />
+ <p class="caption">''text-underline-position: alphabetic''</p>
+ </div>
+ <dt><dfn>''below''</dfn></dt>
+ <dd>In horizontal typographic modes, the underline is positioned
+ relative to the under edge of the element's content box.
+ In this case the underline usually does not cross the descenders.
+ (This is sometimes called "accounting" underline.)
If the underline affects descendants with a lower content edge,
the user agent should shift the underline down further to the
lowest underlined content box edge.
@@ -2786,56 +2798,74 @@
when making this adjustment.
(Note that images that are not affected by the underline per
'text-decoration-skip' will not affect the position of the
- underline.)</dd>
- <dt><dfn>''below right''</dfn></dt>
- <dd>In horizontal typographic mode, this value is equivalent to
- ''below left''. In vertical typographic mode, the underline is
- aligned as for ''below left'', except it is aligned to the
- right edge of the text. If this causes the underline to be
- drawn on the "over" side of the text, then an overline also
- switches sides and is drawn on the "under" side.</dd>
+ underline.)
+ <div class="figure">
+ <p><img title="text-underline-position: below"
+ alt="In a typical Latin font, the underline is far enough
+ below the text that it does not cross the bottom of a 'g'."
+ src="underline-position-below.png"
+ />
+ <p class="caption">''text-underline-position: below''</p>
+ </div>
+ <div class="example">
+ <p>Because 'text-underline-position' inherits, and is not reset
+ by the 'text-decoration' shorthand, the following example
+ switches the document to use ''below'' underlining, which can
+ be more appropriate for writing systems with long, complicated
+ descenders. It is also often useful for mathematical or chemical
+ texts that use many subscripts.
+ <pre>:root { text-underline-position: below; }</pre>
+ </div>
+ <dt><dfn>''left''</dfn></dt>
+ <dd>In vertical typographic modes, the underline is aligned as for
+ ''below'', on the left edge of the text.</dd>
+ <dt><dfn>''right''</dfn></dt>
+ <dd>In vertical typographic modes, the underline is aligned as for
+ ''below'', except it is aligned to the right edge of the text.
+ If this causes the underline to be drawn on the "over" side of
+ the text, then an overline also switches sides and is drawn on
+ the "under" side.</dd>
</dl>
+ <p>If ''below'' is specified alone, ''left'' is also implied.
+ If ''left'' or ''right'' is specified alone, ''below'' is also
+ implied.
+
<div class="figure" class="data" id="fig-text-underline-position">
<table>
<tr>
<td>
- <img
- alt="text-underline-position: alphabetic"
- src="underline-position-alphabetic.png"
- />
- </td>
- <td rowspan="3">
- <img
- alt="text-underline-position: left"
+ <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: left'
+ places the underline on the left side of the text."
+ title="text-underline-position: left"
src="underline-position-left.png"
/>
</td>
- <td rowspan="3">
- <img
- alt="text-underline-position: right"
- src="underline-position-right.png"
- />
- </td>
- </tr>
- <tr>
- <td>''alphabetic''</td>
- </tr>
- <tr>
<td>
- <img
- alt="text-underline-position: below"
- src="underline-position-below.png"
+ <img alt="In mixed Japanese-Latin vertical text, 'text-underline-position: right'
+ places the underline on the right side of the text."
+ title="text-underline-position: right"
+ src="underline-position-right.png"
/>
</td>
</tr>
<tr>
- <td>''below''</td>
<td>''left''</td>
<td>''right''</td>
</tr>
</table>
- <p class="caption">'text-underline-position' values</p>
+ <p class="caption">In vertical typographic modes, the 'text-underline-position'
+ values ''left'' and ''right'' allow placing the underline on either
+ side of the text. (In horizontal typographic modes, both values are
+ treated as ''below''.)</p>
+ </div>
+
+ <div class="example">
+ <p>The following example styles modern Chinese, Japanese, and Korean
+ texts with the appropriate underline positions in both horizontal
+ and vertical text:
+ <pre>:lang(ja), :lang(ko) { text-underline-position: below right; }
+<!-- -->:lang(zh) { text-underline-position: below left; }</pre>
</div>
<div class="note">
@@ -3028,7 +3058,7 @@
</tbody>
</table>
- <p>This property describes the foreground color of the emphasis marks.</p>
+ <p>This property specifies the foreground color of the emphasis marks.</p>
<h4 id="text-emphasis">
Emphasis Mark Shorthand: the 'text-emphasis' property</h4>
@@ -3210,7 +3240,7 @@
</tr>
<tr>
<th><a href="#values">Value</a>:
- <td>none | [ <length>{2,3} && >color>? ]#
+ <td>none | [ <length>{2,3} && <color>? ]#
</tr>
<tr>
<th>Initial:</th>
@@ -3505,6 +3535,11 @@
<!-- -->/* default emphasis mark position is 'below right' for Chinese */
<!-- --> text-emphasis-position: below right;
<!-- -->}
+<!-- -->
+<!-- -->:root:lang(zh), [lang|=zh] {
+<!-- -->/* default underline position is 'below left' for Japanese and Korean */
+<!-- --> text-underline-position: below right;
+<!-- -->}
</code></pre>
</div>
<p class="issue">If you find any issues, recommendations to add, or corrections,
Received on Friday, 13 January 2012 02:02:20 UTC