Skip to content

Commit 57fe11e

Browse files
frivoalfantasai
andauthored
[css-text] Introduce a text-wrap-style value focused on orphans (w3c#10837)
See w3c#3473 (comment) Co-authored-by: fantasai <fantasai.bugs@inkedblade.net>
1 parent 13d05ce commit 57fe11e

File tree

1 file changed

+88
-6
lines changed

1 file changed

+88
-6
lines changed

css-text-4/Overview.bs

+88-6
Original file line numberDiff line numberDiff line change
@@ -5501,7 +5501,7 @@ Selecting How to Wrap: the 'text-wrap-style' property</h3>
55015501

55025502
<pre class="propdef">
55035503
Name: text-wrap-style
5504-
Value: auto | balance | stable | pretty
5504+
Value: auto | balance | stable | pretty | avoid-orphans
55055505
Initial: auto
55065506
Applies to: [=block containers=] hat establish an [=inline formatting context=]
55075507
Inherited: yes
@@ -5612,9 +5612,89 @@ Selecting How to Wrap: the 'text-wrap-style' property</h3>
56125612
<dt><dfn>pretty</dfn>
56135613
<dd>
56145614
Specifies the UA <em>should</em> bias for better layout over speed,
5615-
and is expected to consider multiple lines,
5615+
and is expected to consider multiple lines
56165616
when making break decisions.
5617-
Otherwise equivalent to ''text-wrap-style/auto'',
5617+
Otherwise equivalent to ''text-wrap-style/auto''.
5618+
5619+
The user agent may among other things
5620+
attempt to avoid excessively short last lines,
5621+
similarly to ''avoid-orphans'',
5622+
but it should also improve the layout in additional ways.
5623+
The precise set of improvements is user agent dependent,
5624+
and may include things such as:
5625+
reducing the variation in length between lines;
5626+
avoiding <a href="https://en.wikipedia.org/wiki/River_(typography)">typographic rivers</a>;
5627+
prioritizing different classes of [=soft wrap opportunities=], [=hyphenation opportunities=], or [=justification opportunities=];
5628+
avoiding hyphenation on too many consecutive lines…
5629+
5630+
<div class=advisement>
5631+
The necessary computations may be expensive,
5632+
especially when applied to large amounts of text.
5633+
Authors are encouraged to assess the impact on performance
5634+
when using ''text-wrap-style: pretty'',
5635+
and possibly use it selectively where it matters most.
5636+
</div>
5637+
5638+
<dt><dfn>avoid-orphans</dfn>
5639+
<dd>
5640+
Specifies the UA <em>should</em> avoid excessively short last lines,
5641+
and is expected to consider more than one line
5642+
when making break decisions
5643+
(for example, to avoid "fixing" an orphan
5644+
by making the previous line too short).
5645+
The user agent may decide against improving the last line
5646+
when it would make some prior line(s) substantially unbalanced.
5647+
The user agent should not attempt to improve other aspects of the layout
5648+
beyond what ''text-wrap-style/auto''
5649+
if those improvements come at a significant performance cost.
5650+
5651+
Note: In western typography, an “orphan” can refer to a single word on the last line of a paragraph.
5652+
However, not all languages or writing systems wrap lines at word boundaries,
5653+
and even in languages that do,
5654+
a few very short words on the last line may still be undesirable,
5655+
especially if the available inline space is long.
5656+
This specification does not therefore strictly define
5657+
lines to be too short only when they are composed a single word,
5658+
and lets the user agent be the judge of what is excessively short.
5659+
5660+
Note: See also the 'orphans' property for control over fragmentation
5661+
and the other typographic meaning of “orphans”.
5662+
5663+
<div class=example>
5664+
For instance, with the given line length, the following test would be wrapped with a single word on the last line,
5665+
which could be judged too short.
5666+
<pre lang=grc style="border: solid lightgray 8px; border-bottom: none; border-top: none; width: 45ch;">
5667+
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα
5668+
πολλὰ πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον
5669+
ἔπερσεν.
5670+
</pre>
5671+
Applying ''text-wrap-style: avoid-orphans'' could yield something like this instead,
5672+
which is arguably more pleasing:
5673+
<pre lang=grc style="border: solid lightgray 8px; border-bottom: none; border-top: none; width: 45ch;">
5674+
ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς
5675+
μάλα πολλὰ πλάγχθη, ἐπεὶ Τροίης ἱερὸν
5676+
πτολίεθρον ἔπερσεν.
5677+
</pre>
5678+
</div>
5679+
<div class=example>
5680+
However, the following fragment is more vexing:
5681+
<pre style="border: solid lightgray 8px; border-bottom: none; border-top: none; width: 17ch;">
5682+
Circumnavigating
5683+
the Mississippi
5684+
river
5685+
</pre>
5686+
An attempt to make the last line less short by wrapping the previous line earlier would result in the following:
5687+
<pre style="border: solid lightgray 8px; border-bottom: none; border-top: none; width: 17ch;">
5688+
Circumnavigating
5689+
the
5690+
Mississippi river
5691+
</pre>
5692+
While the last line would indeed no longer be short,
5693+
the penultimate line would be unsightly.
5694+
In such cases, user agents are expected
5695+
to prefer the first rendering
5696+
despite ''text-wrap-style: avoid-orphans'' being set.
5697+
</div>
56185698
</dl>
56195699

56205700
<!-- add a sample prioritization algorithm -->
@@ -5626,10 +5706,12 @@ Selecting How to Wrap: the 'text-wrap-style' property</h3>
56265706
UAs can experiment with better line breaking algorithms
56275707
with this default value,
56285708
but as optimal results often take more time,
5629-
''text-wrap-style/pretty'' is offered as an opt-in
5709+
''text-wrap-style/pretty'' and ''avoid-orphans'' are offered as opt-ins
56305710
to take more time for better results.
5631-
The ''text-wrap-style/pretty'' value is intended for body text,
5632-
where the last line is expected to be a bit shorter than the average line;
5711+
Both values are intended for body text,
5712+
where the last line is expected to be a bit shorter than the average line,
5713+
but ''avoid-orphans'' aims to avoid excessively short last lines while staying performant,
5714+
while ''pretty'' can sacrifice more speed in pursuit of even better layout;
56335715
the ''text-wrap-style/balance'' value is intended for titles and captions,
56345716
where equal-length lines of text tend to be preferred;
56355717
and the ''text-wrap-style/stable'' is intended for sections that are,

0 commit comments

Comments
 (0)