Mal*_*lax 51 html css internationalization lang uppercase
主要浏览器的实现似乎text-transform: uppercase与土耳其字符有问题.据我所知(我不是土耳其语.)有四个不同的i字符:? i I ?最后两个字符是前两个字符的大写字母.
但是应用text-transform:uppercase到? i的浏览器(IE检查,火狐,Chrome和Safari)的结果I I是不正确,可能这么多,使他们成为侮辱改变的话的含义.(这就是我被告知的)
由于我对解决方案的研究没有透露任何我的问题:这个问题是否有解决方法？第一个解决方法可能是text-transform: uppercase完全删除,但这是最后的手段.
有趣的是,W3C已经在他们的网站上测试了这个问题,但缺乏关于这个问题的进一步信息.http://www.w3.org/International/tests/tests-html-css/tests-text-transform/generate?test=5
我感谢任何帮助,期待你的回答:-)
这是一个codepen
小智 15
这是一个快速而肮脏的解决方法示例 - 它比我想象的要快(在2400个标签的文档中测试 - >没有延迟).但我发现js解决方法并不是最好的解决方案
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-3">
</head>
<body>
<div style="text-transform:uppercase">a b c ç d e f g ? h ? i j k l m n o ö p r s ? t u ü v y z (source)</div> <div>A B C Ç D E F G ? H I ? J K L M N O Ö P R S ? T U Ü V Y Z (should be like this)</div>
<script>
function getStyle(element, style) {
var result;
if (document.defaultView && document.defaultView.getComputedStyle) {
result = document.defaultView.getComputedStyle(element, '').getPropertyValue(style);
} else if(element.currentStyle) {
style = style.replace(/\-(\w)/g, function (strMatch, p1) {
return p1.toUpperCase();
});
result = element.currentStyle[style];
}
return result;
}
function replaceRecursive(element) {
if (element && element.style && getStyle(element, 'text-transform') == 'uppercase') {
element.innerHTML = element.innerHTML.replace(/?/g, 'I');
element.innerHTML = element.innerHTML.replace(/i/g, '?'); // replaces 'i' in tags too, regular expression should be extended if necessary
}
if (!element.childNodes || element.childNodes.length == 0) return;
for (var n in element.childNodes) {
replaceRecursive(element.childNodes[n]);
}
}
window.onload = function() { // as appropriate 'ondomready'
alert('before...');
replaceRecursive(document.getElementsByTagName('body')[0]);
alert('...after');
}
</script>
</body>
</html>
这是我在生产中使用的增强版alex代码:
(function($) {
function getStyle(element, style) {
var result;
if (document.defaultView && document.defaultView.getComputedStyle) {
result = document.defaultView.getComputedStyle(element, '').getPropertyValue(style);
} else if(element.currentStyle) {
style = style.replace(/\-(\w)/g, function (strMatch, p1) {
return p1.toUpperCase();
});
result = element.currentStyle[style];
}
return result;
}
function replaceRecursive(element, lang) {
if(element.lang) {
lang = element.lang; // Maintain language context
}
if (element && element.style && getStyle(element, 'text-transform') == 'uppercase') {
if (lang == 'tr' && element.value) {
element.value = element.value.replace(/?/g, 'I');
element.value = element.value.replace(/i/g, '?');
}
for (var i = 0; i < element.childNodes.length; ++i) {
if (lang == 'tr' && element.childNodes[i].nodeType == Node.TEXT_NODE) {
element.childNodes[i].textContent = element.childNodes[i].textContent.replace(/?/g, 'I');
element.childNodes[i].textContent = element.childNodes[i].textContent.replace(/i/g, '?');
} else {
replaceRecursive(element.childNodes[i], lang);
}
}
} else {
if (!element.childNodes || element.childNodes.length == 0) return;
for (var i = 0; i < element.childNodes.length; ++i) {
replaceRecursive(element.childNodes[i], lang);
}
}
}
$(document).ready(function(){ replaceRecursive(document.getElementsByTagName('html')[0], ''); })
})(jQuery);
请注意,我在这里仅使用jQuery来实现该ready()功能.jQuery兼容性包装器也是命名函数的便捷方式.除此之外,这两个函数根本不依赖于jQuery,所以你可以将它们拉出来.
与alex的原始版本相比,这个解决了几个问题:
它会在递归时跟踪lang属性,因为如果你混合了土耳其语和其他拉丁语内容,你将在没有它的情况下对非土耳其语进行不正确的转换.根据这一点,我传入基本html元素,而不是body.您可以粘贴lang="en"任何非土耳其语的标签,以防止不正确的大写.
它仅应用转换,TEXT_NODES因为前一个innerHTML方法不适用于混合文本/元素节点,例如带有文本和内部复选框的标签.
虽然与服务器端解决方案相比具有一些明显的缺陷,但它也具有一些主要优点,其主要部分是保证覆盖,而服务器端不必知道哪些样式应用于哪些内容.如果任何内容被编入索引并在Google摘要中显示(例如),则在提供服务时保持小写会更好.