Word Division: On âword-break,â Soft Hyphens, and Zero-Width Spaces
Published on February 8, 2007 (⻠August 17, 2024), filed under Development (RSS feed for all categories).
This post is outdated. (Consider hyphens
!)
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 at risk. English appears to be less affected than other languages (I suspect Finnish and also German to be good 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 (who donât care much about vendor-specific extensions), which 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 which supports parts of this formerly unstandardized property.
Since this is just a little round-up, I will state that word-break
- does not provide the kind of hyphenation we usually need, and
- is not yet broadly supported.
Soft Hyphen
The soft hyphenâfrom Unicodeâs C1 Controls and Latin-1 Supplement (PDF)âis usually injected via ­
or ­
, respectively. Skipping Jukka Korpelaâs former article on SHY, we must note that it
- can also âconsider grammarâ (when used in the right places and in conjunction with a language that splits words using a hyphen, of course), but
- is not yet supported at least in Gecko-based browsers (like Firefox, for example).
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 note when you bank on zero-width spaces?
- Depending on the language they might be a good but also a poor choice, when âjust splitting up wordsâ could lead to spelling mistakes, and
- they appear to be supported the best, despite causing additional white space in Internet Explorer 6 (which isnât necessarily a problem since IE 7 is doing well) andâcontrary to soft hyphensâcoming with some uncertainty around whether there are user agents that donât display the character correctly
[âŠ].
Youâre probably as wise as before, but beside correcting me on details (other nifty Unicode characters?) of 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 Me
Iâm Jens (long: Jens Oliver Meiert), and Iâm a frontend engineering leader and tech author/publisher. Iâve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, Iâm somewhat close to W3C and WHATWG, and I write and review books for OâReilly and Frontend Dogma.
I love trying things, not only in web development (and engineering management), but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.
If youâd like to do me a favor, interpret charitably (I speak three languages, and they do collide), yet be critical and give feedback, so that I can make improvements. Thank you!
Comments (Closed)
-
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
-
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.
-
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
Maybe of interest to you, too:
- Next: Weird Weekend Without Happy End: Eggebek, Flensburg, Denmark, Bremen
- Previous: Why âConditional Commentsâ Are Bad, Repeat: Bad
- More under Development
- More from 2007
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try WebGlossary.infoâand The Web Development Glossary 3K (2023). With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.