CSS: text-transform ne fonctionne pas correctement pour des caractères turcs
La mise en œuvre des principaux navigateurs semblent avoir des problèmes avec text-transform: uppercase
avec des caractères turcs. Autant que je sache (je ne suis pas turc.) il existe quatre différents i
caractères: ı i I İ
, où les deux derniers sont des majuscules dans les représentations de l'ancien deux.
Cependant l'application de text-transform:uppercase
à ı i
, les navigateurs (vérifié IE, Firefox, Chrome et Safari) des résultats de I I
qui n'est pas correct et peut changer le sens des mots, de sorte que beaucoup de sorte qu'ils deviennent des insultes. (C'est ce que j'ai dit)
De ma recherche de solutions n'a pas révélé de ma question est: existe-il des solutions de contournement pour ce problème? La première solution pourrait être de supprimer text-transform: uppercase
entièrement mais c'est une sorte de dernier recours.
Drôle de chose, le W3C a des tests pour ce problème sur leur site, mais l'absence de plus d'informations sur cette question. http://www.w3.org/International/tests/tests-html-css/tests-text-transform/generate?test=5
J'apprécie toute l'aide et au plaisir de vos réponses 🙂
Voici un codepen
- Pouvez-vous montrer un travail, er, non-exemple de travail de votre cas?
- Bien sûr, avoir un coup d'oeil à malax.de/turkish-css-text-transform.html
- Le lien ne fonctionne plus, pour info.
Vous devez vous connecter pour publier un commentaire.
Vous pouvez ajouter
lang
attribut et définissez sa valeur àtr
pour résoudre ce problème:<html lang="tr">
ou<div lang="tr">
Voici un exemple fonctionnel.
lang
attribut fonctionne sur n'importe quel élément, mais Il n'a pas à traverser mon esprit pour modifier la réponse.Voici un rapide exemple de solution de contournement - il plus vite que ce que je pensais (testé dans un document avec 2400 étiquettes -> pas de retard). Mais je vois que js solutions ne sont pas la meilleure solution
lang="tr"
, et ne doit certainement pas utiliserfor...in
pour itérer sur lesNodeList
objets: developer.mozilla.org/En/DOM/NodeList. Sinon, +1Voici ma version améliorée de alex de code que j'utilise dans la production:
Remarque que je suis à l'aide de jQuery ici uniquement pour l'
ready()
fonction. Le jQuery compatibilité wrapper est aussi un moyen pratique pour l'espace de noms les fonctions. Autre que cela, les deux fonctions ne comptez pas sur jQuery à tous, de sorte que vous pourrait les sortir.Par rapport à alex de la version originale de celui-ci résout quelques problèmes:
Il garde la trace de l'attribut lang car elle se répète, parce que si vous avez mélangé le turc et l'autre latine contenu, vous obtiendrez une mauvaise transforme sur la non-turque sans elle. Conformément à ce que je passe dans la base
html
élément, de ne pas lebody
. Vous pouvez collerlang="en"
sur toutes les balises qui n'est pas le turc pour éviter une mauvaise utilisation des majuscules.Il applique la transformation de
TEXT_NODES
car la précédenteinnerHTML
méthode ne fonctionne pas avec un mélange de texte/nœuds d'éléments tels que des étiquettes avec le texte et les cases à l'intérieur d'eux.Tout en ayant quelques exemples de lacunes par rapport à une solution côté serveur, il a aussi quelques grands avantages, dont le principal est la garantie de la couverture sans le côté serveur avoir à être conscients de ce que les styles sont appliqués à ce contenu. Si le contenu est indexé et affichées dans Google résumés (par exemple), il est beaucoup mieux si elle reste en minuscules quand ils sont servis.
La prochaine version de Firefox Nightly (qui devrait devenir Firefox 14) est un correctif pour ce problème et doit gérer le cas sans aucun hack (comme le CSS3 spécifications de la demande).
Les détails techniques sont disponibles dans ce bogue : https://bugzilla.mozilla.org/show_bug.cgi?id=231162
Ils ont également résolu le problème de la propriété font-variant, je crois (Pour ceux ne sachant pas ce que font-variant, voir https://developer.mozilla.org/en/CSS/font-variant , pas encore à jour avec le changement, mais la doc est un navigateur agnostique et un wiki, donc...)
La cause de ce problème doit être une mauvaise manipulation de ces turc des caractères en unicode bibliothèque utilisée dans tous ces navigateurs. Donc, je doute qu'il y est un front-end-correctif côté pour que.
Quelqu'un n'a pas à signaler ce problème aux développeurs de ces unicode libs, et il serait résolu dans quelques semaines/mois.
Si vous ne pouvez pas compter sur les text-transform et des navigateurs, vous devrez rendre votre texte en majuscules-vous sur le serveur (j'espère que vous êtes pas uppercasing le texte que l'utilisateur tape).
Vous devriez avoir un meilleur support pour l'internationalisation là.
Ce travail nécessite un peu de Javascript. Si vous ne voulez pas le faire, mais d'avoir quelque chose côté serveur qui peut prétraiter le texte, cette idée y travaillent trop (je pense).
D'abord, de détecter si vous êtes de course dans turque. Si vous, puis de numériser tout ce que vous allez en majuscules pour voir si elle contient le problème des caractères. S'ils le font, remplacer tous les caractères avec la version en majuscules d'entre eux. Ensuite, appliquer les majuscules CSS. Puisque le problème des caractères sont déjà en majuscules, qui devrait être totalement amende (ghetto) contourner. Pour le Javascript, je m'imagine avoir à traiter avec certains .innerHTML sur votre touchés éléments.
Laissez-moi savoir si vous avez besoin de détails de mise en œuvre, j'ai une bonne idée de comment faire cela en Javascript à l'aide de Javascript chaîne méthodes de manipulation. Cette idée générale devrait vous obtenez la plupart du chemin (et j'espère me faire un bounty!)
-Brian J. Stinar-
Ce n'est pas de manière préférée, mais si vous n'avez pas d'autre option: Vous pouvez résoudre ce natif de la
javascript
aswell:Ici, c'est aussi ses gist.
JS: