text-decoration-skip

Summary

Specifies what parts of an element’s content are skipped over when applying any text decoration.

Overview table

Initial value

objects

Applies to

All elements

Inherited

Yes

Media

visual

Computed value

as specified

Animatable

No

CSS Object Model Property

textDecorationSkip

Syntax

• text-decoration-skip: box-decoration
• text-decoration-skip: edges
• text-decoration-skip: ink
• text-decoration-skip: none
• text-decoration-skip: object
• text-decoration-skip: spaces

Values

none

Will not skip anything; the text decoration will be drawn for all text content

object

Will skip the element (including it’s margin) if it’s atomic inline

spaces

Will skip white space, including:

• regular spaces - U+0020
• tabs - U+0009
• nbsp - U+00A0
• ideographic space - U+3000
• all fixed width spaces - examples: U+2000 to U+200A, U+202F and U+205F
• any adjacent letter-spacing or word-spacing

ink

Will skip over where any glyphs are drawn. It will interrupt the decoration line so that the text will show through where otherwise the decoration would cross through the text. This commonly includes ascenders and descenders of glyphs.

Note: The UA also may skip over small distances on the right or the left side of the glyph outline

box-decoration

Will skip over the box’s margin, border, and padding areas.

Note: It is not known yet if this is a needed value

edges

The text decoration will be inset slightly, so that two side by side elements do not appear to have a single continuous decoration. This is important for Chinese content, where underlining is a form of punctuation.

Examples

Skip ascenders and descenders, allowing text to show through any decoration.

p {
   text-decoration-skip: ink;
}

Notes

This property inherits so the descendent elements can have different setting.

Related specifications

CSS Text Decoration Module Level 3

Candidate Recommendation

Attributions

• Microsoft Developer Network: Article