Sam-I-Am on Web Development

Sam Foster on the web and web-ish software developmen

Friday, September 01, 2006

Soft-wrapping long words

The issue of long, non-breaking words like urls has been around for a while on the web - and the impact this can have on layouts and other places where width is constrained for whatever reason. I've been going back and forth on this, and dug up and old test page on No-wrapping and Soft-wrapping. This has some test cases using <nobr>, <wbr> and the soft-hyphen character &shy;. The results aren't too pretty:
Ignores &shy;,
supports <wbr>, but not when contained in <nobr>
Windows IE 6:
Wraps correctly with &shy;,
displays '-' only at a wrap-point.
Supports <wbr> solo, and when contained in <nobr>
Safari 2.0:
Wraps correctly with &shy;,
displays '-' only at a wrap-point.
Seems to only pay attention to <wbr> in the context of <nobr>, where there are spaces to wrap on.
Opera 9.0:
Wraps correctly with &shy;
Ignores <wbr> completely, supports <nobr>
(TODO: Need to add tests to the page for CSS scenarios like white-space: nowrap;) (NOTE: Yes, both nobr and wbr have been deprecated. Unfortunately unless I missed i, there's no good replacements in CSS for wbr, or in xhtml for either.) Meanwhile, I took a stab at a javascript-y solution. This is an implementation that looks to insert a wrap-point in a character string to enforce a (given) maxiumum text columns length. So, if you want to make sure that all words wrap at or before 24 characters, it will insert a soft-hyphen (or <wbr/> for mozilla/firefox). It tries (a little) to favor wrapping after punctuation, and be somewhat smart about recognizing words (e.g by recognizing escape entities, markup). Anyhow, here's a Softwrap test page. It could definately suffer some optimization, and I suspect could be vastly simplified with some better regexp. But its working ok for now.


At 1:44 PM, Blogger Dan Dar3 said...

Hi Sam,

"wbr" tag saved my sanity, I had a text with no spaces, just commas that was driving me nuts, thanks for writing the post.



Post a Comment

<< Home