如何使 text-transform:uppercase 与 Greek 一起正常工作？

Question

我遇到的问题与 text-transform: uppercase 属性对希腊字符的大写有关。

在希腊语中，元音可以有锐音符，包括小写和大写，例如 one 在希腊语中是 ένα。在句子的开头是 ψνα。但是当一个单词或短语以 全部大写 书写时，希腊文法规定它应该 没有重音字母 .

就像现在一样，CSS 的 text-transform: uppercase 将希腊字母大写并保留重音符号，这在语法上是错误的（因此 ένα 变为 ΛNΑ，而它应该是 εNΑ).

如何使 text-transform: uppercase 正确地用于希腊语？

Answer 1

您所描述的并不是 CSS 中的真正错误。 CSS 旨在使页面元素风格化。这是一个不可知论的定义，独立于文化。您所描述的内容需要 CSS 来处理页面的本地化，然后将加载基于特定文化的程式化 CSS。 (en, fr, au...).

有许多讨论全球化和本地化以及 CSS 的在线链接。

Check the Mozilla site which discusses this same topic 查看创建可本地化部分 UI

Answer 2

如果

CSS 知道语言是希腊语，那么它会很好地处理这个问题。仅指定希腊字符并不能告诉 CSS 该语言是希腊语；这需要某些父元素上的 lang 属性（直到并包括 html 标记）。

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

应该为您完成工作，渲染

ΕΝΑ

参见 http://jsfiddle.net/34tww2g8/ 中的 fiddle。

Answer 3

Torazaburo 的回答是正确的，但对于旧版浏览器（主要是 IE 版本），没有对希腊重音字符的适当支持，因此您需要使用 javascript 将重音字符替换为非重音字符

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}) ;
}

这是fiddle中的工作函数。

您可以评论 //replaceAccented() 以查看 JavaScript 实际修复了什么或测试哪个浏览器可能需要这样的解决方案。

如何使 text-transform:uppercase 与 Greek 一起正常工作？

How do I make text-transform:uppercase work properly with Greek?

uppercase

lang

css