Don’t be shy, let’s try using ­

Sometimes I really feel like a little child, exploring the world anew day after day. At least as far as the programming world is concerned. If you are open to new things as well as old traditions, you can often save yourself unnecessary and time-consuming detours. And so I just found myself implementing my own solution to a problem that had already been solved almost 30 years ago.

Photo by Joshua Eckstein on Unsplash

But let’s start from the beginning! About an hour ago, I was converting long text for the imprint of a website into HTML and using CSS to give it shape. Nothing special! When I had finally implemented everything and started to visually check the different viewports, I noticed that long words — for example the headline<h1>Datenschutzerklärung</h1>— do not wrap but widen the viewport horizontally:

Because the headline does not wrap, it protrudes beyond the visible area.

Okay… I just forgot to word-break the <h1>. Not a big deal, a simple adjustment in the CSS solves the problem quickly and reliably.

h1 {
    word-break: break-word;
}

At least I thought so…

Actually, the “word-break” works but it doesn’t look nice

But… honestly, this is not exactly what I had hoped for. Of course, the browser breaks the word, this instruction was defined by CSS after all. However, two things are not solved very nicely. Firstly, the word breaks at any point, depending on how much space is available for the word in the current viewport. In addition, a separator is missing to visualize the word separation to the human eye in a way that is as harmonious and intentional as possible. At this point, another CSS property comes on the scene.

h1 {
    word-break: break-word;
    hyphens: auto;
}

WOW! Awesome! That’s almost what I wanted! Look!

The “hyphens: auto” property let’s the word break automatically depending on the defined HTML lang attribute

As the Mozilla developer website reveals, hyphens: auto; breaks a word at defined positions, depending on hyphenation rules for the properly tagged language specified in the lang HTML attribute.

The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. […] The auto setting's behavior depends on the language being properly tagged to select the appropriate hyphenation rules. You must specify a language using the lang HTML attribute to guarantee that automatic hyphenation is applied in that language.(https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens)

That’s great! This realizes grammatically correct word-breaks and you usually don’t have to worry about anything else. For me to be 100% satisfied, however, there is still one tiny little thing missing. I wish the word would break at a specifically defined point. A point I determine.

And finally, after wanting to write my own auxiliary constructs in the meantime, I found the solution in the depths of the internet. And to my shame, I must confess, I have never heard of it in my entire existence as a programmer!

In Unicode version 1.1 (from June 1993), a symbol is defined (https://www.compart.com/de/unicode/U+00AD) that is also available as an HTML entity: &shy

It is an invisible hyphen that is not rendered by browsers. Instead, it sets a mark where the browser should break the word if necessary. It is also known as a “soft hyphen”. This totally nails it! Exactly what I had hoped to find! And definitely the best way to use it wherever I need it.

So, in addition to the CSS definitions I had already pointed out above, I have adapted the content of my <h1> accordingly and integrated the symbol in the place provided for it:

<h1>Datenschutz&shy;erklärung</h1>

Below I show you the final result:

Finally, “­” did the trick!

I know, no big deal. Probably many already knew this HTML symbol for quite some time. For me, however, it was one of those eureka effects in the life of a programmer that make your work easier and show you that in 99% of cases you are not the only one who has to solve a specific problem. Most of the time, there were already others who had developed a clever solution long before.