タイ語のスクリプトを使用するアプリケーションに取り組んでいます。タイ語のスクリプトの多くの母音は、子音の上にアクセント記号として最もよく記述できるものとして書かれています。
たとえば、単語では::
กとดは両方とも子音ですが、ึは母音です。母音を子音とは異なる色に設定できるようにする必要がありますが、子音とは別に母音を選択できないので、HTMLでもこれが可能かどうかわかりません。
これはアクセントの他の状況にも当てはまると確信していますが、解決策は見つかりません。
タイ語のスクリプトを使用するアプリケーションに取り組んでいます。タイ語のスクリプトの多くの母音は、子音の上にアクセント記号として最もよく記述できるものとして書かれています。
たとえば、単語では::
กとดは両方とも子音ですが、ึは母音です。母音を子音とは異なる色に設定できるようにする必要がありますが、子音とは別に母音を選択できないので、HTMLでもこれが可能かどうかわかりません。
これはアクセントの他の状況にも当てはまると確信していますが、解決策は見つかりません。
回答:
短い答え:うまくいきません。e100が言ったことに加えて、いくつかの異なる方法を試すことができますが、望ましい効果を達成する方法はありません。
標準の「HTMLエンティティとしてレンダリングして、ブラウザがグリフを結合するのを見てみましょう」のサンプルテキストは次のとおりです。
母音だけの色を変えてみましょう。IE9は文字を組み合わせてレンダリングしますが、最初の文字の色を使用します。Chromeでこれを行うと(WebKitに基づいているため、Safariも想定しています)、文字が結合されていないことに注意してください。Chromeは母音を個別の文字としてレンダリングします。これは、スパンが文字解析エンジンを分割するためと考えられます。
手動で母音を調整して、本来あるべき位置に配置することができますが、残念ながらグリフは下部に「ゴーストキャラクター」が表示され、正しく表示されません。
キャラクターをばらばらにするのではなく、本当に巧妙にしようとすることができます。SPAN
両方の文字の周りに単一の文字を使用しますが、CSSの:first-letter
疑似要素セレクターを使用します...常に最初の文字の色としてレンダリングされることを確認するだけです。この動作は、WebKitとTridentで同じです。
PrestoもGeckoもこれを行うことができないことに注意してください。実際、Geckoは「相対位置」の試行で文字を組み合わせてマージンを増やし、両方の子音が衝突するため、さらに悪い結果をもたらします。それはあなたのすべての主要なブラウザをほとんどカバーしています...つまらない。
答えはありませんが、このテストケースは、ラテン文字の同様の処理と比較して、問題を示しています。
<!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>ก<span style='color: red'>ึ</span>ด</div>
<div>ก
<span style='color: red'>ึ</span>
ด
</div>
<div>x<span style='color: red;'>o</span>x</div>
<div>x
<span style='color: red;'>o</span>
x
</div>
</body>
</html>
IE8とChromeでは結果が異なります-どちらも希望どおりに機能しません。これはブラウザの実装に起因する場合があります。おそらく、他の誰かがこれに基づいて構築できます。