Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 20 additions & 19 deletions css-text-decor-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -859,11 +859,11 @@ Text Decoration Line Uniformity</h3>
</div>


<h4 id="text-decoration-skip-inset-property">
Text Decoration Line Trimming and Extension: the 'text-decoration-trim' property</h4>
<h4 id="text-decoration-inset-property">
Trimming, Expanding, and Shifting Text Decoration Lines: the 'text-decoration-inset' property</h4>

<pre class="propdef">
Name: text-decoration-trim
Name: text-decoration-inset
Value: <<length>>{1,2} | auto
Initial: 0
Applies to: all elements
Expand All @@ -873,59 +873,61 @@ Text Decoration Line Trimming and Extension: the 'text-decoration-trim' property
Animation type: by computed value
</pre>

This property adjusts the start and end points of line decorations,
allowing the author to shorten, lengthen, or shift the decoration
with respect to the text.
This property adjusts the start and end endpoints of line decorations.
Positive values move an endpoint inward, trimming the decoration;
negative values move it outward, extending the decoration.

It controls all text decoration lines drawn by this [=decorating box=],
but not any text decoration lines drawn by its ancestors.
If two component values are given,
the first applies to the [=start=] and the second to the [=end=].
Values have the following meanings:

<dl dfn-type=value dfn-for=text-decoration-skip-inset>
<dl dfn-type=value dfn-for=text-decoration-inset>
<dt><dfn><<length>></dfn></dt>
<dd>
Inset (positive) or outset (negative)
the start/end of the affected line decorations.
Adjusts the start or end endpoint of the affected line decorations.
Positive values move the endpoint inward (trimming),
negative values move it outward (extending).

<div class="example">
<p>The following example offsets an extra thick underline
1em endwards with respect to the text
<pre>
h1 {
text-decoration: underline 0.3em rgba(36,148,187,0.25);
text-decoration-trim: 1em -1em;
text-decoration-inset: 1em -1em;
}
</pre>
</div>

<dt><dfn>auto</dfn></dt>
<dd>
The UA chooses a trim amount that ensures that
The UA chooses an inset amount that ensures that
if two identical underlined elements appear side-by-side
they 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-inset: auto"
<p><img title="text-decoration-inset: auto"
alt="An underline below a series of Chinese characters has a gap between two adjacent underlining elements."
src="images/decoration-skip-inset.png"
width="223"
height="77">
<p class="caption">''text-decoration-skip-inset: auto'' for <code>&lt;u>石井&lt;/u>&lt;u>艾俐俐&lt;/u></code>
<p class="caption">''text-decoration-inset: auto'' for <code>&lt;u>石井&lt;/u>&lt;u>艾俐俐&lt;/u></code>
</p>
</div>
</dl>

Text decoration trimming is subject to 'box-decoration-break':
The adjustment of the text decoration's endpoints is subject to 'box-decoration-break':
* for ''box-decoration-break/slice'' (the default)
trimming is only applied to the [=start=] edge of the first fragment
endpoint adjustment is only applied to the [=start=] edge of the first fragment
and the [=end=] edge of the last fragment,
and may accumulate to other fragments if the amount of the trim
and may accumulate to other fragments if the amount of the inset
is more than the length of the fragment.
<!-- Percentages are relative to the total length of the [=decorating box=]. -->
* for ''box-decoration-break/clone''
trimming is applied to each fragment independently.
endpoint adjustment is applied to each fragment independently.
<!-- and percentages are relative to the length of that fragment individually -->

<h3 id="text-decoration-skipping">
Expand All @@ -952,7 +954,6 @@ Text Decoration Line Continuity: the 'text-decoration-skip' shorthand and its su
The 'text-decoration-skip' property and its sub-properties
('text-decoration-skip-self',
'text-decoration-skip-box',
'text-decoration-skip-inset',
'text-decoration-skip-spaces',
'text-decoration-skip-ink')
control interruptions in line decorations
Expand Down Expand Up @@ -2185,7 +2186,7 @@ Changes since the 4 May 2022 Working Draft</h3>
<ul>
<li>Redesigned 'text-decoration-skip-self'.
(<a href="https://github.com/w3c/csswg-drafts/issues/2885">Issue 2885</a>)
<li>Replaced <css>text-decoration-skip-edges</css> with 'text-decoration-trim'.
<li>Replaced <css>text-decoration-skip-edges</css> with 'text-decoration-inset'.
(<a href="https://github.com/w3c/csswg-drafts/issues/4557">Issue 4557</a>)
<li>Redefined [=spacers=] for 'text-decoration-skip-spaces' to reference [=Unicode General Category=] <code>Zs</code>
and to only additionally include word separators when skipping all spaces.
Expand Down