From 81dc33345105264b8794587f63e600be14750bd5 Mon Sep 17 00:00:00 2001 From: fantasai Date: Wed, 24 Aug 2022 17:22:35 -0400 Subject: [PATCH] [css-text-decor-4] Replace text-decoration-skip-edges with text-decoration-trim. #4557 --- css-text-decor-4/Overview.bs | 119 ++++++++++++++++++++--------------- 1 file changed, 68 insertions(+), 51 deletions(-) diff --git a/css-text-decor-4/Overview.bs b/css-text-decor-4/Overview.bs index ecb618d1f761..ccfe536a622b 100644 --- a/css-text-decor-4/Overview.bs +++ b/css-text-decor-4/Overview.bs @@ -843,6 +843,74 @@ Text Decoration Line Uniformity --> + +

+Text Decoration Line Trimming and Extension: the 'text-decoration-trim' property

+ + 
+	Name: text-decoration-trim
+	Value: <>{1,2} | auto
+	Initial: 0
+	Applies to: all elements
+	Inherited: no
+	Percentages: N/A
+	Computed value: specified keyword or absolute length
+	Animation type: by computed value
+
+ + 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. + 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: + +
+
<>
+
+ Inset (positive) or outset (negative) + the start/end of the affected line decorations. + +
+

The following example offsets an extra thick underline + 1em endwards with respect to the text + 

+					h1 {
+						text-decoration: underline 0.3em rgba(36,148,187,0.25);
+						text-decoration-trim: 1em -1em;
+					}
+
+
+ +
auto
+
+ The UA chooses a trim 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.) + +
+

An underline below a series of Chinese characters has a gap between two adjacent underlining elements. +

''text-decoration-skip-inset: auto'' for <u>石井</u><u>艾俐俐</u> +

+
+
+ + Text decoration trimming 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 + and the [=end=] edge of the last fragment, + and may accumulate to other fragments if the amount of the trim + 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. + +

Text Decoration Line Continuity: the 'text-decoration-skip' shorthand and its sub-properties

@@ -971,57 +1039,6 @@ Skipping Spaces: the 'text-decoration-skip-box' property a decorating box never draws over its own box decoration. -

-Inset Edges: the 'text-decoration-skip-inset' property

- - 
-	Name: text-decoration-skip-inset
-	Value: none | auto
-	Initial: none
-	Applies to: all elements
-	Inherited: yes
-	Percentages: N/A
-	Computed value: specified keyword(s)
-	Animation type: discrete
-
- - Issue: The CSSWG resolved to split 'text-decoration-skip' into sub-properties, - but this value set has not yet been vetted by the CSSWG. - - This property specifies what parts of the element's box area - any text decoration affecting the element must skip over. - It controls all text decoration lines drawn by the element, - but not any text decoration lines drawn by its ancestors. - Values have the following meanings:

- -
-
none
-
- Skip nothing: text-decoration is drawn from box edge to box edge. - -
auto
-
- The UA must place the start and end of the line inwards slightly - from the content edge of the decorating box so that, - e.g. two underlined elements side-by-side do not appear to have a single underline. - The size of the inset is up to the user agent - (e.g. half a line thickness) - but must not be zero. - (This is important in Chinese, where underlining is a form of punctuation.) - -
-

An underline below a series of Chinese characters has a gap between two adjacent underlining elements. -

''text-decoration-skip-inset: auto'' for <u>石井</u><u>艾俐俐</u> -

-
-
- - ISSUE: This might want to be a standalone property rather than part of the 'text-decoration-skip' set. - See also Issue 4557, - about controlling the line length explicitly. -

Skipping Spaces: the 'text-decoration-skip-spaces' property