How do I make text-transform:uppercase work proper

Question

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?

Answer 1

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 html tag).

<p lang='el' style="text-transform: uppercase">ένα</p>

should get the job done for you, rendering

ΕΝΑ

See fiddle at http://jsfiddle.net/34tww2g8/.

Answer 2

Torazaburo's answer is correct but for older browsers (IE version mostly) there is no proper support for greek accented characters and hence you need to use javascript to replace the accented with non accented characters

replaceAccented();
function replaceAccented(){
var e = document.getElementsByTagName('*'), l = e.length, i;
if( typeof getComputedStyle == "undefined")
    getComputedStyle = function(e) {return e.currentStyle;};
for( i=0; i<l; i++) {
    if( getComputedStyle(e[i]).textTransform == "uppercase") {
        // do stuff with e[i] here.
        e[i].innerHTML = greekReplaceAccented(e[i].innerHTML);
    }
}
}
function greekReplaceAccented(str) {
    var charList = {'Ά':'Α','ά':'α','Έ':'Ε','έ':'ε','Ή':'Η','ή':'η','Ί':'Ι','ί':'ι','ΐ':'ϊ','Ό':'Ο'
                                ,'ό':'ο','Ύ':'Υ','ύ':'υ','ΰ':'ϋ','Ώ':'Ω','ώ':'ω','ς':'Σ' 
    };
    return str.replace(/./g, function(c) {return c in charList? charList[c] : c}) ;
}

Here is the working function in a fiddle.

You can comment //replaceAccented() to see what is actually fixed by JavaScript or test which browser might need such a solution.

Answer 3

What you are describing isn't really a bug in CSS. CSS is designed to stylize the elements of a page. This is an agnostic definition, independent of culture. What you are describing would require the CSS to handle localization of a page, based upon the culture specific stylized CSS would then be loaded. (en, fr, au...).

There are a number of links online that discuss Globalization and localization as well as CSS.

Check the Mozilla site which discusses this same topic Look to the section on Create localizable UI