1521723 - Implement the hyphenate-limit-chars property

Status: RESOLVED FIXED

(Core :: Layout: Text and Fonts, enhancement, P3)

Description

[Michael Scharnagl]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

Steps to reproduce:

1. Use CSS Hyphenation for a sentence
2. Find out that it is also uses Hyphenation for very short words
3. Try to find a solution and fail to do so

Actual results:

The hyphenate-limit-chars property is currently not supported in Firefox. It should work as the -ms-hyphenate-limit-chars property in IE/Edge: https://msdn.microsoft.com/en-us/library/hh771865(v=vs.85).aspx

Expected results:

The hyphenate-limit-chars property should be supported in Firefox, so developers can decide how many characters a word should have before hyphens are used and how many characters before/after the break should be the minimum.

Comment 1

[Liviu Seplecan]

I've moved the bug to a new component and the guys from there will bet an idea of what should o whit this.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Hmm, well, is this in any spec?

Comment 3

[Jonathan Kew [:jfkthame]]

It's in the CSS Text 4 draft:
https://drafts.csswg.org/css-text-4/#hyphenate-char-limits

Comment 4

[babacan.hatice]

Hi do we have any news? Will this property be implemented soon?

kind regards

Comment 5

[Jonathan Kew [:jfkthame]]

Attachment: WIP: Bug 1521723 - Add CSS support for the hyphenate-limit-chars property.

Comment 6

[Jonathan Kew [:jfkthame]]

I took a stab at the CSS side of this (currently not hooked up to any actual layout behavior); WIP patch is above. Currently this seems to mostly work, but fails the transitions test at layout/style/test/test_transitions_per_property.html, so it's not 100% complete.

Comment 7

[schmitz]

It's really annoying that this feature still doesn't exist in 2022.

Comment 8

[dominique]

Agreed. I can't believe there is so little innovation in the area of hyphenation.

Comment 9

[Mike Taylor [:miketaylr]]

Hey Jonathan, an Intent to Ship for hyphenate-limit-chars was just sent to blink-dev[1]. I assume this is something that you'll eventually get back to, but let us know if this was paused due to other concerns. Thanks!

(Also let me know if you would prefer us filing a formal position issue - seems unneeded in this case)

[1] https://groups.google.com/a/chromium.org/g/blink-dev/c/TjuGJ-8TeXk/m/X8gUvSejAwAJ

Comment 10

[Jonathan Kew [:jfkthame]]

Yes, I hope to get back to it at some point, but it hasn't been a top priority; not sure when I'll find some spare cycles.

Comment 11

[David Naylor]

Bump. =)

Implementing this would make life a lot easier for many web editors and designers around the globe.

Comment 12

[schmitz]

I'm using this definitions since years in hope that this feature some day will be implemented.
Hope this will be implemented in the future because the default hyphens: auto handling looks so terrible...

-webkit-hyphenate-limit-before: 4;
-webkit-hyphenate-limit-after: 5;
-ms-hyphenate-limit-chars: 10 4 5;
hyphenate-limit-chars: 10 4 5;

Comment 13

[Wrana]

It's good that Edge and Chrome do support this, but at Firefox and Safari I have to exclude the support of hyphenation because the text layout without hyphenate-limit-chars is so disturbing and hard to read, that using hyphenation at all doesn't make sense.

Comment 14

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1521723 - Apply hyphenate-limit-chars settings to the potential breaks found by the hyphenator. r=#layout

Comment 15

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1521723 - Update references for auto-hyphenation reftests where hyphenate-limit-chars now blocks use of certain hyphenation points. r=#layout

Comment 16

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1521723 - Fix up incorrect expectations in WPT tests for hyphenate-limit-chars values. r=#layout

The spec[1] explicitly says that the computed value is "three values,
each either the auto keyword or an integer", so we expect the computed
value to consistently return all three values, even if only one or two
were specified.

Conversely, when serializing the specified value there is no requirement
to return all three possible values, if the trailing ones have their
default values. The serialization rules in the CSSOM spec[2] say:

If component values can be omitted or replaced with a shorter
representation without changing the meaning of the value,
omit/replace them.

This is applicable to a case like hyphenate-limit-chars: auto auto auto.
[1] tells us that:

If the third value is missing, it is the same as the second.
If the second value is missing, then it is auto.

Therefore hyphenate-limit-chars: auto is the correct serialization;
the omitted second value will be considered auto, and the omitted
third value will be the same as the second, i.e. also auto.

[1] https://drafts.csswg.org/css-text-4/#hyphenate-char-limits
[2] https://www.w3.org/TR/cssom-1/#serializing-css-values

Comment 17

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1521723 - Remove metadata for WPT tests that now pass. r=#layout

Comment 18

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1521723 - Add a WPT test for interpolation of hyphenate-limit-chars values. r=#layout

Comment 19

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b0d3a445cbb7
Add style-system support for the hyphenate-limit-chars property (not yet hooked up to layout). r=layout-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/24a7788aaa86
Apply hyphenate-limit-chars settings to the potential breaks found by the hyphenator. r=layout-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/0d2f510b48cd
Update references for auto-hyphenation reftests where hyphenate-limit-chars now blocks use of certain hyphenation points. r=layout-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/077f492c6eb5
Fix up incorrect expectations in WPT tests for hyphenate-limit-chars values. r=layout-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/938bbe1ece4e
Remove metadata for WPT tests that now pass. r=layout-reviewers,TYLin
https://hg.mozilla.org/integration/autoland/rev/a84e9b2644d1
Add a WPT test for interpolation of hyphenate-limit-chars values. r=layout-reviewers,emilio
https://hg.mozilla.org/integration/autoland/rev/a4aa1d64b768
apply code formatting via Lando

Comment 20

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/50370 for changes under testing/web-platform/tests

Comment 21

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/351da7476c93
Fix non-unified build & devtools test failures. CLOSED TREE

Comment 22

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/b0d3a445cbb7
https://hg.mozilla.org/mozilla-central/rev/24a7788aaa86
https://hg.mozilla.org/mozilla-central/rev/0d2f510b48cd
https://hg.mozilla.org/mozilla-central/rev/077f492c6eb5
https://hg.mozilla.org/mozilla-central/rev/938bbe1ece4e
https://hg.mozilla.org/mozilla-central/rev/a84e9b2644d1
https://hg.mozilla.org/mozilla-central/rev/a4aa1d64b768
https://hg.mozilla.org/mozilla-central/rev/351da7476c93

Comment 23

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 24

[Donal Meehan [:dmeehan]]

:jfkthame could you consider nominating this for a release note? (Process info)

Comment 25

[Daniel Holbert [:dholbert] (PTO until 2/24)]

(In reply to Donal Meehan [:dmeehan] from comment #24)

:jfkthame could you consider nominating this for a release note? (Process info)

Note that this is currently off-by-default for releases beyond Nightly...
https://searchfox.org/mozilla-central/rev/548b6981501f59e3c9f2f7851c013e7d53c4e72f/modules/libpref/init/StaticPrefList.yaml#9607-9611
...but it looks like the relnote "process info" that Donal linked would still suggest a release note, to spread word among Nightly users who read the release notes and maybe get us a bit more intentional testing from web developers on Nightly as a result.

Comment 26

[Donal Meehan [:dmeehan]]

(In reply to Daniel Holbert [:dholbert] from comment #25)

to spread word among Nightly users who read the release notes and maybe get us a bit more intentional testing from web developers on Nightly as a result.

Correct, we can still include release notes for nightly-only features. Relman ensures the release note does not ride the train to the beta release notes.

Comment 27

[Jonathan Kew [:jfkthame]]

Release Note Request (optional, but appreciated)
[Why is this notable]:
Automatic hyphenation (CSS hyphens: auto) can be undesirable because it introduces too much hyphenation. This property allows authors who enable hyphenation to have better control over how frequently it is applied.

[Suggested wording]:
The hyphenate-limit-chars property enables authors to have greater control over the use of automatic hyphenation.

https://drafts.csswg.org/css-text-4/#hyphenate-char-limits
Some background articles/blog posts:
https://medium.com/clear-left-thinking/all-you-need-to-know-about-hyphenation-in-css-2baee2d89179#8434
https://justmarkup.com/articles/2019-01-28-a-look-at-css-hyphenation-in-2019/#too-much-hyphenation
https://generatedcontent.org/post/44751461516/finer-grained-control-of-hyphenation-with-css4

Comment 28

[Donal Meehan [:dmeehan]]

Thanks, added to the Fx136 nightly release notes, please allow 30 minutes for the site to update.

Comment 29

[Dave Letorey]

Related Pull Requests

• BCD PR
• Firefox release PR