CSSのunicode-bidiプロパティでテキストの書字方向を上書きし、多言語対応を実現する方法
unicode-bidiプロパティとは
アラビア語やヘブライ語など、右から左へ記述される言語（RTL言語）を含む多言語サイトでは、テキストの表示方向を正しく制御することが重要です。CSSのunicode-bidiプロパティを使用すると、directionプロパティと組み合わせて、テキストの書字方向を上書き（オーバーライド）するかどうかを設定できます。
主な値とその役割
- normal：デフォルト値。追加の埋め込みレベルは適用されません。
- bidi-override：
directionプロパティで指定した方向に従い、文字の並び順を強制的に上書きします。 - isolate：要素の内容を周囲のテキストから分離（隔離）し、双方向アルゴリズムの影響が外側に及ばないようにします。
- embed：インライン要素に対して追加の埋め込みレベルを開きます。
- isolate-override：isolateとbidi-overrideの両方の動作を組み合わせます。
- plaintext：要素をUnicodeの双方向アルゴリズムにおける独立した段落として扱います。
使用例
次のコードでは、direction: rtl;（右から左）と組み合わせて、bidi-overrideとisolateそれぞれの挙動の違いを確認できます。
<!DOCTYPE html>
<html>
<head>
<style>
p.demo1 {
direction: rtl;
unicode-bidi: bidi-override;
}
p.demo2 {
direction: rtl;
unicode-bidi: isolate;
}
</style>
</head>
<body>
<h1>unicode-bidiプロパティのデモ</h1>
<p>これはサンプルテキストです。</p>
<p class="demo1">これはサンプルテキストです</p>
<p class="demo2">これはサンプルテキストです</p>
</body>
</html>実行結果のポイント
bidi-overrideを指定したdemo1では、文字の並び順が右から左へ強制的に反転されて表示されます。一方、isolateを指定したdemo2では、要素内のテキストが独立した双方向コンテキストとして扱われ、周囲のテキストへの影響が遮断されます。
多言語サイトを構築する場合は、意図しない文字の並び替えを防ぐため、単純な強制上書きよりもisolateの使用が推奨されます。特にユーザー入力や翻訳テキストを混在させる場面では、この違いを理解しておくことが重要です。
-
CSSでテキストの最終行を揃える方法｜text-align-lastプロパティの使い方
CSSのtext-align-lastプロパティを使用すると、ブロック要素内のテキストの最終行の揃え位置を個別に指定できます。段落全体の配置とは別に、最後の行だけ右寄せや中央寄せにしたい場合に便利です。以下のコードでは、div要素にtext-align-last: right;を設定し、テキストの最終行を右寄せに表示しています。 サンプルコード <!DOCTYPE html> <html> <head> <style> &n
-
CSSのuser-selectプロパティでテキスト選択の可否を設定する方法
CSSでは、user-selectプロパティを使用することで、要素内のテキストがユーザーによって選択可能かどうかを制御できます。例えば、ボタンやコピーライト表記など、ユーザーに選択されたくないテキストに対してuser-select: none;を指定すると、ドラッグしてもテキストが選択されなくなります。基本的な使い方以下の例では、div要素にuser-select: none;を適用しています。このスタイルが設定された要素内のテキストは、マウスやタッチ操作でも選択できません。サンプルコード<!DOCTYPE html> <html> <head>