處理不同的文字方向
我們到目前為止在 CSS 學習中遇到的許多屬性和值都與螢幕的物理尺寸有關。例如，我們在框的頂部、右側、底部和左側建立邊框。這些物理尺寸非常適合水平檢視的內容，預設情況下，網路傾向於比從右到左的語言（如阿拉伯語）更好地支援從左到右的語言（如英語或法語）。
然而，近年來，CSS 已經發展以更好地支援不同內容的方向性，包括從右到左，但也包括從上到下的內容（如日語）——這些不同的方向性被稱為**書寫模式**。隨著您學習的深入，並開始使用佈局，瞭解書寫模式將非常有幫助，因此我們現在將介紹它們。
什麼是書寫模式？
CSS 中的書寫模式指的是文字是水平執行還是垂直執行。使用writing-mode 屬性，我們可以從一種書寫模式切換到另一種書寫模式。您不需要在使用垂直書寫模式的語言中工作才能這樣做——您還可以出於創意目的更改佈局部分的書寫模式。
在下面的示例中，我們使用writing-mode: vertical-rl 顯示標題。現在文字垂直執行。垂直文字在圖形設計中很常見，並且可以成為為您的網頁設計增添更有趣的外觀和感覺的一種方式。
writing-mode 屬性的三個可能值是
horizontal-tb：從上到下的塊級流動方向。句子水平執行。vertical-rl：從右到左的塊級流動方向。句子垂直執行。vertical-lr：從左到右的塊級流動方向。句子垂直執行。
因此，writing-mode 屬性實際上是在設定頁面上塊級元素顯示的方向——是從上到下、從右到左還是從左到右。這隨後決定了句子中文字的流動方向。
書寫模式和塊級和內聯佈局
我們已經討論過塊級和內聯佈局，以及某些東西顯示為塊級元素，而其他東西顯示為內聯元素的事實。正如我們在上面所述，塊級和內聯與文件的書寫模式相關聯，而不是與物理螢幕相關聯。塊級元素僅在使用從左到右顯示文字的書寫模式（如英語）時才從頁面頂部顯示到頁面底部。
如果我們看一下示例，就會變得更加清楚。在下一個示例中，我有兩個包含標題和段落的框。第一個使用writing-mode: horizontal-tb，這是一個水平書寫且從頁面頂部到頁面底部的書寫模式。第二個使用writing-mode: vertical-rl；這是一種垂直書寫且從右到左的書寫模式。
當我們切換書寫模式時，我們正在改變哪個方向是塊級方向，哪個方向是內聯方向。在horizontal-tb 書寫模式中，塊級方向從上到下執行；在vertical-rl 書寫模式中，塊級方向從右到左水平執行。因此，**塊級尺寸**始終是頁面上使用中的書寫模式中塊級元素顯示的方向。**內聯尺寸**始終是句子流動的方向。
此圖顯示了水平書寫模式下的兩個尺寸。 
此圖顯示了垂直書寫模式下的兩個尺寸。
一旦您開始關注 CSS 佈局，特別是較新的佈局方法，這個塊級和內聯的概念變得非常重要。我們將在稍後重新討論它。
方向
除了書寫模式，我們還有文字方向。如上所述，某些語言（如阿拉伯語）是水平書寫，但從右到左。這並非您可能在創意方面使用的東西——如果您想將某樣東西排在右側，還有其他方法可以做到這一點——但是，重要的是要了解這一點，因為它屬於 CSS 的性質。網路不僅用於從左到右顯示的語言！
由於書寫模式和文字方向可能會改變，因此較新的 CSS 佈局方法不會引用左右和上下。相反，它們將討論開始和結束以及內聯和塊級這個概念。現在不要太擔心，但請記住這些想法，因為您將開始關注佈局；您會發現這對您理解 CSS 非常有幫助。
邏輯屬性和值
在您學習的這個階段討論書寫模式和方向的原因是，我們已經研究了許多與螢幕物理尺寸相關的屬性，這些屬性在水平書寫模式下更有意義。
讓我們再次看一下我們的兩個框——一個使用horizontal-tb 書寫模式，另一個使用vertical-rl。我已經為這兩個框都設定了width。您可以看到，當框處於垂直書寫模式時，它仍然具有寬度，這會導致文字溢位。
在這種情況下，我們真正想要做的是根據書寫模式本質上將高度與寬度互換。當我們處於垂直書寫模式時，我們希望框在塊級尺寸方向上擴充套件，就像它在水平模式中一樣。
為了使這更容易，CSS 最近開發了一組對映屬性。它們本質上用**邏輯**或**流相關**版本替換物理屬性——例如width 和 height。
在水平書寫模式下對映到width 的屬性稱為inline-size——它指的是內聯尺寸中的大小。height 的屬性名為block-size，是塊級尺寸中的大小。您可以在下面的示例中看到它是如何工作的，我們用inline-size 替換了width。
邏輯邊距、邊框和填充屬性
在過去的兩節課中，我們學習了 CSS 盒模型和 CSS 邊框。在邊距、邊框和填充屬性中，您會發現許多物理屬性的例項，例如margin-top、padding-left 和border-bottom。與寬度和高度的對映方式相同，這些屬性也有對映。
margin-top 屬性對映到margin-block-start——這將始終指的是塊級尺寸開始處的邊距。
padding-left 屬性對映到padding-inline-start，應用於內聯方向開始處的填充。這將是句子在該書寫模式下開始的地方。border-bottom 屬性對映到border-block-end，這是塊級尺寸結束處的邊框。
您可以在下面看到物理屬性和邏輯屬性的比較。
如果透過將.box 上的writing-mode 屬性切換為vertical-rl 來更改框的書寫模式，您將看到物理屬性如何仍然與其物理方向相關聯，而邏輯屬性如何隨書寫模式一起切換。
您還可以看到，h2 有一個黑色的border-bottom。你能弄清楚如何在兩種書寫模式下都使底部邊框始終位於文字下方嗎？
如果您考慮所有單獨的邊框簡寫，則會有大量的屬性，您可以在 MDN 頁面上檢視有關邏輯屬性和值的所有對映屬性。
邏輯值
到目前為止，我們已經研究了邏輯屬性名稱。還有一些屬性採用top、right、bottom 和 left 的物理值。這些值也具有對映，對映到邏輯值——block-start、inline-end、block-end 和 inline-start。
例如，您可以將影像向左浮動以使文字圍繞影像換行。您可以將left 替換為inline-start，如以下示例所示。
將此示例中的書寫模式更改為vertical-rl 以檢視影像發生了什麼。將inline-start 更改為inline-end 以更改浮動。
在這裡，我們還使用邏輯邊距值來確保邊距在任何書寫模式下都處於正確的位置。
您應該使用物理屬性還是邏輯屬性？
邏輯屬性和值比它們對應的物理屬性更現代，因此只是最近才在瀏覽器中實現。您可以在 MDN 上檢查任何屬性頁面以檢視瀏覽器支援的範圍。如果您沒有使用多種書寫模式，那麼現在您可能更喜歡使用物理版本。但是，最終，我們預計人們將過渡到大多數事物的邏輯版本，因為一旦您開始處理 flexbox 和 grid 等佈局方法，它們就會很有意義。
測試你的技能！
您已經讀到了本文的結尾，但您還記得最重要的資訊嗎？在繼續之前，您可以找到一些進一步的測試來驗證您是否保留了這些資訊——請參閱測試您的技能：書寫模式和邏輯屬性。
總結
本課程中解釋的概念在 CSS 中變得越來越重要。瞭解塊級和內聯方向——以及文字流如何隨書寫模式的變化而變化——將非常有用。即使您從未使用過除水平書寫模式以外的任何其他書寫模式，它也將幫助您理解 CSS。
在下一篇文章中，我們將仔細看看 CSS 中的溢位。