1054092 - CSS ::first-letter pseudo-element also grabbing following ampersand

Status: RESOLVED INVALID

(Core :: Layout: Text and Fonts, defect)

Description

[mvw1]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36

Steps to reproduce:

When using the ::first-letter pseudo-element, if the first letter is "R" and the following character is an ampersand - whether a lone ampersand or one that is part of a character entity, even the entities for ampersands.  See the following example:

http://jsfiddle.net/zL596y0w/


Actual results:

The ::first-letter selector grabs not only the first letter but also the following character if it is an ampersand.  In my example (http://jsfiddle.net/zL596y0w/) R and & are grabbed instead of just R.



Expected results:

In English, I can't think of a case where requesting the first letter of an element should also grab a following ampersand.

Comment 1

[mvw1]

Note that I'm seeing this in the latest released versions of not only Firefox but also of Chrome and Safari.

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

http://www.w3.org/TR/CSS2/selector.html#first-letter says:

  Punctuation (i.e, characters defined in Unicode [UNICODE] in the "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter should be included

Unicode has the U+0026 AMPERSAND in the Po (other punctation) class.  (This is also what the U+0022 QUOTATION MARK and U+0027 APOSTROPHE are.

So this is as-specified.


It's not completely clear that it's desirable behavior, though.

Comment 3

[mvw1]

Ah.  Fascinating!  I was aware of some subtleties in other languages, but wasn't considering the implications of ampersands being classified as punctuation right along quotation marks in unicode.  I don't suppose there are any CSS-only workarounds?

Comment 4

[mvw1]

Also, is there a chance we can make the case that, if the ampersand following ::first-letter is actually part of a legal HTML character entity, it shouldn't be considered part of the ::first-letter unless the rendered entity itself is also in one of the P* classes defined in the specification?

Comment 5

[mvw1]

Disregard my last comment - looks like that behavior is correct. EG if we have <p>R&eacute</p> then only the R is treated as the ::first-letter.

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Re comment 3 - I'm not aware of any workarounds.

Comment 7

[Jonathan Kew [:jfkthame]]

Not a CSS-only workaround, but if you're willing to touch the actual text, inserting a ZERO-WIDTH SPACE (​) before the ampersand should help.

Comment 8

[mvw1]

Jonathan, we do have control over the text, and the case is such a low occurrence that it will probably be dealt with editorially in the way you suggest - or in a very similar way.  I appreciate the tip!

Comment 9

[mvw1]

David - since this is working according to spec, seems like the issue should be closed out.  Feel free to reopen if you think there's another angle that can be pursued (re: Comment 2, "It's not completely clear that it's desirable behavior, though.") - it sounds more like a specification challenge than a bug-fixing one, however.

Thanks!