Colori dei caratteri diversi per i segni di accento in Unicode

8

Sto lavorando a un'applicazione che utilizza alcuni script tailandesi. Molte vocali nella scrittura thailandese sono scritte come ciò che potrebbe essere meglio descritto come segni di accento sopra le consonanti.

Ad esempio, nella parola: กึ ด

ก e ด sono entrambe consonanti, ma ึ è una vocale. Devo essere in grado di impostare la vocale come colore diverso dalla consonante, ma non ho idea se ciò sia possibile anche in HTML poiché non riesco a selezionare la vocale indipendentemente dalla consonante.

Sono sicuro che questo vale anche per altre situazioni per gli accenti, ma non riesco a trovare alcuna soluzione.

typography

— JohnGB
fonte

Se questo è a scopo illustrativo, piuttosto che per ogni ricorrenza in un testo arbitrario, potresti considerare una figura o un'illustrazione. Potresti provare un grafico in linea (con il testo alternativo come i due glifi).

— horatio,

9

Risposta breve: non funzionerà. Oltre a ciò che ha detto e100, puoi provare in diversi modi, ma nessuno ottiene l'effetto desiderato.

Ecco lo standard "mostriamo come entità HTML e guardiamo il browser combinare i glifi" testo di esempio:
Proviamo a cambiare il colore solo per la vocale. IE9 rende i personaggi combinati, ma usa il colore del primo personaggio. È interessante notare che quando lo facciamo in Chrome (e presumo anche Safari, poiché si basa su WebKit), i personaggi non vengono combinati. Chrome rende la vocale come un carattere discreto, probabilmente perché lo span rompe il suo motore di analisi del personaggio.
Possiamo provare a regolare manualmente la vocale per posizionarla dove dovrebbe essere, ma sfortunatamente il glifo viene visualizzato con il "carattere fantasma" in basso e questo non sembra giusto.
Possiamo provare a diventare davvero furbi e a non dividere i personaggi. Useremo un singolo SPANattorno a entrambi i personaggi ma useremo il :first-letterselettore pseudo-elemento CSS ... solo per scoprire che viene sempre visualizzato come colore del primo personaggio. Questo comportamento è lo stesso in WebKit e Trident.

Tieni presente che né Presto né Gecko possono farlo. In effetti, Gecko fa ancora peggio nel nostro tentativo di "posizione relativa" in quanto combina i personaggi e quindi elimina i margini in modo che entrambe le consonanti si scontrino. Questo praticamente copre tutti i tuoi principali browser ... che schifo.

— Farray
fonte

Questa è una risposta di classe A, Farray. Mi hai appena salvato diverse ore di sforzi sprecati (scenario diverso, stessa idea).

— Alan Gilbertson,

1

Non ho una risposta, ma questo caso di prova dimostra il problema, confrontandolo con un trattamento simile dei caratteri latini.

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

Ottengo risultati diversi in IE8 e Chrome, né funzionano come vorresti. Ciò può dipendere dall'implementazione del browser. Forse qualcun altro può basarsi su questo.

— e100
fonte