first-letter initial quote doesn't work in firefox

Question

I quite dont get it here, firefox doesn't want to accept ❝ (U-275D) as my first letter dispite the fact that they are supposed to accept initial quote.

Does anybody have any idea ? http://jsfiddle.net/DXn3B/1/

.who
{
    font-family: 'Open Sans', sans-serif;
    font-weight:lighter;
    color:#565656;
    font-size:1em;
}

.who:first-letter
{
    float: left;
    font-size: 2.5em;
    line-height: 1;
    margin-right: 0.2em;
}

.who:before
{
    content: '\275d';
    color:#272727;
}
.who:after
{
    content: '\275e';
    color:#272727;
    font-size: 2.5em;
    font-family: 'Coverdale-Condensed', sans-serif;
}

score 3 · Accepted Answer · edited Mar 16 '13 at 22:24

The notation '\275d' denotes U+275D HEAVY DOUBLE TURNED COMMA QUOTATION MARK ORNAMENT, which has General Category So [Symbol, Other]. Hence, the CSS 2.1 rule on :first-letter does not apply to it:

“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”.

score 0 · Answer 2 · answered Mar 16 '13 at 22:03

0

You could try put them as text:

.who:before
{
    content: '❝';
color:#272727;
}
.who:after
{
content: '❞';
color:#272727;
font-size: 2.5em;
font-family: 'Coverdale-Condensed', sans-serif;
}

jsFiddle.
Try this site for more cool stuff.

answered Mar 16 '13 at 22:03

Yahya KACEM

2,481
7
34
61

Why do you think this makes any difference? – BoltClock Mar 16 '13 at 22:05
check the jsfiddle you'll see. – Yahya KACEM Mar 16 '13 at 22:06
I checked, it makes no difference. Did you check it yourself? – BoltClock Mar 16 '13 at 22:08
On firefox there's no difference. – suspectus Mar 16 '13 at 22:10
Makes no difference for me unfortunatly :/ – Oreki Houtarou Mar 16 '13 at 22:11

score 0 · Answer 3 · answered Mar 16 '13 at 22:07

0

I can’t see why you are using both .who:first-letter and .who:before here. (.who:before already allows you to format the content you are inserting almost any way you like, so using :first-letter as well is kinda redundant, or in this case, maybe even the cause of the error.)

Add the declaration you have set for the first one into the rule for the latter (and delete the first completely), then you should get what you want.

answered Mar 16 '13 at 22:07

CBroe

91,630
14
92
150

Depending on the use case, `:first-letter` can still match the first letter of `:before` if the `:before` is generated inline within the element's context. That said, it may well be the cause of the error, depending on the character being used versus just using `open-quote`. – BoltClock Mar 16 '13 at 22:08

score 0 · Answer 4 · answered Mar 16 '13 at 22:09

0

Really, I have no idea why it doesn't work. But maybe that's somewhere near your desired result. http://jsfiddle.net/DXn3B/4/ I used the :before itself instead of :first-letter and it works fine. Maybe those two aren't meant to work together like that.

answered Mar 16 '13 at 22:09

MildlySerious

8,750
3
28
30

first-letter initial quote doesn't work in firefox

4 Answers4