If you’ve ever written CSS for a bigger website in some European language (other than English), you’ll know this problem: your have built all the templates for a huge project, everything works perfect in all possible font-sizes and viewport-widths, even in the “bad” browsers, and then you get a call from your PM - he’s looking at the test version on development server and your layout seems to be “broken”… What do you mean by “broken”? He tells you, he was testing the pages in a browser using a bigger text-size, and it’s all falling apart: navigation is too wide and the 3rd column is somewhere at the bottom of page… When you look at it yourself, you see that the problem is the list item labeled “Wirtschaftsgestaltung”. Where does it come from? I guess the navigation in your HTML template looked more like this:

• Lorem ipsum
• Lorem ipsum
• Lorem ipsum
• Lorem ipsum

Note for the next time: Always use real content! Repeate after me: Always use real content…

Once again, a simple proof how dumb HTML is - it has no soft hyphenation. Although, if you’ll google for it, you’ll learn about ­ entity ­­ ­ ­ — better leave your hopes now. It’s not going to work. No, not even in Firefox. Jukka Korpela wrote a very good resource about the shy fella. I remember in 1992, when I was working at a local newspaper, every copytext that we would use in our PageMaker, had to be put through “Hyphenator”. So, when we build our layouts we wouldn’t care if some random word fits on a line or not. If it were too long, PageMaker would analyze it, find a possible hyphenation point(”Hyphenator” left it), break it in half and add a simple hyphen at the end of the line. And why can’t your Firefox or your Safari do it for you? Well, the problem is, that there are simply too many languages and these languages have too many words. In some languages, like in my native lithuanian or in english, there are some simple rules for hyphenation - you separate the syllables. In german language though, the rules are a little bit more complicated. I don’t think we are going to see some wide browser implementation soon. Unless, somebody decides to build a multilingual, extendable, open-source hyphenator.

Note: Microsoft has an hyphenating engine built into IE. It doesn’t specify which languages are supported, i can just guess, that localized Windows fully supports at least English and the native(local) language.

Now we need some solution, and we need it fast. Simple and (almost) perfect : put your navigation container in overflow:hidden; style mode. It’ll simply cut the remainder of the word if it gets too long for the container. Pragmatic: if you got a separate stylesheet for IE, you can sweeten the pill for some users - give your ‘a’ tag a non-standard (evil,evil) property word-wrap: break-word; and some specific width. Don’t forget to reset the overflow property in navigation container! overflow: auto; Complicated: you write some custom JavaScript, that compares the text-size with word-length in navigation, and breaks the words in a right places (works only if the specific words are known). I’m aware, that there could be some other solutions. If you have one, not listed here, please let me know! Also, I’m totaly interested in non-European hyphenation problems. e.g. can you hyphenate a text written in Katakana or Arabic at all?