0

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">
  <a href="" lang="en">subdermat&shy;oglyphic</a>
</div>
<div class="box">
  <a href="" lang="en">subdermatoglyphic</a>
</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?

Oriol
  • 274,082
  • 63
  • 437
  • 513
Juuro
  • 1,487
  • 5
  • 16
  • 27
  • Note it says "should be preferred", not "must be preferred". – Oriol Oct 22 '14 at 15:55
  • The code does not demonstrate the issue, in general. Depending on the font used, the word may need no breaking (and this is what happens in my Firefox). – Jukka K. Korpela Oct 22 '14 at 15:56
  • Yeah. That's why I wrote "This result may be different in other browsers." But even if the result of the code is different you should get the issue. – Juuro Oct 22 '14 at 16:08
  • @Oriol Means the placement of the hyphens is simply random? There is no way to get to know the rules behind it? – Juuro Oct 22 '14 at 16:09
  • According to [RFC 2119](http://www.ietf.org/rfc/rfc2119.txt), "should" means that there may exist valid reasons in particular circumstances to ignore a particular item, but the full implications must be understood and carefully weighed before choosing a different course. – Oriol Oct 22 '14 at 16:22

1 Answers1

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 (&shy; 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 &shy; 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, &shy; 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 <a href="" lang="en">subdermat&shy;<span style="white-space: nowrap">og</span>lyphic</a>. But it’s probably not worth it.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390