­ (soft hyphen) and Chrome and Safari

html css google-chrome web soft-hyphen
nle picture nle · Aug 9, 2012 · Viewed 8.5k times · Source

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

Richard Rutter picture Richard Rutter · Aug 14, 2014

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;

Related questions

Roboto font in Chrome is not shown properly

I've been working for a client site and I have problem with rendering of Roboto font. In Chrome (ver. 43.0.2357.65 m) all the various weights of Roboto looks same. Here is the example: Left is Mozilla Firefox, right is Chrome http://…

Read More
Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)

I have this problem. Chrome continues to return this error Resource interpreted as stylesheet but transferred with MIME type text/html The files affected by this error are just the Style, chosen and jquery-gentleselect (other CSS files that are imported …

Read More