@@ -25,8 +25,6 @@ It has no status at W3C and has not yet been discussed by the CSSWG.
25
25
26
26
<ul>
27
27
<li> text-shadow with spread
28
- <li> a text-decoration-offset property
29
- <li> a text-line-width property, see <a href="https://www.w3.org/mid/9500A3A5-957D-462D-B30C-E5C548ADEB0E@verou.me">thread</a>
30
28
</ul>
31
29
32
30
<h3 id="text-decoration-width-property">
@@ -68,7 +66,98 @@ Automatic Thickness of Text Decoration Lines</h4>
68
66
69
67
Issue: Insert L3 text here.
70
68
69
+ <h3 id="line-position">
70
+ Determining the Position and Thickness of Line Decorations</h3>
71
+
72
+ Issue: This section is copied over from early drafts of Text Decoration Level 3, and is still under discussion.
73
+
74
+ <p>Since line decorations can span elements with varying font sizes and
75
+ vertical alignments, the best position for a line decoration is not
76
+ necessarily the ideal position dictated by the <i>decorating box</i>.
77
+ Instead, it's calculated, per line, from all text decorated by the <i>decorating box</i> on that line,
78
+ the <dfn>considered text</dfn> .
79
+ However, descendants of the <i> decorating box</i>
80
+ that are skipped due to 'text-decoration-skip' ,
81
+ descendant inlines with ''text-decoration-skip: ink'' ,
82
+ and any descendants that do not participate in the <i> decorating box</i> ’s inline formatting context
83
+ are excluded from the set of <i> considered text</i> .
84
+
85
+ <p>
86
+ The line decoration positions are then calculated
87
+ per line
88
+ as follows
89
+ (treating <a href="#underline-left"><i>over</i>-positioned underlines</a> as <i> over</i> lines
90
+ and <a href="#underline-left"><i>under</i>-positioned overlines</a> as <i> under</i> lines):
91
+
92
+ <dl>
93
+ <dt> <a href="https://www.w3.org/TR/css-writing-modes/#over"><i>over</i></a> lines
94
+ <dd>
95
+ Align the line decoration with respect to the highest
96
+ <a href="https://www.w3.org/TR/css-writing-modes/#over"><i>over</i></a> EM-box edge
97
+ of the <i> considered text</i> .
98
+
99
+ <dt> <a href="#underline-alphabetic"><i>alphabetic</i></a> underlines
100
+ <dd>
101
+ <p> The alphabetic underline position is calculated by taking
102
+ the ideal offset (from the alphabetic baseline) of each run of <i> considered text</i> ,
103
+ averaging those, and then using the lowest alphabetic baseline to actually position the line.
104
+ (Alphabetic baselines can differ between ''baseline'' -aligned boxes
105
+ if the dominant baseline is non-alphabetic.)
106
+ To prevent superscripts and subscripts from throwing this position off-kilter,
107
+ an inline with a non-initial computed 'vertical-align'
108
+ is treated as having the ideal underline position of its parent.
109
+
110
+ <dt> non-alphabetic <a href="https://www.w3.org/TR/css-writing-modes/#under"><i>under</i></a> lines
111
+ <dd>
112
+ Position the line decoration with respect to the lowest
113
+ <a href="https://www.w3.org/TR/css-writing-modes/#under"><i>under</i></a> EM-box edge
114
+ of the <i> considered text</i> .
115
+
116
+ <dt> line-throughs
117
+ <dd>
118
+ Line-throughs essentially use the same sort of averaging as for alphabetic underlines,
119
+ but recompute the position when drawing across a descendant with a different computed 'font-size' .
120
+ (This ensures that the text remains effectively “crossed out” despite any font size changes.)
121
+ For each run of <i> considered text</i> with the same 'font-size' ,
122
+ compute an ideal position averaged from its font metrics.
123
+ To prevent superscripts and subscripts from throwing this position off-kilter,
124
+ an inline with a non-initial computed 'vertical-align'
125
+ is treated as having the ideal underline position of its parent.
126
+ Position the portion of the line across each decorated fragment at that position.
127
+
128
+ <p class='issue'>
129
+ For simplicity, line-throughs should draw over each element at that element's preferred/averaged position.
130
+ This can produce some undesirable jumpiness,
131
+ but there doesn't appear to be any way to avoid that which is correct in all instances,
132
+ and all attempts are worryingly complex.
133
+ What position should line-throughts adopt over elements that have a different font-size,
134
+ but no <i> considered text</i> ?
135
+ </dl>
71
136
137
+ <p>
138
+ CSS does not define the thickness of line decorations.
139
+ In determining the thickness of text decoration lines,
140
+ user agents may consider the font sizes, faces, and weights of descendants
141
+ to provide an appropriately averaged thickness.
142
+
143
+ <div class="example">
144
+ <p> The following figure shows the averaging for underline:
145
+ <p><img alt="In the first rendering of the underlined text '1st a'
146
+ with 'st' as a superscript, both the '1st' and the 'a'
147
+ are rendered in a small font. In the second rendering,
148
+ the 'a' is rendered in a larger font. In the third, both
149
+ '1st' and 'a' are large."
150
+ height="105" src="underline-averaging.gif" width="326">
151
+ <p> In the three fragments of underlined text, the underline is drawn
152
+ consecutively lower and thicker as the ratio of large text to small
153
+ text increases.</p>
154
+ <p> Using the same example, a line-through would in the second fragment,
155
+ instead of averaging the two font sizes,
156
+ split the line-through into two segments:
157
+ <p><img alt="" src="linethrough-averaging.gif">
158
+ <p> In both cases, however, the superscript, due to the vertical-alignment shift,
159
+ has no effect on the position of the line.
160
+ </div>
72
161
73
162
<h3 id="underline-offset">
74
163
Text Underline Offset: the 'text-underline-offset' property</h3>
0 commit comments