is CSS hyphenation supported by all browsers?

user_159319 0
Viewed 605

I am trying to build a site with dynamic user content in different languages.

For example:

<p lang="en">disestablishment</p>
<p lang="de">Käsekuchenbäckereibesitzer</p>
<p lang="fr">Consciencieuse</p>
<p lang="it">Imbarazzato</p>
<p lang="es">decepcionado</p>

I am using CSS to activate hyphenation:

p[lang] {
    width: 60px;

    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

It seems to work great on my machine, but I tried to find out if this works also on other platforms and machines. So I tried it on BrowserStack and got very different results:

unprefixed en de fr it es
android 11 ✅ ✅ ✅ ✅ ❌ ✅
ios 14 ❌ ✅ ✅ ✅ ✅ ✅
chrome 90 big sur ✅ ✅ ✅ ✅ ✅ ✅
edge 90 big sur ✅ ✅ ✅ ✅ ✅ ✅
ff 88 big sur ✅ ✅ ✅ ❌ ❌ ✅
safari 14 big sur ❌ ✅ ✅ ✅ ✅ ✅
chrome 90 el capitan ✅ ✅ ✅ ✅ ✅ ✅
ff 88 el capitan ✅ ✅ ✅ ❌ ❌ ✅
chrome 90 windows 7 ❌ ❌ ❌ ❌ ❌ ❌
edge 90 windows 7 ❌ ❌ ❌ ❌ ❌ ❌
ff 88 windows 7 ✅ ✅ ✅ ❌ ❌ ✅
chrome 90 windows 10 ❌ ❌ ❌ ❌ ❌ ❌
edge 90 windows 10 ❌ ❌ ❌ ❌ ❌ ❌
ff 88 windows 10 ✅ ✅ ✅ ❌ ❌ ✅

I found also support tables which are very different from my results:

Could this be caused by languages installed on the operation systems?

microsoft-edge firefox google-chrome css html
3 Answers

Could this be caused by languages installed on the operation systems?

My research led me to the conclusion that it was a bug with Chromium that it only worked on Adroid and Mac. So yes, it is depending on the OS. Fixed in Canary M88, I can't say if it was implemented to stable already. Edit: It is shipped already If you have tested it with Chrome 90, this might not explain why you didn't get the desired results on Chrome/Edge on Windows 7 & 10. However, this all might lead you to the right direction, especially the Platform Support Explenation:

This feature enables the Android's hyphenation engine on all platforms, except Mac keeps using the hyphenation engine in the platform.

https://bugs.chromium.org/p/chromium/issues/detail?id=652964

user_61996400

CSS support has nothing to do with the operating system.

You can think of browsers as virtual machines that can run web languages ( HTML, CSS, JS, ...).

When a new feature is added to one of these languages the browsers will have to implement it. That's why you are getting different results on your search. Browsers implement those new features at their own rhythm. Meaning that maybe now Chrome doesn't supports a feature but tomorrow does.

As for your personal question, since hyphens are applyed different for every language, browsers need to implement this functionality for all of them. It's not a small feature so tracking the support of it for all the browsers is a lot of work.

I wouldn't be worried about that. Those browsers that have this functionality partially or complete will use it, those that haven't won't.

You can always see the support for a feature on Mozilla's web. At the end you will see a table with the support of hyphens on different browsers. Of course this is Mozilla page so only real information is the Mozilla support (you cannot trust others are updated).

EDIT:

Notice that browsers have different implementations depending on the SO. For example Chrome has different functionalities depending on the Platform/SO (e.g. Windows vs Android).

user_81888750

For more details about hyphenation, please consider taking a look at Mozila documentation page https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens. This will sure help you out!

For me i would go with the hyphens: auto; word-break: break-all; as following (works for most browsers):

p[lang] {
    width: 60px;
    -ms-word-break: break-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Hopefully, this will help you out! Also feel to update the answer if this does help you by achieving your goal.

user_56671030
Related