4

The browser support for hyphens: auto is still a bit lacking, even for English, but I would like to provide it already to my visitors using Firefox. If the browser does not support it, however, the gaps in the justified text are unseemly wide, and I would rather fall back on flush left alignment.

This is essentially what the CSS code looks like.

p {
    text-align: justify;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

I’m aware of JavaScript libraries like Hyphenator.js that provide hyphenation for a range of browsers, but is there maybe a pure CSS solution for my simpler use case? I’ve come to think of hyphenation as less than essential on the web, unfortunately, and don’t want to embed a JavaScript library if there is a simpler fallback solution. Thanks!

Dawn Drescher
  • 901
  • 11
  • 17

1 Answers1

3

The new @supports property can do it, however that is not supported by all browsers either. If you are willing to accept that as a limitation you can look at the Mozilla Docs here: @supports

Cliff Ribaudo
  • 8,932
  • 2
  • 55
  • 78
  • 1
    Sort of, but `@supports` isn't *quite* as useful/rigorous as we might hope: [http://meyerweb.com/eric/thoughts/2013/03/19/unsupportable-promises/](http://meyerweb.com/eric/thoughts/2013/03/19/unsupportable-promises/). (Albeit this is the closest approach that CSS offers to meet this requirement.) – David Thomas May 25 '14 at 20:05
  • Awesome, thank you! I’m using `@supports ((hyphens: auto) or (-webkit-hyphens: auto) or (-moz-hyphens: auto)) { /* Definitions as above */ }`, and it works as expected in Firefox and Chromium. – Dawn Drescher May 26 '14 at 05:27
  • Setting the `lang` html attribute to `de-DE` broke the hyphenation for the mobile browser I tested. Firefox was fine with it. Setting `lang="de"` fixed this issue. Hope this helps someone looking this up again ;) – nuiun Aug 09 '22 at 09:54