Jan's Development Microblog
Go back to blog overview
| Jan Valkenburg | CSS | Reading time: 7 min

CSS Hyphens broken in Firefox

In the Dutch language, we often encounter really long words that rarely fit on a single line when displayed on mobile. Hyphens: auto should fix this, right?

Earlier this week, I received a request from a colleague. A client of our company had an issue with their website. On mobile, they could scroll a little bit in the horizontal direction. This should never be possible for the average website. Normally, this means that text or a container is too wide for the screen. So, I booted up my toolkit, browser Polypane, for some testing. Polypane has an option that shows borders around each container and also shows a red color to let the developer know that the content is overflowing. This made it easy to find the issue. As expected, it was a long title that was wider than the mobile screen.

As stated in the introduction, this is a common issue with the Dutch language. Here in the Netherlands, we use a lot of very long combined names. In this case, there was an issue with the vacancy name: 'Reizigersverpleegkundige'. For now, remember the capital 'R'. I will come back to it later on.

example of hyphens bug in firefox example of hyphens bug in firefox

One solution for breaking long words is using the hyphens attribute. For almost every browser, this works without any problems. However, there is still one browser that can't handle breaking most of the longer words we use in the Dutch language. I hate to say it, but it is my favorite browser: Mozilla Firefox. Some words break fine, while others don't break at all in Mozilla Firefox. This issue prevents me and my colleagues from using this method as we cannot rely on it.

Small side note: I began using Mozilla Firefox around 2003 when it was still called Firebird. That's been more than 20 years now. I am starting to feel old. But enough about that, let's get back to the main story.

An alternative solution

As we aren't able to use the CSS hyphens attribute, I introduced an alternative way of breaking words, which is far from perfect, but it gives us and the client some control over breaking their long vacancy names. That was the ­ Most of the time, we can get away with breaking the word 'Reizigersverpleegkundige' by splitting it in two: 'Reizigers-verpleegkundige' and rendering it in that way. As we don't want to render the '-' character when the text fits on the screen, we need to replace it with ­. The HTML title will look like this: 'Reizigers­verpleegkundige'. This, of course, has one big downside: it still won't allow us to break the words at the correct spot. So in the end, we will end up with something like this: 'Rei­zi­ger...'. This is a big NO.

After telling my colleague that we have no way to fix this issue, and the client not wanting (for some strange unknown reason) to render long vacancy names on multiple lines, we left it as it is, even after I suggested we should just include 'hyphens: auto;' for the other browsers. The last solution would be to disable the horizontal scrollbar. But all of this is just wrong!

Bug using Hyphens in Mozilla Firefox?

While I was taking a final look at this issue before closing the ticket, I noticed something strange. A little lower on the website, I saw the same word broken up into two lines using hyphens. Even stranger. It was the exact same word that was not breaking up higher up on the page. The word that broke up was 'reizigersverpleegkundige'. The one that didn't break up is 'Reizigersverpleegkundige'. The only difference between the two words is the capital 'R'. After changing the capital 'R' into lowercase, the word was rendered on multiple lines. I always assumed this was a bug in the word library, with Mozilla Firefox knowing how to break some words but not others. However, after seeing this bug in the Firefox browser, I am not sure if I was right.

In the meantime, I have looked it up, and it is indeed a bug report for Firefox that won't be fixed. It was reported 13 years ago and marked as "won't fix" 5 years ago. They even stated that this behavior is by design. Quoted: "Automatic hyphenation is deliberately suppressed for capitalized words."

A workaround for the hyphens bug in Firefox

After discovering this issue, it is time to see if there is a way to fix the word breaking within Firefox. Of course, this bug should be fixed in Mozilla Firefox itself. No workaround should be used to fix bugs in software. However, for the meantime, we should check if we can fix it temporarily so the client has a website that works without any word break issues.

While testing, I found out that if there is even a single capital letter in the text, the hyphens stop working. So what if we change it all back to lowercase and re-add the uppercase characters using text-transform? Will this work?

So it was time to do some testing and make a proof-of-concept. And it seems my assumptions were right. By changing all the text to lowercase and re-adding the uppercase parts with CSS and a little extra HTML, it does work. I have included the code which I used for testing:

<div lang="nl">
    <h1>reizigersverpleegkundige</h1>
    <h1>reizigersVerpleegkundige</h1>
    <h1 class="first-letter">reizigersverpleegkundige</h1>
    <h1>snelpunt<span>reizigers</span>verpleegkundige</h1>
</div>

<style>
    div {
        hyphens: auto;
        width: 300px;
        background-color: beige;
    }
    span {
        color: red;
        text-transform: uppercase;
    }
    .first-letter::first-letter {
        text-transform: uppercase;
    }
</style>
example of hyphens bug in firefox

The solution

  1. change text to lowercase
  2. add ::first-letter{text-transform: uppercase;}
  3. include with custom css into your words.

Final word

I still don't understand why Mozilla Firefox is the only browser that can't break words in the correct way. Even weirder is that they don't fix this behavior. As it works in other browsers without any problems. Using a workaround to fix this browser issue is not advisable. You should never fix a bug with a workaround. In this case, if Mozilla doesn't have plans to fix it, we have two options. Do nothing and ignore this issue by telling our clients that we can't break long words because of broken browser support. The other option is to use the workaround mentioned above and give the clients a working website. It's an easy choice if you ask me. We have to wait and see if Mozilla will fix this bug in the future; until then, I am forced to use this workaround.

未来はあなたに与えられるものではありません。それは自ら手に入れなければならないものです。— Life is not a game of luck. If you wanna win, work hard. - Sora (No Game No Life)