CSS text-transform first-letter bug?

[JAB Creations]

I am trying to make the first letter of a span element uppercase using the first-letter pseudo-element. However after testing Gecko, Opera, Trident, and Webkit. I found that this will only work on paragraphs. This creates an issue because the text is in the middle of a paragraph. I'm currently interested in a clientside based suggestion.

- John

Does not work...

span.capitalize:first-letter {
text-transform: uppercase;
}

[penders]

Admittedly I've not tested this, but I believe the first-letter pseudo element/selector can only be applied to block level elements ie. P, DIV, not SPAN. Otherwise the text-transform property should be OK.

W3C: 5.12.2 The :first-letter pseudo-element [w3.org]
The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line....

[SuzyUK]

Hi John,

as you found with the <p>,

:first-letter

can only transform the first letter of a block-level element.

5.12.2 The :first-letter pseudo-element [w3.org]

The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.

added: penders beat me to the link ;)

It's this way because you could not realistically float a first letter if it's inside an inline element, which is nested in a block. Typically First letter effects make the first letter a lot larger, "drop caps" and these then are usually floated to make the rest of the sentence flow properly.

fictional example, using a span to emulate what would happen if it worked:

p.fl:first-letter, p span {float: left; font-size: 40px;}

<p class="fl">First Letter</p>
<p>Emulated <span>F</span>irst Letter<p>

solution possibly depends on what is in the span, if it's more than one word and you do just want the first word to be capitalised you will probably need some javascript that can emulate sentence case if all words can be capitalised then simply putting

text-transform: capitalize; on the span would do

sentence case via CSS, is not possible - to make it so would mean CSS would have to parse the text inside an element and have some sort of "knowledge" as to what constitutes the beginning/end of a sentence, and as the end is not always a full stop, nor is CSS a scripting language, I can't see it happening

[edited by: SuzyUK at 12:15 pm (utc) on Jan. 2, 2008]

[JAB Creations]

Thanks for your answers. I'll probably end up having to pass case sensitive values then.

- John