[css-text] Add `text-wrap-last` for orphan avoidance; remove orphan control from `text-wrap-style`

[jonkwheeler]

Proposal: New CSS Property text-wrap-last to Control Last Line Wrapping

Summary

I propose a new CSS property, text-wrap-last, to provide fine-grained control over the last line of text in a block container, similar to text-align-last but focused on wrapping behavior. This would replace the no-orphans value from text-wrap-style and align naming conventions with existing properties like text-align-last.

Problem

Current text wrapping options (e.g., text-wrap-style: wrap | balance | pretty | no-orphans) lack precise control over the last line’s length relative to preceding lines. The no-orphans value in text-wrap-style is too specific and doesn’t fit well with other values, which focus on general wrapping behavior. Developers need a way to optimize the last line’s appearance for specific use cases, such as headings (longer last lines) or body text (shorter last lines).

Proposal

Introduce a new CSS property, text-wrap-last, to control the wrapping of the last line in a block container. This property would adjust earlier break opportunities to achieve the desired last-line length.

Property Definition:

text-wrap-last
  Value: auto | balance | pretty
  Initial: auto
  Applies to: block containers and other flow containers establishing line boxes
  Inherited: yes
  Percentages: N/A
  Computed value: as specified
  Canonical order: per grammar
  Animation type: discrete

Values:

• auto: Default UA behavior. The final line follows normal wrapping rules without balancing or shortening adjustments.
• balance: Ensures the last line is at least 50% the width of the preceding line by adjusting earlier break opportunities. Ideal for headings where balanced lines are visually appealing.
• pretty: Ensures the last line is at most 49% the width of the preceding line, creating a “pretty break” for readability. Suitable for body text.

Example:

/* Balanced last line for headings */
h3 {
  text-wrap-style: wrap;
  text-wrap-last: balance;
}

/* Pretty last line for body text */
p {
  text-wrap-style: wrap;
  text-wrap-last: pretty;
}

HTML Example:

<h3 style="text-wrap-style: wrap; text-wrap-last: balance;">
  Balanced last line (≥50% of penultimate line).
</h3>

<p style="text-wrap-style: wrap; text-wrap-last: pretty;">
  Pretty last line (≤49% of penultimate line).
</p>

Use Cases

1. Headings: text-wrap-last: balance ensures the last line is visually substantial, improving the aesthetic of short text blocks.
2. Body Text: text-wrap-last: pretty creates shorter last lines, enhancing readability in long-form content.
3. Responsive Design: Allows developers to fine-tune text appearance across different screen sizes without relying on JavaScript or complex workarounds.

Why Not Extend Existing Properties?

• text-wrap-style: Already focuses on overall wrapping behavior (wrap, balance, pretty, no-orphans). Adding last-line control here feels overloaded, and no-orphans is too specific.
• text-align-last: Focuses on alignment, not wrapping. text-wrap-last is distinct as it manipulates break opportunities, not just alignment.
• A dedicated property aligns with CSS’s modular design and naming conventions (e.g., text-align-last).

Open Questions

1. Should text-wrap-last support additional values, such as a percentage-based threshold for last-line length?
2. How should UAs handle edge cases, like very narrow containers where achieving 50% (balance) or ≤49% (pretty) is impossible?
3. Should text-wrap-last interact with text-wrap-mode (e.g., wrap vs. nowrap) in specific ways?

Additional Notes

• Unlike text-align-last, text-wrap-last is unaffected by bidi directionality, as it focuses on line length, not alignment.
• This proposal removes no-orphans from text-wrap-style, as text-wrap-last: pretty effectively replaces it with more flexibility.
• Implementation may require UAs to adjust line-breaking algorithms, potentially impacting performance. Feedback on feasibility is welcome.

References

• CSS Text Module Level 4
• Related issue: Discussion on text-wrap-style: no-orphans

[jfkthame]

What would text-wrap-last do to single-line blocks? text-align-last affects them, but I doubt you want this to do so.

For "pretty" body text, I would suggest there are two cases that should be avoided: a very short last line, and a very full one. The behavior described here only considers the latter. But in general it's unrealistic to require every last-line to be less than half the width. IMO, readability does not require the last line to be no more than half-width; it only requires it to be significantly less than entirely full. So a pretty value should ensure the last line is at least X% of the width and at most Y% of the width, where X and Y are perhaps something like 20 and 80 respectively. (Maybe they should be author-controlled?)

Also, the word "ensure" is too strong (especially with such an extreme constraint on the length, but even if this is loosened). There will be cases where it is impossible to make the last line fit this constraint except by doing serious violence to the earlier lines -- especially in the case of a two-line paragraph, where there is very little flexibility. So the spec for such a "pretty" value needs to speak in terms to "attempt to ensure" or something like that (maybe "attempt to avoid" certain things is a better way to express the intent), recognizing that there may be conflicting constraints, and sometimes the attempt will fail.

[jonkwheeler]

I agree with a lot of what you've said. I don't want to lose focus though. I think there's merit to text-wrap-last having a pretty or balance property.

My thoughts around the whole above and below 50% was more about how many orphans are allowed. Often in body copy having "no orphans" then just puts 2 words on the last line. Sometimes that doesn't make sense. I thought pretty could attempt to make sure the last line in at least 2 words, and balance attempts to make the last line around 50%.

[fantasai]

I think this would still need to be incorporated into text-wrap-style somehow. We can have multiple values, or functional notations if we need to -- but overall it affects the wrapping of the entire paragraph. The content has to come from somewhere if you want to change the length of the last line!

Some earlier proposals were e.g. last-line-length: <length> | <percentage>. Maybe no-orphans could be replaced by a functional notation that takes some keywords.