× 目錄 [1]text-align [2]writing-mode [3]dir[4]direction[5]unicode-bidi 前面的話 一般地，正常網頁文本方向都是從上到下，從左到右。實際上，有多種設置文本方向的屬性，前面已經詳細介紹過text-align，HTML全局屬性中有一個"di ...
×
目錄
[1]text-align [2]writing-mode [3]dir[4]direction[5]unicode-bidi前面的話
一般地，正常網頁文本方向都是從上到下，從左到右。實際上，有多種設置文本方向的屬性，前面已經詳細介紹過text-align，HTML全局屬性中有一個"dir"屬性就是專門用來設置文本方向的，設置文本方向的CSS樣式有direction、unicode-bidi和writing-mode。本文將詳細介紹網頁文本方向的設置方法
text-align
水平對齊實現上影響的是一個元素中的文本的水平對齊方式，關於text-align的詳細信息移步至此
值: left | center | right | justify | inherit
初始值: left
應用於: 塊級元素(包括block和inline-block)
繼承性: 有
//left: 1 23 456 //right: 1 23 456
writing-mode
writing-mode原先是IE的私有屬性，原先的屬性是lr-tb(左-右，上-下)和tb-rl(上-下，右-左)。其中writing-mode:tb-rl常用於觸發haslayout。但W3C將writing-mode屬性標準化後，其屬性值也發生了變化
值: horizontal-tb | vertical-rl | vertical-lr
初始值: horizontal-tb
應用於: 除表格類元素之外的所有元素
繼承性: 有
[註意]safari和移動端IOS和android需要添加-webkit-首碼；IE瀏覽器只支持自己的私有屬性值
[註意]設置writing-mode時，text-align屬性失效
dir
dir是HTML的全局屬性，專門用來設置文本的方向
值: ltr | rtl | auto
//ltr: 1 23 456 //rtl: 456 23 1
direction
direction是設置文本方向的CSS樣式
值: ltr | rtl | inherit
初始值: ltr
應用於: 所有元素
繼承性: 有
[註意]想讓direction樣式在inline元素上起作用，需要unicode-bidi樣式的相關設置
[註意]設置direction樣式時，HTML元素的全局屬性dir無效
ltr: 從左到右(left to right)
rtl: 從右到左(right to left)
//ltr: 1 23 456 //rtl: 456 23 1
unicode-bidi
unicode-bidi是一種更健壯的處理文本方向的方式
值: normal | embed | bidi-override | isolate | isolate-override | plaintext | inherit
初始值: normal
應用於: 所有元素
繼承性: 無
[註意]unicode-bidi屬性應用於flex彈性盒模型上有問題，除非伸縮容器只包含一個匿名伸縮項目時有效，其餘情況都無效
[註意]isolate、isolate-override、plaintext是實驗屬性值，幾乎沒有瀏覽器支持
//display:inline-block/block normal/embed: 456 23 1 bidi-override: 654 32 1 //display:inline normal:1 23 456 embed: 456 23 1 bidi-override: 654 32 1
[註意]只有當dir為rtl或direction為rtl時，unicode-bidi屬性才起作用
