CSS Text Module Level 5

Editor’s Draft,

More details about this document
This version:
https://drafts.csswg.org/css-text-4/
Latest published version:
https://www.w3.org/TR/css-text-4/
Previous Versions:
Feedback:
CSSWG Issues Repository
Inline In Spec
Editors:
Elika J. Etemad / fantasai (Apple)
(Invited Expert)
(Adobe Systems)
Florian Rivoal (Invited Expert)
Suggest an Edit for this Spec:
GitHub Editor

Abstract

This CSS module defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, and text transformation.

CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc.

Status of this document

This is a public copy of the editors’ draft. It is provided for discussion only and may change at any moment. Its publication here does not imply endorsement of its contents by W3C. Don’t cite this document other than as work in progress.

Please send feedback by filing issues in GitHub (preferred), including the spec code “css-text” in the title, like this: “[css-text] …summary of comment…”. All issues and comments are archived. Alternately, feedback can be sent to the (archived) public mailing list www-style@w3.org.

This document is governed by the 18 August 2025 W3C Process Document.

1. Introduction

This module describes the typesetting controls of CSS; that is, the features of CSS that control the translation of source text to formatted, line-wrapped text.

This specification describes features introduced in Level 5; it is a diff against [css-text-4].

1.1. Text fitting: the text-fit property

Tests

This section has no coverage yet.


Name: text-fit
Value: [ none | grow | shrink ] [consistent | per-line | per-line-all]? <percentage>?
Initial: none
Applies to: block containers
Inherited: yes
Percentages: N/A
Computed value: specified keywords or computed <percentage> value
Canonical order: per grammar
Animation type: discrete

The text-fit property describes how inline-level contents are scaled if they do not fit to the line box.

Values have the following meanings:

none
The user agent doesn’t scale inline-level contents to fit to the line box.
grow
The user agent scales up inline-level contents to fit to the line box.
shrink
The user agent scales down inline-level contents to fit to the line box.
consistent
Specifies that all lines in the container are scaled with a single scaling factor. This keyword has no effect if none is specified. If none of consistent, per-line, or per-line-all are specified, consistent is assumed.
per-line
Specifies that each line is scaled with its own scaling factor. However, the last line of the block and lines that end in a forced break are not scaled. This keyword has no effect if none is specified.
per-line-all
Specifies that each line is scaled with its own scaling factor, including the last line of the block and lines that end in a forced break. This keyword has no effect if none is specified.
<percentage>
Specifies the limit of the scaling factor. If grow is specified and the value is 100% or greater, it is the maximum scaling factor. If shrink is specified and the value is between 0% and 100% inclusive, it is the minimum scaling factor. Otherwise, or if this component is omitted, there is no limit on the scaling factor.

This property provides a functionality to make inline-level contents exactly fill the inline size of the line box. Unlike justify of the text-align property, which achieves this by adjusting spacing between characters, this property scales the font size.

When grow or shrink is specified, a line scaling factor is computed for each line box. If consistent applies, all line boxes are scaled by the smallest computed line scaling factor. Otherwise, each line box is scaled by its own line scaling factor.

This property does not affect the font-size computed value, and thus does not affect font-size-relative <length> values of other properties. For example, "line-height: 1.5em" and "letter-spacing: 0.1em" are not affected by this scaling.

The used value of the text font-size is its computed value multiplied by the line scaling factor.

Scaling can change the block size of a line box, which can in turn change its position along the block-axis. If any feature is active that would cause the inline size of the line box to change based on its block-axis position (such as float or initial-letter), scaling is disabled for the block.

If the inline size of a block container depends on the size of the viewport, its apparent inline size may not change even if the user changes the page zoom level. In that case, if text is fitted with this feature, the text size may not change at all even though the zoom level has changed. There is no agreement yet on how to deal with this issue. See csswg#12886.

1.1.1. Computing line scaling factor

The parts of the line box’s contents that can be scaled by this property are called scalable parts. These include:

text-indent, line-padding, non-percentage-based letter-spacing and word-spacing, and atomic inlines are not scalable parts. The inline-axis padding, border, and margin of inline boxes are also not scalable parts.

A line scaling factor is the ratio by which the scalable parts of a line must be scaled in order to make its inline-level content exactly fit the line box’s inline size.

A line scaling factor is computed from:

If a <percentage> is specified, it clamps the line scaling factor.

A simple calculation for the line scaling factor would be (A + B) / A, where A is the total inline size of scalable parts and B is the remaining space. However, due to optical sizing, the inline size of text might not be perfectly proportional to its font-size. The exact method for determining a reasonable line scaling factor is up to the implementation.

The line scaling factor for a line box with no scalable parts is 1.

Appendix A: Text Processing Order of Operations

Acknowledgements

Tests

Tests not needed for this section.


The text-fit property would not be here without the efforts of Kent Tamura and Roman Komarov.

Changes

Additions Since Level 4

New features in Level 5:

Conformance

Document conventions

Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology. The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this document are to be interpreted as described in RFC 2119. However, for readability, these words do not appear in all uppercase letters in this specification.

All of the text of this specification is normative except sections explicitly marked as non-normative, examples, and notes. [RFC2119]

Examples in this specification are introduced with the words “for example” or are set apart from the normative text with class="example", like this:

This is an example of an informative example.

Informative notes begin with the word “Note” and are set apart from the normative text with class="note", like this:

Note, this is an informative note.

Advisements are normative sections styled to evoke special attention and are set apart from other normative text with <strong class="advisement">, like this: UAs MUST provide an accessible alternative.

Tests

Tests relating to the content of this specification may be documented in “Tests” blocks like this one. Any such block is non-normative.


Conformance classes

Conformance to this specification is defined for three conformance classes:

style sheet
A CSS style sheet.
renderer
A UA that interprets the semantics of a style sheet and renders documents that use them.
authoring tool
A UA that writes a style sheet.

A style sheet is conformant to this specification if all of its statements that use syntax defined in this module are valid according to the generic CSS grammar and the individual grammars of each feature defined in this module.

A renderer is conformant to this specification if, in addition to interpreting the style sheet as defined by the appropriate specifications, it supports all the features defined by this specification by parsing them correctly and rendering the document accordingly. However, the inability of a UA to correctly render a document due to limitations of the device does not make the UA non-conformant. (For example, a UA is not required to render color on a monochrome monitor.)

An authoring tool is conformant to this specification if it writes style sheets that are syntactically correct according to the generic CSS grammar and the individual grammars of each feature in this module, and meet all other conformance requirements of style sheets as described in this module.

Partial implementations

So that authors can exploit the forward-compatible parsing rules to assign fallback values, CSS renderers must treat as invalid (and ignore as appropriate) any at-rules, properties, property values, keywords, and other syntactic constructs for which they have no usable level of support. In particular, user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.

Implementations of Unstable and Proprietary Features

To avoid clashes with future stable CSS features, the CSSWG recommends following best practices for the implementation of unstable features and proprietary extensions to CSS.

Non-experimental implementations

Once a specification reaches the Candidate Recommendation stage, non-experimental implementations are possible, and implementors should release an unprefixed implementation of any CR-level feature they can demonstrate to be correctly implemented according to spec.

To establish and maintain the interoperability of CSS across implementations, the CSS Working Group requests that non-experimental CSS renderers submit an implementation report (and, if necessary, the testcases used for that implementation report) to the W3C before releasing an unprefixed implementation of any CSS features. Testcases submitted to W3C are subject to review and correction by the CSS Working Group.

Further information on submitting testcases and implementation reports can be found from on the CSS Working Group’s website at http://www.w3.org/Style/CSS/Test/. Questions should be directed to the public-css-testsuite@w3.org mailing list.

Index

Terms defined by this specification

Terms defined by reference

References

Normative References

[CSS-CASCADE-5]
Elika Etemad; Miriam Suzanne; Tab Atkins Jr.. CSS Cascading and Inheritance Level 5. URL: https://drafts.csswg.org/css-cascade-5/
[CSS-DISPLAY-4]
Elika Etemad; Tab Atkins Jr.. CSS Display Module Level 4. URL: https://drafts.csswg.org/css-display-4/
[CSS-FONTS-3]
John Daggett; Myles Maxfield; Chris Lilley. CSS Fonts Module Level 3. URL: https://drafts.csswg.org/css-fonts-3/
[CSS-FONTS-4]
Chris Lilley. CSS Fonts Module Level 4. URL: https://drafts.csswg.org/css-fonts-4/
[CSS-INLINE-3]
Elika Etemad. CSS Inline Layout Module Level 3. URL: https://drafts.csswg.org/css-inline-3/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii; Florian Rivoal. CSS Text Module Level 3. URL: https://drafts.csswg.org/css-text-3/
[CSS-TEXT-4]
Elika Etemad; et al. CSS Text Module Level 4. URL: https://drafts.csswg.org/css-text-4/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 4. URL: https://drafts.csswg.org/css-values-4/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. URL: https://drafts.csswg.org/css-writing-modes-4/
[CSS2]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. URL: https://drafts.csswg.org/css2/
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119

Non-Normative References

[CSS-BACKGROUNDS-3]
Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. URL: https://drafts.csswg.org/css-backgrounds/
[CSS-BOX-4]
Elika Etemad. CSS Box Model Module Level 4. URL: https://drafts.csswg.org/css-box-4/

Property Index

Name Value Initial Applies to Inh. %ages Anim­ation type Canonical order Com­puted value
text-fit [ none | grow | shrink ] [consistent | per-line | per-line-all]? <percentage>? none block containers yes N/A discrete per grammar specified keywords or computed <percentage> value

Issues Index

If the inline size of a block container depends on the size of the viewport, its apparent inline size may not change even if the user changes the page zoom level. In that case, if text is fitted with this feature, the text size may not change at all even though the zoom level has changed. There is no agreement yet on how to deal with this issue. See csswg#12886.