@@ -5501,7 +5501,7 @@ Selecting How to Wrap: the 'text-wrap-style' property</h3>
5501
5501
5502
5502
<pre class="propdef">
5503
5503
Name : text-wrap-style
5504
- Value : auto | balance | stable | pretty
5504
+ Value : auto | balance | stable | pretty | avoid-orphans
5505
5505
Initial : auto
5506
5506
Applies to : [=block containers=] hat establish an [=inline formatting context=]
5507
5507
Inherited : yes
@@ -5612,9 +5612,89 @@ Selecting How to Wrap: the 'text-wrap-style' property</h3>
5612
5612
<dt> <dfn>pretty</dfn>
5613
5613
<dd>
5614
5614
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
5616
5616
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>
5618
5698
</dl>
5619
5699
5620
5700
<!-- add a sample prioritization algorithm -->
@@ -5626,10 +5706,12 @@ Selecting How to Wrap: the 'text-wrap-style' property</h3>
5626
5706
UAs can experiment with better line breaking algorithms
5627
5707
with this default value,
5628
5708
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
5630
5710
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;
5633
5715
the ''text-wrap-style/balance'' value is intended for titles and captions,
5634
5716
where equal-length lines of text tend to be preferred;
5635
5717
and the ''text-wrap-style/stable'' is intended for sections that are,
0 commit comments