ansaurus

Question

CSS: text-transform not working properly for Turkish characters

Answer 1

A:

The root cause of this problem must be incorrect handling of these turkish characters by unicode library used in all these browsers. So I doubt there is an front-end-side fix for that.

Someone has to report this issue to the developers of these unicode libs, and it would be fixed in few weeks/months.

BarsMonster 2010-09-28 15:27:34

That's why I'am asking for workarounds, not fixes. ;-)

Malax 2010-09-29 14:31:22

They are not handling them incorrectly, they simply don't have any way of knowing it's meant to be Turkish.

tdammers 2010-10-01 16:03:44

Answer 2

A:

If you can't rely on text-transform and browsers you will have to render your text in uppercase yourself on the server (hope you're not uppercasing the text as the user types it). You should have a better support for internationalisation there.

Jakub Konecki 2010-09-29 15:44:11

Answer 3

A:

This work-around requires some Javascript. If you don't want to do that, but have something server side that can preprocess the text, this idea will work there too (I think).

First, detect if you are running in Turkish. If you are, then scan whatever you are going to uppercase to see if it contains the problem characters. If they do, replace all of those characters with the uppercase version of them. Then apply the uppercase CSS. Since the problem characters are already uppercase, that should be a totally fine (ghetto) work around. For Javascript, I envision having to deal with some .innerHTML on your impacted elements.

Let me know if you need any implementation details, I have a good idea of how to do this in Javascript using Javascript string manipulation methods. This general idea should get you most of the way there (and hopefully get me a bounty!)

-Brian J. Stinar-

Brian Stinar 2010-09-29 16:46:10

Answer 4

+4 A:

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>

alex 2010-10-01 08:06:06

I like your implementation of just uppercasing the entire contents rather than replacing the specific characters and relying on CSS as I suggested. I have a question about your recursive replace and .innerHTML though, mainly because I don't understand this attribute well enough. If I have nested elements <div id="a1"> <div id="a2"> contents</div></div>, and I call your replaceRecursive(), will the id's be uppercased? Thank you for helping me understand your implementation.

Brian Stinar 2010-10-01 16:16:20

You might want to add testing for `lang="tr"`, and should definitely not use `for...in` to iterate through `NodeList` objects: https://developer.mozilla.org/En/DOM/NodeList. Otherwise, +1

Yi Jiang 2010-10-03 09:18:22

ansaurus

tags:

views:

answers:

CSS: text-transform not working properly for Turkish characters

related questions