本文轉(zhuǎn)載自：眾成翻譯
譯者：哈呼哈哈呼
鏈接：http://www.zcfy.cc/article/2321
原文：https://24ways.org/2016/css-writing-modes/

由于你可能沒有那么多的時(shí)間璧亮，所以我將從結(jié)論開篇。

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

An article headline where the text is vertically aligned.

除了讓文字垂直顯示之外扰路，你也可以讓圖標(biāo)和入口按鈕以這樣的方式呈現(xiàn)此再。當(dāng)然牢贸，可以讓你頁面上的任何內(nèi)容按這樣方式呈現(xiàn)饵较。

我寫的css讓瀏覽器重新布局文字的方向拍嵌，使元素的布局在正常流的基礎(chǔ)上旋轉(zhuǎn)90度。查看這個(gè)例子循诉，突出標(biāo)題横辆，并且看下現(xiàn)在光標(biāo)是什么樣子的。

查看這個(gè)例子
Writing Mode Demo — Headline
作者Jen Simmons (@jensimmons) 在CodePen 上茄猫。
實(shí)現(xiàn)的代碼非常簡(jiǎn)單狈蚤。

h1 { 
  writing-mode: vertical-rl;
}

上面就是把web默認(rèn)的水平并由上至下的書寫方式轉(zhuǎn)變成垂直并由左至右的書寫方式所需要的全部代碼。如果你在html元素上使用這樣的代碼划纽，那么整個(gè)網(wǎng)頁的書寫方式都會(huì)被改變脆侮，并且也會(huì)影響滾動(dòng)條的方向。

在我上面的例子勇劣，我告訴瀏覽器只有 h1元素會(huì)用vertical-rl這種書寫方式靖避，網(wǎng)頁的其余部份保持默認(rèn)的horizontal-tb 的書寫方式。

這里餐前小點(diǎn)就結(jié)束了比默。讓我開始呈現(xiàn)整個(gè)大餐并且解釋下 CSS書寫模式規(guī)范幻捏。

為什么要學(xué)習(xí)書寫模式？

我教所有人包括西方的讀者學(xué)習(xí)書寫模式有三個(gè)原因命咐，在此期間篡九，我會(huì)解釋整個(gè)系統(tǒng)，而非簡(jiǎn)單快速地展示一些小技巧醋奠。

1. 我們生活在一個(gè)博大并且豐富多彩的世界榛臼。學(xué)習(xí)其他語言是非常迷人的。你們中的很多人用漢語窜司，日語沛善，韓語來展示你們的頁面±ぃ或者路呜，你可能在未來受到鼓舞。

2. 使用書寫模式來轉(zhuǎn)換字節(jié)的方向是很酷的。這個(gè)CSS 可以被用于各種富有創(chuàng)造性的方式胀葱，即使你只用英語工作漠秋。

3. 最重要的是，我發(fā)現(xiàn)理解了書寫模式對(duì)理解FlexBox 和 CSS Grid 有著難以置信的幫助抵屿。在我學(xué)書寫模式之前庆锦，我感覺到在我知識(shí)面上仍有很大的不足，比如我壓根兒不能理解為什么Grid 和 FlexBox 會(huì)有那樣的效果轧葛。當(dāng)我理解了書寫模式搂抒，Grid 和 FlexBox 就變得簡(jiǎn)單多了。突然地尿扯，align- 和 justify-這些對(duì)齊屬性求晶，變得好理解多了。

無論你知道與否衷笋，書寫模式是我們創(chuàng)建的所有布局的首要基石芳杏。 你可以做我們已經(jīng)做了25年一直在做的事，并且舍棄你的頁面的默認(rèn)的從左至右的方向辟宗，水平的從上至下的書寫模式爵赵。或者泊脐，你可以進(jìn)入充滿新的可能性的新世界空幻，在這里內(nèi)容布局流動(dòng)在另一個(gè)方向。

CSS 屬性

在本文容客，我的重點(diǎn)是CSS的 writing-mode屬性秕铛。它有以下五個(gè)可選值：

  writing-mode: horizontal-tb;
  writing-mode: vertical-rl;
  writing-mode: vertical-lr;
  writing-mode: sideways-rl;
  writing-mode: sideways-lr;

CSS書寫模式規(guī)范 是為了支持一個(gè)廣泛的書寫語言在我們?nèi)祟惡驼Z言復(fù)雜度上來設(shè)計(jì)的。這個(gè)提醒出奇的復(fù)雜缩挑。書寫語言的全球范圍的進(jìn)化絕非簡(jiǎn)單之事如捅。

我已經(jīng)以解釋一些基本的網(wǎng)頁布局的概念和書寫系統(tǒng)作為開頭。接下來我會(huì)給你展示這些CSS屬性做了什么调煎。

行內(nèi)方向，塊級(jí)方向和字符方向

在web的世界己肮，有塊級(jí)和行內(nèi)的布局士袄。如果你曾經(jīng)寫過display: block 或者display: inline,你就應(yīng)該了解這個(gè)概念。

在默認(rèn)的書寫模式谎僻，塊垂直地從頁面的頂部開始向下工作娄柳。 想想一堆塊級(jí)元素是如何像一堆段落一樣堆疊，這就是塊級(jí)方向艘绍。

An illustration of blocks aligned underneath each other.

行內(nèi)方向是每一行的文本是如何讓流動(dòng)的赤拒。Web中默認(rèn)的方向是水平方向，從左至右。 想象下你現(xiàn)在正在閱讀的文本挎挖，它是在打印機(jī)上被逐字符打印出的这敬。這就是行內(nèi)方向。

An illustration of arrows pointing from leftto right.

字符方向就是字符指向的方式蕉朵。如果你鍵入一個(gè)字母“A”, 哪一側(cè)是這個(gè)字母的頂部崔涂？不同的語言可能指向不同的方向。大多數(shù)語言中規(guī)定始衅，它們字符指向頁面的頂部冷蚂，但也非絕對(duì)。

An illustration of the letter 'A' with text alongside it.

將這三個(gè)放在一起汛闸，你就會(huì)看到它們作為一個(gè)系統(tǒng)是怎么工作的蝙茶。

An illustration of an arrow pointing down to indicate block direction, The letter 'A' with text alongside it to indicate character direction, and arrows pointing to the right for inline direction

web默認(rèn)的設(shè)置工作起來像這個(gè)樣子。

既然我們知道塊級(jí)诸老，行內(nèi)和字符方向是什么意思隆夯，那么我們來看看它們?cè)谑澜绶秶鷥?nèi)的書寫系統(tǒng)的不同應(yīng)用。

CSS書寫模式的四種書寫系統(tǒng)

CSS書寫模式規(guī)范處理四個(gè)主要的書寫系統(tǒng)使用案例孕锄。這四個(gè)系統(tǒng)是拉丁語吮廉，阿拉伯語，漢語和 蒙古語畸肆。

拉丁語體系

一個(gè)書寫系統(tǒng)在世界上比其他任何東西都重要宦芦， 據(jù)報(bào)道大約占世界人口的70%。

A very old page of latin text next to an illustration of an arrow pointing down, The letter 'A' aligned to the left, and arrows pointing to the right

文本是水平的轴脐，從左至右展開调卑，簡(jiǎn)稱為L(zhǎng)TR。塊級(jí)的方向是從上至下的大咱。

它被叫做以拉丁語為基礎(chǔ)的系統(tǒng)恬涧，原因是它包括了所有的使用 拉丁字母表的語言,包括英語，西班牙語碴巾，德語溯捆，法語等等其他很多語言。但是還有很多不使用拉丁字母表的語言也使用這種系統(tǒng)厦瓢。包括希臘語提揍，斯拉夫字母體系的語言（俄語，烏克蘭語煮仇，保加利亞語劳跃，塞爾維亞語等等），婆羅米系文字（梵文浙垫，泰文刨仑，藏語）及其他很多很多郑诺。

觸發(fā)這種模式，你不需要使用CSS杉武。這是默認(rèn)的辙诞。

然而，最好的方式指定你在開篇時(shí)聲明你使用的語言及方向(LTR 或者RTL)就像本站點(diǎn)使用的這種來讓瀏覽器知道這個(gè)內(nèi)容是以英國(guó)版的英文發(fā)布的艺智，文字順序是從左至右的倘要。

阿拉伯語體系

阿拉伯語，希伯來語和一些其他的語言的行內(nèi)方向是從右至左的十拣。這就是俗稱的RTL封拧。

注意行的方向依舊是水平的。塊級(jí)的方向是從上至下的夭问。并且字符的方向是豎直的泽西。

A page of Arabic text next to an illustration of an arrow pointing down, The letter 'A' aligned to the right, and arrows pointing to the left

在站點(diǎn)中不僅只有文本的方向可以從右至左的，其他有關(guān)布局的一切都可以缰趋。右上角是起始位置捧杉。重要的東西在右邊。 眼睛瀏覽的順序是從右至左秘血。所以味抖，一般的RTL網(wǎng)站布局使用的布局方式只是LTR站點(diǎn)的翻轉(zhuǎn)。

Two side by side screenshots of the United Nations' site, comparing English and Arabic layouts.

在都支持LTR和RTL的站點(diǎn)中灰粮，比如聯(lián)合國(guó)的站點(diǎn)un.org 仔涩，這兩種布局是彼此的鏡像。

對(duì)于很多web開發(fā)者粘舟，我們的國(guó)際化的經(jīng)驗(yàn)只致力于支持阿拉伯和希伯來語言腳本熔脂。

CSS布局技巧國(guó)際化 &&RTL

為了讓LTR的站點(diǎn)支持RTL，開發(fā)著不得不創(chuàng)造所有類型的hack技巧柑肴。比如霞揉，Drupal社區(qū)發(fā)起了一個(gè)公約，這個(gè)公約是每一個(gè)margin-left和-right晰骑，每一個(gè)padding-left和-right适秩，每一個(gè) float: left和float: right都使用/* LTR */注釋。那么后來的開發(fā)者可以搜索每個(gè)有確切注釋的實(shí)例硕舆，并且創(chuàng)建樣式表來重寫左右樣式隶症。這是一個(gè)繁瑣且容易出錯(cuò)的工作方式。 CSS本身需要一個(gè)更好的方式來讓開發(fā)者只寫一次布局方式岗宣，并且能通過一個(gè)簡(jiǎn)單的命令輕松改變語言的方向。

我們新的CSS布局體系確實(shí)是這么做的淋样。 Flexbox, Grid 和 Alignment 使用 start 和 end 而不是left 和right耗式。這讓我們可以定義有關(guān)書寫系統(tǒng)的任何東西，并且可以非常容易的轉(zhuǎn)變方向。 通過書寫justify-content: flex-start, justify-items: end, 和最后的 margin-inline-start: 1rem刊咳，我們不需要更改代碼就能實(shí)現(xiàn)想要的效果彪见。

這是一個(gè)更好的工作方式。我知道在理解通過start和end來代替左和右上會(huì)有一定的疑惑娱挨。但是它適合任何語言的項(xiàng)目余指，并且就整體而言，這是更好的web方式跷坝。

可悲的是酵镜，我發(fā)現(xiàn)一些CSS預(yù)處理器工具聲稱要統(tǒng)一新的CSS布局系統(tǒng)通過舍棄start和end而再次使用left和right。它們希望你用它們的工具柴钻，寫justify-content:left淮韭，并且自我感覺良好。似乎有些人認(rèn)為這種新的工作方式被推翻了并且應(yīng)該被廢棄贴届。 然而靠粪，它的創(chuàng)造是為了滿足真正的需求。并且反應(yīng)了全球互聯(lián)網(wǎng)毫蚓。正如Bruce Lawson 所說占键，WWW標(biāo)準(zhǔn)代表的是萬維網(wǎng)，而不是豐富的西方網(wǎng)站.請(qǐng)不要試圖說服行業(yè)元潘，某些錯(cuò)誤不再是僅僅偏向西方文化畔乙。相反 ，要傳播這個(gè)新系統(tǒng)為什么在這里柬批。

花一點(diǎn)時(shí)間回顧下你腦海里有關(guān)行內(nèi)和塊的概念啸澡，并且開始使用 start 和 end。它會(huì)很快成為你的老習(xí)慣的氮帐。

我還發(fā)現(xiàn)CSS預(yù)處理器讓我們使用新的思維方式嗅虏，即使所有的部分還沒有被瀏覽器支持。一些工具讓你使用 text-align: start 來代替 text-align: left上沐，并且讓預(yù)處理器幫你處理事情皮服。 在我看來，這是極好的参咙。預(yù)處理器能力的大量使用正在幫助我們轉(zhuǎn)變思維龄广。

讓我們回到RTL。

如何聲明你的方向

你不需要使用CSS來告訴瀏覽器把LTR轉(zhuǎn)換為RTL蕴侧。你應(yīng)該在你的HTML上做這個(gè)择同。 這樣就會(huì)知道它以什么格式來展示文檔即使CSS沒有加載。

這個(gè)主要在html元素上完成净宵。你也應(yīng)該聲明你的主要語言敲才。正如我上面提到的裹纳，網(wǎng)站正在使用的24種方式來聲明LTR方向和英式英語的使用。對(duì)于聯(lián)合國(guó)阿拉伯語網(wǎng)站紧武，這24種方式用來聲明這是一個(gè)阿拉伯語言的站點(diǎn)剃氧，使用的是RTL布局。

同一頁面中混雜多種語言阻星，事情就會(huì)變的更復(fù)雜朋鞍。但是這里我不打算深入這里，因?yàn)楸疚闹攸c(diǎn)是CSS和布局妥箕，不會(huì)過多解釋有關(guān)國(guó)際化的東西滥酥。

我們要離開這個(gè)探究點(diǎn)了。因?yàn)榉猓⒁獾氖呛薇罚M成每個(gè)單詞的字符的布局這個(gè)很多繁雜的工作是由Unicode來處理的。如果你很有興趣了解LTR呛讲，RTL和 雙向文本, 可以看這個(gè)視頻： Introduction to Bidirectional Text, a presentation by Elika Etemad禾怠。

與此同時(shí)，我們繼續(xù)回到CSS贝搁。

拉丁語-阿拉伯語體系

對(duì)于拉丁和阿拉伯語言體系來說吗氏，不管LTR還是RTL，都用同一個(gè)CSS屬性來指定書寫模式雷逆，即 writing-mode: horizontal-tb弦讽。原因是在這兩個(gè)體系中，行內(nèi)文本流都是水平的膀哲，塊級(jí)方向是從上至下的往产。也就是 horizontal-tb。

horizontal-tb 是web默認(rèn)的書寫模式某宪，所以你不需要特別指定除非你要重寫更高層級(jí)的模式仿村。你可以想象你建的每一個(gè)站點(diǎn)都有以下樣式：

html {
  writing-mode: horizontal-tb;
}

現(xiàn)在，我們把注意力轉(zhuǎn)移到垂直的書寫系統(tǒng)兴喂。

漢語體系

這里事情變得有趣起來蔼囊。

以漢語為基礎(chǔ)的書寫體系包括中日韓統(tǒng)一漢字，中文衣迷，日語畏鼓，韓文和其他。有兩種選擇來展示頁面壶谒，并且又是兩者會(huì)同時(shí)使用云矫。

很多中日韓統(tǒng)一漢字的文本布局方式像拉丁語基礎(chǔ)體系的語言，具有水平汗菜，從上至下的塊級(jí)方向让禀，由左至右的行內(nèi)方向的特點(diǎn)贵少。 這是更現(xiàn)代的方式，從二十世紀(jì)的很多地方開始的堆缘，并且通過計(jì)算機(jī)和后來的web進(jìn)行了更多的推廣。

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

section {
  writing-mode: horizontal-tb;
}

或者普碎，你知道吼肥，什么都不做，把結(jié)果作為默認(rèn)麻车。

另外缀皱，漢語基礎(chǔ)體系的語言可以以垂直的書寫模式呈現(xiàn)。這樣动猬，行內(nèi)方向是垂直的啤斗，塊級(jí)方向從右至左。

在這個(gè)圖中赁咙，可以看到兩種方式：

A page of Japanese text next to two illustrations. One illustration shows an arrow pointing down, the letter 'A' aligned to the left, and arrows pointing to the right. The other illustration is of an arrow pointing to the left, the letter 'A' aligned to the top, and arrows pointing down.

要注意的是钮莲，水平文本流向是從左至右，而垂直文本流向是由右至左彼水。完全的非標(biāo)準(zhǔn)方式崔拥？日本發(fā)行的雜志vogue使用混合的書寫模式。封面從左側(cè)打開凤覆，和英語雜志的方式是相反的链瓦。

A photo of the over of a Japanese issue of Vogue magazine.

頁面混合了英文和日語，日語文本的排版在水平和垂直這兩種模式盯桦。在 “Richard Stark”這個(gè) 紅色標(biāo)題下, 你可以看到這個(gè)段落的布局方式是 horizontal-tb 和 LTR慈俯，然而，在頁面底部更長(zhǎng)的文本段落的排版卻是 vertical-rl拥峦。紅色放大的文字標(biāo)志著段落的開始贴膘。垂直文本上面的長(zhǎng)的大字標(biāo)題的排版方式是LTR，horizontal-tb事镣。

A photo of a page inside a Japanese issue of Vogue magazine.

如何設(shè)計(jì)整篇文本默認(rèn)的書寫模式的細(xì)節(jié)依賴于的使用的情況步鉴。但是每個(gè)元素，每個(gè)標(biāo)題璃哟，每個(gè)章節(jié) 氛琢，每篇文章的書寫方式可以完全和默認(rèn)的相反，只要你喜歡随闪。

例如阳似，也許，你會(huì)舍棄默認(rèn)的horizontal-tb铐伴，并且指定元素水平的書寫方式：

div.articletext {
  writing-mode: vertical-rl;
}

或者撮奏，你也可以改變頁面的默認(rèn)的書寫方式為水平的方式俏讹，然后指定元素的方式為 horizontal-tb, 像這樣的方式:

html { 
  writing-mode: vertical-rl;
}
h2, .photocaptions, section {
  writing-mode: horizontal-tb;
}

如果你的頁面有個(gè)橫向滾動(dòng)條，那么書寫模式將決定頁面是否以左上角作為起點(diǎn)畜吊，并且向右滾動(dòng)（也就是我們習(xí)以為常的horizontal-tb）泽疆，或者，如果頁面從右上角做為開始玲献，溢出部分向左滾動(dòng)殉疼。 這有一個(gè)改變滾動(dòng)方向的例子， a CSS Writing Mode demo by Chen Hui Jing.查看她的例子--你可以通過一個(gè)單選框來切換書寫模式捌年，并且查看不同的地方瓢娜。

A screenshot of a webpage that uses vertical writing modes.

蒙古語體系

現(xiàn)在，希望到現(xiàn)在為止礼预，所有的一切都是有意義的眠砾。 這可能比預(yù)期的有些復(fù)雜，但是托酸，這不是非常困難褒颈。然我們今天蒙古語言體系。

蒙古語也是一種垂直方式的語言获高。文本垂直向下哈肖。 正如漢語體系那樣。但有兩種主要的不同念秧， 第一個(gè)是淤井，塊級(jí)方向是相反的。在蒙古語中摊趾，塊級(jí)元素從左至右堆疊币狠。

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

A screenshot of Wikipedia, modified so that all the text runs from top to bottom.

也許維基百科的蒙版將要重新布局砾层。

現(xiàn)在你可能會(huì)認(rèn)為漩绵，那看起來并不奇怪。 向左轉(zhuǎn)你的頭肛炮，這很熟悉止吐。塊級(jí)方向從屏幕的左邊開始并且向右移動(dòng)。行內(nèi)方向從頁面的頂部開始并且向下移動(dòng)（和RTL文本相似侨糟，僅順時(shí)針旋轉(zhuǎn)90度）碍扔。但這里有另一個(gè)巨大的差異。字符的方向是顛倒的秕重。蒙語字符的頂部不是指向左邊的不同，而是朝向塊級(jí)方向開始的邊緣。它們指向右邊，像這樣：

A screenshot of Wikipedia, next to an illustration of an arrow pointing to the right, the letter 'A' turned on its side clockwise, and multiple arrows pointing down.

現(xiàn)在你可能會(huì)想忽略這些二拐。也許你不希望很快就能排版蒙文服鹅。這里說明了理解這些差異對(duì)每一個(gè)人都很重要的原因，即是蒙文的工作原理定義了writing-mode:vertical-lr百新。并且它意味著我們不能使用vertical-lr以我們期望的方式來排版其他語言的內(nèi)容企软。

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

An illustration of incorrect writing directions.

但是這是錯(cuò)誤的饭望。這是它們真正的不同之處：

An illustration of correct writing directions.

看到意想不到的情況澜倦？ writing-mode: vertical-rl 和writing-mode: vertical-lr這兩種模式中拉丁語文本均是順時(shí)針旋轉(zhuǎn)。不管書寫模式是怎樣杰妓，我們可以逆時(shí)針旋轉(zhuǎn)文本。

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

section {
  writing-mode: vertical-lr;
}

現(xiàn)在，如果你打算使用writing-mode來解決在水平排版的語言中的圖形設(shè)計(jì)帶來的影響胜嗓，那么我不認(rèn)為你使用writing-mode:vertical-lr能解決高职。如果文本只有兩行，它將會(huì)以一種意外的方式呈現(xiàn)辞州。所以我已經(jīng)把它從我的工具庫里去掉了怔锌。我自己使用 writing-mode: vertical-rl 的更多。并且絕不使用-lr变过。

平面設(shè)計(jì)的書寫模式

那么我們?nèi)绾问褂?writing-mode 來把英文標(biāo)題側(cè)著放置呢埃元？我們可能通常會(huì)使用 transform: rotate()

這有兩個(gè)例子，分別對(duì)應(yīng)一個(gè)方向媚狰。 （順便說下岛杀，每一個(gè)例子整體的布局都是采用的CSS Grid，所以一定要在支持CSS Grid的瀏覽器中測(cè)試它們崭孤，比如 Firefox Nightly类嗤。）

A screenshot with an example of writing directions.

在demo 4A中，文本使用這些代碼來順時(shí)針旋轉(zhuǎn)：

h1 {
  writing-mode: vertical-rl;
}

A screenshot with an example of writing directions.

在 demo 4B中辨宠，文本使用這些代碼逆時(shí)針旋轉(zhuǎn)：

h1 {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: right;
}

我使用vertiacl-rl來旋轉(zhuǎn)文本遗锣，為的是文本可以在整體布局中占用合適的空間。然后我把它旋轉(zhuǎn)180度彭羹，使它朝向另一側(cè)黄伊。 然后我使用 text-align: right來使它上升到它容器元素的頂部。這種做法看起來是一個(gè)駭客技術(shù)派殷，但是它很有用还最。

我現(xiàn)在要使用另一個(gè)CSS值在這個(gè)例子中墓阀，這個(gè)值是書寫模式中其他兩個(gè)取值中的一個(gè)。

如果可以的話拓轻，我將在4A的demo中使用以下代碼布局：

h1 {
  writing-mode: sideways-rl;
}

在4B的例子中：

h1 {
  writing-mode: sideways-lr;
}

問題是這兩個(gè)值只在火狐瀏覽器中支持斯撮。其他的瀏覽器都不支持 sideways-*。這就意味著我們還不能在實(shí)際環(huán)境中運(yùn)用它扶叉。

一般來說勿锅，書寫模式的屬性在瀏覽器中有很好的兼容性。因此枣氧，我現(xiàn)在會(huì)使用 writing-mode: vertical-rl 溢十，用 transform: rotate(180deg);這個(gè)駭客技術(shù)來實(shí)現(xiàn)它相反的方向。
我們可以做的更多在設(shè)計(jì)CSS來使其支持多元化化的語言上达吞，但是张弛，我將要停止這個(gè)中間的介紹。

如果你想要更多的體驗(yàn)酪劫，你可以看下增加了 text-orientation: upright;的例子吞鸭。這個(gè)組合把拉丁語的個(gè)別字母轉(zhuǎn)換成垂直的而不是水平的。

A screenshot with an example of writing directions.

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

h1 {
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  letter-spacing: -25px;
}

你可以在labs.jensimmons.com/#writing-modes 查看所有有關(guān)書寫模式的例子刻剥。

A screenshot of Jen's website with multiple writing direction demos.

接下來是最后一個(gè)例子。這個(gè)例子中在長(zhǎng)文章中的子標(biāo)題上使用垂直的書寫模式 滩字。我喜歡這種小的技巧就能為文章內(nèi)容帶來新鮮的體驗(yàn)的感覺造虏。

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

關(guān)于作者

被稱為“高新技術(shù)產(chǎn)業(yè)的格羅斯”，Jen Simmons 是 The Web Ahead的創(chuàng)辦者和先行者麦箍。她的深入訪談解釋新興技術(shù)和預(yù)測(cè)網(wǎng)絡(luò)的未來酗电，并榮獲2015年度網(wǎng)絡(luò)最佳播客獎(jiǎng)。

Jen 在Mozilla中内列，是一個(gè)開發(fā)者和設(shè)計(jì)者撵术， 在那里，她倡導(dǎo)web標(biāo)準(zhǔn)并在web的圖形設(shè)計(jì)中創(chuàng)新研究话瞧。 她在很多場(chǎng)合包括SXSW都在發(fā)表演說關(guān)于一個(gè)脫離事件嫩与，流暢，有生命力交排，富有特點(diǎn)的web設(shè)計(jì)划滋，并且被很多人回應(yīng)。她的演說---現(xiàn)代布局：走出我們的定勢(shì)埃篓， 被授予2014 CSS開發(fā)大會(huì)最佳演講处坪。

Jen推出她第一個(gè)客戶端網(wǎng)站在1998年并一直為小企業(yè)，藝術(shù)機(jī)構(gòu)及創(chuàng)意個(gè)人建設(shè)網(wǎng)站。她的比較著名的客戶包括 歐洲核子研究中心同窘，谷歌玄帕，聯(lián)盟網(wǎng)站，坦普爾大學(xué)和博格基金會(huì)想邦。 Jen 獲得坦普爾大學(xué)的電影和媒體藝術(shù)專業(yè)的碩士學(xué)位裤纹。她現(xiàn)在定居在紐約。