W3C home > Mailing lists > Public > public-css-archive@w3.org > December 2018

[csswg-drafts] [css-text] Prevent line breaking after explicit hyphens (#3434)

From: hftf via GitHub <sysbot+gh@w3.org>
Date: Wed, 12 Dec 2018 10:15:35 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-390154666-1544609734-sysbot+gh@w3.org>
hftf has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-text] Prevent line breaking after explicit hyphens ==
<!--[css-text] Prevent hyphenation/line breaking after explicit hyphens-->

I want to prevent hyphenation/line breaking of words containing hyphens ([hyphenated compounds](https://en.wiktionary.org/wiki/hyphenated_compound)). Some common examples of hyphenated compounds in English are <ins>T-shirt</ins>, <ins>long-term</ins>, and <ins>so-called</ins>.

## Why?

This behavior is important for documents that prioritize legibility over aesthetics, such as:

- highly technical documents¹
- documents that will primarily be read out loud
- pedagogical documents

These documents may want to apply the behavior to the entire document, not on a case-by-case basis.

¹ This very spec once faced a similar issue in which unwanted hyphenation led to confusion: #2307

## Current status

[CSS Text Module Level 3](https://www.w3.org/TR/css-text-3/#hyphenation) does not define what hyphenation opportunities are:

> Hyphenation occurs when the line breaks at a valid ***hyphenation opportunity***…. CSS Text Level 3 does not define the exact rules for hyphenation….

Under `hyphens`, it says:

> <dl><dt>none</dt><dd>Words are not hyphenated, even if characters inside the word explicitly define hyphenation opportunities.</dd></dl>

However, `hyphens: none` does not give the expected result in most browsers.

> For example, see how Chrome 70/Mac renders [this JSFiddle](http://jsfiddle.net/esm128qL/):
>
> <img src="https://user-images.githubusercontent.com/312957/49853547-85c52d80-fdb5-11e8-8926-4c999fe9e081.png" width="432" />

I am concerned that the current spec gives authors very little control over a simple display requirement. For example, it never mentions the behavior of U+002D HYPHEN-MINUS, the most widespread hyphen character by far, even once.

## Some workarounds

Wrap all hyphenated compounds in `<span style="white-space:nowrap;">` or `<nobr>` (nonstandard).

Cons:

* Adds lots of unnecessary, presentational markup

---

Surround all hyphens with U+2060 WORD JOINER.

Cons:

* Affects searching and copying

---

Replace all hyphens with U+2011 NON-BREAKING HYPHEN.

Cons:

* Affects searching and copying
* Affects display; may look very ugly depending on the font (or fallback font)
  * Few fonts have a glyph for U+2011 (379 out of 3426 on my system do).
  	Even if they do, U+2011 may not look identical to U+002D or U+2010.

The [Unicode Line Breaking Algorithm](http://unicode.org/reports/tr14/#GL) (UAX 14) recommends this method, but it seems rare in practice:

> <dl><dt>2011 NON-BREAKING HYPHEN</dt><dd>This is the preferred character to use where words need to be hyphenated but may not be broken at the hyphen. Because of its use as a substitute for ordinary hyphen, the appearance of this character should match that of U+2010 HYPHEN.</dd></dl>

## Possible solutions

1. Define “hyphenation opportunities”
2. Re(de)fine `hyphens: none`
3. Add a brand new value, such as `hyphens: none-including-hyphens`

## Questions

1. Does this affect CSS Text Module Level 3 or Level 4, or neither?
2. Will it impact the [Last Call](https://www.w3.org/blog/CSS/2018/12/07/css-text-3-lcwd/)?

I can’t find any previous discussion on this topic; sorry if it’s a duplicate.

Thank you for considering this feedback – it’s my first time engaging with the standards process.

## Further reading

* [StackOverflow: No line-break after a hyphen (▲293, 2018)](https://stackoverflow.com/questions/7691569/no-line-break-after-a-hyphen)
* [StackOverflow: How to prevent line break at hyphens on all browsers (▲80, 2012)](https://stackoverflow.com/questions/8753296/how-to-prevent-line-break-at-hyphens-on-all-browsers)
* [StackOverflow: Is it possible to prevent linebreaks between hyphenated words in CSS? (▲1, 2018)](https://stackoverflow.com/questions/48980916/is-it-possible-to-prevent-linebreaks-between-hyphenated-words-in-css)
* [Welling Guzmán: Prevent line-break with hyphenated words (2015)](https://wellingguzman.com/notes/prevent-line-break-with-hyphenated-words)
* [CSS-Tricks: Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc) (2018)](https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/#comment-1651664)
  > Unfortunately, `hyphen: none` will still break words at hyphens (an explicitly defined hyphenation opportunity) even though the spec says it shouldn’t.
* #616, #618, #1040
* [CSSWG: Minutes Telecon 2016-11-02: Hyphenation Priority (2016)](https://lists.w3.org/Archives/Public/www-style/2016Nov/0009.html)
* [Jukka Korpela: Word division in IE and other notes on the nobr markup and on suggesting possible "word" breaks (2000)](http://jkorpela.fi/html/nobr.html#hyphen)
* [dotCSS 2018: Florian Rivoal: Line breaking (2018)](https://youtu.be/r5PLrAoyhv0?t=297)
* [Google Docs Help Forum: Insert non-breaking space/hyphen (2010)](https://productforums.google.com/forum/#!msg/docs/2-npGZmlPBY/NAsLMlYm0mwJ)
  Note that Google Docs renders hyphens as non-breaking by default in its browser view.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3434 using your GitHub account
Received on Wednesday, 12 December 2018 10:15:37 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:41 UTC