How do I make text-transform:uppercase work properly with Greek?
The issue I came across has to do with the capitalization of Greek characters by the
text-transform: uppercase property.
In Greek, vowels can have acute accents, both small and caps, for instance one in Greek is ένα. In the beginning of a sentence would be Ένα. But when a word or a phrase is written in all caps then Greek grammar says that it should have no accented letters.
As it is now, CSS's
text-transform: uppercase capitalizes Greek letters preserving accents which is grammatically wrong (so ένα becomes ΈΝΑ, while it should be ΕΝΑ).
How do I make
text-transform: uppercase work properly for Greek?
CSS will handle this fine if it knows that the language is Greek. Merely specifying Greek characters does not tell CSS that the language is Greek; that requires the
lang attribute on some parent element (up to and including the
<p lang='el' style="text-transform: uppercase">ένα</p>
should get the job done for you, rendering
See fiddle at http://jsfiddle.net/34tww2g8/.