On my website, I have implemented automatic hyphenation using CSS:
article > p,
article > li {
-o-hyphens: auto;
-o-hyphenate-limit-before: 3;
-o-hyphenate-limit-after: 3;
-o-hyphenate-limit-chars: 6 3 3;
-o-hyphenate-limit-lines: 2;
-o-hyphenate-limit-last: always;
-o-hyphenate-limit-zone: 8%;
// Other browser prefixes and hyphenation properties
}
The hyphenation seems to work fine in Safari and Firefox as shown in the images below:
https://i.stack.imgur.com/LUVEM.jpg
However, it is not working as expected in Chrome and Opera as seen here:
https://i.stack.imgur.com/CIGSW.jpg
I am using Gatsby JS for my website, and UTF-8 encoding is correctly set up.
Upon researching the issue, I found similar problems faced by others. However, I could not find anyone experiencing this specific issue only in Chromium browsers.
CSS hyphenation typically functions better in Safari and Firefox, but the difference in behavior across browsers is unexpected. What could be causing this issue and how can it be resolved? Why is this happening exclusively in Chromium browsers?