Menu
The implementations of the major browsers seem to have problems with text-transform: uppercase with Turkish characters. As far as I know (I'm not Turkish.) there are four different i characters: ı i I İ where the last two are the uppercase representations of the former two.
However applying text-transform:uppercase to ı i, the browsers (checked IE, Firefox, Chrome and Safari) results in I I which is not correct and may change the meaning of the words so much so that they become insults. (That's what I've been told)
As my research for solutions did not reveal any my question is: Are there workarounds for this issue? The first workaround might be to remove text-transform: uppercase entirely but that's some sort of last resort.
Funny thing, the W3C has tests for this problem on their site, but lack of further information about this issue. http://www.w3.org/International/tests/tests-html-css/tests-text-transform/generate?test=5
I appreciate any help and looking forward to your answers :-)
Here's a codepen
825
You can achieve CSS all caps by using the keyword “capitalize.” In addition, text-transform capitalize converts all the first letters in all words to uppercase. Other values you can use with text-transform include “none,” “lowercase,” “full-width,” and “full-size-kana.”
You can add lang attribute and set its value to tr to solve this:
<html lang="tr"> or <div lang="tr">
Here is working example.
191
Here's a quick and dirty workaround example - it's faster than I thought (tested in a document with 2400 tags -> no delay). But I see that js workarounds are not the very best solution
<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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
