CSS Text Decoration

Intermediate

CSS Text Decoration controls decoration applied to text after it has been typeset. This lesson owns line decorations, emphasis marks, text shadows, their styling and positioning, and the current developing controls in the CSS Text Decoration specification.

Text decoration is separate from text layout

Text layout determines how text is formed into lines. Text Decoration then paints decorations associated with those already-typeset glyphs. A decoration normally does not change the line box geometry, so changing an underline should not be treated as a way to change wrapping or sizing.

?

The text-decoration shorthand combines the core line-decoration properties

The `text-decoration` shorthand combines `text-decoration-line`, `text-decoration-thickness`, `text-decoration-style`, and `text-decoration-color`. The underline position is intentionally separate, because it depends on language and writing-system context and is independently inherited.

?

Underline position and offset solve different problems

`text-underline-position` establishes where an underline is placed relative to the text, with values such as `auto`, `from-font`, and `under` plus optional side information for vertical writing. `text-underline-offset` then adjusts the underline away from that zero position. These are especially important when typography and writing modes change.

?

Decoration skipping controls interruptions in decoration lines

The current Text Decoration draft defines `text-decoration-skip` and its longhands for controlling where decoration lines are interrupted, including around the decorating box, spaces, and glyph ink. `text-decoration-skip-ink: auto` is particularly useful when an underline should avoid crossing glyph shapes. These controls are current draft material and should be treated as status-sensitive.

?

Emphasis marks are a separate decoration mechanism

`text-emphasis-style`, `text-emphasis-color`, and `text-emphasis-position` add typographic emphasis marks, especially useful in East Asian writing. The `text-emphasis` shorthand combines style and color. Positioning interacts with the writing-mode model, so do not treat emphasis placement as ordinary Western underline positioning.

?

Text shadows decorate text without changing layout

`text-shadow` applies one or more shadows to text. Like other text decoration, the shadow is a painting effect rather than a layout mechanism: it does not determine wrapping or increase the scrollable overflow region. Its shadow syntax is related to the shadow value model used by Backgrounds and Borders.

?

Current Level 4 additions need a maturity boundary

The current CSS Text Decoration Level 4 Editor's Draft adds or develops features including `text-decoration-inset`, the `text-decoration-skip-*` family, `text-emphasis-skip`, and newer `text-shadow` behavior. Foxipa labels these as developing specification material rather than presenting every draft value as settled interoperable CSS.

?

Debug decoration separately from layout

When a decoration looks wrong, first determine whether the text itself is laid out incorrectly. If line breaks, white-space, or alignment are wrong, inspect CSS Text. If the glyphs or font metrics are wrong, inspect Fonts. If underline placement changes with writing direction or vertical text, inspect Writing Modes together with Text Decoration. If the decoration is clipped, inspect Overflow and ink overflow rather than assuming the decoration changed layout.

?

Ownership boundaries

This lesson owns text decoration. CSS Text owns line formation, wrapping, white-space, alignment, justification, and related text processing. CSS Fonts owns font selection and font features. CSS Writing Modes owns writing direction and vertical flow. CSS Backgrounds and Borders owns box shadows; Text Decoration owns text shadows. CSS Overflow owns clipping and scrollable overflow.

Quick review

You should now be able to distinguish text layout from text decoration, use the core text-decoration properties, position and offset underlines, understand emphasis marks and text shadows, recognize developing Level 4 decoration controls, and diagnose decoration problems without duplicating the ownership of neighboring CSS modules.