CSS - writing-mode 屬性

CSS 的writing-mode 屬性用於指定元素內文字內容的流動方向。它指定文字是應該水平顯示還是垂直顯示。

它在處理非拉丁指令碼（如中文、日文和阿拉伯文）的文字方向以及建立創意和視覺上有趣的佈局方面特別有用。

可能的值

horizontal-tb - 預設值。它將文字設定為水平書寫模式，其中文字從左到右、從上到下流動，如大多數西方語言一樣。
vertical-rl - 此值指定從右到左的垂直書寫模式，通常用於中文、日文或韓文等指令碼。文字垂直流動，從右側開始，然後向左繼續。
vertical-lr - 與vertical-rl類似，此值也表示垂直書寫模式，但文字從左到右流動，用於蒙古語等指令碼。
sideways-rl - 此值指定從上到下的垂直文字流動，但將文字從右到左放置。此值用於蒙古語或某些形式的垂直日文文字等垂直指令碼，其中字元順時針旋轉 90 度並從右到左讀取。
sideways-lr - 此值指定從下到上的垂直文字流動，但將文字從左到右放置。

CSS 中的lr、lr-tb、rl、tb、tb-lr和tb-rl書寫模式已棄用，不應再使用。相反，您應該使用horizontal-tb或vertical-lr書寫模式。

下表顯示了已棄用的書寫模式及其等效項

已棄用的值	等效值
lr	horizontal-tb
rl	horizontal-tb
lr-tb	horizontal-tb
tb	vertical-lr
tb-lr	vertical-lr
tb-rl	vertical-rl

應用於

除了表格行組、表格列組、表格行和表格列之外的所有 HTML 元素。

DOM 語法

object.style.writingMode = "horizontal-tb|vertical-rl|vertical-lr|sideways-rl|sideways-lr";

CSS writing-mode - horizontal-tb 值

以下示例演示了將writing-mode屬性設定為horizontal-tb值，其中文字從左到右、從上到下讀取 -

<html>
<head>
<style>
   .box {
      width: 250px;
      background-color: pink;
      writing-mode: horizontal-tb;
   }
</style>
</head>
<body>
   <h2>CSS writing-mode: horizontal-tb</h2>
   <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </div>
</body>
</html>

CSS writing-mode - vertical-rl 值

以下示例演示了將writing-mode屬性設定為vertical-rl值，其中文字從右到左、從上到下讀取 -

<html>
<head>
<style>
   .box {
      height: 250px;
      background-color: pink;
      writing-mode: vertical-rl;
   }
</style>
</head>
<body>
   <h2>CSS writing-mode: vertical-rl</h2>
   <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </div>
</body>
</html>

CSS writing-mode - vertical-lr 值

以下示例演示了將writing-mode屬性設定為vertical-rl值，其中文字從左到右、從上到下讀取：-

<html>
<head>
<style>
   .box {
      height: 250px;
      background-color: pink;
      writing-mode: vertical-lr;
   }
</style>
</head>
<body>
   <h2>CSS writing-mode: vertical-lr</h2>
   <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
   </div>
</body>
</html>

CSS writing-mode - sideways-rl 值

sideways-rl值僅受 Firefox 瀏覽器支援。

以下示例演示了將writing-mode屬性設定為sideways-rl值，其中文字從上到下垂直讀取，字元從右到左排列 -

<html>
<head>
<style>
   .box {
      height: 300px;
      background-color: pink;
      writing-mode: sideways-rl;
   }
</style>
</head>
<body>
   <h2>CSS writing-mode: sideways-rl - This example is only supported by Firefox Browser.</h2>
   <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
   </div>
</body>
</html>

CSS writing-mode - sideways-lr 值

sideways-lr值僅受 Firefox 瀏覽器支援。

以下示例演示了將writing-mode屬性設定為sideways-lr值，其中文字從上到下垂直讀取，字元從左到右排列 -

<html>
<head>
<style>
   .box {
      height: 300px;
      background-color: pink;
      writing-mode: sideways-lr;
   }
</style>
</head>
<body>
   <h2>CSS writing-mode: sideways-lr - This example is only supported by Firefox Browser.</h2>
   <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
   </div>
</body>
</html>

CSS writing-mode - 審美用途（英語）

vertical-lr和vertical-rl值可用於英語的審美用途，如下例所示

<html>
<head>
<style>
   .mainbox{
      max-width: 750px;
      position: relative;
      padding-left: 80px;
      padding-top: 50px;
   }
   .box {
      height: 250px;
      background-color: pink;
   }
   h2 {
      padding-top: 70px;
      writing-mode: vertical-rl;
      position: absolute;
      left: 0;
      top: 0;
      line-height: 1;
      color: lightgreen;
      font-size: 40px;
      font-weight: 800;
   }
</style>
</head>
<body>
<div class="mainbox">
   <h2>TutorialsPoint</h2>
   <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </div>
   </div>
</body>
</html>

CSS writing-mode - 相關屬性

以下是與 writing-mode 相關的 CSS 屬性列表

屬性	值
display	設定文字的方向。
unicode-bidi	確定文件中雙向文字的行為。
text-orientation	設定一行中字元的方向。
text-combine-upright	將多個印刷字元單元組合到單個印刷字元單元的空間中。

列印頁面