Skip to content

Commit 4ceb213

Browse files
committed
[css-text-5] Move text-fit to L5 where it belongs #12885
1 parent 63ce55e commit 4ceb213

2 files changed

Lines changed: 226 additions & 180 deletions

File tree

css-text-4/Overview.bs

Lines changed: 1 addition & 180 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ Title: CSS Text Module Level 4
33
Shortname: css-text
44
Level: 4
55
Status: ED
6-
Work Status: Exploring
6+
Work Status: Refining
77
Group: csswg
88
ED: https://drafts.csswg.org/css-text-4/
99
TR: https://www.w3.org/TR/css-text-4/
@@ -9737,175 +9737,6 @@ Aligning a block of text within its container: the 'text-group-align' property</
97379737
</wpt>
97389738
</dl>
97399739

9740-
<h3 id="text-fit-property">
9741-
Text fitting: the 'text-fit' property</h3>
9742-
9743-
<wpt title="
9744-
This section has no coverage yet.
9745-
"></wpt>
9746-
9747-
<pre class="propdef">
9748-
Name: text-fit
9749-
Value: [ none | grow | shrink ] [consistent | per-line | per-line-all]? <<percentage>>?
9750-
Initial: none
9751-
Applies to: <a>block containers</a>
9752-
Inherited: yes
9753-
Percentages: N/A
9754-
Computed value: specified keywords or computed <<percentage>> value
9755-
Canonical order: per grammar
9756-
Animation type: discrete
9757-
</pre>
9758-
9759-
<p>The 'text-fit' property describes how [=inline-level=] contents are
9760-
scaled if they do not fit to the [=line box=].
9761-
9762-
<p>Values have the following meanings:
9763-
9764-
<dl dfn-for=text-fit dfn-type=value>
9765-
<dt><dfn>none</dfn>
9766-
<dd>
9767-
The user agent doesn't scale [=inline-level=] contents to fit to
9768-
the [=line box=].
9769-
</dd>
9770-
9771-
<dt><dfn>grow</dfn>
9772-
<dd>
9773-
The user agent scales up [=inline-level=] contents to fit to the
9774-
[=line box=].
9775-
</dd>
9776-
9777-
<dt><dfn>shrink</dfn>
9778-
<dd>
9779-
The user agent scales down [=inline-level=] contents to fit to the
9780-
[=line box=].
9781-
</dd>
9782-
9783-
<dt><dfn>consistent</dfn>
9784-
<dd>
9785-
Specifies that all lines in the container are scaled with a single
9786-
scaling factor.
9787-
This keyword has no effect if ''text-fit/none'' is specified.
9788-
If none of ''text-fit/consistent'', ''text-fit/per-line'', or
9789-
''text-fit/per-line-all'' are specified, ''text-fit/consistent'' is
9790-
assumed.
9791-
</dd>
9792-
9793-
<dt><dfn>per-line</dfn>
9794-
<dd>
9795-
Specifies that each line is scaled with its own scaling factor.
9796-
However, the last line of the block and lines that end in a forced
9797-
break are not scaled.
9798-
This keyword has no effect if ''text-fit/none'' is specified.
9799-
</dd>
9800-
9801-
<dt><dfn>per-line-all</dfn>
9802-
<dd>
9803-
Specifies that each line is scaled with its own scaling factor,
9804-
including the last line of the block and lines that end in a forced
9805-
break.
9806-
This keyword has no effect if ''text-fit/none'' is specified.
9807-
</dd>
9808-
9809-
<dt><dfn>&lt;percentage&gt;</dfn>
9810-
<dd>
9811-
Specifies the limit of the scaling factor.
9812-
If ''text-fit/grow'' is specified and the value is 100% or greater,
9813-
it is the maximum scaling factor.
9814-
If ''text-fit/shrink'' is specified and the value is between 0% and
9815-
100% inclusive, it is the minimum scaling factor.
9816-
Otherwise, or if this component is omitted, there is no limit on
9817-
the scaling factor.
9818-
</dd>
9819-
</dl>
9820-
9821-
<p>This property provides a functionality to make [=inline-level=] contents
9822-
exactly fill the inline size of the [=line box=].
9823-
Unlike ''text-align/justify'' of the 'text-align' property, which achieves
9824-
this by adjusting spacing between characters, this property scales the
9825-
font size.
9826-
9827-
<p>When ''text-fit/grow'' or ''text-fit/shrink'' is specified,
9828-
a [=line scaling factor=] is computed for each [=line box=].
9829-
If ''text-fit/consistent'' applies, all [=line boxes=] are scaled by the
9830-
smallest computed [=line scaling factor=].
9831-
Otherwise, each [=line box=] is scaled by its own [=line scaling factor=].
9832-
9833-
<p>This property does not affect the 'font-size' [=computed value=],
9834-
and thus does not affect font-size-relative <<length>> values of other properties.
9835-
For example, "line-height: 1.5em" and "letter-spacing: 0.1em" are not
9836-
affected by this scaling.
9837-
9838-
<p>The [=used value=] of the text 'font-size' is its [=computed value=]
9839-
multiplied by the [=line scaling factor=].
9840-
9841-
<p>Scaling can change the [=block size=] of a [=line box=],
9842-
which can in turn change its position along the [=block-axis=].
9843-
If any feature is active that would cause the [=inline size=] of the
9844-
[=line box=] to change based on its [=block-axis=] position (such as
9845-
'float' or 'initial-letter'), scaling is disabled for the block.
9846-
9847-
<div class="issue">
9848-
If the [=inline size=] of a block container depends on the size of
9849-
the viewport, its apparent [=inline size=] may not change even if
9850-
the user changes the page zoom level.
9851-
In that case, if text is fitted with this feature, the text size may
9852-
not change at all even though the zoom level has changed.
9853-
There is no agreement yet on how to deal with this issue. See
9854-
<a href="https://github.com/w3c/csswg-drafts/issues/12886">csswg#12886</a>.
9855-
</div>
9856-
9857-
<h4 id="text-fit-scaling-factor">Computing line scaling factor</h4>
9858-
9859-
<p>The parts of the [=line box=]'s contents that can be scaled by this
9860-
property are called <dfn>scalable parts</dfn>.
9861-
These include:
9862-
9863-
<ul>
9864-
<li>
9865-
Text, including text in [=inline boxes=], but excluding trailing
9866-
white space.
9867-
9868-
<li>
9869-
Spacing whose [=inline size=] is proportional to the 'font-size'
9870-
used value.
9871-
E.g. percentage-based 'letter-spacing' or 'word-spacing', and 'text-autospace'.
9872-
</ul>
9873-
9874-
<p class="note">
9875-
'text-indent', 'line-padding', non-percentage-based 'letter-spacing' and
9876-
'word-spacing', and [=atomic inlines=] are not [=scalable parts=].
9877-
The [=inline-axis=] 'padding', 'border', and 'margin' of inline boxes are
9878-
also not [=scalable parts=].
9879-
9880-
<p>A <dfn>line scaling factor</dfn> is the ratio by which the
9881-
[=scalable parts=] of a line must be scaled in order to make its
9882-
[=inline-level=] content exactly fit the [=line box=]’s [=inline size=].
9883-
9884-
<p>A [=line scaling factor=] is computed from:
9885-
9886-
<ul>
9887-
<li>The total [=inline size=] of the [=scalable parts=] in the line.
9888-
<li>
9889-
The remaining space in the [=line box=], including any trailing whitespace
9890-
(which may be negative if the content overflows the [=line box=]).
9891-
</ul>
9892-
9893-
<p>If a <<percentage>> is specified, it clamps the [=line scaling factor=].
9894-
9895-
<p class="note">
9896-
A simple calculation for the [=line scaling factor=] would be
9897-
<code>(A + B) / A</code>, where A is the total [=inline size=] of
9898-
[=scalable parts=] and B is the remaining space.
9899-
However, due to [[css-fonts-4#font-optical-sizing-def|optical sizing]], the
9900-
[=inline size=] of text might not be perfectly proportional to its
9901-
'font-size'.
9902-
The exact method for determining a reasonable [=line scaling factor=]
9903-
is up to the implementation.
9904-
9905-
<p>The [=line scaling factor=] for a [=line box=] with no
9906-
[=scalable parts=] is 1.
9907-
9908-
99099740
<h2 id="spacing">
99109741
Spacing</h2>
99119742

@@ -12301,13 +12132,6 @@ Text Processing Order of Operations</h2>
1230112132
* 'letter-spacing', 'word-spacing', 'text-spacing', and 'line-padding'
1230212133
* [[#hanging-punctuation-property|hanging punctuation]]
1230312134

12304-
<li>
12305-
[[#text-fit-property|text fitting]]
12306-
12307-
* <a href="https://www.w3.org/TR/css-fonts-3/">font/glyph selection
12308-
and positioning</a> [[!CSS-FONTS-3]] may be done again
12309-
* 'letter-spacing', 'word-spacing', and 'text-spacing' may be updated.
12310-
1231112135
<li>
1231212136
[[#justification|justification]]
1231312137
(which may affect glyph selection and/or text wrapping, looping back into that step)
@@ -13477,9 +13301,6 @@ Changes</h2>
1347713301
<strong>This draft is kept in sync with [[CSS-TEXT-3]], see [[css-text-3#changes]].</strong><br>
1347813302
Changes specific to Level 4 are listed below.
1347913303

13480-
Significant changes since the <a href="https://www.w3.org/TR/2024/WD-css-text-4-2024052">29 May 2024 Working Draft</a> include:
13481-
* Add 'text-fit' property.
13482-
1348313304
Significant changes since the <a href="https://www.w3.org/TR/2024/WD-css-text-4-20240219/">19 February 2024 Working Draft</a> include:
1348413305
* Renamed the 'text-spacing-trim' value <css>trim-auto</css> to ''trim-both''.
1348513306
(<a href="https://github.com/w3c/csswg-drafts/issues/10161">Issue 10161</a>)

0 commit comments

Comments
 (0)