597510 - ::first-letter doesn't style some characters (e.g., "$", Unicode symbol classes)

Status: NEW

(Core :: Layout, defect)

Description

[Joseph Pecoraro]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_5; en-us) AppleWebKit/533.18.1 (KHTML, like Gecko) Version/5.0.2 Safari/533.18.5
Build Identifier: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0b6) Gecko/20100101 Firefox/4.0b6

It looks like first-letter misses the "$" character, and possibly other characters.
The CSS 2.1 spec doesn't appear to give a reason why $ should be avoided.
http://www.w3.org/TR/CSS2/selector.html#first-letter

Reproducible: Always

Steps to Reproduce:
1. Load the attached test case.
Actual Results:  
On the "$$$T$$$est" line the entire line is black.

Expected Results:  
The first $ should be red, and the rest of the line should be black. Note that the spec says that certain Punctuation characters before and after the first letter should be affected, however "$" is not one of those punctuation characters.

Safari 5.0.2, Chrome 6.0.472.59, and Opera 10.60 on Mac all handle this correctly.

Comment 1

[Joseph Pecoraro]

Attachment: [TEST] Test HTML Page

This is a simple page showing the issue.

Comment 2

[(mostly gone) XtC4UaLL [:xtc4uall]]

On WinXP Mozilla/5.0 (Windows NT 5.1; rv:2.0b7pre) Gecko/20100916 Firefox/4.0b7pre, Opera 10.70.9046 and Google Chrome 7.0.524.0 behave differently.

Comment 3

[Simon Montagu :smontagu]

This is by design: see bug 399941, especially comment 9 and following, and the thread beginning at http://lists.w3.org/Archives/Public/www-style/2008Jun/0343.html

Comment 4

[Joseph Pecoraro]

Gah, sorry for the late reply. Apparently I wasn't CC'd on a bug I created.

XtC4UaLL if they behave differently, how does each behave?

Simon, if this is by design, than all the other browsers should be alerted.
I just noticed a new www-style thread just started today, please provide
your comments there!
http://lists.w3.org/Archives/Public/www-style/2010Oct/0027.html

Comment 5

[Simon Montagu :smontagu]

I filed bug 602459 on the issues with whitespace arising from that www-style thread.

Comment 6

[Marat Tanalin]

Even if initially the bug _was_ by design, then it should _now_ be made _consistent_ with other implementations.

ALL other browsers currently DO apply :first-letter to first characters like +, -, ~, etc. These browsers are Chrome 15, IE 6-9, Safari 5.1.1, Opera 11.5.

The only problematic browser here is Firefox, and it's a shame.

Additional testcase:
http://tanalin.com/_experimentz/bugs/fx/2011/first-letter/

Thanks.

Comment 9

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

I asked to put this (and http://lists.w3.org/Archives/Public/www-style/2010Aug/0063.html ) on the agenda of tomorrow's CSS WG teleconference.

Comment 10

[Crabique]

So I did read the telecon log and guess it's now(will be) supposed to style the symbol classes?

Comment 11

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

Well, the minutes (http://lists.w3.org/Archives/Public/www-style/2014Feb/0461.html) really say that I have to write a proposal, but yes, people seemed happy to include symbols, though exactly which ones needs to be decided, at least partly based on testing...

Comment 12

[Crabique]

Well what webkit and many others already use (besides [L*], [N*] and [P*]) seems to be [Sc], [Sk], [Sm] and [So]. I cant't see a reason there should be anything else, as it's been like that for a long long time.

Big thanks for bringing it to the WG discussion though! Didn't expect anyone would care.

Comment 13

[mcelam]

Any update on this? For what it's worth, this bug blocks simple 2-layer icon font stacking.

  http://css-tricks.com/stackicons-icon-fonts/

Can workaround by including the text in the markup, but adding the text to ::before and ::after CSS both simplifies the markup and reduces latency. The only thing keeping me from doing so, as mentioned in earlier comments, is Firefox since all other browsers render consistently.

Comment 14

[mileselam]

Friendly ping

Comment 15

[Yvain Liechti]

Additional Test Case: https://jsfiddle.net/8f5v60uj/1/

Comment 16

[ralph.schmieder]

Also stumbled across this and would think that ::first-letter should actually behave like as named "::first-character" -- e.g. it should operate on the first character regardless of character class. In my case, I wanted to use some Unicode character from FontAwesome with ::before and ::first-letter. Works like a charm with Chrome, Safari and Edge.

Here's a fiddle: http://jsfiddle.net/X8y2r/35/