writing-mode

語法:

writing-mode:horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl

預設值horizontal-tb

適用於:除 <' display '> 屬性定義為table-row-group | table-column-group | table-row | table-column之外的所有元素

繼承性:有

動畫性:否

計算值:特定值

取值:

horizontal-tb:
水平方向自上而下的書寫方式。即 left-right-top-bottom(類似IE私有值lr-tb)
vertical-rl:
垂直方向自右而左的書寫方式。即 top-bottom-right-left(類似IE私有值tb-rl)
vertical-lr:
垂直方向自左而右的書寫方式。即 top-bottom-left-right
lr-tb:
左-右,上-下。物件中的內容在水平方向上從左向右流入,後一行在前一行的下面。 所有的字形都是豎直向上的。這種布局是羅馬語系使用的(IE)
tb-rl:
上-下,右-左。物件中的內容在垂直方向上從上向下流入,自右向左。後一豎行在前一豎行的左面。全角字符是豎直向上的,半角字符如拉丁字母或片假名順時針旋轉90度。這種布局是東亞語系通常使用的(IE)

說明:

設定或檢索物件的內容塊固有的書寫方向。西方語言一般都是 lr-tb 的書寫方式,但是亞洲語言 lr-tb | tb-rl 的書寫方式都有。
  • 作為IE的私有屬性之一,IE5.5率先實現了 writing-mode ,後期被w3c采納成標准屬性;
  • 此屬性效果不能被累加使用。例如,父物件的此屬性值設為 tb-rl ,子物件再設定該屬性將不起作用,仍應用父物件的設定。
  • 對應的腳本特性為writingMode

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-11.0#1 #2 2.0-40.0 4.0-27.0 6.0-8.0-webkit- 15.0-27.0-webkit- 6.0-8.3-webkit- 2.1-3.0 18.0-26.0
41.0+ 28.0-41.0-webkit- 4.0-4.4.4-webkit- 27.0-40.0-webkit-
  1. 不支援標准屬性:horizontal-tb | vertical-rl | vertical-lr
  2. 支援自帶的私有屬性值:lr-tb | tb-rl

示例: