[csswg-drafts] [css-text] Add `text-wrap-line` for orphan avoidance; remove orphan control from `text-wrap-style` (#12716)

jonkwheeler has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-text] Add `text-wrap-line` for orphan avoidance; remove orphan control from `text-wrap-style` ==
# 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**:
```css
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**:
```css
/* 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**:
```html
<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](https://drafts.csswg.org/css-text-4/)
- Related issue: [Discussion on `text-wrap-style: no-orphans`](https://drafts.csswg.org/css-text-4/#issue-d49c0659) 

<img width="896" height="89" alt="Image" src="https://github.com/user-attachments/assets/8cfdd968-4c34-493e-8d55-d538badbafcc" />

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12716 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 2 September 2025 14:23:40 UTC