Add soft hyphens in a CMS: getting it to work in Chrome

Question

­ is awesome, especially because it works in all popular browsers. You put it in the middle of a word, which tells the browser that the word may be broken in that place. If it does get broken there, a hyphen appears. If it doesn't, the character remains invisible.

But it's not very easy to use for content authors: you have to go into the HTML to add it. Even if you can add it in a CMS, you can't see where it is as soon as you inserted it.

So I went ahead and declared an inline style in my CMS for my authors to use. They can select part of a word, for example <span class="shy">communi</span>cation, and then a css rule will magically add the ­ using an :after pseudo-element! And with some CMS-specific CSS I can give that tag a dotted underline to show that it's got one of those soft hyphens. Works in Firefox and IE8+. Neat.

But the hyphen doesn't appear in Google Chrome! It breaks the word, but there's no dash. I knew it didn't support the hyphens css property, but it does normally support ­.

But all right, so I removed the css style and wrote some javascript to add ­ upon load. Using jQuery, I tried both .append and .after. I even tried innerHTML += '­'. None of them work! How disappointing...

How to work around this?

Answer 1

I figured out a solution while writing this question.

­ seems to work in Chrome only if there is another character right after it (and before it). The issue above is that the ­ character is always the last one within the tag. So I added a space and then closed that space with css. Unfortunately this does not work with a css pseudo element, so I still needed javascript.

I did need to use browser detection because adding the space made it stop working in Internet Explorer and Firefox. (using   makes it work in Firefox, but not IE)

$(".shy").each(function(){
    this.innerHTML += '­ '; // add the soft hyphen (for all browsers)

    // Only Chrome has an issue
    if(/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
        this.innerHTML += ' '; // add a space
        $(this).css('margin-right', '-.26em'); // close the gap from the space
    }
});

To be used like this:

<span class="shy">communi</span>cation