Unicodeのアクセント記号の異なるフォント色


8

タイ語のスクリプトを使用するアプリケーションに取り組んでいます。タイ語のスクリプトの多くの母音は、子音の上にアクセント記号として最もよく記述できるものとして書かれています。

たとえば、単語では::

กとดは両方とも子音ですが、ึは母音です。母音を子音とは異なる色に設定できるようにする必要がありますが、子音とは別に母音を選択できないので、HTMLでもこれが可能かどうかわかりません。

これはアクセントの他の状況にも当てはまると確信していますが、解決策は見つかりません。


これが例示の目的である場合、任意のテキストでのすべての出現ではなく、図または図を検討することができます。インライングラフィックを試してみてください(代替テキストを2つのグリフとして使用)。
horatio

回答:


9

短い答え:うまくいきません。e100が言ったことに加えて、いくつかの異なる方法を試すことができますが、望ましい効果を達成する方法はありません。

  1. 標準の「HTMLエンティティとしてレンダリングして、ブラウザがグリフを結合するのを見てみましょう」のサンプルテキストは次のとおりです。

    IE-正しい文字-すべて1色

  2. 母音だけの色を変えてみましょう。IE9は文字を組み合わせてレンダリングしますが、最初の文字の色を使用します。Chromeでこれを行うと(WebKitに基づいているため、Safariも想定しています)、文字が結合されていないことに注意してください。Chromeは母音を個別の文字としてレンダリングします。これは、スパンが文字解析エンジンを分割するためと考えられます。

    IE-正しい文字-間違った色

    Chrome-間違った文字-正しい色

  3. 手動で母音を調整して、本来あるべき位置に配置することができますが、残念ながらグリフは下部に「ゴーストキャラクター」が表示され、正しく表示されません。

    IE-間違った文字-正しい色

  4. キャラクターをばらばらにするのではなく、本当に巧妙にしようとすることができます。SPAN両方の文字の周りに単一の文字を使用しますが、CSSの:first-letter疑似要素セレクターを使用します...常に最初の文字の色としてレンダリングされることを確認するだけです。この動作は、WebKitとTridentで同じです。

    IE-正しい文字-間違った色

PrestoもGeckoもこれを行うことができないことに注意してください。実際、Geckoは「相対位置」の試行で文字を組み合わせてマージンを増やし、両方の子音が衝突するため、さらに悪い結果をもたらします。それはあなたのすべての主要なブラウザをほとんどカバーしています...つまらない。


それはクラスAの答えです、Farray。数時間の無駄な労力を節約できただけです(別のシナリオ、同じアイデア)。
アランギルバートソン'09

1

答えはありませんが、このテストケースは、ラテン文字の同様の処理と比較して、問題を示しています。

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

IE8とChromeでは結果が異なります-どちらも希望どおりに機能しません。これはブラウザの実装に起因する場合があります。おそらく、他の誰かがこれに基づいて構築できます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.