Jens Oliver Meiert

Word Division: On “word-break”, Soft Hyphens, and Zero Width Spaces

Post from February 8, 2007 (↻ April 27, 2016), filed under .

Word breaks and hyphenation are sometimes a problem when it comes to little available space but long words: The longer the word and the less space available, the more a layout is “in danger.” English appears to be less affected than other languages (I suspect Finnish and also German to be sufficient examples for use of overly long words), but every once in a while a developer looks for ways to “automatically” break words.

Let’s take a look at possible solutions (example page).

word-break

word-break is a formerly proprietary property introduced by Microsoft (that doesn’t care about vendor-specific extensions), and it meanwhile has been included in CSS 3.

Though word-break sounds quite promising, I understand the specification that it does not demand from implementations to really take into account grammar, but to rather provide word breaking on a per-letter basis. That’s how it works now when you try break-all (see example), as long as you test with Internet Explorer that of course supports parts of this formerly unstandardized property.

Since this is just a little round-up, I will state that word-break

Soft Hyphen

The soft hyphen—from Unicode’s C1 Controls and Latin-1 Supplement (PDF)—is usually injected via ­ or ­, respectively. Entirely skipping Jukka Korpela’s ancient article on SHY, we must note that it

Zero Width Space

Zero width spaces—see Unicode’s General Punctuation chart (PDF)—are used the same way as soft hyphens, namely by placing ​ entity references in your HTML. So what’s to remark when you bank on zero width spaces (summarized as confusingly as possible…)?

Finally, you’re probably as wise as before, but beside correcting me on details (other nifty Unicode characters?) in this hastily written post please take another look at the aforementioned test page.

Update (July 9, 2007)

Breaking: The soft hyphen has been fixed in the Gecko core.

About the Author

Jens Oliver Meiert, photo of July 27, 2015.

Jens Oliver Meiert is an author, developer (O’Reilly, W3C, ex-Google), and philosopher. He experiments with art and adventure. Here on meiert.com he shares and generalizes and exaggerates some of his thoughts and experiences.

There’s more Jens in the archives and at Goodreads. If you have any questions or concerns (or recommendations) about what he writes, leave a comment or a message.

Comments (Closed)

  1. On August 3, 2007, 10:34 CEST, Miha Hribar said:

    Great article. I haven’t heard much of the mentioned zero width space, but the fact that it doesn’t work in IE6 still is a major issue (as a vast majority of users still haven’t upgraded their IE versions).

    On that note, you forgot to mention the wbr tag, as it currently is the only piece of code that works well on all browsers I tested. Though it is not a valid tag, it still gets the job done (if you can live with all those failed XHTML validation results 😊).

    For more info on the wbr tag check out quirksmode
    http://www.quirksmode.org/oddsandends/wbr.html

  2. On March 19, 2009, 18:11 CET, LeeJH said:

    <span style="font-size:0"> </span> gives an invisible space that the browser can wrap on, but the downside is that it ends up in the clipboard and if you use it excessively (between every character) it takes too long to render.

  3. On December 20, 2009, 14:49 CET, unlx said:

    Another possible option is using the word-spacing CSS option, which is pretty widely supported. If you set it to a negative value your spaces appear invisible. Again, like all but word-break the space does then appear when the text is copy/pasted.

    _

Read More

Have a look at the most popular posts, possibly including:

Or maybe say hi on Twitter, Google+, or LinkedIn?

Looking for a way to comment? Comments have been disabled, unfortunately.

Flattr? Found a mistake? Email me, jens@meiert.com.

You are here: HomeArchive2007 → Word Division: On “word-break”, Soft Hyphens, and Zero Width Spaces

Last update: April 27, 2016

“The end does not justify the means.”