+Text fitting: the 'text-fit' property

+	Name: text-fit
+	Value: [ none | grow | shrink ] [consistent | per-line | per-line-all]? <>?
+	Initial: none
+	Applies to: block containers
+	Inherited: no
+	Percentages: N/A
+	Computed value: specified keywords or computed <> 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 ''text-fit/none'' is specified. + If none of ''text-fit/consistent'', ''text-fit/per-line'', or + ''text-fit/per-line-all'' are specified, ''text-fit/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 ''text-fit/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 ''text-fit/none'' is specified. +

+ +

<percentage> +

+ Specifies the limit of the scaling factor. + If ''text-fit/grow'' is specified and the value is 100% or greater, + it is the maximum scaling factor. + If ''text-fit/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 ''text-align/justify'' of the 'text-align' property, which achieves + this by adjusting spacing between characters, this property scales the + font size. + +

When ''text-fit/grow'' or ''text-fit/shrink'' is specified, + a [=line scaling factor=] is computed for each [=line box=]. + If ''text-fit/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 <> 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. + +

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, including text in [=inline boxes=], but excluding trailing + white space. + +
• + Spacing whose [=inline size=] is proportional to the 'font-size' + used value. + E.g. percentage-based 'letter-spacing' or 'word-spacing', and 'text-autospace'. +

+ '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: + +

+
• The total [=inline size=] of the [=scalable parts=] in the line. +
• + The remaining space in the [=line box=], including any trailing whitespace + (which may be negative if the content overflows the [=line box=]). +

If a <> 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 [[css-fonts-4#font-optical-sizing-def|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. +

Spacing