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?
Your CSS should work in all browsers as is. It may not display the same from browser to browser. Most developers use a reset to fix that issue. what should i use? for a beginner like me?
The hyphens CSS property specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.
hyphens: manual Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities. There are two characters that suggest line break opportunity: U+2010 (HYPHEN): the “hard” hyphen character indicates a visible line break opportunity.
In Windows, use ALT + 0151. To use an em dash on a web page, create it in HTML with "—" or "—." You can also use the Unicode numeric entity of U+2014.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With