Skip to content

[css-text-decor-4] Renamed text-decoration-trim to text-decoration-inset #13039

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+13 −14
Open

[css-text-decor-4] Renamed text-decoration-trim to text-decoration-inset #13039

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
52c94b2
[css-text-decor-4] Renamed text-decoration-trim to text-decoration-inset
SebastianZ Oct 29, 2025
86e095c
[css-text-decor-4] Removed mentions of text-decoration-skip-inset
SebastianZ Oct 29, 2025
2dc5f21
[css-text-decor-4][editorial] Changed wording regarding "trimming" of…
SebastianZ Oct 29, 2025
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
27 changes: 13 additions & 14 deletions css-text-decor-4/Overview.bs
View file
Open in desktop
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">
Adjusting Text Decoration Line Lengths: 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 @@ -882,7 +882,7 @@ Text Decoration Line Trimming and Extension: the 'text-decoration-trim' property
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)
Expand All @@ -894,38 +894,38 @@ Text Decoration Line Trimming and Extension: the 'text-decoration-trim' property
<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 length 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
length 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.
length 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 +952,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 +2184,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