#30DaysofHTML Day 9: <wbr > and ­
For the sesquipedalianists in your life
As developers, we tend to ignore some of the nice styles that print designers have tweaked in their work for years. For example, we don’t often modify kerning, leading, widow/orphan control, or hyphenation in our sites. Nor do we tend to think much about a paragraph of information that wraps onto multiple lines. Where exactly are the line breaks occurring? How do we make the rag look even?
8 Simple Typography Tips For Your Designs from Smashing Magazine
But the designers among us will be super happy to know that we have some control over the rag using <wbr>, the word break tag, and ­, the "shy" hyphen.
What does <wbr> do?
Long words don't automatically hyphenate on the web. What's more, for developers trying to make text look good on the range of screen sizes we support, inevitably marketing and/or the designers will find that ONE ANNOYING SCREEN where it looks bad and harp on it endlessly. Not that we have ever personally experienced this.
<p>Somewhere out there, on some screen, this sentence will look awful because of <dfn>sesquipedalianism</dfn>, a love of long words.</p> We suppose you could do some JavaScript magic to address this problem. But you know what's coming next. The content writers complain that the hyphens are in the wr-on-g spot.
<wbr> performs an essential public service in indicating where word breaks might occur as set by a human.
<p>Somewhere out there, on some screen, this sentence will look awful because of <dfn>ses<wbr>qui<wbr>pe<wbr>dal<wbr>ian<wbr>ism</dfn>, a love of long words.</p> (We may have over-<wbr>-ed in this example.)
✅ This breaks up sesquipedalianism in the right spots, and the breaks appear only if needed. See the CodePen demo for <wbr> in action.
⛔️ The next problem is "BUT WAIT THERE IS NO HYPHEN." Correct. <wbr> does not provide you with a hyphen. This may be helpful for those occasions where a break is needed but a hyphen is not desired.
For example, have you ever styled a long URL on a page? (University peeps: citations, amirite?) <wbr> handles this well without adding extra characters. See the CSS Tricks article that will walk you through this.
What does ­ do?
✅ You guessed it already! A "shy" hyphen is a hyphen that appears only when needed.
<p>Somewhere out there, on some screen, this sentence will look awful because of <dfn>ses­qui­pe­dal­ian­ism</dfn>, a love of long words.</p> See the CodePen demo for ­ in action.
CSS-based typography properties
HTML is for markup, so there's not much else we can do with <wbr> and ­ in #30DaysofHTML.
However, there are many well-supported CSS properties that also control other aspects of typography. It's more than Google Fonts.
What's more, if browsers don't support these CSS properties, you are no worse off than you would be if you didn't include them. That's progressive enhancement at its finest!
Widow/orphan control (Firefox doesn't support widows and orphans. Ponder that for a minute, you monsters.)
CSS hyphenation (works great for English, not so great in other languages)
CSS columns to shorten line lengths for improved reading
CSS word breaks to prevent words from overflowing their container
Type scales for well-proportioned type
And others!
<wbr> and ­ demo
🖥 View the <wbr> and ­ demo on CodePen.
No new challenge - but try some older ones
Once again, while <wbr> and ­ are important, they’re pretty straightforward in their use. No new quizzes or challenges today!
However, you can always look back at past days, view past challenges, and discuss answers on the Substack website.
More information and examples
📚 CSS-Tricks: Better line breaks for long URLs
🎥 LinkedIn Learning: Controlling breaks with <wbr> or ­ (subscription required)
I had a content creator hugging me when I introduced ­ to her. It's suuuper useful. Especially in Danish, where we concatenate nouns, like "Speciallægepraksisplanlægningsstabiliseringsperiode"
You would need put your iPhone 13 Ultra Max in landscape mode for that, weren't it for ­
Also CSS hyphenation actually works surprisingly well in Danish. It's not perfect, but a lot better than any horizontal scrollbar.
<wbr> is new to me, and will come in handy for those long urls. Always learning something new :) Thank you!
Thanks for another no homework lesson. This is really interesting and I would like to use some of the techniques.