由於你可能沒有那麼多的時間，所以我將從結論開篇。

你可以使用一個不常見，但是非常重要的CSS屬性來使文字垂直顯示，像下面這樣。

除了讓文字垂直顯示之外，你也可以讓圖示和入口按鈕以這樣的方式呈現。當然，可以讓你頁面上的任何內容按這樣方式呈現。

我寫的css讓瀏覽器重新佈局文字的方向，使元素的佈局在正常流的基礎上旋轉90度。檢視這個例子，突出標題，並且看下現在游標是什麼樣子的。

檢視這個例子 Writing Mode Demo — Headline 作者Jen Simmons (@jensimmons) 在CodePen上。 實現的程式碼非常簡單。

上面就是把web預設的水平並由上至下的書寫方式轉變成垂直並由左至右的書寫方式所需要的全部程式碼。如果你在html元素上使用這樣的程式碼，那麼整個網頁的書寫方式都會被改變，並且也會影響滾動條的方向。

在我上面的例子，我告訴瀏覽器只有 h1元素會用vertical-rl這種書寫方式，網頁的其餘部份保持預設的horizontal-tb 的書寫方式。

這裡餐前小點就結束了。讓我開始呈現整個大餐並且解釋下 CSS書寫模式規範。

為什麼要學習書寫模式？

我教所有人包括西方的讀者學習書寫模式有三個原因，在此期間，我會解釋整個系統，而非簡單快速地展示一些小技巧。

1. 我們生活在一個博大並且豐富多彩的世界。學習其他語言是非常迷人的。你們中的很多人用漢語，日語，韓語來展示你們的頁面。或者，你可能在未來受到鼓舞。
2. 使用書寫模式來轉換位元組的方向是很酷的。這個CSS 可以被用於各種富有創造性的方式，即使你只用英語工作。
3. 最重要的是，我發現理解了書寫模式對理解FlexBox 和 CSS Grid 有著難以置信的幫助。在我學書寫模式之前，我感覺到在我知識面上仍有很大的不足，比如我壓根兒不能理解為什麼Grid 和 FlexBox 會有那樣的效果。當我理解了書寫模式，Grid 和 FlexBox 就變得簡單多了。突然地，align- 和 justify-這些對齊屬性，變得好理解多了。

無論你知道與否，書寫模式是我們建立的所有佈局的首要基石。 你可以做我們已經做了25年一直在做的事，並且捨棄你的頁面的預設的從左至右的方向，水平的從上至下的書寫模式。或者，你可以進入充滿新的可能性的新世界，在這裡內容佈局流動在另一個方向。

CSS 屬性

在本文，我的重點是CSS的 writing-mode屬性。它有以下五個可選值：

CSS書寫模式規範 是為了支援一個廣泛的書寫語言在我們全人類和語言複雜度上來設計的。這個提醒出奇的複雜。書寫語言的全球範圍的進化絕非簡單之事。

我已經以解釋一些基本的網頁佈局的概念和書寫系統作為開頭。接下來我會給你展示這些CSS屬性做了什麼。

行內方向，塊級方向和字元方向

在web的世界，有塊級和行內的佈局。如果你曾經寫過display: block 或者display: inline,你就應該瞭解這個概念。

在預設的書寫模式，塊垂直地從頁面的頂部開始向下工作。 想想一堆塊級元素是如何像一堆段落一樣堆疊，這就是塊級方向。

行內方向是每一行的文字是如何讓流動的。Web中預設的方向是水平方向，從左至右。 想象下你現在正在閱讀的文字，它是在印表機上被逐字元列印出的。這就是行內方向。

字元方向就是字元指向的方式。如果你鍵入一個字母“A”, 哪一側是這個字母的頂部？不同的語言可能指向不同的方向。大多數語言中規定，它們字元指向頁面的頂部，但也非絕對。

將這三個放在一起，你就會看到它們作為一個系統是怎麼工作的。

web預設的設定工作起來像這個樣子。

既然我們知道塊級，行內和字元方向是什麼意思，那麼我們來看看它們在世界範圍內的書寫系統的不同應用。

##CSS書寫模式的四種書寫系統

CSS書寫模式規範處理四個主要的書寫系統使用案例。這四個系統是拉丁語，阿拉伯語，漢語和 蒙古語。

拉丁語體系

一個書寫系統在世界上比其他任何東西都重要， 據報導大約佔世界人口的70%。

文字是水平的，從左至右展開，簡稱為LTR。塊級的方向是從上至下的。

它被叫做以拉丁語為基礎的系統，原因是它包括了所有的使用 拉丁字母表的語言,包括英語，西班牙語，德語，法語等等其他很多語言。但是還有很多不使用拉丁字母表的語言也使用這種系統。包括希臘語，斯拉夫字母體系的語言（俄語，烏克蘭語，保加利亞語，塞爾維亞語等等），婆羅米系文字（梵文，泰文，藏語）及其他很多很多。

觸發這種模式，你不需要使用CSS。這是預設的。

然而，最好的方式指定你在開篇時宣告你使用的語言及方向(LTR 或者RTL)就像本站點使用的這種來讓瀏覽器知道這個內容是以英國版的英文釋出的，文字順序是從左至右的。

###阿拉伯語體系

阿拉伯語，希伯來語和一些其他的語言的行內方向是從右至左的。這就是俗稱的RTL。

注意行的方向依舊是水平的。塊級的方向是從上至下的。並且字元的方向是豎直的。

在站點中不僅只有文字的方向可以從右至左的，其他有關佈局的一切都可以。右上角是起始位置。重要的東西在右邊。 眼睛瀏覽的順序是從右至左。所以，一般的RTL網站佈局使用的佈局方式只是LTR站點的翻轉。

在都支援LTR和RTL的站點中，比如聯合國的站點un.org ，這兩種佈局是彼此的映象。

對於很多web開發者，我們的國際化的經驗只致力於支援阿拉伯和希伯來語言指令碼。

CSS佈局技巧國際化 &&RTL

為了讓LTR的站點支援RTL，開發著不得不創造所有型別的hack技巧。比如，Drupal社群發起了一個公約，這個公約是每一個margin-left和-right，每一個padding-left和-right，每一個float: left和float: right都使用/* LTR */註釋。那麼後來的開發者可以搜尋每個有確切註釋的例項，並且建立樣式表來重寫左右樣式。這是一個繁瑣且容易出錯的工作方式。 CSS本身需要一個更好的方式來讓開發者只寫一次佈局方式，並且能通過一個簡單的命令輕鬆改變語言的方向。

我們新的CSS佈局體系確實是這麼做的。 Flexbox, Grid 和 Alignment 使用 start 和 end 而不是left 和right。這讓我們可以定義有關書寫系統的任何東西，並且可以非常容易的轉變方向。 通過書寫justify-content: flex-start, justify-items: end, 和最後的 margin-inline-start: 1rem，我們不需要更改程式碼就能實現想要的效果。

這是一個更好的工作方式。我知道在理解通過start和end來代替左和右上會有一定的疑惑。但是它適合任何語言的專案，並且就整體而言，這是更好的web方式。

可悲的是，我發現一些CSS前處理器工具聲稱要統一新的CSS佈局系統通過捨棄start和end而再次使用left和right。它們希望你用它們的工具，寫justify-content:left，並且自我感覺良好。似乎有些人認為這種新的工作方式被推翻了並且應該被廢棄。 然而，它的創造是為了滿足真正的需求。並且反應了全球網際網路。正如Bruce Lawson 所說，WWW標準代表的是全球資訊網，而不是豐富的西方網站.請不要試圖說服行業，某些錯誤不再是僅僅偏向西方文化。相反 ，要傳播這個新系統為什麼在這裡。

花一點時間回顧下你腦海裡有關行內和塊的概念，並且開始使用 start 和 end。它會很快成為你的老習慣的。

我還發現CSS前處理器讓我們使用新的思維方式，即使所有的部分還沒有被瀏覽器支援。一些工具讓你使用 text-align: start 來代替 text-align: left，並且讓前處理器幫你處理事情。 在我看來，這是極好的。前處理器能力的大量使用正在幫助我們轉變思維。

讓我們回到RTL。

如何宣告你的方向

你不需要使用CSS來告訴瀏覽器把LTR轉換為RTL。你應該在你的HTML上做這個。 這樣就會知道它以什麼格式來展示文件即使CSS沒有載入。

這個主要在html元素上完成。你也應該宣告你的主要語言。正如我上面提到的，網站正在使用的24種方式來宣告LTR方向和英式英語的使用。對於聯合國阿拉伯語網站，這24種方式用來宣告這是一個阿拉伯語言的站點，使用的是RTL佈局。

同一頁面中混雜多種語言，事情就會變的更復雜。但是這裡我不打算深入這裡，因為本文著重點是CSS和佈局，不會過多解釋有關國際化的東西。

我們要離開這個探究點了。因為，要注意的是，組成每個單詞的字元的佈局這個很多繁雜的工作是由Unicode來處理的。如果你很有興趣瞭解LTR，RTL和 雙向文字, 可以看這個視訊：Introduction to Bidirectional Text, a presentation by Elika Etemad。

與此同時，我們繼續回到CSS。

拉丁語-阿拉伯語體系

對於拉丁和阿拉伯語言體系來說，不管LTR還是RTL，都用同一個CSS屬性來指定書寫模式，即writing-mode: horizontal-tb。原因是在這兩個體系中，行內文字流都是水平的，塊級方向是從上至下的。也就是 horizontal-tb。

horizontal-tb 是web預設的書寫模式，所以你不需要特別指定除非你要重寫更高層級的模式。你可以想象你建的每一個站點都有以下樣式：

現在，我們把注意力轉移到垂直的書寫系統。

漢語體系

這裡事情變得有趣起來。

以漢語為基礎的書寫體系包括中日韓統一漢字，中文，日語，韓文和其他。有兩種選擇來展示頁面，並且又是兩者會同時使用。

很多中日韓統一漢字的文字佈局方式像拉丁語基礎體系的語言，具有水平，從上至下的塊級方向，由左至右的行內方向的特點。 這是更現代的方式，從二十世紀的很多地方開始的，並且通過計算機和後來的web進行了更多的推廣。

做到這種佈局需要的CSS和上面的一樣：

或者，你知道，什麼都不做，把結果作為預設。

另外，漢語基礎體系的語言可以以垂直的書寫模式呈現。這樣，行內方向是垂直的，塊級方向從右至左。

在這個圖中，可以看到兩種方式：

要注意的是，水平文字流向是從左至右，而垂直文字流向是由右至左。完全的非標準方式？日本發行的雜誌vogue使用混合的書寫模式。封面從左側開啟，和英語雜誌的方式是相反的。

頁面混合了英文和日語，日語文字的排版在水平和垂直這兩種模式。在 “Richard Stark”這個 紅色標題下, 你可以看到這個段落的佈局方式是 horizontal-tb 和 LTR，然而，在頁面底部更長的文字段落的排版卻是 vertical-rl。紅色放大的文字標誌著段落的開始。垂直文字上面的長的大字標題的排版方式是LTR，horizontal-tb。

如何設計整篇文字預設的書寫模式的細節依賴於的使用的情況。但是每個元素，每個標題，每個章節 ，每篇文章的書寫方式可以完全和預設的相反，只要你喜歡。

例如，也許，你會捨棄預設的horizontal-tb，並且指定元素水平的書寫方式：

或者，你也可以改變頁面的預設的書寫方式為水平的方式，然後指定元素的方式為 horizontal-tb, 像這樣的方式:

如果你的頁面有個橫向滾動條，那麼書寫模式將決定頁面是否以左上角作為起點，並且向右滾動（也就是我們習以為常的horizontal-tb），或者，如果頁面從右上角做為開始，溢位部分向左滾動。 這有一個改變滾動方向的例子， a CSS Writing Mode demo by Chen Hui Jing.檢視她的例子–你可以通過一個單選框來切換書寫模式，並且檢視不同的地方。

蒙古語體系

現在，希望到現在為止，所有的一切都是有意義的。 這可能比預期的有些複雜，但是，這不是非常困難。然我們今天蒙古語言體系。

蒙古語也是一種垂直方式的語言。文字垂直向下。 正如漢語體系那樣。但有兩種主要的不同， 第一個是，塊級方向是相反的。在蒙古語中，塊級元素從左至右堆疊。

這裡展示是以正確的形式展示的蒙版的維基百科。

也許維基百科的蒙版將要重新佈局。

現在你可能會認為，那看起來並不奇怪。 向左轉你的頭，這很熟悉。塊級方向從螢幕的左邊開始並且向右移動。行內方向從頁面的頂部開始並且向下移動（和RTL文字相似，僅順時針旋轉90度）。但這裡有另一個巨大的差異。字元的方向是顛倒的。蒙語字元的頂部不是指向左邊的，而是朝向塊級方向開始的邊緣。它們指向右邊，像這樣：

現在你可能會想忽略這些。也許你不希望很快就能排版蒙文。這裡說明了理解這些差異對每一個人都很重要的原因，即是蒙文的工作原理定義了writing-mode:vertical-lr。並且它意味著我們不能使用vertical-lr以我們期望的方式來排版其他語言的內容。

如果我們用我們知道的vertiacl-rl及我們猜想的vertical-lr是怎麼工作的方式思考，我們可能會這樣想：

但是這是錯誤的。這是它們真正的不同之處：

看到意想不到的情況？ writing-mode: vertical-rl 和writing-mode: vertical-lr這兩種模式中拉丁語文字均是順時針旋轉。不管書寫模式是怎樣，我們可以逆時針旋轉文字。

如果你正在排版蒙文，你可以使用CSS屬性writing-mode，正如你在漢語體系中使用的那樣。在整個頁面起作用的話，用在html 元素上，或者在頁面中特定的位置像這樣使用：

現在，如果你打算使用writing-mode來解決在水平排版的語言中的圖形設計帶來的影響，那麼我不認為你使用writing-mode:vertical-lr能解決。如果文字只有兩行，它將會以一種意外的方式呈現。所以我已經把它從我的工具庫裡去掉了。我自己使用 writing-mode: vertical-rl 的更多。並且絕不使用-lr。

平面設計的書寫模式

那麼我們如何使用 writing-mode 來把英文標題側著放置呢？我們可能通常會使用transform: rotate()

這有兩個例子，分別對應一個方向。 （順便說下，每一個例子整體的佈局都是採用的CSS Grid，所以一定要在支援CSS Grid的瀏覽器中測試它們，比如 Firefox Nightly。）

在demo 4A中，文字使用這些程式碼來順時針旋轉：

在 demo 4B中，文字使用這些程式碼逆時針旋轉：

我使用vertiacl-rl來旋轉文字，為的是文字可以在整體佈局中佔用合適的空間。然後我把它旋轉180度，使它朝向另一側。 然後我使用 text-align: right來使它上升到它容器元素的頂部。這種做法看起來是一個駭客技術，但是它很有用。

我現在要使用另一個CSS值在這個例子中，這個值是書寫模式中其他兩個取值中的一個。

如果可以的話，我將在4A的demo中使用以下程式碼佈局：

在4B的例子中：

問題是這兩個值只在火狐瀏覽器中支援。其他的瀏覽器都不支援 sideways-*。這就意味著我們還不能在實際環境中運用它。

一般來說，書寫模式的屬性在瀏覽器中有很好的相容性。因此，我現在會使用writing-mode: vertical-rl ，用 transform: rotate(180deg);這個駭客技術來實現它相反的方向。 我們可以做的更多在設計CSS來使其支援多元化化的語言上，但是，我將要停止這個中間的介紹。

如果你想要更多的體驗，你可以看下增加了 text-orientation: upright;的例子。這個組合把拉丁語的個別字母轉換成垂直的而不是水平的。

demo 4C，使用了這些CSS上：

你可以在labs.jensimmons.com/#writing-modes 檢視所有有關書寫模式的例子。

接下來是最後一個例子。這個例子中在長文章中的子標題上使用垂直的書寫模式 。我喜歡這種小的技巧就能為文章內容帶來新鮮的體驗的感覺。

看這個在CodePen上的例子 Writing Mode Demo — Article Subheadlines 作者 Jen Simmons （@jensimmons）

關於作者

被稱為“高新技術產業的格羅斯”，Jen Simmons 是 The Web Ahead的創辦者和先行者。她的深入訪談解釋新興技術和預測網路的未來，並榮獲2015年度網路最佳播客獎。

Jen 在Mozilla中，是一個開發者和設計者， 在那裡，她倡導web標準並在web的圖形設計中創新研究。 她在很多場合包括SXSW都在發表演說關於一個脫離事件，流暢，有生命力，富有特點的web設計，並且被很多人迴應。她的演說—現代佈局：走出我們的定勢， 被授予2014 CSS開發大會最佳演講。

Jen推出她第一個客戶端網站在1998年並一直為小企業，藝術機構及創意個人建設網站。她的比較著名的客戶包括 歐洲核子研究中心，谷歌，聯盟網站，坦普爾大學和博格基金會。 Jen 獲得坦普爾大學的電影和媒體藝術專業的碩士學位。她現在定居在紐約。