文字方向 - 垂直/水平 文字書寫


Posted by hoyi-23 on 2021-06-12

CSS3 文字預設為水平書寫,若遇到需要垂直排版,或改變書寫方向(預設為由左至右)。
我們可以透過 writing-mode 設定:

writing-mode

writing-mode 的值有5種:

  1. writing-mode: horizontal-tb (水平書寫由左至右)
  2. writing-mode: vertical-rl (垂直書寫由右至左)
  3. writing-mode: vertical-lr(垂直書寫由左至右)

text-orientation 讓文字轉向

(僅搭配vertical-mode使用)

  1. text-orientation: mixed; 預設值
  2. text-orientation: upright;
  3. text-orientation: sideways-right;
  4. text-orientation: sideways;
  5. text-orientation: use-glyph-orientation;
  6. text-orientation: inherit;
  7. text-orientation: initial;
  8. text-orientation: unset;

CodePen 範例


#文字垂直書寫







Related Posts

Command Line 超新手入門

Command Line 超新手入門

RESTful架構的起源與理解

RESTful架構的起源與理解

淺談 React 中的 State 與 Props

淺談 React 中的 State 與 Props


Comments