­ (soft hyphen) and Chrome and Safari

Question

I have a website where I would prefer to use &shy ; (soft hyphen) to break words the way I want.

Click here for screenshot from Chrome

The problem computers run OS X (multiple versions) and the problem occurs in both Chrome and Safari (multiple versions). Computers with exact same OS and browser version can show this differently. The screenshot is taken on OS 10.8, with Chrome v. 21.0.1180.75.

It looks like soft hyphen works, because it divides the word, and insert a hyphen "-", but it also generates that rectangle with the cross.

The website uses @fontface, if that should have anything to do with it.

Thank you!

Answer 1

Especially considering your fonttest website, it seems that the problem is caused by two factors: some WebKit browsers on OS X a bug that make them render a soft hyphen character inside a line of text using a glyph for it, instead of just treating it as a control character; and the StagSansWeb font either has no glyph for it (making the browsers use a dummy glyph) or have an odd-looking glyph for it. If these browsers additionally treat the soft hyphen as allowing hyphenation, this would explain the symptoms, provided that Helvetica has an empty glyph for the soft hyphen.

This is highly speculative, or conjectural.

On a more solid basis, the rendering of text where hyphenation has taken place has not been rigorously defined in standards. If browsers apply hyphenation on foo­bar, they are supposed to render “foo” followed by a hyphen at the end of a line, but the standards don’t say which hyphen. It could be HYPHEN-MINUS (i.e., the Ascii hyphen), or HYPHEN, or even SOFT HYPHEN, if it has a glyph. Maybe even something else. And it may even depend on language, as some languages have hyphens of their own.

So it is understandable that WebKit browsers have started supporting the proprietary property -webkit-hyphenate-character. However, it does not seem to be properly implemented. Testing -webkit-hyphenate-character: "\00AD" on Chrome and Safari on Windows 7, I notice that they “hyphenate” words (containing soft hyphens) without adding any hyphen (as if they used an empty glyph), even though other values for the property work OK.

To conclude, I would expect that you can avoid the issue by avoiding fonts like StagSansWeb for texts that may get hyphenated. It is possible that the problem can be fixed by modification to the font.

Answer 2

I've investigated this at length on soft hyphen bug in Webkit. In short the problem seems to be a combination of a bug in Helvetica Light (and some other fonts such as Avenir) and a font stack bug in Webkit. You can fix it by including Arial in your fontstack, eg.

font-family:"Apercu Light", Arial, sans-serif;

Answer 3

I had the same issue happening on webkit/mac. The foundry that created the font helped me and gave this solution that worked (Added Arial)

font-family:"Apercu Light", Arial, Calibri, sans-serif; 

instead of

font-family:"Apercu Light", Calibri, sans-serif; 

This as an interim solution until the font files are updated. I assume Arial has better support than helvetica on webkit/mac for this particular case.