Menu
I've written a web application that contains translations in several languages (one of them being Greek.)
When displaying a certain translation on the title, the design rule was that the text is supposed to be uppercased, which in any other language in the world is fine, but when it comes to Greek, browsers don't know what to do with the accents (see this) so they display the wrong uppercased String.
From that patch I've linked above, I've transformed it to Javascript, ran some use cases against it, and it works. Now all I have to do is this:
Without adding a uppercase class to every element that needs to be uppercased (there are quite a few), can I query the DOM using a computed style property? Ie. give me all the elements that have a computed text-transform: uppercase
808
I like Otovo's answer as the most elegant and quick. I would certainly not recommend scanning all elements for text-transform. For large pages on mobile devices the inefficiency in speed is notable.
Therefore I would recommend to simply note down all selectors with text-transform from the CSS files. This should be possible for most cases. Then, use jQuery directly on those selectors.
So, to extend Otovo's answer, add a unique class like i18n-el per language somewhere like in body (this is the default for Drupal but anything similar would work). Then run:
$('.i18n-el').find('.all-relevant-selectors').attr('lang', 'el');
Obviouslt replace .all-relevant-selectors with the selectors that you noted down from the CSS files, separated with comma.
Also, it is worth mentioning that this works only for text-transform: uppercase and not font-variant: small-caps for Chrome 39.
Alternatively, there is a jQuery plugin for this matter called jquery-remove-upcase-accents, although I have not evaluated it at all.
99
The solution in this problem is described above example 3 here
This is an example that should work on any browser (tested only at firefox 25)
HTML:
<body>
<p id="withlang" lang="el">κεφαλαία με μετατροπή σύμφωνα με την γλώσσα</p>
<p id="withoutlang">κεφαλαία με μετατροπή σύμφωνα με αντιστοιχίσεις unicode</p>
<p id="withlangsmall" lang="el">μικρά κεφαλαία με μετατροπή σύμφωνα με την γλώσσα</p>
<p id="withoutlangsmall">μικρά κεφαλαία με μετατροπή σύμφωνα με αντιστοιχίσεις unicode</p>
</body>
CSS:
#withlang, #withoutlang{
text-transform: uppercase;
}
#withlangsmall, #withoutlangsmall{
font-variant: small-caps;
}
You can also use the lang attribute in higher level, for example at body tag.
HTML:
<body lang="el">
<p id="withlang">κεφαλαία με μετατροπή σύμφωνα με την γλώσσα</p>
<p id="withlangsmall">μικρά κεφαλαία με μετατροπή σύμφωνα με την γλώσσα</p>
</body>
CSS:
#withlang{
text-transform: uppercase;
}
#withlangsmall{
font-variant: small-caps;
}
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
