Skip to content

Commit 7031663

Browse files
fantasaifantasai
committed
[css-text-decor-4] Add back in detailed description of line position and thickness from old drafts of Level 3. (This may need to be tweaked, this is just a direct copy.)
1 parent 37edd89 commit 7031663

1 file changed

Lines changed: 91 additions & 2 deletions

File tree

‎css-text-decor-4/Overview.bs‎

Lines changed: 91 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,6 @@ It has no status at W3C and has not yet been discussed by the CSSWG.
2525

2626
<ul>
2727
<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>
3028
</ul>
3129

3230
<h3 id="text-decoration-width-property">
@@ -68,7 +66,98 @@ Automatic Thickness of Text Decoration Lines</h4>
6866
6967
Issue: Insert L3 text here.
7068
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>
71136

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>
72161

73162
<h3 id="underline-offset">
74163
Text Underline Offset: the 'text-underline-offset' property</h3>

0 commit comments

Comments
 (0)