Search code examples
cssselectiontypographyhyphenation

How to get ::selection to work correctly with hyphenation?

I want to style selected text differently, and I'm using ::selection to achieve that.

*::selection, *::-webkit-selection, *::-moz-selection {
    background-color: #aaa;
    color: #fff;
}

For typographical reasons, I'm using hyphens: auto; for paragraphs.

p {
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-align: justify;
}

This works, but there is a problem when I select hyphenated text: the hyphens don't get colored white (i.e. they act as if they were unselected).

Screenshot demonstrating problem with hyphenated text.

Is there a way to fix this problem, or is this a bug? I'm using Safari 5.1.7.

Solution

  • I think this is probably a bug. Firefox, which supports hyphenation as well, colors the hyphens correctly.