3

言語に応じてCSSを使用してテキストのスタイルを設定する方法はありますか？

たとえば、フォントTahomaはアラビア語のテキストに広く使用されていますが、同じテキストサイズの英語のテキストの場合、そのサイズは非常に小さいです。

したがって、アラビア語のテキスト内に英語のテキストがある場合、テキスト言語の変更を自動的に検出し、アラビア語のテキストに含まれる英語のテキストに大きなフォントサイズを使用する方法はありますか。

ありがとう。

4

1 に答える 1

4

CSS にはこれを行うメカニズムはありませんが、JavaScript のすべてのテキスト ノードを反復処理し、無意識に文字 A ～ Z をテストすることで運試しできます(ただし、これはテキストが英語match(/^[a-z]+$/i)になることを保証するものではありません)。

true の場合、次のようなクラスを親要素にアタッチし、appears-englishCSS を次のようにすることができます.appears-english { font-size: 120% }。

アップデート

リクエストに応じて、ここにいくつかのコードがあります...

JavaScript

var divs = document.getElementsByTagName('div');

for (var i = 0, divsLength = divs.length; i < divsLength; i++) {
  var div = divs[i];

    if (div.firstChild.nodeValue.match(/^[a-z]+$/)) {
       div.className += 'appears-english';
    }  

}

CSS

.appears-english {
   font-size: 170%;  
}

jsFiddle .

フィドル[a-z]\wから、数字がある場合は一致しないことがわかります。正規表現を.

ところで、アラビア文字も含む要素内で英語の文字を更新する場合は、replace()それらを使用して要素でラップし、そのspan要素に追加appears-englishする必要があります。

于 2011-03-01T02:20:51.313 に答える