Soft Hyphen

Don't be SHY!

[seashell]

I found a very useful HTML element, <wbr /> (#&8203;) that many people don't know about. It will allow the browser to insert a line break, if necessary, in a string of text. I've been testing its use and found that most browsers do support it, and I can hide it from those that don't. However, I've read some very negative articles that say not to use it. AND, it was never included in any version of HTML - I believe it was a proprietary Netscape element.

One of the main arguments against it is that it is purely for visual presentation, therefore, it should be stylesheet controlled. But, there is no current CSS property that will accomplish this effect.

Has anyone else ever used it. I think it would be great for some of my pages with multi-column tables/divs that have wide headings.

Here's the browsers I tested it in:
IE 5,6 - yes but displays a space (can be hidden with CSS)
Mozilla (firefox, gecko) - yes
Opera 7 - yes

I'd be curious how it works in Safari...

[valder]

It's hardly useful. Apparently it's only use is inside <nobr> tags, and as nobr isn't a recommendation by W3C, IMHO it shouldn't be used. Use css "white-space: nowrap;" instead, although there's no conditional line break for that. I guess you should really mean "don't wrap at all" when using no-wrap.

[rjohara]

I have thought about using & shy ; but last time I tested it it didn't work very well. Perhaps I should give it a try again. It seems to me that the real solution to better web typography in this area is to have real hyphenation routines built into the browsers (but I wouldn't expect that to happen any time soon).

[tedster]

hyphenation routines built into the browsers

That is a strong need - in some languages even a pressing need. I'm working on some German pages (some very long words in German) that are quite frustrating. Talk about "ragged right"!

[Robin_reala]

&shy; really needs to be implemented in Gecko. In IE I think it works fine. Not sure about the rest.

[valder]

Seems like I misunderstood it's use; it can be used for other thigs than nobr, and it's often used inside words and not necessarily between words. I can see now why people would use it, but I think that this should ideally be solved differently and with css. CSS3 introduces word-break-inside [w3.org], but it seems it wil require a UA hyphenation dictionary. Perhaps it would be best if SHY was better supported, to use that instead.

If people want to use SHY, wbr or &#8203, I found a test page [quirksmode.org], which confirms that support is poor.

[seashell]

You're right that support is very poor. What I did was create a class called .shy with visibility set to hidden and font size set to zero. That way if the browser inserts some kind of space or funky character it won't display, and the wrapping function still works, if supported. If not supported, it will just ignore it.

[valder]

<added>
(When reading my last comment again, I see something that could easily be misunderstood:

Perhaps it would be best if SHY was better supported, to use that instead.

"to use that instead" refered to SHY, and not "word-break-inside".)
</added>

seashell,
isn't it better to use "display: none;"? That way there's no need to set font-size. Good idea btw. :)

[seashell]

isn't it better to use "display: none;"? That way there's no need to set font-size.

"display:none;" causes the word break to not function, but "visibility:hidden;" just hides the funky character, if any. I use &#8203; and it sometimes shows up as a little rectange or a question mark.

On my style sheet, I even added a "letter-spacing: 0;" to rule out any chance of extra space being added.