- 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