CSS Initial Letters

Category: CSS
Type: Chromium catches up
Status: Enabled by default (Chrome 110)
Intent stage: Prepare to ship

Summary

Enables a typographic decoration called "initial letter" or "drop caps." Initial letters are large, decorative letters that have been used to start new sections of text since before the invention of printing. In fact, their use predates lowercase letters entirely.

Motivation

It’s implemented only in WebKit, but the usage is high: * 40.2% usage ratio according to CSS2021 Usage Overview[1]. * 23.9% have used it according to CSS2021 Typography features[2]. [1] https://2021.stateofcss.com/en-US/features/#features_overview [2] https://2021.stateofcss.com/en-US/features/typography/#initial_letter

Standards & signals

Specification: https://drafts.csswg.org/css-inline/#initial-letter-styling
Firefox: In development — No active development since 2017.
Safari: Shipped/Shipping — Needs to use prefix version `-webkit-initial-letter`. Supports only an integer size. No `drop` and `raise` keyword support.
Web developers: Positive — It’s implemented only in Safari, but the usage is high. * 40.2% usage ratio according to CSS2021 Usage Overview[1]. * 23.9% have used it according to CSS2021 Typography features[2]. [1] https://2021.stateofcss.com/en-US/features/#features_overview [2] https://2021.stateofcss.com/en-US/features/typography/#initial_letter
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1276900

Docs: https://bit.ly/3KzJ27G

Samples: https://output.jsbin.com/basukanebo/1

View on chromestatus.com