Hanging soft hyphens - css

Question

I found this article about hanging punctuation:
http://webdesign.tutsplus.com/articles/getting-the-hang-of-hanging-punctuation--cms-19890
and this link in the comments: http://dabblet.com/gist/9623025
It's a really nice idea, and it would be an awesome way to hang soft hyphens generated by some tool like Hyphenator or Hypher. I started playing around with Hypher and encapsulated the hyphens in a span...
Then I realized I don't know how to style soft hyphens.
This code should make an hyphen red, but of course the one in span is not breaking a word, so the browser doesn't show it:
<style>
.box{
width:40px;
background-color:yellow;
}
.hyphen{
color:red;
}
</style>
<div class="box">
<p>aaaa­bbbb<span class="hyphen">­</span>cccc</p>
</div>
http://jsfiddle.net/5LazU/
Is there any way to do it?

Answer 1

It is somewhat unclear what the question is about, so I will address different interpretations of it.
The hyphens introduced by a browser’s automatic hyphenation (due to the use of the hyphens property) cannot be styled as separate entities (i.e., in a manner that differs from the style of the surrounding text), since they do not constitute elements or pseudo-elements.
Styling SOFT HYPHEN characters in HTML is a different issue, with browser-dependent answers. The answer does not depend on the method of entering SOFT HYPHEN (as a raw character vs. the ­ reference vs. a numeric reference), since they result in the same data in the DOM: But it depends on wrapping the character in an element, as in the question.
The code in the question causes a red hyphen to be displayed on Firefox and on IE, but on Chrome, there is no hyphen after “bbbb”, so I guess the code was tested on Chrome. This appears to be a bug: the element is treated as allowing a direct line break without inserting a hyphen.
The issue of “hanging punctuation” is something completely different. The reason why hanging punctuation techniques word for quotation marks (which is what the linked documents contain) is that the marks appear at the start and at the end of a segment of text. Browser-inserted hyphens are different, and the key thing there is that the browser analyzes how many characters will fit on a line before it inserts a hyphen (due to automatic hyphenation or as a result of rendering SOFT HYPHEN as a visible hyphen). I don’t see how there could be a way to intercept this unless the browser provides an API for the purpose.