CSS - Unicode-bidiプロパティ: 双方向テキストのマスター

こんにちは、未来のウェブ開発者たち！今日は、CSSの世界に踏み込み、少し怖い響きがあるプロパティを探ってみます：unicode-bidi。でも心配しないでください、このチュートリアルの終わりまでに、双方向テキストをプロのように扱えるようになるでしょう！

Unicode-bidiとは？

本題に入る前に、まずunicode-bidiとは何かを理解しましょう。例えば、英語（左から右）とアラビア語（右から左）の両方を含む多言語ウェブサイトを書いているとします。どのようにすればそれぞれの言語が正しく表示されるのでしょうか？それがunicode-bidiの役目です！

unicode-bidiプロパティは、CSSにおける双方向テキストを扱う際の強力な相棒です。このプロパティを使うことで、書き方向に関係なく、contentが正しく表示されるようにします。

可能な値

unicode-bidiプロパティの可能な値を見てみましょう：

値	説明
normal	エレメントは追加のエンベディングレベルを開きません
embed	追加のエンベディングレベルを開きます
bidi-override	双方向アルゴリズムのオーバーライドを作成します
isolate	エレメントは兄弟エレメントから隔離されます
isolate-override	'isolate'と'bidi-override'の効果を組み合わせます
plaintext	エレメントは隔離され、双方向フォーマッティングはリセットされます

これらが今は混乱するかもしれませんが、詳しく例を交えて説明します！

適用範囲

unicode-bidiプロパティはすべてのエレメントに適用できます。しかし、インラインエレメントやdisplay: inlineに設定されたエレメントで最も一般的に使用されます。

DOMシンタックス

JavaScriptでunicode-bidiを使用する際には、以下のシンタックスを使用します：

object.style.unicodeBidi = "value"

では、それぞれの値を詳しく見て、実際にどのように動作するかを確認しましょう！

CSS unicode-bidi - normal値

normal値はデフォルト設定です。双方向アルゴリズムに関して追加のエンベディングレベルを開きません。

<p style="unicode-bidi: normal;">
これは英語のテキストです。これはアラビア語のテキストです。
</p>

この例では、テキストが以下のように表示されます：

これは英語のテキストです。これはアラビア語のテキストです。

英語のテキストは左から右に、アラビア語のテキストは右から左に、それぞれの自然な方向に従います。

CSS unicode-bidi - embed値

embed値は双方向アルゴリズムに関して追加のエンベディングレベルを開きます。

<p style="unicode-bidi: embed; direction: rtl;">
これは英語のテキストです。これはアラビア語のテキストです。
</p>

これは以下のように表示されます：

.これはアラビア語のテキストです これは英語のテキストです

ここでは、全体の段落が右から左に設定されていますが、英語のテキストは左から右の方向を保ちます。

CSS unicode-bidi - bidi-override値

bidi-override値は双方向アルゴリズムのオーバーライドを作成します。テキストの方向性をdirectionプロパティに合わせます。

<p style="unicode-bidi: bidi-override; direction: rtl;">
これは英語のテキストです。これはアラビア語のテキストです。
</p>

これは以下のように表示されます：

.یبرع صن اذه .txet hsilgnE si sihT

この場合、すべてのテキストが厳密に右から左に設定され、英語のテキストの文字順も逆転します。

CSS unicode-bidi - isolate値

isolate値はエレメントを兄弟エレメントから隔離します。

<p>これは <span style="unicode-bidi: isolate; direction: rtl;">これはアラビア語のテキストです</span> 英語のテキストです。</p>

これは以下のように表示されます：

これは これはアラビア語のテキストです 英語のテキストです

アラビア語のテキストは隔離され右から左に表示され、周囲の英語のテキストは影響を受けません。

CSS unicode-bidi - isolate-override値

isolate-override値はisolateとbidi-overrideの効果を組み合わせます。

<p>これは <span style="unicode-bidi: isolate-override; direction: rtl;">English text</span> in a sentence.</p>

これは以下のように表示されます：

This is txet hsilgnE in a sentence.

span内のテキストは隔離され、厳密に逆転します。

CSS unicode-bidi - plaintext値

plaintext値はエレメントを隔離し、双方向フォーマッティングをリセットします。

<p style="direction: rtl;">
これは <span style="unicode-bidi: plaintext;">some English text</span> بعض النص العربي
</p>

これは以下のように表示されます：

بعض النص العربي some English text This is

span内の英語のテキストは自然な左から右の方向で表示され、親の右から左の方向に影響されません。

CSS unicode-bidi - 関連プロパティ

unicode-bidiを使用する際には、以下の関連プロパティをよく使用します：

プロパティ	説明
direction	テキストの方向を設定します
writing-mode	テキストの配置が水平であるか垂直であるかを定義します

unicode-bidiプロパティは、directionプロパティと組み合わせて双方向テキストの流れを制御します。

結論

おめでとうございます！あなたはunicode-bidiの世界に深く潜り込みました。このプロパティは最初は複雑に見えるかもしれませんが、多言語ウェブサイトを扱う際には非常に価値のあるツールです。実践で完璧にするためには、さまざまな値を試してみてください。

ウェブ開発の旅を続ける中で、双方向テキストの理解が重要になる状況に多く遭遇するでしょう。世界中の視聴者向けのウェブサイトを作成する場合や、ローカライズプロジェクトを進める場合など、今日学んだスキルはあなたにとって役立ちます。

codingを続け、学び続け、最も重要なのは、楽しむことです！ウェブ開発の世界は興味深い挑戦に満ちており、unicode-bidiをマスターすることは冒険の始まりです。ハッピーコーディング！

Credits: Image by storyset