The blagotube home of Sune Kirkeby. Here are rambling rants and some bits of code.

02. Dec
2003

Line-wrapping when soft hyphenation is wrong

Update: (31. december 2003) It seems my reading of the HTML 4 specification is not universal. And, to make matters worse, neither of the HTML, Unicode or ISO Latin 1 standards agree on what the shy character should mean. See Soft Hyphenation (SHY) - a hard problem? for the gory details.

There is this nifty little HTML character entity, ­, which lets one give soft hyphenation hints to browsers. But, when writing documentation for code, one sometimes needs write really, unbelivably, imagination-strainingly long identifiers. And, having them hyphenated, when split over multiple lines might not be what one wants (at least, it is not what I want).

Exempli Gratia

Here is an example of what might happen, if the browser cannot break your long identifier into little bits and pieces:

sheared.web.querystring.UnvalidatedInput.as_text

So, when you has to type in a pathologically long identifier from a program, and you want it to gracefully break in two on the middle, what can you do?

One solution

I have only tested this with Mozilla Firebird 0.7.1, it might not work on any other browsers.

Those of us living in CSS-land can actually do something. Rendering a white-space with zero font-size produces no visible break when inside a word. But, if you place such a zero-width white-space inside a word, the word is happily chopped into pieces where you inserted it.

So, this goes into your stylesheet:

.shy { font-size: 0; }

This is your HTML:

sheared.<span class='shy' /> </span>web.<span class='shy' /> </span>querystring.<span class='shy' /> </span>UnvalidatedInput.<span class='shy' /> </span>as_text

And, suddenly it renders beautifully:

sheared. web. querystring. UnvalidatedInput. as_text

This post was written by Sune Kirkeby on 2003-12-02, and claimed to be mostly about rambling.