Title: CSS Text Decoration Module Level 4
Shortname: css-text-decor
Level: 4
Status: ED
Work Status: Exploring
Group: csswg
ED: https://drafts.csswg.org/css-text-decor-4/
TR: https://www.w3.org/TR/css-text-decor-4/
Previous Version: https://www.w3.org/TR/2020/WD-css-text-decor-4-20200506/
Issue Tracking: Tracker http://www.w3.org/Style/CSS/Tracker/products/10
Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Koji Ishii, Google, kojiishi@gmail.com, w3cid 45369
Abstract: This module contains the features of CSS relating to text decoration, such as underlines, text shadows, and emphasis marks.

spec:css-text-3; type:dfn; text:character
spec:fill-stroke-3; type:property;
    text: fill
    text: stroke

Introduction

Module Interactions

Value Definitions

Terminology

Line Decoration: Underline, Overline, and Strike-Through

Note that text decorations are not propagated to any out-of-flow descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables. They are also not propagated to inline children of inline boxes, although the decoration is applied to such boxes. Underlines, overlines, and line-throughs are drawn only for non-replaced inline boxes, and are drawn across all text (including white space, letter spacing, and word spacing) except spacing (white space, letter spacing, and word spacing) at the beginning and end of a line. Atomic inlines, such as images and inline blocks, are not decorated. Margins, borders, and padding of the [=decorating box=] are always skipped, however the margins, border, and padding of descendant inline boxes are not.

Note that CSS 2.1 required skipping margins, borders, and padding always. In Level 3 and beyond, by default only the margins, borders, and padding of the [=decorating box=] are skipped. In the future CSS2.1 may be updated to match this new default. [=Relatively positioning=] a descendant moves all text decorations applied to it along with the descendant's text; it does not affect calculation of the decoration's initial position on that line. The 'visibility' property, 'text-shadow', filters, and other graphical transformations likewise also affect all text decorations applied to that box-- including decorations propagated from an ancestor box-- and do not affect the calculation of their initial positions or thicknesses. (In the case of line decorations drawn over an [=atomic inline=] or across the margins/borders/padding of a [=non-replaced=] [=inline box=], they are analogously associated with the affected atomic inline / non-replaced inline box rather than with the [=decorating box=].)

In the following style sheet and document fragment:

		  blockquote { text-decoration: underline; color: blue; }
		  em { display: block; }
		  cite { color: fuchsia; }
		

		  <blockquote>
		   <p>
		    <span>
		     Help, help!
		     <em> I am under a hat! </em>

		     <cite> —GwieF </cite>
		    </span>
		   </p>
		  </blockquote>
		

...the underlining for the blockquote element is propagated to an anonymous inline box that surrounds the span element, causing the text "Help, help!" to be blue, with the blue underlining from the anonymous inline underneath it, the color being taken from the blockquote element. The <em>text</em> in the em block is also underlined, as it is in an in-flow block to which the underline is propagated. The final line of text is fuchsia, but the underline underneath it is still the blue underline from the anonymous inline element. This diagram shows the boxes involved in the example above. The rounded aqua line represents the anonymous inline element wrapping the inline contents of the paragraph element, the rounded blue line represents the span element, and the orange lines represent the blocks.

In the following style sheet and document fragment:

		  div { color: black; font-size: 48px; text-decoration: underline; text-shadow: blue 0px 50px 0px; }
		  span { font-size: 20px; vertical-align: top; text-shadow: green 0px 100px 0px; }
		

                  <div>Help, help! <span>I am under a hat!</span></div>
		

...the <div> is the [=decorating box=] for its underline (in black), which is rendered uninterrupted through both the <div> and the <span>. Unlike line decorations, however, `text-shadow` is inherited as a property; therefore the green text shadow on the <span> overrides the blue text shadow on the <div>. As a result, when the shadows are painted, the shadow of the <div>’s underline is disjoint across the two elements.

Text Decoration Lines: the 'text-decoration-line' property

	Name: text-decoration-line
	Value: none | [ underline || overline || line-through || blink ] | spelling-error | grammar-error
	Initial: none
	Applies to: all elements
	Inherited: no (but see prose, above)
	Computed value: specified keyword(s)
	Animation type: discrete
	

none

Neither produces nor inhibits text decoration.

underline

Each line of text is underlined.

overline

Each line of text has a line over it (i.e. on the opposite side from an underline).

line-through

Each line of text has a line through the middle.

blink

The text blinks (alternates between visible and invisible). Conforming user agents may simply not blink the text. Note that not blinking the text is one technique to satisfy checkpoint 3.3 of WAI-UAAG. This value is deprecated in favor of Animations [[CSS3-ANIMATIONS]].

spelling-error

This value indicates the type of text decoration used by the user agent to highlight spelling mistakes. Its appearance is UA-defined, and may be platform-dependent. It is often rendered as a red wavy underline.

grammar-error

This value indicates the type of text decoration used by the user agent to highlight grammar mistakes. Its appearance is UA defined, and may be platform-dependent. It is often rendered as a green wavy underline.

Text Decoration Style: the 'text-decoration-style' property

	Name: text-decoration-style
	Value: solid | double | dotted | dashed | wavy
	Initial: solid
	Applies to: all elements
	Inherited: no
	Computed value: specified keyword
	Animation type: discrete
	

Text Decoration Color: the 'text-decoration-color' property

	Name: text-decoration-color
	Value: <>
	Initial: currentcolor
	Applies to: all elements
	Inherited: no
	Computed value: computed color
	Animation type: by computed value type
	

Text Decoration Line Thickness: the 'text-decoration-thickness' property

	Name: text-decoration-thickness
	Value: auto | from-font | <>
	Initial: auto
	Applies to: all elements
	Inherited: no
	Percentages: N/A
	Computed value: as specified, with <> values computed
	Animation type: by computed value
	

auto

The UA chooses an appropriate thickness for text decoration lines; see below.

from-font

If the first available font has metrics indicating a preferred underline width, use that width, otherwise behaves as ''text-decoration-thickness/auto''.

<>

Specifies the thickness of text decoration lines as a fixed length. The UA should round the actual value to the nearest integer device pixel, and ensure it is at least one device pixel. Note: A length will inherit as a fixed value, and will not scale with the font.

<>

Specifies the thickness of text decoration lines as a percentage of ''1em''. The UA should round the actual value to the nearest integer device pixel, and ensure it is at least one device pixel. Note: A percentage will inherit as a relative value, and will therefore scale with changes in the font as it inherits.

Automatic Thickness of Text Decoration Lines

Determining the Position and Thickness of Line Decorations

over lines

Align the line decoration with respect to the highest over EM-box edge of the considered text.

alphabetic underlines

The alphabetic underline position is calculated by taking the ideal offset (from the alphabetic baseline) of each run of considered text, averaging those, and then using the lowest alphabetic baseline to actually position the line. (Alphabetic baselines can differ between ''vertical-align/baseline''-aligned boxes if the dominant baseline is non-alphabetic.) To prevent superscripts and subscripts from throwing this position off-kilter, an inline with a non-initial computed 'vertical-align' is treated as having the ideal underline position of its parent.

non-alphabetic under lines

Position the line decoration with respect to the lowest under EM-box edge of the considered text.

line-throughs

Line-throughs essentially use the same sort of averaging as for alphabetic underlines, but recompute the position when drawing across a descendant with a different computed 'font-size'. (This ensures that the text remains effectively “crossed out” despite any font size changes.) For each run of considered text with the same 'font-size', compute an ideal position averaged from its font metrics. To prevent superscripts and subscripts from throwing this position off-kilter, an inline with a non-initial computed 'vertical-align' is treated as having the ideal underline position of its parent. Position the portion of the line across each decorated fragment at that position.

For simplicity, line-throughs should draw over each element at that element's preferred/averaged position. This can produce some undesirable jumpiness, but there doesn't appear to be any way to avoid that which is correct in all instances, and all attempts are worryingly complex. What position should line-throughs adopt over elements that have a different font-size, but no considered text?

Text Decoration Shorthand: the 'text-decoration' property

	Name: text-decoration
	Value: <<'text-decoration-line'>> || <<'text-decoration-thickness'>> || <<'text-decoration-style'>> || <<'text-decoration-color'>>
	

			:link {
			  color: blue;
			  text-decoration: underline;
			  text-decoration: navy dotted underline; /* Ignored in CSS1/CSS2 UAs */
			}
		

Text Underline Position: the 'text-underline-position' property

	Name: text-underline-position
	Value: auto | [ from-font | under ] || [ left | right ]
	Initial: auto
	Applies to: all elements
	Inherited: yes
	Computed value: specified keyword(s)
	Animation type: discrete
	

			:root:lang(ja), [lang|=ja], :root:lang(ko), [lang|=ko] { text-underline-position: under right; }
			:root:lang(zh), [lang|=zh] { text-underline-position: under left; }
		

auto

The user agent may use any algorithm to determine the underline's position; however it must be placed at or under the alphabetic baseline. Note: It is suggested that the default underline position be close to the alphabetic baseline, unless that would either cross subscripted (or otherwise lowered) text or draw over glyphs from Asian scripts such as Han or Tibetan for which an alphabetic underline is too high: in such cases, shifting the underline lower or aligning to the em box edge as described for ''text-underline-position/under'' may be more appropriate.

A typical “alphabetic” underline is positioned just below the alphabetic baseline

from-font

If the first available font has metrics indicating a preferred underline offset, use that offset, otherwise behaves as ''text-underline-offset/auto''.

under

The underline is positioned [=under=] the element's text content. In this case the underline usually does not cross the descenders. (This is sometimes called “accounting” underline.) This value can be combined with ''text-underline-position/left'' or ''text-underline-position/right'' if a particular side is preferred in vertical typographic modes.

''text-underline-position: under''

Because 'text-underline-position' inherits, and is not reset by the 'text-decoration' shorthand, the following example switches the document to use ''text-underline-position/under'' underlining, which can be more appropriate for writing systems with long, complicated descenders. It is also often useful for mathematical or chemical texts that use many subscripts.

:root { text-underline-position: under; }

Note: The ''text-decoration/under'' value does not guarantee that the underline will not conflict with glyphs, as some fonts have descenders or diacritics that extend below the font’s descent metrics.

left

In vertical typographic modes, the underline is aligned as for ''text-underline-position/under'', except it is always aligned to the left edge of the text. If this causes the underline to be drawn on the "over" side of the text, then an overline also switches sides and is drawn on the "under" side.

right

In vertical typographic modes, the underline is aligned as for ''text-underline-position/under'', except it is always aligned to the right edge of the text. If this causes the underline to be drawn on the "over" side of the text, then an overline also switches sides and is drawn on the "under" side.

''text-underline-position/left''	''text-underline-position/right''

In vertical typographic modes, the 'text-underline-position' values ''text-underline-position/left'' and ''text-underline-position/right'' allow placing the underline on either side of the text. (In horizontal typographic modes, both values are treated as ''text-underline-position/auto''.)

Text Underline Offset: the 'text-underline-offset' property

	Name: text-underline-offset
	Value: auto | <>
	Initial: auto
	Applies to: all elements
	Inherited: yes
	Percentages: N/A
	Computed value: as specified, with <> values computed
	Animation type: by computed value
	

auto

The UA chooses an appropriate offset for underlines. However, this offset must be zero if the computed value of 'text-underline-position' is ''text-underline-position/from-font'' and the UA was able to extract an appropriate metric to use from the font.

<>

Specifies the offset of underlines as a fixed length. Note: A length will inherit as a fixed value, and will not scale with the font.

<>

Specifies the offset of underlines as a percentage of ''1em''. Note: A percentage will inherit as a relative value, and will therefore scale with changes in the font as it inherits.

Underline Offset Origin (Zero Position)

Using Font Metrics for Automatic Positioning

Text Decoration Line Uniformity

vs.

Correct and incorrect rendering of <u>A<sup>B</sup><big>C</big>D</u>

Note, since line decorations can span elements with varying font sizes and vertical alignments, the best position for a line decoration is not necessarily the ideal position dictated by the [=decorating box=]. For example, an overline positioned to a small font will effectively become a line-through if the element contains text in a significantly larger font-size. Even for underlines, if the text is not aligned to the alphabetic baseline (for example, in vertical typesetting styles, text is aligned by its central baseline by default [[CSS-WRITING-MODES-4]]) an underline will cut through descendant text of a larger font-size. UA consideration of descendant content will therefore result in better typography.

Due to the central baseline alignment of vertical text, a left-side underline on small vertical text will cut through the text of a child with a larger font size. The underline is not allowed to be broken, but adjusting its position further to the left properly accommodates all of the underlined text.

Example of underline applied to superscripted text vs. underline applied to text containing a superscript

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
	

<>

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.)

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

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

	Name: text-decoration-skip
	Value: none | auto
	Initial: See individual properties
	Applies to: all elements
	Inherited: yes
	Percentages: N/A
	Computed value: See individual properties
	Animation type: discrete
	

Note that these properties inherit and that descendant elements can have a different setting.

		ins, del { text-decoration-skip: none; }
	

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

	Name: text-decoration-skip-self
	Value: auto | skip-all | [ skip-underline || skip-overline || skip-line-through ] | no-skip
	Initial: auto
	Applies to: all elements
	Inherited: no
	Percentages: N/A
	Computed value: specified keyword(s) except for ''text-decoration-skip-self/skip-all'', see below
	Animation type: discrete
	

auto

Skip this element (its entire margin box) if it is an atomic inline (such as an image or inline-block).

skip-all

Skip this element (its entire margin box) unconditionally. Don't draw across it, don't propagate to it.

skip-underline

Skip this element (its entire margin box) unconditionally when drawing ancestor underlines.

skip-overline

Skip this element (its entire margin box) unconditionally when drawing ancestor overlines.

skip-line-through

Skip this element (its entire margin box) unconditionally when drawing ancestor line-throughs.

no-skip

Line decorations from ancestor [=decorating boxes=] are applied to this box unconditionally: drawn across it as if it were text if it is an [=atomic inline=], or propagated to it according to the usual rules if it is not.

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

	Name: text-decoration-skip-box
	Value: none | all
	Initial: none
	Applies to: all elements
	Inherited: yes
	Percentages: N/A
	Computed value: specified keyword(s)
	Animation type: discrete
	

none

Skip nothing: line decorations from ancestor [=decorating boxes=] are drawn from margin edge to margin edge.

all

When drawing text decoration lines applied to an ancestor [=decorating box=], skip over the box's own margin, border, and padding areas and only draw line decorations within its content area. This value only has an effect for decorations imposed by an ancestor; a decorating box never draws over its own box decoration.

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

	Name: text-decoration-skip-spaces
	Value: none | all | [ start || end ]
	Initial: start end
	Applies to: all elements
	Inherited: yes
	Percentages: N/A
	Computed value: specified keyword(s)
	Animation type: discrete
	

none

[=Spacers=] are not skipped. They are decorated just like any other character.

all

Skip all [=spacers=] and all word separators plus any adjacent 'letter-spacing' or 'word-spacing'.

start

Skip all [=spacers=], plus any adjacent 'letter-spacing' or 'word-spacing', when located at the start of the line.

end

Skip all [=spacers=], plus any adjacent 'letter-spacing' or 'word-spacing', when located at the end of the line.

Skipping Glyphs: the 'text-decoration-skip-ink' property

	Name: text-decoration-skip-ink
	Value: auto | none | all
	Initial: ''auto''
	Applies to: all elements
	Inherited: yes
	Percentages: N/A
	Computed value: specified keyword
	Animation type: discrete
	

Skipping Glyph Ink

auto

UAs may interrupt underlines and overlines where the line would cross glyph ink and to some distance to either side of the glyph outline. UAs should consider the script of the text (see note below) when determining whether to apply ink-skipping behavior to a given range of content.

all

UAs must interrupt underlines and overlines where the line would cross glyph ink and to some distance to either side of the glyph outline.

none

UA must draw continuous underlines and overlines, without interruptions when they cross over a glyph.

Shaping Interruptions

Note, this specification intentionally does not mandate a particular method for “following the shape” of the glyph so that UAs can take appropriate measures to handle aesthetic and performance considerations. For example, a UA could assume square line endings below a certain size threshold for performance reasons; or use trapezoidal endings to approximate curves, especially on thinner line decorations. In terms of aesthetic considerations, the UA might also consider what happens when the glyph boundary intersects only part of the line thickness or is slanted close to the horizontal-- following the curve exactly could result in typographically-awkward wisps of underline. Whether to show the line within enclosed areas of a glyph is yet another consideration.

Hiding the portion of the underline within the bowl gives a cleaner look to the type, while the curved ends of the underline outside it suggest the continuity of the underline through the letter by hugging its outer contour.

Additional Controls for Emphasis Marks

Accent emphasis (shown in blue for clarity) applied to Japanese text

Emphasis Mark Style: the 'text-emphasis-style' property

	Name: text-emphasis-style
	Value: none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <>
	Initial: none
	Applies to: text
	Inherited: yes
	Computed value: the keyword ''text-emphasis-style/none'', a pair of keywords representing the shape and fill, or a string
	Animation type: discrete
	

none

No emphasis marks.

filled

The shape is filled with solid color.

open

The shape is hollow.

dot

Display small circles as marks. The filled dot is U+2022 '•', and the open dot is U+25E6 '◦'.

circle

Display large circles as marks. The filled circle is U+25CF '●', and the open circle is U+25CB '○'.

double-circle

Display double circles as marks. The filled double-circle is U+25C9 '◉', and the open double-circle is U+25CE '◎'.

triangle

Display triangles as marks. The filled triangle is U+25B2 '▲', and the open triangle is U+25B3 '△'.

sesame

Display sesames as marks. The filled sesame is U+FE45 '﹅', and the open sesame is U+FE46 '﹆'.

<>

Display the given string as marks. Authors should not specify more than one [=character=] in <string>. The UA may truncate or ignore strings consisting of more than one grapheme cluster.

• Word separators or other characters that belong to the Unicode separator classes (Z*). (But note that emphasis marks are drawn for a space that combines with any combining characters.)
• Punctuation--specifically, any characters that belong to the Unicode P* general category and do not NFKD normalize [[!UAX15]] to any of the following symbols:

  #	U+0023	NUMBER SIGN
  %	U+0025	PERCENT SIGN
  ‰	U+2030	PER MILLE SIGN
  ‱	U+2031	PER TEN THOUSAND SIGN
  ٪	U+066A	ARABIC PERCENT SIGN
  ؉	U+0609	ARABIC-INDIC PER MILLE SIGN
  ؊	U+060A	ARABIC-INDIC PER TEN THOUSAND SIGN
  &	U+0026	AMPERSAND
  ⁊	U+204A	TIRONIAN SIGN ET
  @	U+0040	COMMERCIAL AT
  §	U+00A7	SECTION SIGN
  ¶	U+00B6	PILCROW SIGN
  ⁋	U+204B	REVERSED PILCROW SIGN
  ⁓	U+2053	SWUNG DASH
  〽	U+303D	PART ALTERNATION MARK

• Characters belonging to the Unicode classes for control codes and unassigned characters (Cc, Cf, Cn).

Emphasis Mark Color: the 'text-emphasis-color' property

	Name: text-emphasis-color
	Value: <>
	Initial: currentcolor
	Applies to: text
	Inherited: yes
	Computed value: computed color
	Animation type: by computed value type
	

Emphasis Mark Shorthand: the 'text-emphasis' property

	Name: text-emphasis
	Value: <<'text-emphasis-style'>> || <<'text-emphasis-color'>>
	

Note that 'text-emphasis-position' is not reset in this shorthand. This is because typically the shape and color vary, but the position is consistent for a particular language throughout the document. Therefore the position should inherit independently.

Emphasis Mark Position: the 'text-emphasis-position' property

	Name: text-emphasis-position
	Value: [ over | under ] && [ right | left ]?
	Initial: over right
	Applies to: text
	Inherited: yes
	Computed value: specified keyword(s)
	Animation type: discrete
	

over

Draw marks over the text in horizontal typographic modes.

under

Draw marks under the text in horizontal typographic modes.

right

Draw marks to the right of the text in vertical typographic modes.

left

Draw marks to the left of the text in vertical typographic modes.

Note, the preferred position of emphasis marks depends on the language. In Japanese for example, the preferred position is ''over right''. In Chinese, on the other hand, the preferred position is ''under right''. The informative table below summarizes the preferred emphasis mark positions for Chinese and Japanese:

Preferred emphasis mark and ruby position

Language	Preferred position		Illustration
	Horizontal	Vertical
Japanese	over	right
Korean
Mongolian
Chinese	under	right

Emphasis marks applied to 4 characters, with ruby also on 2 of them

ruby { text-emphasis: none; }

			em { text-emphasis: dot; } /* Set text-emphasis for <em> elements */
			em rt { display: none; }   /* Hide ruby inside <em> elements */
		

Emphasis Mark Skip: the 'text-emphasis-skip' property

This section is under brainstorming. It's also not yet clear if this property is needed quite yet, despite differences in desired behavior among publications.

	Name: text-emphasis-skip
	Value: spaces || punctuation || symbols || narrow
	Initial: spaces punctuation
	Applies to: text
	Inherited: yes
	Percentages: N/A
	Computed value: specified keyword(s)
	Animation type: discrete
	

spaces

Skip word separators or other characters belonging to the Unicode separator category (Z*). (But note that emphasis marks are drawn for a space that combines with any combining characters.)

punctuation

Skip punctuation. Punctuation in this definition includes characters belonging to the Unicode P* category that are not defined as ''symbols'' (see below).

symbols

Skip symbols. Symbols in this definition includes all typographic character units belonging to the Unicode S* general category as well as any which are NFKD-equivalent [[!UAX15]] to the following characters from the Unicode Po category:

#	U+0023	NUMBER SIGN
%	U+0025	PERCENT SIGN
‰	U+2030	PER MILLE SIGN
‱	U+2031	PER TEN THOUSAND SIGN
٪	U+066A	ARABIC PERCENT SIGN
؉	U+0609	ARABIC-INDIC PER MILLE SIGN
؊	U+060A	ARABIC-INDIC PER TEN THOUSAND SIGN
&	U+0026	AMPERSAND
⁊	U+204A	TIRONIAN SIGN E[[
@	U+0040	COMMERCIAL AT
§	U+00A7	SECTION SIGN
¶	U+00B6	PILCROW SIGN
⁋	U+204B	REVERSED PILCROW SIGN
⁓	U+2053	SWUNG DASH
〽️	U+303D	PART ALTERNATION MARK

narrow

Skip characters where the East_Asian_Width property [[!UAX11]] of the Unicode database [[!UAX44]] is not F (Fullwidth) or W (Wide).

This syntax requires UA to implement drawing marks for spaces. Is there any use case for doing so? If not, should we modify the syntax not to allow drawing marks for spaces? Issue: See also discussion of the initial value.

Text Shadows: the 'text-shadow' property

	Name: text-shadow
	Value: none | <>#
	Initial: none
	Applies to: text
	Inherited: yes
	Computed value: either the keyword ''box-shadow/none'' or
		a list, each item consisting of four absolute lengths
		plus a computed color
		and optionally also an ''text-shadow/inset'' keyword
	Animation type: as shadow list
	

Painting Text Decorations

Painting Order of Text Decorations

• shadows ('text-shadow')
• underlines ('text-decoration')
• overlines ('text-decoration')
• text
• emphasis marks ('text-emphasis')
• line-through ('text-decoration')

Overflow of Text Decorations

Appendix A: Acknowledgements

Appendix B: Default UA Stylesheet

		  /* typical styling of HTML */
		  blink {
		    text-decoration-line: blink;
		  }
		  s, strike, del {
		    text-decoration: line-through;
		  }
		  u, ins, :link, :visited {
		    text-decoration: underline;
		  }
		  abbr[title], acronym[title] {
		    text-decoration: dotted underline;
		  }

		  /* disable inheritance of text-emphasis marks to ruby text:
		    emphasis marks should only apply to base text */
		  rt { text-emphasis: none; }

		  /* set language-appropriate default emphasis mark position */
		  :root:lang(zh), [lang|=zh] { text-emphasis-position: under right; }
		  [lang|=ja], [lang|=ko]     { text-emphasis-position: over right; }

		  /* set language-appropriate default underline position */
		  :root:lang(ja), [lang|=ja],
		  :root:lang(mn), [lang|=mn],
		  :root:lang(ko), [lang|=ko] { text-underline-position: right; }
		  :root:lang(zh), [lang|=zh] { text-underline-position: left;  }
		  /* auto is chosen (implied) above instead of under
		     due to content-compatibility concerns */
		

If you find any issues, recommendations to add, or corrections, please send the information to www-style@w3.org with [css-text-decor] in the subject line.

			@keyframes blink {
			  0% {
			    visibility: hidden;
			    animation-timing-function: step-end;
			  }
			  25%, 100% {
			    visibility: visible;
			  }
			}
			blink {
			  animation: blink 1s infinite;
			}
		

Appendix C: Changes

Changes since the 4 May 2022 Working Draft

• Redesigned 'text-decoration-skip-self'. (Issue 2885)
• Replaced text-decoration-skip-edges with 'text-decoration-trim'. (Issue 4557)
• Redefined [=spacers=] for 'text-decoration-skip-spaces' to reference [=Unicode General Category=] Zs and to only additionally include word separators when skipping all spaces. (Issue 5249)
• Disallowed ''grammar-error'' and ''spelling-error'' from being influenced by the other sub-properties of 'text-decoration', as well any other properties typically affecting the appearance of line decorations.
• Fixed errors in Computed Value lines. (Issue 10044)
• Miscellaneous minor clarifications.

Changes since the 6 May 2020 Working Draft

• Added spread distance and ''box-shadow/inset'' to 'text-shadow'. (Issue 6074, Issue 6971)
• Clarified that 'text-decoration-skip-ink' affects only decorations initiated by the element. (Issue 2817)
• Explicitly noted properties applying to text in “Applies to” line. (Issue 5303)

Additions Since Level 3

• Added ''spelling-error'' and ''grammar-error'' values to 'text-decoration-line'.
• Added 'text-decoration-thickness' and 'text-underline-offset' properties.
• Added ''text-underline-position/from-font'' value to 'text-underline-position'.
• Drafted 'text-decoration-skip' property and its longhands.
• Drafted 'text-emphasis-skip' property.
• Added spread distance and ''box-shadow/inset'' to 'text-shadow'.

Privacy Considerations

Security Considerations