Cores de fonte diferentes para acentos em Unicode

8

Estou trabalhando em um aplicativo que usa algum script tailandês. Muitas vogais no roteiro tailandês são escritas como o que poderia ser melhor descrito como acentos acima das consoantes.

Por exemplo, na palavra: กึ ด

ก e ด são consoantes, mas ึ é uma vogal. Eu preciso ser capaz de definir a vogal como uma cor diferente da consoante, mas não tenho idéia se isso é possível em HTML, pois não posso selecionar a vogal independentemente da consoante.

Tenho certeza de que isso se aplica a outras situações também para acentos, mas não consigo encontrar soluções.

typography

— JohnGB
fonte

Se isso é para fins ilustrativos, e não para toda ocorrência em um texto arbitrário, você pode considerar uma figura ou ilustração. Você pode tentar um gráfico em linha (com o texto alternativo como os dois glifos).

— horatio 21/07

9

Resposta curta: não vai funcionar. Além do que o e100 disse, você pode tentar algumas maneiras diferentes, mas nenhuma atinge o efeito desejado.

Aqui está o texto de exemplo padrão "vamos renderizar como entidades HTML e ver o navegador combinar os glifos":
Vamos tentar mudar a cor apenas da vogal. O IE9 renderiza os caracteres combinados, mas usa a cor do primeiro caractere. É interessante notar que, quando fazemos isso no Chrome (e também assumo o Safari, já que é baseado no WebKit) - os caracteres não são combinados. O Chrome processa a vogal como um caractere discreto, provavelmente porque o período interrompe seu mecanismo de análise de caracteres.
Podemos tentar ajustar manualmente a vogal para posicioná-la onde deveria estar, mas infelizmente o glifo é renderizado com o "caractere fantasma" na parte inferior e isso não parece correto.
Podemos tentar ser realmente astutos e não dividir os personagens. Usaremos um único em SPANtorno dos dois caracteres, mas usaremos o :first-letterseletor de pseudoelementos do CSS ... apenas para descobrir que ele sempre é renderizado como a cor do primeiro caractere. Esse comportamento é o mesmo no WebKit e Trident.

Lembre-se de que nem o Presto nem o Gecko podem fazer isso também. De fato, Gecko se sai ainda pior em nossa tentativa de "posição relativa", pois combina os personagens e depois aumenta as margens para que ambas as consoantes colidam. Isso cobre praticamente todos os seus principais navegadores ... Que chatice.

— Farray
fonte

Essa é uma resposta de classe A, Farray. Você acabou de me salvar várias horas de esforço desperdiçado (cenário diferente, mesma ideia).

— Alan Gilbertson

1

Não tenho uma resposta, mas este caso de teste demonstra o problema, comparando-o com um tratamento similar de caracteres latinos.

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

Eu recebo resultados diferentes no IE8 e no Chrome - nem funcionam como você gostaria. Isso pode se dever à implementação do navegador. Talvez alguém possa construir sobre isso.

— e100
fonte