書寫模式系統簡介

塊和行內

在考察各種書寫系統的方向性之前，理解“塊”和“行內”這兩個術語很重要。行內是指字元和單詞在行內的流動方式。塊是指行或內容塊相互堆疊的方式。文件的書寫模式決定了文件的塊方向和行內方向。它們不基於物理方向，例如左、右、上和下。

尺寸和方向

網頁上的所有內容都以行內或塊尺寸佈局。行內尺寸是文字行在當前書寫模式中執行的尺寸，而塊尺寸是塊（例如段落）一個接一個地顯示的尺寸。行內尺寸垂直於塊尺寸。

在英語文件中，文字水平從左到右執行，或在阿拉伯語文件中，文字水平從右到左執行，行內尺寸是水平的，而行內方向分別是左到右和右到左。在這兩種情況下，塊尺寸都是垂直的，塊方向是從上到下。在像日語這樣的垂直書寫模式中，行內尺寸是垂直的，因為該書寫模式中的行是垂直執行的，而塊尺寸是水平的。

行內框和塊框

在正常流佈局中，框的外部顯示型別決定了該框在頁面上與其他元素並排時的行為。行內框包裹每行文字，並沿行內尺寸佈局。

塊框表示頁面上的容器，可以包含其他塊元素和行內元素。它們沿塊尺寸佈局，並沿行內尺寸擴充套件以填充其容器中所有可用空間（如果未透過inline-size等屬性在行內尺寸中設定特定大小）。如果您使用水平顯示文字的書寫模式（例如英語），塊框只從頁面的頂部到底部顯示。

CSS 邏輯屬性和值模組定義了 CSS 中許多物理屬性和值的流相對對映，這有助於理解邏輯屬性和值的基本概念。

行內基線方向和塊流方向

行內基線方向是內容在行內排序的主要方向，並定義了行的“開始”和“結束”。direction 屬性指定了框的行內基線方向，並與unicode-bidi 屬性以及任何文字內容的固有方向性一起，決定了行內級內容在行內的排序。

塊流方向是塊級框和行框在塊容器內堆疊的方向。writing-mode 屬性決定了塊流方向。

書寫模式系統

不同的書寫系統有不同的書寫模式。水平書寫模式是指文字行是水平的，即向下或向上的塊流。垂直書寫模式是指文字行是垂直的，即向左或向右的塊流。

拉丁語和斯拉夫語系的書寫通常使用從左到右的行內方向和從上到下的塊流方向。拉丁語系包括英語、西班牙語、羅馬尼亞語和葡萄牙語。斯拉夫語系包括烏克蘭語、波蘭語和捷克語。

<p lang="en-US" dir="auto">This is written in English</p>
<p lang="lt-LT" dir="auto">Tai parašyta lietuviu kalba</p>
<p lang="el-GR" dir="auto">Αυτό είναι γραμμένο στα ελληνικά</p>

阿拉伯語系的書寫通常使用從右到左的行內方向和從上到下的塊流方向。有幾種水平從右到左的語言，包括阿拉伯語、阿拉姆語、阿塞里語、迪維希語、富拉語、希伯來語、庫爾德語、恩科語、波斯語、羅興亞語、敘利亞語和烏爾都語。

<p lang="ur-PK" dir="auto">یہ اردو میں لکھا ہے۔</p>
<p lang="ku-CRB" dir="auto">ئەمە بە کوردی نووسراوە</p>

漢字系的書寫通常使用從左到右的行內方向和從上到下的塊流方向，或從上到下的行內方向和從右到左的塊流方向。傳統上，中文、越南語、韓語和日語以豎排形式書寫，從上到下，塊方向從右到左，但在線上通常會以橫排形式從左到右呈現。

<p lang="jp-JP" dir="auto">これはベトナム語で書かれています</p>

蒙古語系的書寫通常是豎排的，從上到下，列從左到右流動；行內方向從上到下，塊流方向從左到右。這與中文、日文和韓文不同，它們的豎排文字列是從右到左閱讀的。這源於蒙古文字是從古維吾爾語演變而來，而古維吾爾語是從左到右書寫的。

<p lang="mn-MONG" dir="auto">Үүнийг монгол хэлээр бичжээ</p>

為了正確渲染書寫模式，我們使用全域性 HTML dir 屬性。由於瀏覽器可以關閉 CSS 樣式，建議使用 dir 屬性和 <bdo> 元素，以確保在沒有樣式表的情況下正確的雙向佈局，而不是 CSS direction 屬性。

對於垂直語言，我們使用 writing-mode 和 text-orientation 屬性。

[lang|="jp"] {
  writing-mode: vertical-rl;
  text-orientation: sideways;
}
[lang|="mn"] {
  writing-mode: vertical-lr;
  text-orientation: sideways;
}

[lang|="jp"],
[lang|="mn"] {
  float: left;
}

混合書寫模式

雖然這些不同的語言有不同的書寫模式，但主要使用一種書寫模式的網站可能包含來自不同語言或書寫模式的內容。例如，阿拉伯語（從右到左）新聞網站上的文章可能包含拉丁風格的數字，這些數字是從左到右書寫的。許多雜誌和報紙在同一頁面上混合使用不同的書寫模式。本指南也一樣，它展示了不同的書寫模式。

排版模式決定了垂直指令碼是使用垂直流特有的排版約定（垂直排版模式）還是使用水平書寫模式的排版約定（水平排版模式）。這個概念區分了垂直排版和旋轉的水平排版。

書寫模式的 text-orientation 元件控制垂直排版模式中的字形方向，規定特定的排版字元單元是直立排版還是側向排版。

另見

• CSS 書寫模式模組