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