Différentes couleurs de police pour les marques d'accentuation dans Unicode

8

Je travaille sur une application qui utilise un script thaï. De nombreuses voyelles en écriture thaï sont écrites comme ce qui pourrait être décrit comme des marques d'accent au-dessus des consonnes.

Par exemple, dans le mot: กึ ด

ก et ด sont tous deux des consonnes, mais ึ est une voyelle. Je dois pouvoir définir la voyelle comme une couleur différente de la consonne, mais je n'ai aucune idée si cela est même possible en HTML car je ne peux pas sélectionner la voyelle indépendamment de la consonne.

Je suis sûr que cela s'applique également à d'autres situations pour les accents, mais je ne trouve aucune solution.

typography

— JohnGB
source

Si c'est à des fins d'illustration, plutôt que pour chaque occurrence dans un texte arbitraire, vous pouvez envisager une figure ou une illustration. Vous pouvez essayer un graphique en ligne (avec le texte alternatif comme les deux glyphes).

— horatio

9

Réponse courte: cela ne fonctionnera pas. En plus de ce qu'a dit l'e100, vous pouvez essayer de différentes manières, mais aucune n'obtient l'effet souhaité.

Voici l'exemple de texte standard "Rendons en tant qu'entités HTML et regardons le navigateur combiner les glyphes":
Essayons de changer la couleur de la voyelle uniquement. IE9 rend les caractères combinés, mais utilise la couleur du premier caractère. Il est intéressant de noter que lorsque nous faisons cela dans Chrome (et je suppose que Safari aussi, car il est basé sur WebKit) - les caractères ne sont pas combinés. Chrome rend la voyelle comme un caractère discret, probablement parce que la plage rompt son moteur d'analyse de caractères.
Nous pouvons essayer d'ajuster manuellement la voyelle pour la positionner là où elle devrait être, mais malheureusement le glyphe s'affiche avec le "caractère fantôme" en bas et cela ne semble pas correct.
Nous pouvons essayer de devenir vraiment rusés et de ne pas diviser les personnages. Nous utiliserons un seul SPANautour des deux caractères, mais utiliser le :first-lettersélecteur de pseudo-élément CSS ... seulement pour constater qu'il s'affiche toujours comme la couleur du premier caractère. Ce comportement est le même dans WebKit et Trident.

Gardez à l'esprit que ni Presto ni Gecko ne peuvent le faire non plus. En fait, Gecko fait encore pire dans notre tentative de "position relative" car il combine les caractères, puis détruit les marges afin que les deux consonnes entrent en collision. Cela couvre à peu près tous vos principaux navigateurs ... décevant.

— Farray
source

C'est une réponse de classe A, Farray. Vous venez de m'économiser plusieurs heures d'efforts inutiles (scénario différent, même idée).

— Alan Gilbertson

1

Je n'ai pas de réponse mais ce cas de test illustre le problème, en le comparant à un traitement similaire des caractères latins.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>
    <div>&#x0E01;<span style='color: red'>&#x0E36;</span>&#x0E14;</div>
    <div>&#x0E01;
        <span style='color: red'>&#x0E36;</span>
&#x0E14;
    </div>
    <div>x<span style='color: red;'>o</span>x</div>
    <div>x
        <span style='color: red;'>o</span>
x
    </div>
</body>
</html>

J'obtiens des résultats différents dans IE8 et Chrome - aucun ne fonctionne comme vous le souhaitez. Cela peut se résumer à la mise en œuvre du navigateur. Peut-être que quelqu'un d'autre peut s'appuyer sur cela.

— e100
source