Automatic hyphenation and progressive enhancement
Google Chrome is often portrayed as the the browser that supports the most bleeding-edge web technology, almost like it was the “reference browser”.
However, there is at least one CSS3 feature that Chrome supports poorly:
Automatic hyphenation
Despite the hyphens: auto
rule is part of CSS3, it is only supported in Chrome on Mac and Android and not on Windows or Linux, while Edge, Firefox and Safari support it.
For my taste, if the browser doesn’t do hyphenation, paragraphs that are justify-aligned look ugly since the amount of white space between words varies. Especially if the width of the paragraph
is less than, say, 10 words. So for one of my projects I have decided to use text-align: justify
only if automatic hyphenation is available, and use left alignment otherwise. @supports
comes to help here, which allowed me to do the following (you can see it in action at this codepen):
p {
text-align: left;
}
@supports (hyphens: auto) {
p {
text-align: justify;
hyphens: auto;
}
}
And don’t forget to mark your content with the correct language. Also check the browser language support table on MDN.