處理不同的文字方向
到目前為止，我們在 CSS 學習中遇到的許多屬性和值都與螢幕的物理尺寸相關。例如，我們為一個盒子建立上、右、下和左邊框。這些物理尺寸非常適合水平檢視的內容，而且預設情況下，Web 更傾向於支援從左到右的語言（例如英語或法語），而不是從右到左的語言（例如阿拉伯語）。
然而，近年來，CSS 已經發展到能更好地支援不同內容方向，包括從右到左，以及從上到下的內容（例如日語）——這些不同的方向性被稱為書寫模式。隨著你的學習深入並開始使用佈局，理解書寫模式會對你非常有幫助，因此我們現在將介紹它們。
什麼是書寫模式？
CSS 中的書寫模式指的是文字是水平還是垂直排列。writing-mode 屬性允許我們從一種書寫模式切換到另一種。你不需要使用垂直書寫模式的語言來做這件事——你也可以出於創意目的更改佈局部分的書寫模式。
在下面的示例中，我們使用 writing-mode: vertical-rl 顯示了一個標題。文字現在垂直排列。垂直文字在圖形設計中很常見，可以為你的網頁設計增添更有趣的外觀和感覺。
<h1>Play with writing modes</h1>
body {
font-family: sans-serif;
height: 300px;
}
h1 {
writing-mode: vertical-rl;
color: white;
background-color: black;
padding: 10px;
}
writing-mode 屬性的三個可能值是：
horizontal-tb：塊流方向從上到下。句子水平排列。vertical-rl：塊流方向從右到左。句子垂直排列。vertical-lr：塊流方向從左到右。句子垂直排列。
所以 writing-mode 屬性實際上設定了塊級元素在頁面上顯示的方向——要麼從上到下，要麼從右到左，要麼從左到右。這反過來又決定了文字在句子中的流向。
書寫模式與塊和內聯佈局
我們已經討論了塊級和內聯佈局，以及有些內容顯示為塊級元素，有些顯示為內聯元素的事實。正如我們上面所述，塊級和內聯與文件的書寫模式相關聯，而不是物理螢幕。只有在使用水平顯示文字（如英語）的書寫模式時，塊級才從頁面頂部到底部顯示。
如果我們看一個例子，這會更清楚。在下一個例子中，我有兩個包含標題和段落的盒子。第一個盒子使用 writing-mode: horizontal-tb，這是一種水平書寫、從上到下的書寫模式。第二個盒子使用 writing-mode: vertical-rl；這是一種垂直書寫、從右到左的書寫模式。
<div class="wrapper">
<div class="box horizontal">
<h2>Heading</h2>
<p>A paragraph demonstrating writing modes in CSS.</p>
</div>
<div class="box vertical">
<h2>Heading</h2>
<p>A paragraph demonstrating writing modes in CSS.</p>
</div>
</div>
body {
font-family: sans-serif;
height: 300px;
}
.wrapper {
display: flex;
}
.box {
border: 1px solid #cccccc;
padding: 0.5em;
margin: 10px;
}
.horizontal {
writing-mode: horizontal-tb;
}
.vertical {
writing-mode: vertical-rl;
}
當我們切換書寫模式時，我們正在改變哪個方向是塊級，哪個是內聯。在 horizontal-tb 書寫模式下，塊方向從上到下執行；在 vertical-rl 書寫模式下，塊方向水平從右到左執行。因此，塊維度始終是塊在所使用的書寫模式下在頁面上顯示的方向。內聯維度始終是句子流動的方向。
此圖顯示了水平書寫模式下的兩個維度。
此圖顯示了垂直書寫模式下的兩個維度。
一旦你開始研究 CSS 佈局，尤其是較新的佈局方法，這種塊級和內聯的概念就會變得非常重要。我們將在後面重新討論它。
方向
除了書寫模式，我們還有文字方向。如上所述，一些語言，如阿拉伯語，是水平書寫的，但方向是從右到左。這不太可能在創意上使用——如果你想將某些東西對齊到右邊，還有其他方法可以做到——然而，理解這是 CSS 性質的一部分很重要。Web 不僅僅適用於從左到右顯示的語言！
由於書寫模式和文字方向可以改變，較新的 CSS 佈局方法不提及左右、上下。相反，它們會討論開始和結束以及內聯和塊的概念。現在不必過於擔心，但在你開始研究佈局時，請記住這些概念；你會發現它對你理解 CSS 非常有幫助。
邏輯屬性和值
在學習的這個階段討論書寫模式和方向的原因是，我們已經看過很多與螢幕物理尺寸相關的屬性，而這些屬性在水平書寫模式下更有意義。
我們再來看看我們的兩個盒子——一個使用 horizontal-tb 書寫模式，一個使用 vertical-rl。我給這兩個盒子都設定了 width。你可以看到當盒子處於垂直書寫模式時，它仍然有一個寬度，這導致文字溢位。
<div class="wrapper">
<div class="box horizontal">
<h2>Heading</h2>
<p>A paragraph demonstrating writing modes in CSS.</p>
<p>These boxes have a width.</p>
</div>
<div class="box vertical">
<h2>Heading</h2>
<p>A paragraph demonstrating writing modes in CSS.</p>
<p>These boxes have a width.</p>
</div>
</div>
body {
font-family: sans-serif;
height: 300px;
}
.wrapper {
display: flex;
}
.box {
border: 1px solid #cccccc;
padding: 0.5em;
margin: 10px;
width: 100px;
}
.horizontal {
writing-mode: horizontal-tb;
}
.vertical {
writing-mode: vertical-rl;
}
在這種情況下，我們真正想要的是根據書寫模式來交換高度和寬度。當我們在垂直書寫模式下時，我們希望盒子在塊級維度上擴充套件，就像它在水平模式下一樣。
為了簡化這一點，CSS 最近開發了一組對映屬性。這些屬性本質上是用邏輯或流相對版本替換了物理屬性——例如 width 和 height。
當處於水平書寫模式時，對映到 width 的屬性稱為 inline-size——它指內聯維度的尺寸。height 的屬性名為 block-size，是塊維度的尺寸。你可以從下面的示例中看到它是如何工作的，我們用 inline-size 替換了 width。
<div class="wrapper">
<div class="box horizontal">
<h2>Heading</h2>
<p>A paragraph demonstrating writing modes in CSS.</p>
<p>These boxes have inline-size.</p>
</div>
<div class="box vertical">
<h2>Heading</h2>
<p>A paragraph demonstrating writing modes in CSS.</p>
<p>These boxes have inline-size.</p>
</div>
</div>
.wrapper {
display: flex;
}
.box {
border: 1px solid #cccccc;
padding: 0.5em;
margin: 10px;
inline-size: 100px;
}
.horizontal {
writing-mode: horizontal-tb;
}
.vertical {
writing-mode: vertical-rl;
}
邏輯外邊距、邊框和內邊距屬性
在過去的兩節課中，我們學習了 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。你能想出如何在兩種書寫模式下都讓這個下邊框始終在文字下方嗎？
<div class="wrapper">
<div class="box physical">
<h2>Physical Properties</h2>
<p>A paragraph demonstrating logical properties in CSS.</p>
</div>
<div class="box logical">
<h2>Logical Properties</h2>
<p>A paragraph demonstrating logical properties in CSS.</p>
</div>
</div>
.wrapper {
display: flex;
border: 5px solid #cccccc;
}
.box {
margin-right: 30px;
inline-size: 200px;
writing-mode: horizontal-tb;
}
.logical {
margin-block-start: 20px;
padding-inline-end: 2em;
padding-block-start: 2px;
border-block-start: 5px solid pink;
border-inline-end: 10px dotted rebeccapurple;
border-block-end: 1em double orange;
border-inline-start: 1px solid black;
}
.physical {
margin-top: 20px;
padding-right: 2em;
padding-top: 2px;
border-top: 5px solid pink;
border-right: 10px dotted rebeccapurple;
border-bottom: 1em double orange;
border-left: 1px solid black;
}
h2 {
border-bottom: 5px solid black;
}
考慮到所有單獨的邊框長手屬性，屬性的數量非常龐大，你可以在 MDN 頁面 邏輯屬性和值上看到所有對映屬性。
邏輯值
到目前為止，我們已經研究了邏輯屬性名稱。還有一些屬性採用 top、right、bottom 和 left 的物理值。這些值也有對映，對映到邏輯值——block-start、inline-end、block-end 和 inline-start。
例如，你可以向左浮動影像，使文字環繞影像。你可以用 inline-start 替換 left，如下例所示。
將此示例中的書寫模式更改為 vertical-rl，以檢視影像會發生什麼。將 inline-start 更改為 inline-end 以更改浮動
<div class="wrapper">
<div class="box logical">
<img
alt="star"
src="https://mdn.github.io/shared-assets/images/examples/big-star.png" />
<p>
This box uses logical properties. The star image has been floated
inline-start, it also has a margin on the inline-end and block-end.
</p>
</div>
</div>
.wrapper {
display: flex;
}
.box {
margin: 10px;
padding: 0.5em;
border: 1px solid #cccccc;
inline-size: 200px;
writing-mode: horizontal-tb;
}
img {
float: inline-start;
margin-inline-end: 10px;
margin-block-end: 10px;
}
在這裡，我們還使用邏輯外邊距值來確保無論書寫模式如何，外邊距都處於正確的位置。
你應該使用物理屬性還是邏輯屬性？
邏輯屬性和值比其物理對應物新，因此最近才在瀏覽器中實現。你可以在 MDN 上的任何屬性頁面上檢視瀏覽器支援的範圍。如果你不使用多種書寫模式，那麼目前你可能更喜歡使用物理版本。然而，最終我們期望人們在大多數情況下過渡到邏輯版本，因為一旦你開始處理 flexbox 和 grid 等佈局方法，它們就非常有意義了。
總結
本課程中解釋的概念在 CSS 中變得越來越重要。理解塊和內聯方向——以及文字流如何隨書寫模式的變化而變化——將在未來非常有用。即使你從未使用過除水平書寫模式之外的任何書寫模式，它也將幫助你理解 CSS。