Skip to content

Commit

Permalink
[css-text-decor] Move text-decoration-skip to L4 per WG resolutions. h…
Browse files Browse the repository at this point in the history 
…ttps://lists.w3.org/Archives/Public/www-style/2017Feb/0049.html https://lists.w3.org/Archives/Public/www-style/2017Feb/0069.html
  • Loading branch information
@fantasai
fantasai committed Apr 6, 2017
1 parent 3b61642 commit 07dcaff
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 141 deletions.
160 changes: 105 additions & 55 deletions css-text-decor-4/Overview.bs
View file
Expand Up @@ -231,61 +231,111 @@ Text Underline Offset: the 'text-underline-offset' property</h3>
<h3 id="text-decoration-skip-property">
Text Decoration Line Continuity: the 'text-decoration-skip' property</h3>

This specification extends the 'text-decoration-skip' property
present in level 3
by adding the ''trailing-spaces'' value.

<pre class="propdef">
Name: text-decoration-skip
Value: ''none'' | [ ''objects'' || [ ''spaces'' | [ ''leading-spaces'' || ''trailing-spaces'' ] ] || ''ink'' || ''edges'' || ''box-decoration'' ]
Initial: objects leading-spaces trailing-spaces
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified
Animatable: no
</pre>

Note: The initial value is different
from the one specified at the previous level,
which was only ''text-decoration-skip: objects''.

Issue: The initial value is quite verbose,
which makes it inconvenient to set the property
to the initial value plus something else.
We should make this easier to specify.

Issue: Add final level 3 content

<dl dfn-type=value dfn-for=text-decoration-skip>
<dt><dfn>none</dfn></dt>
<dt><dfn>objects</dfn></dt>
<dt><dfn>spaces</dfn></dt>
<dt><dfn>ink</dfn></dt>
<dt><dfn>edges</dfn></dt>
<dt><dfn>box-decoration</dfn>
<dd>

Issue: Add final level 3 content
<dt><dfn>leading-spaces</dfn></dt>
<dd>Skip all spacing,
i.e. all <i>characters</i> with the Unicode White_Space property [[UAX44]]
and all <a href="https://www.w3.org/TR/css3-text/#word-separator">word separators</a>
plus any adjacent 'letter-spacing' or 'word-spacing',
when located at the start of the line.
<dt><dfn>trailing-spaces</dfn></dt>
<dd>Skip all spacing,
i.e. all <i>characters</i> with the Unicode White_Space property [[UAX44]]
and all <a href="https://www.w3.org/TR/css3-text/#word-separator">word separators</a>
plus any adjacent 'letter-spacing' or 'word-spacing',
when located at the end of the line.
</dl>

The following addition are made to the default UA stylesheet for HTML:
<pre><code class="lang-css">
ins, del { text-decoration-skip: none; }
</code></pre>
<pre class="propdef">
Name: text-decoration-skip
Value: ''none'' | [ ''objects'' || [ ''spaces'' | [ ''leading-spaces'' || ''trailing-spaces'' ] ] || ''ink'' || ''edges'' || ''box-decoration'' ]
Initial: objects leading-spaces trailing-spaces
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified
Animatable: no
</pre>

Issue: The initial value is quite verbose,
which makes it inconvenient to set the property
to the initial value plus something else.
We should make this easier to specify.

This property specifies what parts of the element's content
any text decoration affecting the element must skip over. It
controls all text decoration lines drawn by the element
and also any text decoration lines drawn by its ancestors.
Values have the following meanings:</p>

<dl>
<dt><dfn value for="text-decoration-skip">none</dfn></dt>
<dd>
Skip nothing: text-decoration is drawn for all text content
and across atomic inline-level boxes.</dd>

<dt><dfn value for="text-decoration-skip">objects</dfn></dt>
<dd>
Skip this element (its entire margin box) if it is an atomic inline
(such as an image or inline-block).

<dt><dfn value for="text-decoration-skip">spaces</dfn></dt>
<dd>
Skip all spacing, i.e. all <i>characters</i> with the Unicode White_Space property [[UAX44]]
and all <a href="https://www.w3.org/TR/css3-text/#word-separator">word separators</a>,
plus any adjacent 'letter-spacing' or 'word-spacing'.

<dt><dfn value for="text-decoration-skip">ink</dfn></dt>
<dd>
Skip over where glyphs are drawn:
interrupt the decoration line to let the shape of the text show through
where the text decoration would otherwise cross over a glyph.
The UA must also skip a small distance to either side of the glyph outline.

<div class="figure">
<p><img title="text-decoration-skip: ink"
alt="An alphabetic underline through Myanmar text skips around descenders and the vertical strokes of combining characters that drop below the alphabetic baseline."
src="decoration-skip-ink.png"
>
<p class="caption">''text-decoration-skip: ink''</p>
</div>

This value only applies to overlines and underlines;
line-throughs are unaffected.

<dt><dfn value for="text-decoration-skip">edges</dfn></dt>
<dd>
The UA should place the start and end of the line inwards slightly
(e.g. by half a line thickness)
from the content edge of the <i>decorating box</i> so that,
e.g. two underlined elements side-by-side do not appear to have a single underline.
(This is important in Chinese, where underlining is a form of punctuation.)

<div class="figure">
<p><img title="text-decoration-skip: edges"
alt="An underline below a series of Chinese characters has a gap between two adjacent underlining elements."
src="decoration-skip-edges.png"
>
<p class="caption">''text-decoration-skip: edges'' for <code>&lt;u>石井&lt;/u>&lt;u>艾俐俐&lt;/u></code>
</p>
</div>

<dt><dfn value for="text-decoration-skip">box-decoration</dfn>
<dd>
Skip over the box's margin, border, and padding areas.
Note that this only has an effect on decorations imposed by an ancestor;
a <i>decorating box</i> never draws over its own box decoration.

<dt><dfn>leading-spaces</dfn></dt>
<dd>
Skip all spacing,
i.e. all <i>characters</i> with the Unicode White_Space property [[UAX44]]
and all <a href="https://www.w3.org/TR/css3-text/#word-separator">word separators</a>
plus any adjacent 'letter-spacing' or 'word-spacing',
when located at the start of the line.

<dt><dfn>trailing-spaces</dfn></dt>
<dd>
Skip all spacing,
i.e. all <i>characters</i> with the Unicode White_Space property [[UAX44]]
and all <a href="https://www.w3.org/TR/css3-text/#word-separator">word separators</a>
plus any adjacent 'letter-spacing' or 'word-spacing',
when located at the end of the line.
</dl>

<p class="note">Note that this property inherits and that descendant
elements can have a different setting.</p>

The following addition is made to the default UA stylesheet for HTML:
<pre><code class="lang-css">
ins, del { text-decoration-skip: none; }
</code></pre>

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

Expand Down
111 changes: 25 additions & 86 deletions css-text-decor/Overview.bs
View file
Expand Up @@ -100,13 +100,31 @@ Line Decoration: Underline, Overline, and Strike-Through</h2>
although the decoration is <em>applied</em> to such boxes.

<p>
By default underlines, overlines, and line-throughs are applied only to non-replaced inline boxes,
Underlines, overlines, and line-throughs are applied only to non-replaced inline boxes,
and are drawn across all text (including white space, letter spacing, and word spacing).
Atomic inlines, such as images, are not decorated.
The 'text-decoration-skip' property can be used to modify this behavior,
for example allowing atomic inlines to be underlined
or requiring that white space be skipped.
Margins, borders, and padding of the <i>decorating box</i> are always skipped.
Atomic inlines, such as images and inline blocks, are not decorated.
Margins, borders, and padding of the <i>decorating box</i> are always skipped,
however the margins, border, and padding of descendant inline boxes are not.

<p class='note'>
Note that CSS 2.1 required skipping margins, borders, and padding always.
In this level, by default only the margins, borders, and padding of the <i>decorating box</i> are skipped.
In the future CSS2.1 may be updated to match this new default.

<p>
UAs <em>may</em> interrupt underlines and overlines where the line would cross glyph ink
and to some distance to either side of the glyph outline;
this behavior is not controllable in this level,
but will be further defined in Level 4.
Line-throughs must remain continuous, however.

<div class="figure">
<p><img title="text-decoration-skip: ink"
alt="An alphabetic underline through Myanmar text skips around descenders and the vertical strokes of combining characters that drop below the alphabetic baseline."
src="decoration-skip-ink.png"
>
<p class="caption">''text-decoration-skip: ink''</p>
</div>

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

<h3 id="text-decoration-skip-property">
Text Decoration Line Continuity: the 'text-decoration-skip' property</h3>

<pre class="propdef">
Name: text-decoration-skip
Value: none | [ objects || spaces || ink || edges || box-decoration ]
Initial: objects
Inherited: yes
</pre>

Note: Level 4 of this specification
defines additional values (''leading-spaces'' and ''trailing-spaces''),
and uses them in the initial value of this property,
meaning that by default they are skipped.
At the time of writing,
this is experimental and may still change,
which is why it has not been incorporated into this level.

<p>This property specifies what parts of the element's content
any text decoration affecting the element must skip over. It
controls all text decoration lines drawn by the element
and also any text decoration lines drawn by its ancestors.
Values have the following meanings:</p>

<dl>
<dt><dfn value for="text-decoration-skip">none</dfn></dt>
<dd>Skip nothing: text-decoration is drawn for all text content
and across atomic inline-level boxes.</dd>
<dt><dfn value for="text-decoration-skip">objects</dfn></dt>
<dd>Skip this element (its entire margin box) if it is an atomic inline
(such as an image or inline-block).
<dt><dfn value for="text-decoration-skip">spaces</dfn></dt>
<dd>Skip all spacing, i.e. all <i>characters</i> with the Unicode White_Space property [[UAX44]]
and all <a href="https://www.w3.org/TR/css3-text/#word-separator">word separators</a>,
plus any adjacent 'letter-spacing' or 'word-spacing'.
<dt><dfn value for="text-decoration-skip">ink</dfn></dt>
<dd>Skip over where glyphs are drawn:
interrupt the decoration line to let the shape of the text show through
where the text decoration would otherwise cross over a glyph.
The UA must also skip a small distance to either side of the glyph outline.
<div class="figure">
<p><img title="text-decoration-skip: ink"
alt="An alphabetic underline through Myanmar text skips around descenders and the vertical strokes of combining characters that drop below the alphabetic baseline."
src="decoration-skip-ink.png"
>
<p class="caption">''text-decoration-skip: ink''</p>
</div>
This value only applies to overlines and underlines;
line-throughs are unaffected.
<dt><dfn value for="text-decoration-skip">edges</dfn></dt>
<dd>The UA should place the start and end of the line inwards slightly
(e.g. by half a line thickness)
from the content edge of the <i>decorating box</i> so that,
e.g. two underlined elements side-by-side do not appear to have a single underline.
(This is important in Chinese, where underlining is a form of punctuation.)
<div class="figure">
<p><img title="text-decoration-skip: edges"
alt="An underline below a series of Chinese characters has a gap between two adjacent underlining elements."
src="decoration-skip-edges.png"
>
<p class="caption">''text-decoration-skip: edges'' for <code>&lt;u>石井&lt;/u>&lt;u>艾俐俐&lt;/u></code>
</p>
</div>

<dt><dfn value for="text-decoration-skip">box-decoration</dfn>
<dd>
Skip over the box's margin, border, and padding areas.
Note that this only has an effect on decorations imposed by an ancestor;
a <i>decorating box</i> never draws over its own box decoration.
</dl>

<p class="note">Note that this property inherits and that descendant
elements can have a different setting.</p>

<p class='note'>
Note that CSS 2.1 required skipping margins, borders, and padding always.
In this level, by default only the margins, borders, and padding of the <i>decorating box</i> are skipped.
In the future CSS2.1 may be updated to match this new default.

<h3 id="text-underline-position-property">
Text Underline Position: the 'text-underline-position' property</h3>

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

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

0 comments on commit 07dcaff

Please sign in to comment.