如何使text-transform:uppercase在希腊语中正常工作？

Question

我遇到的问题涉及到使用 text-transform: uppercase 属性使希腊字符大写化的问题。

在希腊语中，元音字母可以带有小写或大写的重音符号，例如 "one" 在希腊语中是 "ένα"。如果出现在句子开头则为 "Ένα"。但是，当一个单词或短语以全大写形式书写时，希腊语法规定它不应该有带重音的字母。

目前，CSS 的 text-transform: uppercase 属性会保留希腊字母的重音符号，这在语法上是错误的（因此，ένα 变成了 ΈΝΑ，而正确应该是 ΕΝΑ）。

我该如何使 text-transform: uppercase 正确地处理希腊语？

- Protonotarios

---

将此问题标记为重复是不正确的。确实，如所述，它是一个重复的问题。然而，OP 真正想做的是在转换后的希腊文本上正确地使用重音符号。但他错误地认为这是 CSS 规范或 CSS 实现中的 bug，因此问错了问题。实际上，问题应该是：“如何使 text-transform 与希腊语一起正常工作？”，对此有一个完全清晰的答案——使用 lang 属性。如果这个问题不能/不会重新打开，那么我希望 OP 重新发布它。 - user663031

你说得对！我刚刚按照你的建议完全修改了问题。非常感谢！ - Protonotarios

@BoltClock，您能重新打开这个问题吗？还是应该发布一个新的问题？ - user663031

Answer 1

如果CSS知道该语言是希腊语，它会很好地处理这个问题。仅仅指定希腊字符并不能告诉CSS该语言是希腊语；需要在某些父元素（包括html标签）上使用lang属性来指定。

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

应该可以为您完成工作，呈现。

ΕΝΑ

请到 http://jsfiddle.net/34tww2g8/ 查看示例。

- user663031

---

你好，这在IE中无法正常工作。有没有解决方法？ - DavidB

如果您在IE中尝试使用jsfiddle（我正在使用11版），则带有或不带lang属性的文本示例之间没有区别。 - DavidB

除了可能是一个错误之外，我没有其他想法。在Edge中似乎也出现了问题。 - user663031

好的，谢谢您的检查。我正在使用.Net，因此将在服务器端使用ToUpper重载，并带有本地文化，看看是否有效。 - DavidB

Answer 2

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实际修复了什么或测试哪个浏览器可能需要这样的解决方案。

- GiorgosK

Answer 3

您所描述的并不是CSS中的一个错误。CSS旨在为页面元素添加样式，这是一种不受文化影响的定义。您所描述的需要CSS处理页面的本地化，基于文化特定的样式化CSS将被加载。(en、fr、au...)。

有很多在线链接讨论全球化和本地化以及CSS。 请查看Mozilla网站上讨论同一主题的部分，查看“创建本地化UI”部分。

- rlcrews

---

@torazaburo 间接地说，OP希望CSS考虑语言因素。这需要某种逻辑。CSS的设计是为了给标记元素添加样式。大写、小写和句号。到目前为止，CSS只是在做这个。无论是在浏览器还是代码中，都需要一些逻辑来确定正在使用特定字符，并根据条件（在这种情况下是大小写）以不同的方式进行样式化。CSS并不意味着要做到这一点。 - rlcrews

@rlcrews。完全错误。CSS确实考虑了语言。大写和小写具有语言特定的含义，CSS 确实实现了--如果从lang属性知道语言是什么的话。请自己尝试使用<p style="text-transform: uppercase">ένα</p>和<p lang='el' style="text-transform: uppercase">ένα</p>查看区别。 - user663031

@torazaburo 我错了，好的知道了。如果可能的话，请将此作为答案发布。 - rlcrews

@rlcrews 谢谢。我想帮你，但是它必须先重新打开。 - user663031

我认为rlcrews在这里所说的是CSS本身并没有定义这些语言规则。它只是说，UA必须根据各自的标准（例如Unicode）来遵守规则。如果提供了正确的信息，UA将可以处理这个问题，但是这些信息需要由文档语言提供，而不是CSS，因为语言信息与文档有关，而不是样式。请参见http://www.w3.org/TR/CSS21/text.html#caps-prop和http://www.w3.org/TR/css3-text/#text-transform-property。 - BoltClock