font-variant: small-caps; together with text-transform: lowercase;

Unstyled

Foo

BAR

baz

Styled

Foo

BAR

baz

And with uppercase?

Foo

BAR

baz

How IE does it:

Apparently the text-transform: lowercase; is ignored by Internet Explorer.

Is this fixable?

What if we use scripting to apply both properties?

Test

To lowercase To small-caps

Immediately the lowercase style is forgotten by IE.

Let's try a different thingy

Test

To lowercase To small-caps

This changes the markup (through innerHTML) to lowercase, after which the font-variant is applied correctly. As ugly as IE! :)

Or this?

Test

To small-caps First letter to 80% font-size (and fluffy blue)

The last button adds the className small-first-letter to the element and then the following CSS is applied:

#test3.small-first-letter:first-letter { color: blue; font-size: 80%; }

The 80% is just a guess to play around with.

Home - More stuff