Broken Hyphens in Chromium 96: An Explanation (and Fix)

In Chrome 96 some fonts render their hyphens as boxes. The fix will ship with Chrome 98, but in the meantime, we can use some CSS to fix it.


This content originally appeared on Bram.us and was authored by Bramus!

In Chromium 96 on Mac there’s a bug where it will show box characters instead of hyphens. It doesn’t happen with all fonts, but it happens enough to notice. Awaiting a patched Chromium 98, we can use some CSS to fix it.

~

# The Bug

Here’s (a screenshot of) a Pen that has the font set to Arial and has hyphenation enabled:


(Click image to go to interactive Pen)

The hyphenation itself will work as expected, but for some reason — which we’ll detail below — it shows box characters where the hyphens should be.

The CSS powering the Pen are the 100 bytes of CSS to make any page look good, along with this little snippet:

body {
	font-family: arial;
	hyphens: auto;
}

The bug happens in Chromium-based browsers on Mac — That’s Google Chrome, Microsoft Edge, Brave, etc. It only happens on macOS Monterey; Big Sur does not show this bug.

~

# Digging Deeper

Searching around I found Chromium Bug #1267606 which covers the bug. In it, Chromium Engineer Dominik Röttsches (drott) dug deeper and unearthed the details.

There are two hyphen characters, U+2010 (HYPEN) and U+002D (HYPHEN-MINUS) […]

Our hyphenation code first looks for U+2010 in the font, otherwise uses U+002D.

Even though Arial has no U+2010 set, the Core Text API — which is used to retrieve the glyph — claims there is:

The new and old version of the font do not have hyphens in their cmap table, but the CoreText function for retrieving a glyph id does strangely return 16 for U+2010 on Monterey, but doesn’t find the glyph in the font on Big Sur (as it should).

And when a font tries to show a glyph it does not have, it’ll show a box instead.

~

# The workaround

The bug itself has already been patched, and the patch is included in Chromium 98 which is due Feb 1, 2022. If you can’t wait until then, there’s a CSS workaround that you can use: the hyphenate-character property allows you to set which character(s) to use shown between parts of hyphenated words.

For WebKit (which powers Safari) and Blink (which powers Chromium) you need to use the vendor-prefixed -webkit-hyphenate-character variant, so the CSS fix becomes this:

html {
    -webkit-hyphenate-character: '-';
}

Easy, peasy 🙂

~

Side Note: at the time of writing no browser supports the unprefixed hyphenate-character property. There seems to be interest from Gecko (Firefox’s Rendering Engine) on it though, as they’ve recently asked if the spec work on it stable enough, before starting work on it.

See the Pen CSS hyphenate-character / -webkit-hyphenate-character Support test by Bramus (@bramus) on CodePen.

~

🔥 Like what you see? Want to stay in the loop? Here's how:


This content originally appeared on Bram.us and was authored by Bramus!


Print Share Comment Cite Upload Translate Updates
APA

Bramus! | Sciencx (2021-12-18T21:13:27+00:00) Broken Hyphens in Chromium 96: An Explanation (and Fix). Retrieved from https://www.scien.cx/2021/12/18/broken-hyphens-in-chromium-96-an-explanation-and-fix/

MLA
" » Broken Hyphens in Chromium 96: An Explanation (and Fix)." Bramus! | Sciencx - Saturday December 18, 2021, https://www.scien.cx/2021/12/18/broken-hyphens-in-chromium-96-an-explanation-and-fix/
HARVARD
Bramus! | Sciencx Saturday December 18, 2021 » Broken Hyphens in Chromium 96: An Explanation (and Fix)., viewed ,<https://www.scien.cx/2021/12/18/broken-hyphens-in-chromium-96-an-explanation-and-fix/>
VANCOUVER
Bramus! | Sciencx - » Broken Hyphens in Chromium 96: An Explanation (and Fix). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/18/broken-hyphens-in-chromium-96-an-explanation-and-fix/
CHICAGO
" » Broken Hyphens in Chromium 96: An Explanation (and Fix)." Bramus! | Sciencx - Accessed . https://www.scien.cx/2021/12/18/broken-hyphens-in-chromium-96-an-explanation-and-fix/
IEEE
" » Broken Hyphens in Chromium 96: An Explanation (and Fix)." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2021/12/18/broken-hyphens-in-chromium-96-an-explanation-and-fix/. [Accessed: ]
rf:citation
» Broken Hyphens in Chromium 96: An Explanation (and Fix) | Bramus! | Sciencx | https://www.scien.cx/2021/12/18/broken-hyphens-in-chromium-96-an-explanation-and-fix/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts