Question

I am having problem with css property of text:transform. When I set it to capitalize, it behaves differently in IE7 and IE8. The Product title of page[1] shows apple tree 'Gala' in other browsers while in IE it shows apple tree 'gala' . Note the ‘g’ letter after quote. I want the ‘g’ to be capital in both IE and other browsers.

Is there any hack or extra setting I need do, to get it working in IE ?

[1] – http://shop.shootcare.co.uk/pomonafruits/find/apple-tree-gala-apl026?path=&ref=mall

Answer 1

The property text-transform is seriously under-defined in CSS specifications. Its CSS 2.1 definition does not even specify what “word” means. In computer contexts, “word” as a unit of text means just a maximal sequence of non-whitespace characters, so in your case, the string ‘gala’ with the apostrophes included would be one word, and its first character is the apostrophe. So it could be argued that IE is most right here, but other browsers have adopted other interpretations.

The CSS3 Text draft proposes to change or clarify the meaning so that the first letter (which would really mean “letter or digit”!) would be affected. So this would make the g in ‘gaia’ capitalized. But it still does not define “word”, e.g. whether “cutting-edge” is two words or one, or how many words there are in “rock’n’roll”.

The conclusion is that almost any method for capitalizing words is more reliable than the CSS way. If possible, modify the software that generates the pages so that it performs the desired operation server-side, according to the rules you prefer. Even using JavaScript is safer than CSS here.