在網頁上如何實現文字豎排

 

css中,我們的文字排版通常都是從左向右,從上往下。那麼,如果我們要實現頁面文字豎排,應該怎樣設置呢?爲了解決這個問題,下面課課家網站將爲大家介紹實現文字豎排的方法,有興趣的朋友不妨參考一下。

  一、writing-mode語法

  要實現頁面文字豎排,我們需要使用writing-mode屬性,下面我們一起來了解一下它的語法:

       語法:writing-mode:lr-tb、tb-rl

  參數:lr-tb:從左向右,從上往下;tb-rl:從上往下,從右向左

  具體寫法如下

  writing-mode: horizontal-tb;    /* 默認值 */  

  writing-mode: vertical-rl;  

  writing-mode: vertical-lr;  

  這裏再介紹一種IE私有的寫法:

  writing-mode: inherit;  

  writing-mode: initial;  

  writing-mode: unset;  

  注意:關鍵字inherit IE8+支持,initial和unset IE13才支持 

  lr-tb : 默認值。對象中的內容在水平方向上從左向右流入,後一行在前一行的下面。所有的字形都是豎直向上的。這種佈局是羅馬語系使用的。

  tb-rl : 上-下,右-左。對象中的內容在垂直方向上從上向下流入,自右向左。後一豎行在前一豎行的左面。全角字符是豎直向上的,半角字符如拉丁字母或片假名順時針旋轉90度。這種佈局是東亞語系通常使用的。

  一些說明:

  1.相同的writing-mode屬性值並不會累加,例如父子均設置了writing-mode:tb-rl,只會渲染一次,子元素並不會2次“旋轉”。

  2.IE瀏覽器下,一個自身具有佈局的元素(不是純文本之類元素)如果writing-mode屬性值和父元素不同,當子元素的佈局流變化的時候,其父元素座標系統的可用空間會被充分利用。

  3.Chrome瀏覽器下目前還需要-webkit-私有前綴,雖然Chrome和Opera認識tb-rl等老的IE屬性值,但是,僅僅是認識而已,根本沒有任何效果。

  二、writing-mode的用法

  前面說了這麼多理論的東西,大家可能比較難理解.下面我們以一首古詩詞作爲例子來展示這個writing-mode的用法。Letgo!

  CSS代碼

  .verticle-mode{

  writing-mode:tb-rl;

  -webkit-writing-mode:vertical-rl;

  writing-mode:vertical-rl;}/*IE7比較弱,需要做點額外的動作*/.verticle-mode{

  *width:120px;}.verticle-modeh4,.verticle-modep{

  *display:inline;

  *writing-mode:tb-rl;}.verticle-modeh4{

  *float:right;}

  html代碼

  <h4>詠柳</h4><p>碧玉妝成一樹高,<br>萬條垂下綠絲絛。<br>不知細葉誰裁出,<br>二月春風似剪刀。</p>

  <divclass="verticle-mode">

  <h4>詠柳</h4>

  <p>碧玉妝成一樹高,<br>萬條垂下綠絲絛。<br>不知細葉誰裁出,<br>二月春風似剪刀。</p></div>

如果你正在設計一個介紹書法或者古代文學的網站,你大概會通過各種古色古香的背景來對網站進行潤色,但可能你會爲模擬古代的豎排文本而苦惱,最後不得不使用圖片來完成任務。這時候,writing-mode屬性就能幫到你了。而且豎排文本也適用於一些創意性的設計當中,所以記住該屬性對大家日後的開發會很有幫助的喔!

最近在學習中總結到的知識希望對大家有幫助

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章