CSS - Unicode-bidi 屬性：掌握雙向文字
Hello there, future web developers! Today, we're going to embark on an exciting journey into the world of CSS and explore a property that might sound a bit intimidating at first: unicode-bidi. But don't worry, by the end of this tutorial, you'll be handling bidirectional text like a pro!
什麼是 Unicode-bidi？
在我們深入細節之前，讓我們先了解 unicode-bidi 是什麼。想像你正在編寫一個多語言的網站，其中包括英文（從左到右）和阿拉伯文（從右到左）文字。你如何確保每種語言都能正確顯示？這就是 unicode-bidi 擔任的角色！
unicode-bidi 屬性是當你處理 CSS 中的雙向文字時的可靠助手。它幫助你控制文檔中雙向文字的處理方式，確保無論書寫方向如何，內容都能正確顯示。
可能的值
讓我們看看 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;">
This is English text. ذلك نص عربي.
</p>在這個例子中，文字將會顯示為：
This is English text. ذلك نص عربي.
英文文本是從左到右，而阿拉伯文文本則是從右到左，遵循它們的自然方向。
CSS unicode-bidi - embed 值
embed 值在雙向算法中打開一個額外的嵌入層級。
<p style="unicode-bidi: embed; direction: rtl;">
This is English text. ذلك نص عربي.
</p>這會顯示為：
.ذلك نص عربي This is English text.
在這裡，整個段落都被視為從右到左，但英文文本在整個 RTL 環境中保持其從左到右的方向。
CSS unicode-bidi - bidi-override 值
bidi-override 值為雙向算法創建一個覆蓋。它強制文本的方向性與 direction 屬性匹配。
<p style="unicode-bidi: bidi-override; direction: rtl;">
This is English text. ذلك نص عربي.
</p>這會顯示為：
.يبرع صن اذه .txet hsilgnE si sihT
在這種情況下，所有文本都被視為嚴格從右到左，甚至將英文文本中的字符順序顛倒。
CSS unicode-bidi - isolate 值
isolate 值在雙向格式化方面將元素與其兄弟元素隔離。
<p>This is <span style="unicode-bidi: isolate; direction: rtl;">ذلك نص عربي</span> some English text.</p>這會顯示為：
This is ذلك نص عربي some English text.
阿拉伯文本被隔離並以從右到左的方 式顯示，而周圍的英文文本則不受影響。
CSS unicode-bidi - isolate-override 值
isolate-override 值結合了 isolate 和 bidi-override 的效果。
<p>This is <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;">
This is <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 的世界。這個屬性可能一開始看起來複雜，但它是在多語言網站中不可或缺的工具。記住，熟能生巧，所以不要猶豫去嘗試不同的值，看看它們如何影響你的文本。
在你繼續網頁開發的旅程中，你會遇到許多情況，其中理解雙向文本是關鍵的。無論你是為全球觀眾創建網站還是從事本地化項目，你今天學到的技能都將為你提供良好的服務。
繼續編程，持續學習，最重要的是，玩得開心！網頁開發的世界充滿了令人興奮的挑戰，而精通如 unicode-bidi 這樣的屬性只是你冒險的開始。快樂編程！
Credits: Image by storyset