Diferentes colores de fuente para las tildes en Unicode

8

Estoy trabajando en una aplicación que usa un script tailandés. Muchas vocales en escritura tailandesa se escriben como lo que podría describirse mejor como acentos sobre las consonantes.

Por ejemplo, en la palabra: กึ ด

ก y ด son ambas consonantes, pero ึ es una vocal. Necesito poder establecer la vocal como un color diferente a la consonante, pero no tengo idea de si esto es posible en HTML, ya que no puedo seleccionar la vocal independientemente de la consonante.

Estoy seguro de que esto también se aplica a otras situaciones para los acentos, pero no puedo encontrar ninguna solución.

typography

— JohnGB
fuente

Si esto es para fines ilustrativos, en lugar de para cada aparición en un texto arbitrario, puede considerar una figura o ilustración. Puede probar un gráfico en línea (con el texto alternativo como los dos glifos).

— Horacio

9

Respuesta corta: no funcionará. Además de lo que dice e100, puede probar de diferentes maneras, pero ninguna logra el efecto deseado.

Aquí está el texto de muestra estándar "rendericemos como entidades HTML y observemos al navegador combinar los glifos":
Intentemos cambiar el color solo de la vocal. IE9 representa los caracteres combinados, pero usa el color del primer carácter. Es interesante notar que cuando hacemos esto en Chrome (y supongo que Safari también, ya que está basado en WebKit), los caracteres no se combinan. Chrome representa la vocal como un carácter discreto, probablemente porque el lapso rompe su motor de análisis de caracteres.
Podemos intentar ajustar manualmente la vocal para colocarla donde debería estar, pero desafortunadamente el glifo se muestra con el "carácter fantasma" en la parte inferior y esto no se ve bien.
Podemos intentar ser realmente astutos y no dividir a los personajes. Usaremos un solo SPANalrededor de ambos caracteres, pero usaremos el :first-letterselector de pseudoelementos de CSS ... solo para descubrir que siempre se representa como el color del primer carácter. Este comportamiento es el mismo en WebKit y Trident.

Tenga en cuenta que ni Presto ni Gecko pueden hacer esto tampoco. De hecho, Gecko lo hace aún peor en nuestro intento de "posición relativa", ya que combina los caracteres y luego ensucia los márgenes para que ambas consonantes colisionen. Eso cubre prácticamente todos sus principales navegadores ... fastidio.

— Farray
fuente

Esa es una respuesta de clase A, Farray. Me acabas de salvar varias horas de esfuerzo desperdiciado (escenario diferente, misma idea).

— Alan Gilbertson

1

No tengo una respuesta, pero este caso de prueba demuestra el problema, comparándolo con un tratamiento similar de los 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>

Obtengo resultados diferentes en IE8 y Chrome, ninguno de los dos funciona como quisieras. Esto puede deberse a la implementación del navegador. Quizás alguien más pueda construir sobre esto.

— e100
fuente