文字书写方向

通常在浏览网页时，都是采用“水平”的文字书写方向，然而文字的方向不仅会影响阅读，还会影响到对齐的方式，这篇教学会透过 CSS 的 writing-mode、text-orientation、direction 和 unicode-bidi 等属性，让文字内容呈现“垂直”的书写方向。

快速导览：

• writing-mode 书写模式
• text-orientation 字元方向
• direction、unicode-bidi 宣告方向

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

writing-mode 书写模式

writing-mode 样式属性可以设定文字的“书写模式”，具有继承特性，相关属性值如下：

writing-mode 不只会影响文字书写的水平方向，也会影响其他元素排列方向，下方范例展示三种不同语系的书写方向，英文语系转换方向后，字母的方向也会跟着旋转 90 度 ( 包含半形数字和标点 )，而中日韩文语系会保持原来的方向 ( 包含全形数字和标点 )，而虽然方向改变，但因为不是“旋转”，所以原本区块的样式还是会保持一至 ( 上边框不会变成左右边框 )。

注意，如果区块元素没有设定宽度或高度，则水平时默认撑开到最大，垂直时则由元素内容决定大小。

线上展示：https://codepen.io/oxxo/pen/NWVyxdJ

<!-- HTML 程式碼 --> 
<h2>horizontal-tb</h2>
<div class="a">
  <div>Good morning! oxxo!</div>  
  <div>早安圈叉叉圈！</div> 
  <div>おはようございます。</div>
  <div>좋은 아침이에요 잘 지내요？</div>
  <div>0123456789!?</div>
  <div>０１２３４５６７８９！？</div>
</div>
<h2>vertical-rl</h2>
<div class="b">
  <div>Good morning! oxxo!</div>  
  <div>早安！圈叉叉圈！</div> 
  <div>おはようございます。</div>
  <div>좋은 아침이에요 잘 지내요？</div>
  <div>0123456789!?</div>
  <div>０１２３４５６７８９！？</div>
</div>
<h2>vertical-lr</h2>
<div class="c">
  <div>Good morning! oxxo!</div>  
  <div>早安！圈叉叉圈！</div> 
  <div>おはようございます。</div>
  <div>좋은 아침이에요 잘 지내요？</div>
  <div>0123456789!?</div>
  <div>０１２３４５６７８９！？</div>
</div>

<!-- CSS 程式碼 -->
<style>
  h2 {
    color: #f00;
    margin: 15px 5px 5px;
  }
  div div {
    border: 1px solid #000;
    border-top-width: 5px;   /* 上邊框加粗 */
    margin: 5px;
    padding: 5px;
  }
  .a {writing-mode: horizontal-tb;}
  .b {writing-mode: vertical-rl;}
  .c {writing-mode: vertical-lr;}
</style>

如果使用表格，可以更清楚的看见原本 3x2 的表格，在改变书写模式后，变成了 2x3 的表格，而书写方式同时也影响了文字换行还有垂直对齐的方向。

注意，垂直对齐在变更书写模式后，方向会从垂直变成水平。

线上展示：https://codepen.io/oxxo/pen/BaeYjmM

<!-- HTML 程式碼 --> 
<h2>horizontal-tb</h2>
<table class="a">
  <tr>
    <td>Good morning! oxxo!</td>
    <td>早安圈叉叉圈！</td>
    <td>0123456789!?</td>
  </tr>
  <tr>
    <td>おはようございます。</td>
    <td>좋은 아침이에요 잘 지내요？</td>
    <td>０１２３４５６７８９！？</td>
  </tr>
</table>
<h2>vertical-rl</h2>
<table class="b">
  <tr>
    <td>Good morning! oxxo!</td>
    <td>早安圈叉叉圈！</td>
    <td>0123456789!?</td>
  </tr>
  <tr>
    <td>おはようございます。</td>
    <td>좋은 아침이에요 잘 지내요？</td>
    <td>０１２３４５６７８９！？</td>
  </tr>
</table>
<h2>vertical-lr</h2>
<table class="c">
  <tr>
    <td>Good morning! oxxo!</td>
    <td>早安圈叉叉圈！</td>
    <td>0123456789!?</td>
  </tr>
  <tr>
    <td>おはようございます。</td>
    <td>좋은 아침이에요 잘 지내요？</td>
    <td>０１２３４５６７８９！？</td>
  </tr>
</table>

<!-- CSS 程式碼 -->
<style>
  h2 {
    color: #f00;
    margin: 15px 5px 5px;
  }
  td {
    border: 1px solid #000;
    width: 120px;
    height: 120px;
    text-align: left;
    vertical-align: top;
  }
  .a {writing-mode: horizontal-tb;}
  .b {writing-mode: vertical-rl;}
  .c {writing-mode: vertical-lr;}
</style>

text-orientation 字元方向

text-orientation 样式属性可以设定“字元方向”，具有继承特性，需要搭配 writing-mode: vertical-rl; 一起使用，相关属性值如下：

下方范例呈现不同的 text-orientation 属性样式，可以观察到如家使用 upright 的方式旋转字元，该字元会变成“中日韩”文字的特性，当过长的单词超过范围后，某些情况可能会超出边界。

线上展示：https://codepen.io/oxxo/pen/rNgJJrd

<!-- HTML 程式碼 --> 
<h2>mixed</h2>
<div class="a">
  <div>Good morning! oxxo!</div>  
  <div>早安圈叉叉圈！</div> 
  <div>おはようございます。</div>
  <div>좋은 아침이에요 잘 지내요？</div>
  <div>半形0123456789!?</div>
  <div>全形０１２３４５６７８９！？</div>
</div>
<h2>upright</h2>
<div class="b">
  <div>Good morning! oxxo!</div>  
  <div>早安！圈叉叉圈！</div> 
  <div>おはようございます。</div>
  <div>좋은 아침이에요 잘 지내요？</div>
  <div>半形0123456789!?</div>
  <div>全形０１２３４５６７８９！？</div>
</div>
<h2>sideways</h2>
<div class="c">
  <div>Good morning! oxxo!</div>  
  <div>早安！圈叉叉圈！</div> 
  <div>おはようございます。</div>
  <div>좋은 아침이에요 잘 지내요？</div>
  <div>半形0123456789!?</div>
  <div>全形０１２３４５６７８９！？</div>
</div>

<!-- CSS 程式碼 -->
<style>
  h2 {
    color: #f00;
    margin: 0;
    padding: 15px 5px 5px;
    clear: both;
  }
  div div {
    height:150px;
    border: 1px solid #000;
    margin: 5px;
    padding: 5px;
    float: left;
    writing-mode: vertical-lr;  /* 需要使用這個樣式屬性 */
  }
  .a {text-orientation: mixed;}
  .b {text-orientation: upright;}
  .c {text-orientation: sideways; }
</style>

direction、unicode-bidi 宣告方向

direction 样式属性可以进行“宣告方向”，会影响元素的排列显示方向，具有继承特性，相关属性值如下：

使用时需要注意“最后方的标点符号”，只要是位在文字最后方的标点符号 ( 文字“软换行”产生的最后一行 )，在转换方向后，会发生位置错误的状况，下方的例子呈现转换方向后的模样，特别注意每一段落最后的标点符号，不只位置不如预期，有些方向甚至会相反。

线上展示：https://codepen.io/oxxo/pen/gOJvemg

<!-- HTML 程式碼 --> 
<div class="a">
  <div>Good morning!{{([  oxxo!{{([ </div>  
  <div>早安！？『「{{([ 最後一行後面的標點符號是相反的！？『「{{([</div> 
  <div>早安！？『「{{([ <br/>使用 br 產生硬換行！？『「{{([</div>
</div>
<h2>預設右到左的文字，改成 direction: ltr;</h2>
<div class="b">
  <div>صباح الخير!?{{([ علامات الترقيم بعد السطر الأخير معكوسة!?{{([</div>  
  <div>בוקר טוב!?{{([ סימני הפיסוק אחרי השורה האחרונה הפוכים!?{{([</div> 
</div>

<!-- CSS 程式碼 -->
<style>
  h2 {
    color: #f00;
    margin: 15px 0 0 5px;
    font-size: 18px;
  }
  div div {
    border: 1px solid #000;
    margin: 5px;
    padding: 5px;
  }
  .a div {direction: rtl;}
  .b div {direction: ltr;}
</style>

除了单纯使用 direction 宣告方向，有时还会额外搭配 unicode-bidi ( bidi 为 bidirectional 的缩写 ) 来辅助设定字元方向，unicode-bidi 具有继承特性，并有下列几个属性值：

注意，W3C 建议不要使用 direction 和 unicode-bidi 属性，使用 HTML 元素的 dir 属性进行设定 ( 参考“HTML 元素属性” )，避免用户停用 CSS 样式时，造成无法顺利修改文字方向的状况。

下方的范例将左到右显示的文字，改用 direction: rtl; 显示为右到左，并修改 unicode-bidi 属性值来凸显差异 ( 标点符号会颠倒 )。

线上展示：https://codepen.io/oxxo/pen/xxNYWWx

<!-- HTML 程式碼 --> 
<h2>unicode-bidi: embed;</h2>
<div class="a">
  <div>Good morning!{{([  oxxo!{{([ </div>  
  <div>早安！？『「{{([ 最後一行後面的標點符號是相反的！？『「{{([</div> 
  <div>早安！？『「{{([ <br/>使用 br 產生硬換行！？『「{{([</div>
</div>
<h2>unicode-bidi: normal;</h2>
<div class="b">
  <div>Good morning!{{([  oxxo!{{([ </div>  
  <div>早安！？『「{{([ 最後一行後面的標點符號是相反的！？『「{{([</div> 
  <div>早安！？『「{{([ <br/>使用 br 產生硬換行！？『「{{([</div>
</div>
<h2>unicode-bidi: bidi-override;</h2>
<div class="c">
  <div>Good morning!{{([  oxxo!{{([ </div>  
  <div>早安！？『「{{([ 最後一行後面的標點符號是相反的！？『「{{([</div> 
  <div>早安！？『「{{([ <br/>使用 br 產生硬換行！？『「{{([</div>
</div>

<!-- CSS 程式碼 -->
<style>
  h2 {
    color: #f00;
    margin: 15px 0 0 5px;
    font-size: 18px;
  }
  div div {
    border: 1px solid #000;
    margin: 5px;
    padding: 5px;
    direction: rtl;
  }
  .a div {unicode-bidi: embed;}
  .b div {unicode-bidi: normal;}
  .c div {unicode-bidi: bidi-override;}
</style>

小结

其实大多数的情况，是不需要修改文字方向的，但如果对于网页有特殊需求，特别是一些中日韩文字的垂直排版，或要提供右向左书写系统的用户阅读，就需要使用这些相关样式啰。

意见反馈