Is it safe to use ­ now? I remember there were problems with this entity, such as rendering it everywhere (instead of only when the web browser decides to split a word), or splitting a word without rendering it.


Based on this article I don't think so. Apparently the browsers all handle it differently and still have issues with it (chrome, opera). The fact that the specs for it are conflicting probably doesn't help any.

| improve this answer | |
  • 2
    Well, that article contains the following sentence: "However, it now seems that the Web is finally ready for the use of soft hyphens as hyphenation hints without serious drawbacks, as far as browsers are considered. Reasonably new versions of major browsers either support the soft hyphen or at least graciously ignore it, i.e. display words as if they contained no soft hyphens." This contradicts your answer... – liori Mar 18 '11 at 20:01
  • @liori, Define serious. I know I don't want to have any issues in any browser so the fact that chrome (and safari since it used the same rendering engine) and opera have issues, in addition to the older browsers which still have marketshare, that approximately 20% or more of my userbase may experience issues when viewing that character. I'd rather that number be much lower. – John Conde Mar 18 '11 at 20:57

I don't know how many times I've looked at this, but it is quite appalling it is still ongoing. It seems to me there are two basic issues:

  1. Where to optionally put a line break
  2. How to represent a line break

The first issue is fairly straightforward ... line breaks at whitespace, at hard-hyphens and to indicate other places we need a NON-DISPLAYING character. The second also seems fairly simple - and I would have assumed (but it doesn't) that in css I can specify how to break words and the character (or none) to display at a break. So, e.g. I could have BIGLONGWORD~ or BIGLONGWORD-

Better still, would be some css rules like:

    .dense-text {
    line-break-auto: on;
    line-break-can-break: 7;
    line-break-keep-together: 2;
    line-break-allow-break-at-hyphen: on;
    line-break-allow-break-at-shy: on;
    line-break-end-of-line-character: "~"

In other words, this says that I want the browser to automatically insert breaks IF NECESSARY in words longer than 7 characters (with a least two characters before and after break), at hyphens and at "­" (I suppose there might be others) and when doing so to display a '~' (the default would be ­).

So, going back to the original definition that "&shy" is a display character, then clearly it would be the default character to display. But it would have the meaning to anyone or anything reading the text that it is only a formatting device and is as relevant to spelling or searching as e.g. the underline or bold. So, ­ should be removed from copy (or at least removed from copy without format).

In contrast, the above "css" would have changed it to a hard character which would be copied as is.

There is also the non-standard "<wbr>" (but now in HTML5). I'm not in favour of this because -- when you are pushed for space, it's probably because you already have a lot of text trying to fit on a small device like a mobile phone - you are probably already trying to cut out everything to make it fit, and to add in 5 characters possibly in almost every word over 5 letters could almost double the number of characters in the HTML.

And for info, there is also &#8209 which is said to be a non-breaking-hyphen for words where we never want a break like X-scape. (But I've no idea how well supported this is)

However, until things are sorted out (and remember many new mobiles are even less compliant with the latest standards than PC browsers), it seems that "&shy;" often works as above but sometimes not. The real solution would be for the browser to break lines sensibly rather than trying to find a way to get them to do what they should do. But otherwise, adding &shy; into all long words might work.

The only solutions that is going to work on all browsers is to pre-process the text and insert line breaks IF NEEDED in long words at a set number of characters with a fixed-width font OR to use a proportional font with ample room to fit a line with all the widest characters (or use a massive table of character widths).

And if you are displaying on a mobile, you will probably not know the width - so there is literally no solution.

| improve this answer | |
  • Welcome on Pro Webmasters! – Zistoloen May 14 '14 at 9:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.