CSS:書寫方向 writing-mode

書寫方向 writing-mode

雖然網頁的文字方向大都是水平由左至右,但如果因為種種原因想要由上到下,由右至左,也是有方法的。
writing-mode 的值有以下幾種:

  • horizontal-tb (水平書寫由左至右)
  • vertical-rl (垂直書寫由右至左)
  • vertical-lr(垂直書寫由左至右)
  • sideways-lr  (往左歪頭的水平書寫)*僅少部分瀏覽器支援,如:Firefox
  • sideways-rl (往右歪頭的水平書寫)*僅少部分瀏覽器支援,如:Firefox
<div style="writing-mode:horizontal-tb">早上一起床<br>就看到貓在做體操</div>
早上一起床
就看到貓在做體操
<div style="writing-mode:vertical-rl">早上一起床<br>就看到貓在做體操</div>
早上一起床
就看到貓在做體操
<div style="writing-mode:vertical-lr">早上一起床<br>就看到貓在做體操</div>
早上一起床
就看到貓在做體操
<div style="writing-mode:sideways-lr ">早上一起床<br>就看到貓在做體操</div>
早上一起床
就看到貓在做體操
(*若如筆者的 Chrome 瀏覽器不支援,將呈現水平由左至右的一般排版方向)
<div style="writing-mode:sideways-rl ">早上一起床<br>就看到貓在做體操</div>
早上一起床
就看到貓在做體操
(*若如筆者的 Chrome 瀏覽器不支援,將呈現水平由左至右的一般排版方向)