How to use ­ and the CSS "hyphens" property together? - html

Question

I'm using the hyphens property of CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens Mozillas documentation says:
Suggested line break opportunities, as covered in Suggesting line break opportunities, should be preferred over automatically selecting break points whenever possible.
I thought that means the browser places hyphens as needed unless there is something like a ­. If that's the case the ­ will be prioritised.
But I have this code:
.box {
width: 130px;
border: 1px solid red;
margin-bottom: 5px;
}
.box > a {
text-transform: uppercase;
font-size: 12px;
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
<div class="box">
subdermat­oglyphic
</div>
<div class="box">
subdermatoglyphic
</div>
Now I would assume the word breaks after "subdermat". But it doesn't. It breaks after "subdermato". At least in Firefox 33. This result may be different in other browsers. I know that this is "experimental technology" but maybe I'm missing something. Is something wrong with my implementation?

Answer 1

There is nothing wrong with your code from the HTML and CSS perspective. Whether the (preferred) hyphenation is correct is of course a different issue.
But Firefox does not actually implement the logic that the MDN page describes. The page just echoes an old version of the CSS3 Text draft. The current editor’s draft puts things even much stronger (and rather questionably), for hyphens: auto (the default): “Automatic hyphenation opportunities within a word must be ignored if the word contains a conditional hyphen (­ or U+00AD), in favor of the conditional hyphen(s). However, if, even after breaking at such opportunities, a portion of that word is is still too long to fit on one line, an automatic hyphenation opportunity may be used.”
What Firefox actually does, as far as we can judge from its behavior, is that it treats ­ as suggesting a hyphenation opportunity, equal to the opportunities it has determined on the basis of its hyphenation algorithms, if used (this depends on the declared language and on installed support to various languages in the browser).
This means that when used together with automatic hyphenation, ­ is not (currently) useful in suggesting preferred hyphenation points (i.e. points to be preferred over others that might have been determined by a browser’s hyphenator). However, it is useful for suggesting hyphenation points that would not otherwise be used.
If you actually wanted to have “subdermatoglyphic” hyphenated so that hyphenation is possible between “t” and “o” but not between “o” and “g” (where most authorities allow hyphenation), you could write subdermat­<span style="white-space: nowrap">og</span>lyphic. But it’s probably not worth it.