Full hyphenation control for better readability, and to bring the web up to the same typesetting quality as InDesign, Word, etc

[clagnut]

Description

There is more to setting hyphenation than just turning on the hyphens. The CSS Text Module Level 4 has introduced the same kind of hyphenation controls provided in layout software (eg. InDesign) and some word processors (including Word). These controls provide different ways to define how much hyphenation occurs through your text.

Browsers support hyphens:auto but should also implement additional the hyphenation controls (properties) to improve readability and customise layout:

• hyphenate-limit-chars Limiting the word length and the number of characters before and after a hyphen
• hyphenate-limit-lines Limiting the number of consecutive hyphenated lines
• hyphenate-limit-last Avoiding hyphenated words across the last line of a paragraph
• hyphenate-limit-zone Reducing hyphenation by setting a hyphenation zone

There was a regression for support in Edge, which used to support all the hyphenation properties (the only browser to do so) but lost this capability with its switch to Blink in 2020 (Edge version 80 onwards).

Safari, Firefox and Edge don't support any of these properties. Chrome only supports hyphenate-limit-chars. Safari supports hyphenation character limits using prefixes and some legacy properties specified in an earlier draft of the CSS3 Text Module.

Specification

https://www.w3.org/TR/css-text-4/#hyphenation

web-feature

hyphenation

Test Links

Demo/test

Additional Signals

All you need to know about hyphenation in CSS blog post detailing the properties and their support (and lack thereof)

Webkit bugs:

• Implement hyphenate-limit-zone CSS property
• Parse and apply the hyphenate-limit-chars property

[github-actions]

This comment was automatically generated based on the information you provided. Please don't edit it.

No web features (from the web-features project) were found in your proposal. If your proposal doesn't correspond to a web feature, that is fine.
Otherwise, please update your initial comment to include web-features: <feature-id>.
To find feature IDs, use the web-features explorer.

[jgraham]

How testable is this? It seems like the spec allows a range of implementation-defined behaviour for hyphenation, which might make it hard to include in Interop. Do you know of any existing web-platform-tests that cover the properties of interest?

[clagnut]

My definition of 'full hyphenation control' means supporting the list of properties I gave:

• hyphenate-limit-chars Limiting the word length and the number of characters before and after a hyphen
• hyphenate-limit-lines Limiting the number of consecutive hyphenated lines
• hyphenate-limit-last Avoiding hyphenated words across the last line of a paragraph
• hyphenate-limit-zone Reducing hyphenation by setting a hyphenation zone

I would think those are all testable, assuming tests don't exist already beyond my informal ones.

[wpt-interop]

Thank you for proposing Full hyphenation control for better readability, and to bring the web up to the same typesetting quality as InDesign, Word, etc for Interop 2026.

We want to let you know it was not selected to be part of Interop this year.

On behalf of the entire Interop team, thank you for submitting it for consideration. We got many more proposals than we could include in this year's project, necessitating some difficult choices. Please note this should not be taken as a comment on the technology as a whole, or our willingness to consider it for Interop in the future. We appreciate the work you put into your proposal, and would welcome your participation in future rounds of Interop.

Posted on behalf of the Interop team.