Skip to content

Commit ec7084d

Browse files
fantasaifantasai
committed
[css-text-decor-3] Give line-positioning its own subsection.
1 parent fc45ca7 commit ec7084d

2 files changed

Lines changed: 115 additions & 96 deletions

File tree

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

Lines changed: 62 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -199,6 +199,9 @@ <h2 class="no-num no-toc" id=contents> Table of Contents</h2>
199199
<li><a href="#text-underline-position-property"><span class=secno>2.6.
200200
</span> Text Underline Position: the ‘<code
201201
class=property>text-underline-position</code>’ property</a>
202+
203+
<li><a href="#line-position"><span class=secno>2.7. </span> Determining
204+
the Position and Thickness of Line Decorations</a>
202205
</ul>
203206

204207
<li><a href="#emphasis-marks"><span class=secno>3. </span> Emphasis
@@ -480,57 +483,6 @@ <h3 id=text-decoration-line-property><span class=secno>2.1. </span> Text
480483
rel=biblioentry>[CSS3-ANIMATIONS]<!--{{CSS3-ANIMATIONS}}--></a>.
481484
</dl>
482485

483-
<p> In determining the position and thickness of text decoration lines,
484-
user agents should first determine, per line, an "ideal" size and position
485-
for every fragment of a single <a href="#decorating-box"><i>decorating
486-
box</i></a>, then position the decoration as follows:
487-
488-
<dl>
489-
<dt>overlines (and <i>over</i>-positioned underlines)
490-
491-
<dd> Position the line with respect to the highest <i>over</i> content
492-
edge of the decorated fragments.
493-
494-
<dt><a href="#alphabetic"><i>alphabetic</i></a> underlines
495-
496-
<dd> Position the line to an average of the ideal underlines of the
497-
decorated fragments, ignoring any fragments with non-initial ‘<code
498-
class=property>vertical-align</code>’, but below the lowest alphabetic
499-
baseline considered.
500-
501-
<dt>non-alphabetic underlines (and <a
502-
href="#under"><i>under</i></a>-positioned overlines)
503-
504-
<dd> Position the line with respect to the lowest <a
505-
href="#under"><i>under</i></a> content edge of the decorated fragments.
506-
507-
<dt>line-throughs
508-
509-
<dd> For each set of decorated fragments with the same ‘<code
510-
class=property>font-size</code>’, compute an ideal position averaged
511-
from their direct contents and font metrics, ignoring any fragments with
512-
non-initial ‘<code class=property>vertical-align</code>’ and
513-
assigning them the ideal position of their parent. Position the portion
514-
of the line across each decorated fragment at the fragment's ideal
515-
position. (Essentially, this performs the same sort of averaging as for
516-
alphabetic underlines, but recomputes the position when drawing across a
517-
descendant with a different computed ‘<code
518-
class=property>font-size</code>’.) <span class=issue>Need an example
519-
here</span>
520-
</dl>
521-
522-
<div class=example>
523-
<p>The following figure shows the averaging for underline:
524-
525-
<p><img
526-
alt="In the first rendering of the underlined text '1st a' with 'st' as a superscript, both the '1st' and the 'a' are rendered in a small font. In the second rendering, the 'a' is rendered in a larger font. In the third, both '1st' and 'a' are large."
527-
height=105 src=underline-averaging.gif width=326>
528-
529-
<p>In the three fragments of underlined text, the underline is drawn
530-
consecutively lower and thicker as the ratio of large text to small text
531-
increases.
532-
</div>
533-
534486
<h3 id=text-decoration-color-property><span class=secno>2.2. </span> Text
535487
Decoration Color: the ‘<a href="#text-decoration-color"><code
536488
class=property>text-decoration-color</code></a>’ property</h3>
@@ -1011,6 +963,65 @@ <h3 id=text-underline-position-property><span class=secno>2.6. </span> Text
1011963
<!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: under left; }</pre>
1012964
</div>
1013965

966+
<h3 id=line-position><span class=secno>2.7. </span> Determining the
967+
Position and Thickness of Line Decorations</h3>
968+
969+
<p>In determining the position of text decoration lines, user agents must
970+
first determine, per line, an "ideal" position for every fragment of a
971+
single <a href="#decorating-box"><i>decorating box</i></a>, then position
972+
the decoration as follows:
973+
974+
<dl>
975+
<dt>overlines (and <i>over</i>-positioned underlines)
976+
977+
<dd> Position the line with respect to the highest <i>over</i> content
978+
edge of the decorated fragments.
979+
980+
<dt><a href="#alphabetic"><i>alphabetic</i></a> underlines
981+
982+
<dd> Position the line to an average of the ideal underlines of the
983+
decorated fragments, ignoring any fragments with non-initial ‘<code
984+
class=property>vertical-align</code>’, but below the lowest alphabetic
985+
baseline considered.
986+
987+
<dt>non-alphabetic underlines (and <a
988+
href="#under"><i>under</i></a>-positioned overlines)
989+
990+
<dd> Position the line with respect to the lowest <a
991+
href="#under"><i>under</i></a> content edge of the decorated fragments.
992+
993+
<dt>line-throughs
994+
995+
<dd> For each set of decorated fragments with the same ‘<code
996+
class=property>font-size</code>’, compute an ideal position averaged
997+
from their direct contents and font metrics, ignoring any fragments with
998+
non-initial ‘<code class=property>vertical-align</code>’ and
999+
assigning them the ideal position of their parent. Position the portion
1000+
of the line across each decorated fragment at the fragment's ideal
1001+
position. (Essentially, this performs the same sort of averaging as for
1002+
alphabetic underlines, but recomputes the position when drawing across a
1003+
descendant with a different computed ‘<code
1004+
class=property>font-size</code>’.) <span class=issue>Need an example
1005+
here</span>
1006+
</dl>
1007+
1008+
<p> CSS does not define the thickness of line decorations. In determining
1009+
the thickness of text decoration lines, user agents may consider the font
1010+
sizes, faces, and weights of descendants to provide an appropriately
1011+
averaged thickness.
1012+
1013+
<div class=example>
1014+
<p>The following figure shows the averaging for underline:
1015+
1016+
<p><img
1017+
alt="In the first rendering of the underlined text '1st a' with 'st' as a superscript, both the '1st' and the 'a' are rendered in a small font. In the second rendering, the 'a' is rendered in a larger font. In the third, both '1st' and 'a' are large."
1018+
height=105 src=underline-averaging.gif width=326>
1019+
1020+
<p>In the three fragments of underlined text, the underline is drawn
1021+
consecutively lower and thicker as the ratio of large text to small text
1022+
increases.
1023+
</div>
1024+
10141025
<div class=note>
10151026
<p>In some cases (such as in OpenType) the font format can offer
10161027
information about the appropriate position of an underline. Typically

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

Lines changed: 53 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -283,51 +283,6 @@ <h3 id="text-decoration-line-property">
283283
This value is <strong>deprecated</strong> in favor of Animations [[CSS3-ANIMATIONS]].
284284
</dl>
285285

286-
<p>
287-
In determining the position and thickness of text decoration lines,
288-
user agents should first determine, per line,
289-
an "ideal" size and position for every fragment of a single <i>decorating box</i>,
290-
then position the decoration as follows:
291-
292-
<dl>
293-
<dt>overlines (and <i>over</i>-positioned underlines)
294-
<dd>
295-
Position the line with respect to the highest <i>over</i> content edge of the decorated fragments.
296-
297-
<dt><i>alphabetic</i> underlines
298-
<dd>
299-
Position the line to an average of the ideal underlines of the decorated fragments,
300-
ignoring any fragments with non-initial 'vertical-align',
301-
but below the lowest alphabetic baseline considered.
302-
303-
<dt>non-alphabetic underlines (and <i>under</i>-positioned overlines)
304-
<dd>
305-
Position the line with respect to the lowest <i>under</i> content edge of the decorated fragments.
306-
307-
<dt>line-throughs
308-
<dd>
309-
For each set of decorated fragments with the same 'font-size',
310-
compute an ideal position averaged from their direct contents and font metrics,
311-
ignoring any fragments with non-initial 'vertical-align' and assigning them the ideal position of their parent.
312-
Position the portion of the line across each decorated fragment at the fragment's ideal position.
313-
(Essentially, this performs the same sort of averaging as for alphabetic underlines,
314-
but recomputes the position when drawing across a descendant with a different computed 'font-size'.)
315-
<span class="issue">Need an example here</span>
316-
</dl>
317-
318-
<div class="example">
319-
<p>The following figure shows the averaging for underline:
320-
<p><img alt="In the first rendering of the underlined text '1st a'
321-
with 'st' as a superscript, both the '1st' and the 'a'
322-
are rendered in a small font. In the second rendering,
323-
the 'a' is rendered in a larger font. In the third, both
324-
'1st' and 'a' are large."
325-
height="105" src="underline-averaging.gif" width="326">
326-
<p>In the three fragments of underlined text, the underline is drawn
327-
consecutively lower and thicker as the ratio of large text to small
328-
text increases.</p>
329-
</div>
330-
331286
<h3 id="text-decoration-color-property">
332287
Text Decoration Color: the 'text-decoration-color' property</h3>
333288

@@ -677,6 +632,59 @@ <h3 id="text-underline-position-property">
677632
<!-- -->:root:lang(zh), [lang|=zh] { text-underline-position: under left; }</pre>
678633
</div>
679634

635+
<h3 id="line-position">
636+
Determining the Position and Thickness of Line Decorations</h3>
637+
638+
<p>In determining the position of text decoration lines,
639+
user agents must first determine, per line,
640+
an "ideal" position for every fragment of a single <i>decorating box</i>,
641+
then position the decoration as follows:
642+
643+
<dl>
644+
<dt>overlines (and <i>over</i>-positioned underlines)
645+
<dd>
646+
Position the line with respect to the highest <i>over</i> content edge of the decorated fragments.
647+
648+
<dt><i>alphabetic</i> underlines
649+
<dd>
650+
Position the line to an average of the ideal underlines of the decorated fragments,
651+
ignoring any fragments with non-initial 'vertical-align',
652+
but below the lowest alphabetic baseline considered.
653+
654+
<dt>non-alphabetic underlines (and <i>under</i>-positioned overlines)
655+
<dd>
656+
Position the line with respect to the lowest <i>under</i> content edge of the decorated fragments.
657+
658+
<dt>line-throughs
659+
<dd>
660+
For each set of decorated fragments with the same 'font-size',
661+
compute an ideal position averaged from their direct contents and font metrics,
662+
ignoring any fragments with non-initial 'vertical-align' and assigning them the ideal position of their parent.
663+
Position the portion of the line across each decorated fragment at the fragment's ideal position.
664+
(Essentially, this performs the same sort of averaging as for alphabetic underlines,
665+
but recomputes the position when drawing across a descendant with a different computed 'font-size'.)
666+
<span class="issue">Need an example here</span>
667+
</dl>
668+
669+
<p>
670+
CSS does not define the thickness of line decorations.
671+
In determining the thickness of text decoration lines,
672+
user agents may consider the font sizes, faces, and weights of descendants
673+
to provide an appropriately averaged thickness.
674+
675+
<div class="example">
676+
<p>The following figure shows the averaging for underline:
677+
<p><img alt="In the first rendering of the underlined text '1st a'
678+
with 'st' as a superscript, both the '1st' and the 'a'
679+
are rendered in a small font. In the second rendering,
680+
the 'a' is rendered in a larger font. In the third, both
681+
'1st' and 'a' are large."
682+
height="105" src="underline-averaging.gif" width="326">
683+
<p>In the three fragments of underlined text, the underline is drawn
684+
consecutively lower and thicker as the ratio of large text to small
685+
text increases.</p>
686+
</div>
687+
680688
<div class="note">
681689
<p>In some cases (such as in OpenType) the font format can offer
682690
information about the appropriate position of an underline.

0 commit comments

Comments
 (0)