Verschiedene Schriftfarben für Akzentzeichen in Unicode

8

Ich arbeite an einer Anwendung, die ein thailändisches Skript verwendet. Viele Vokale in thailändischer Schrift sind als Akzentzeichen über Konsonanten geschrieben.

Zum Beispiel im Wort: กึ ด

ก und ด sind beide Konsonanten, aber ึ ist ein Vokal. Ich muss in der Lage sein, den Vokal als eine andere Farbe als den Konsonanten einzustellen, aber ich habe keine Ahnung, ob dies überhaupt in HTML möglich ist, da ich den Vokal nicht unabhängig vom Konsonanten auswählen kann.

Ich bin sicher, dass dies auch für andere Situationen bei Akzenten gilt, aber ich kann keine Lösungen finden.

typography

— JohnGB
quelle

Wenn dies nur zur Veranschaulichung dient und nicht für jedes Vorkommen in einem beliebigen Text, können Sie eine Abbildung oder Illustration in Betracht ziehen. Sie können eine Inline-Grafik ausprobieren (mit dem Alt-Text als zwei Glyphen).

— Horatio

9

Kurze Antwort: Es wird nicht funktionieren. Nach dem, was e100 gesagt hat, können Sie verschiedene Methoden ausprobieren, aber keine erzielt den gewünschten Effekt.

Hier ist der Standard-Beispieltext "Lassen Sie uns als HTML-Entitäten rendern und beobachten, wie der Browser die Glyphen kombiniert":
Versuchen wir, die Farbe nur für den Vokal zu ändern. IE9 rendert die Zeichen kombiniert, verwendet jedoch die Farbe des ersten Zeichens. Es ist interessant festzustellen, dass die Zeichen nicht kombiniert werden, wenn wir dies in Chrome tun (und ich gehe auch von Safari aus, da es auf WebKit basiert). Chrome rendert den Vokal als diskretes Zeichen, wahrscheinlich weil die Spanne die Zeichenanalyse-Engine aufbricht.
Wir können versuchen, den Vokal manuell anzupassen, um ihn dort zu positionieren, wo er sein sollte, aber leider wird die Glyphe mit dem "Geisterzeichen" unten gerendert, und dies sieht nicht richtig aus.
Wir können versuchen, wirklich schlau zu werden und die Charaktere nicht aufzuteilen. Wir werden ein einzelnes SPANZeichen um beide Zeichen verwenden, aber den :first-letterPseudoelement-Selektor von CSS verwenden ... nur um festzustellen, dass er immer als Farbe des ersten Zeichens dargestellt wird. Dieses Verhalten ist in WebKit und Trident identisch.

Denken Sie daran, dass weder Presto noch Gecko dies können. Tatsächlich ist Gecko bei unserem Versuch der "relativen Position" noch schlechter, da er die Zeichen kombiniert und dann die Ränder aufmischt, so dass beide Konsonanten kollidieren. Das deckt so ziemlich alle Ihre wichtigsten Browser ab ... Mist.

— Farray
quelle

Das ist eine Klasse-A-Antwort, Farray. Sie haben mir gerade mehrere Stunden unnötigen Aufwands erspart (anderes Szenario, gleiche Idee).

— Alan Gilbertson

1

Ich habe keine Antwort, aber dieser Testfall zeigt das Problem und vergleicht es mit einer ähnlichen Behandlung lateinischer Zeichen.

<!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>

Ich erhalte unterschiedliche Ergebnisse in IE8 und Chrome - beide funktionieren nicht so, wie Sie möchten. Dies kann auf die Implementierung des Browsers zurückzuführen sein. Vielleicht kann jemand anderes darauf aufbauen.

— e100
quelle