Warna font berbeda untuk tanda aksen di Unicode

8

Saya sedang mengerjakan aplikasi yang menggunakan beberapa skrip Thailand. Banyak vokal dalam aksara Thailand ditulis sebagai apa yang bisa digambarkan sebagai tanda aksen di atas konsonan.

Misalnya, dalam kata: กึ ด

ก dan ด keduanya konsonan, tetapi ึ adalah vokal. Saya harus dapat mengatur vokal sebagai warna yang berbeda untuk konsonan, tetapi saya tidak tahu apakah ini mungkin dalam HTML karena saya tidak dapat memilih vokal secara independen dari konsonan.

Saya yakin ini berlaku untuk situasi lain juga untuk aksen, tetapi saya tidak dapat menemukan solusi.

typography

— JohnGB
sumber

Jika ini untuk tujuan ilustrasi, bukan untuk setiap kejadian dalam teks sewenang-wenang, Anda dapat mempertimbangkan gambar atau ilustrasi. Anda dapat mencoba grafik in-line (dengan teks-alt sebagai dua mesin terbang).

— horatio

9

Jawaban singkat: itu tidak akan berhasil. Lebih jauh dari apa yang dikatakan e100, Anda dapat mencoba beberapa cara berbeda, tetapi tidak ada yang mencapai efek yang diinginkan.

Inilah standar "mari kita render sebagai entitas HTML dan saksikan browser menggabungkan glyphs" contoh teks:
Mari kita coba ubah warna hanya untuk vokal. IE9 membuat karakter digabungkan, tetapi menggunakan warna karakter pertama. Sangat menarik untuk dicatat bahwa ketika kita melakukan ini di Chrome (dan saya menganggap Safari juga, karena didasarkan pada WebKit) - karakter tidak digabungkan. Chrome merender vokal sebagai karakter diskrit, kemungkinan karena rentang memecah mesin parsing karakternya.
Kita dapat mencoba dan secara manual menyesuaikan vokal untuk menempatkannya di tempat yang seharusnya, tetapi sayangnya mesin terbang merender dengan "karakter hantu" di bagian bawah dan ini tidak terlihat benar.
Kita dapat mencoba untuk benar-benar licik dan tidak memisahkan karakter. Kami akan menggunakan satu di SPANsekitar kedua karakter tetapi menggunakan :first-letterpemilih elemen pseudo CSS ... hanya untuk menemukan bahwa itu selalu dirender sebagai warna karakter pertama. Perilaku ini sama di WebKit dan Trident.

Perlu diingat bahwa baik Presto maupun Gecko tidak dapat melakukan ini. Faktanya, Gecko bahkan lebih buruk dalam upaya "posisi relatif" kita karena menggabungkan karakter dan kemudian memperkeruh margin sehingga kedua konsonan bertabrakan. Itu cukup banyak mencakup semua browser utama Anda ... mengecewakan.

— Farray
sumber

Itu jawaban Kelas-A, Farray. Anda baru saja menyelamatkan saya beberapa jam dari usaha sia-sia (skenario berbeda, ide yang sama).

— Alan Gilbertson

1

Saya tidak punya jawaban tetapi test case ini menunjukkan masalahnya, membandingkannya dengan perlakuan yang sama pada karakter Latin.

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

Saya mendapatkan hasil yang berbeda di IE8 dan Chrome - tidak berfungsi seperti yang Anda inginkan. Ini mungkin turun ke implementasi browser. Mungkin orang lain bisa membangun ini.

— e100
sumber