Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

is CSS hyphenation supported by all browsers?

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:

  • mozdev hyphen support
  • caniuse EN hyphens
  • caniuse DE hyphens
  • caniuse FR hyphens
  • caniuse IT hyphens
  • caniuse ES hyphens

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

like image 456
jantimon Avatar asked May 25 '21 08:05

jantimon


People also ask

Is CSS supported by all browsers?

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?

Can I use CSS hyphens?

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.

How do you break words with a hyphen in CSS?

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.

How do you make a hyphen in HTML?

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.


1 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

like image 146
Hannes Avatar answered Sep 19 '22 16:09

Hannes