They are "cup and can," we say when friends are like united, and we are pleased about them. Inseparable do we call words appearing on websites, and we are not very happy.
In an ideal world, browsers would auto-separate words, like word processor programs, do. This way, it wouldn't be a problem to show extremely long expressions on narrow screens. And as web developers, we shouldn't take notice of customer needs asking for justifying text alignments.
"You stuck in the mud, the ideal world is already here!" would a well-informed reader say, thinking of hyphenation: auto CSS rule.
However, the slightly more informed reader will also know that this hyphenation is language-dependent (depends on the lang attribute's value). Its browser support is quite incomplete on the other. E.g. the Hungarian language handled by Firefox and Safari(!) only. And Chrome, the most popular browser for a long time, can't hyphenate in any language at all!
And if separation is needed anyway? There is a solution!
Of course, there is a solution. I wouldn't write a blogpost just to moan. Who would like automatism, can try, for example, Hyphenopoly JS polyfill (I haven't tried it). But there is also a different way; however, it is not so convenient as if the browser would do it, as we need to make some effort. But it works!
The secret is the so-called "soft hyphen" character, which we need to insert where long words get separated. If there is enough place, nothing special happens. But if there isn't, then the word will break at the point where we put the character, and the hyphen will also appear. Like here:
Drupal is careful
When we edit HTML or Markdown, it shouldn't be a problem to insert the ­ entity. But if we work with a CMS, it can give us trouble. Drupal, for example, does not allow for security reasons to use HTML code in content titles (neither). If we try to insert ­ it will appear in the word for users as well, like Su­per­ca­li­.
Fortunately, we don't need to get exasperated. The only thing we need to do is to insert the soft hyphens in the word according to the used operating system and not according to the HTML code. For this
- Windows: hold the Alt key, and write numbers 0173
- macOS: select soft hyphen from keyboard settings, "Emoji and Symbols," "Punctuation" section, and insert by double-clicking.
The inserted characters won't be visible, but they will be there, and take action if needed.
Share with your friends!
