Skip to content

Commit 07dcaff

Browse files
fantasaifantasai
committed
1 parent 3b61642 commit 07dcaff

File tree

2 files changed

+130
-141
lines changed

2 files changed

+130
-141
lines changed

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

Lines changed: 105 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -231,61 +231,111 @@ Text Underline Offset: the 'text-underline-offset' property</h3>
231231
<h3 id="text-decoration-skip-property">
232232
Text Decoration Line Continuity: the 'text-decoration-skip' property</h3>
233233
234-
This specification extends the 'text-decoration-skip' property
235-
present in level 3
236-
by adding the ''trailing-spaces'' value.
237-
238-
<pre class="propdef">
239-
Name: text-decoration-skip
240-
Value: ''none'' | [ ''objects'' || [ ''spaces'' | [ ''leading-spaces'' || ''trailing-spaces'' ] ] || ''ink'' || ''edges'' || ''box-decoration'' ]
241-
Initial: objects leading-spaces trailing-spaces
242-
Applies to: all elements
243-
Inherited: yes
244-
Percentages: N/A
245-
Media: visual
246-
Computed value: as specified
247-
Animatable: no
248-
</pre>
249-
250-
Note: The initial value is different
251-
from the one specified at the previous level,
252-
which was only ''text-decoration-skip: objects''.
253-
254-
Issue: The initial value is quite verbose,
255-
which makes it inconvenient to set the property
256-
to the initial value plus something else.
257-
We should make this easier to specify.
258-
259-
Issue: Add final level 3 content
260-
261-
<dl dfn-type=value dfn-for=text-decoration-skip>
262-
<dt><dfn>none</dfn></dt>
263-
<dt><dfn>objects</dfn></dt>
264-
<dt><dfn>spaces</dfn></dt>
265-
<dt><dfn>ink</dfn></dt>
266-
<dt><dfn>edges</dfn></dt>
267-
<dt><dfn>box-decoration</dfn>
268-
<dd>
269-
270-
Issue: Add final level 3 content
271-
<dt><dfn>leading-spaces</dfn></dt>
272-
<dd>Skip all spacing,
273-
i.e. all <i>characters</i> with the Unicode White_Space property [[UAX44]]
274-
and all <a href="https://www.w3.org/TR/css3-text/#word-separator">word separators</a>
275-
plus any adjacent 'letter-spacing' or 'word-spacing',
276-
when located at the start of the line.
277-
<dt><dfn>trailing-spaces</dfn></dt>
278-
<dd>Skip all spacing,
279-
i.e. all <i>characters</i> with the Unicode White_Space property [[UAX44]]
280-
and all <a href="https://www.w3.org/TR/css3-text/#word-separator">word separators</a>
281-
plus any adjacent 'letter-spacing' or 'word-spacing',
282-
when located at the end of the line.
283-
</dl>
284-
285-
The following addition are made to the default UA stylesheet for HTML:
286-
<pre><code class="lang-css">
287-
ins, del { text-decoration-skip: none; }
288-
</code></pre>
234+
<pre class="propdef">
235+
Name: text-decoration-skip
236+
Value: ''none'' | [ ''objects'' || [ ''spaces'' | [ ''leading-spaces'' || ''trailing-spaces'' ] ] || ''ink'' || ''edges'' || ''box-decoration'' ]
237+
Initial: objects leading-spaces trailing-spaces
238+
Applies to: all elements
239+
Inherited: yes
240+
Percentages: N/A
241+
Media: visual
242+
Computed value: as specified
243+
Animatable: no
244+
</pre>
245+
246+
Issue: The initial value is quite verbose,
247+
which makes it inconvenient to set the property
248+
to the initial value plus something else.
249+
We should make this easier to specify.
250+
251+
This property specifies what parts of the element's content
252+
any text decoration affecting the element must skip over. It
253+
controls all text decoration lines drawn by the element
254+
and also any text decoration lines drawn by its ancestors.
255+
Values have the following meanings:</p>
256+
257+
<dl>
258+
<dt><dfn value for="text-decoration-skip">none</dfn></dt>
259+
<dd>
260+
Skip nothing: text-decoration is drawn for all text content
261+
and across atomic inline-level boxes.</dd>
262+
263+
<dt><dfn value for="text-decoration-skip">objects</dfn></dt>
264+
<dd>
265+
Skip this element (its entire margin box) if it is an atomic inline
266+
(such as an image or inline-block).
267+
268+
<dt><dfn value for="text-decoration-skip">spaces</dfn></dt>
269+
<dd>
270+
Skip all spacing, i.e. all <i>characters</i> with the Unicode White_Space property [[UAX44]]
271+
and all <a href="https://www.w3.org/TR/css3-text/#word-separator">word separators</a>,
272+
plus any adjacent 'letter-spacing' or 'word-spacing'.
273+
274+
<dt><dfn value for="text-decoration-skip">ink</dfn></dt>
275+
<dd>
276+
Skip over where glyphs are drawn:
277+
interrupt the decoration line to let the shape of the text show through
278+
where the text decoration would otherwise cross over a glyph.
279+
The UA must also skip a small distance to either side of the glyph outline.
280+
281+
<div class="figure">
282+
<p><img title="text-decoration-skip: ink"
283+
alt="An alphabetic underline through Myanmar text skips around descenders and the vertical strokes of combining characters that drop below the alphabetic baseline."
284+
src="decoration-skip-ink.png"
285+
>
286+
<p class="caption">''text-decoration-skip: ink''</p>
287+
</div>
288+
289+
This value only applies to overlines and underlines;
290+
line-throughs are unaffected.
291+
292+
<dt><dfn value for="text-decoration-skip">edges</dfn></dt>
293+
<dd>
294+
The UA should place the start and end of the line inwards slightly
295+
(e.g. by half a line thickness)
296+
from the content edge of the <i>decorating box</i> so that,
297+
e.g. two underlined elements side-by-side do not appear to have a single underline.
298+
(This is important in Chinese, where underlining is a form of punctuation.)
299+
300+
<div class="figure">
301+
<p><img title="text-decoration-skip: edges"
302+
alt="An underline below a series of Chinese characters has a gap between two adjacent underlining elements."
303+
src="decoration-skip-edges.png"
304+
>
305+
<p class="caption">''text-decoration-skip: edges'' for <code>&lt;u>石井&lt;/u>&lt;u>艾俐俐&lt;/u></code>
306+
</p>
307+
</div>
308+
309+
<dt><dfn value for="text-decoration-skip">box-decoration</dfn>
310+
<dd>
311+
Skip over the box's margin, border, and padding areas.
312+
Note that this only has an effect on decorations imposed by an ancestor;
313+
a <i>decorating box</i> never draws over its own box decoration.
314+
315+
<dt><dfn>leading-spaces</dfn></dt>
316+
<dd>
317+
Skip all spacing,
318+
i.e. all <i>characters</i> with the Unicode White_Space property [[UAX44]]
319+
and all <a href="https://www.w3.org/TR/css3-text/#word-separator">word separators</a>
320+
plus any adjacent 'letter-spacing' or 'word-spacing',
321+
when located at the start of the line.
322+
323+
<dt><dfn>trailing-spaces</dfn></dt>
324+
<dd>
325+
Skip all spacing,
326+
i.e. all <i>characters</i> with the Unicode White_Space property [[UAX44]]
327+
and all <a href="https://www.w3.org/TR/css3-text/#word-separator">word separators</a>
328+
plus any adjacent 'letter-spacing' or 'word-spacing',
329+
when located at the end of the line.
330+
</dl>
331+
332+
<p class="note">Note that this property inherits and that descendant
333+
elements can have a different setting.</p>
334+
335+
The following addition is made to the default UA stylesheet for HTML:
336+
<pre><code class="lang-css">
337+
ins, del { text-decoration-skip: none; }
338+
</code></pre>
289339

290340
<h2 id=temp>Rescued L3 Brainstorming: Ignore For Now</h2>
291341

‎css-text-decor/Overview.bs

Lines changed: 25 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -100,13 +100,31 @@ Line Decoration: Underline, Overline, and Strike-Through</h2>
100100
although the decoration is <em>applied</em> to such boxes.
101101

102102
<p>
103-
By default underlines, overlines, and line-throughs are applied only to non-replaced inline boxes,
103+
Underlines, overlines, and line-throughs are applied only to non-replaced inline boxes,
104104
and are drawn across all text (including white space, letter spacing, and word spacing).
105-
Atomic inlines, such as images, are not decorated.
106-
The 'text-decoration-skip' property can be used to modify this behavior,
107-
for example allowing atomic inlines to be underlined
108-
or requiring that white space be skipped.
109-
Margins, borders, and padding of the <i>decorating box</i> are always skipped.
105+
Atomic inlines, such as images and inline blocks, are not decorated.
106+
Margins, borders, and padding of the <i>decorating box</i> are always skipped,
107+
however the margins, border, and padding of descendant inline boxes are not.
108+
109+
<p class='note'>
110+
Note that CSS 2.1 required skipping margins, borders, and padding always.
111+
In this level, by default only the margins, borders, and padding of the <i>decorating box</i> are skipped.
112+
In the future CSS2.1 may be updated to match this new default.
113+
114+
<p>
115+
UAs <em>may</em> interrupt underlines and overlines where the line would cross glyph ink
116+
and to some distance to either side of the glyph outline;
117+
this behavior is not controllable in this level,
118+
but will be further defined in Level 4.
119+
Line-throughs must remain continuous, however.
120+
121+
<div class="figure">
122+
<p><img title="text-decoration-skip: ink"
123+
alt="An alphabetic underline through Myanmar text skips around descenders and the vertical strokes of combining characters that drop below the alphabetic baseline."
124+
src="decoration-skip-ink.png"
125+
>
126+
<p class="caption">''text-decoration-skip: ink''</p>
127+
</div>
110128

111129
<p>Relatively positioning a descendant moves all text decorations
112130
applied to it along with the descendant's text; it does not affect
@@ -252,85 +270,6 @@ Text Decoration Shorthand: the 'text-decoration' property</h3>
252270
<!-- -->}</code></pre>
253271
</div>
254272

255-
<h3 id="text-decoration-skip-property">
256-
Text Decoration Line Continuity: the 'text-decoration-skip' property</h3>
257-
258-
<pre class="propdef">
259-
Name: text-decoration-skip
260-
Value: none | [ objects || spaces || ink || edges || box-decoration ]
261-
Initial: objects
262-
Inherited: yes
263-
</pre>
264-
265-
Note: Level 4 of this specification
266-
defines additional values (''leading-spaces'' and ''trailing-spaces''),
267-
and uses them in the initial value of this property,
268-
meaning that by default they are skipped.
269-
At the time of writing,
270-
this is experimental and may still change,
271-
which is why it has not been incorporated into this level.
272-
273-
<p>This property specifies what parts of the element's content
274-
any text decoration affecting the element must skip over. It
275-
controls all text decoration lines drawn by the element
276-
and also any text decoration lines drawn by its ancestors.
277-
Values have the following meanings:</p>
278-
279-
<dl>
280-
<dt><dfn value for="text-decoration-skip">none</dfn></dt>
281-
<dd>Skip nothing: text-decoration is drawn for all text content
282-
and across atomic inline-level boxes.</dd>
283-
<dt><dfn value for="text-decoration-skip">objects</dfn></dt>
284-
<dd>Skip this element (its entire margin box) if it is an atomic inline
285-
(such as an image or inline-block).
286-
<dt><dfn value for="text-decoration-skip">spaces</dfn></dt>
287-
<dd>Skip all spacing, i.e. all <i>characters</i> with the Unicode White_Space property [[UAX44]]
288-
and all <a href="https://www.w3.org/TR/css3-text/#word-separator">word separators</a>,
289-
plus any adjacent 'letter-spacing' or 'word-spacing'.
290-
<dt><dfn value for="text-decoration-skip">ink</dfn></dt>
291-
<dd>Skip over where glyphs are drawn:
292-
interrupt the decoration line to let the shape of the text show through
293-
where the text decoration would otherwise cross over a glyph.
294-
The UA must also skip a small distance to either side of the glyph outline.
295-
<div class="figure">
296-
<p><img title="text-decoration-skip: ink"
297-
alt="An alphabetic underline through Myanmar text skips around descenders and the vertical strokes of combining characters that drop below the alphabetic baseline."
298-
src="decoration-skip-ink.png"
299-
>
300-
<p class="caption">''text-decoration-skip: ink''</p>
301-
</div>
302-
This value only applies to overlines and underlines;
303-
line-throughs are unaffected.
304-
<dt><dfn value for="text-decoration-skip">edges</dfn></dt>
305-
<dd>The UA should place the start and end of the line inwards slightly
306-
(e.g. by half a line thickness)
307-
from the content edge of the <i>decorating box</i> so that,
308-
e.g. two underlined elements side-by-side do not appear to have a single underline.
309-
(This is important in Chinese, where underlining is a form of punctuation.)
310-
<div class="figure">
311-
<p><img title="text-decoration-skip: edges"
312-
alt="An underline below a series of Chinese characters has a gap between two adjacent underlining elements."
313-
src="decoration-skip-edges.png"
314-
>
315-
<p class="caption">''text-decoration-skip: edges'' for <code>&lt;u>石井&lt;/u>&lt;u>艾俐俐&lt;/u></code>
316-
</p>
317-
</div>
318-
319-
<dt><dfn value for="text-decoration-skip">box-decoration</dfn>
320-
<dd>
321-
Skip over the box's margin, border, and padding areas.
322-
Note that this only has an effect on decorations imposed by an ancestor;
323-
a <i>decorating box</i> never draws over its own box decoration.
324-
</dl>
325-
326-
<p class="note">Note that this property inherits and that descendant
327-
elements can have a different setting.</p>
328-
329-
<p class='note'>
330-
Note that CSS 2.1 required skipping margins, borders, and padding always.
331-
In this level, by default only the margins, borders, and padding of the <i>decorating box</i> are skipped.
332-
In the future CSS2.1 may be updated to match this new default.
333-
334273
<h3 id="text-underline-position-property">
335274
Text Underline Position: the 'text-underline-position' property</h3>
336275

@@ -608,7 +547,7 @@ Determining the Position and Thickness of Line Decorations</h3>
608547
or appropriate alphabetic underline position)
609548
from the font wherever appropriate.
610549

611-
<p class="note">Typically, OpenType font metrics give the position of an ''alphabetic'' underline;
550+
<p class="note">Typically, OpenType font metrics give the position of an ''text-underline-position/alphabetic'' underline;
612551
in some cases (especially in CJK fonts), it gives the position of a ''under left'' underline.
613552
(In this case, the font's underline metrics typically touch the bottom edge of the em box).
614553
The UA may but is not required to correct for incorrect font metrics.

0 commit comments

Comments
 (0)