css怎么設置文本方向

# CSS怎么設置文本方向

在網頁設計中，控制文本方向是排版的重要環節。CSS提供了多種屬性來定義文本的書寫方向和顯示方式，尤其對多語言網站（如阿拉伯語、希伯來語等從右向左書寫的語言）至關重要。以下是常用的文本方向控制方法：

---

## 1. `direction` 屬性

**作用**：定義文本的書寫方向（從左到右或從右到左）。  
**常用值**：
- `ltr`（默認）：從左到右（Left-to-Right）
- `rtl`：從右到左（Right-to-Left）

```css
.rtl-text {
  direction: rtl; /* 文本從右向左排列 */
}

注意：direction 僅改變文本流向，不自動調整標點符號或特殊字符的位置。

2. writing-mode 屬性

作用：控制文本的垂直或水平排列方式。
常用值： - horizontal-tb（默認）：水平方向，從上到下排列。 - vertical-rl：垂直方向，從右到左排列（如中文古籍）。 - vertical-lr：垂直方向，從左到右排列。

.vertical-text {
  writing-mode: vertical-rl; /* 垂直從右到左 */
}

適用場景：東亞語言排版或特殊設計需求。

3. text-orientation 屬性

作用：配合 writing-mode 控制垂直排版時字符的方向。
常用值： - mixed（默認）：拉丁字母旋轉90°，東亞字符保持直立。 - upright：所有字符直立顯示。 - sideways：所有字符旋轉90°。

.upright-text {
  writing-mode: vertical-rl;
  text-orientation: upright; /* 字符不旋轉 */
}

4. unicode-bidi 屬性

作用：處理雙向文本（如混合了左到右和右到左的文本）。
常用值： - normal（默認）：按字符的Unicode方向屬性排列。 - bidi-override：強制按 direction 屬性顯示。

.bidi-example {
  direction: rtl;
  unicode-bidi: bidi-override; /* 強制從右到左 */
}

實際應用示例

阿拉伯語頁面

.arabic {
  direction: rtl;
  font-family: 'Arial', sans-serif;
}

中文豎排標題

.title {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 10px;
}

注意事項

1. 瀏覽器兼容性：writing-mode 和 text-orientation 在舊版本瀏覽器中可能需要前綴。
2. 布局影響：改變文本方向可能導致容器寬度、高度計算異常，需配合 width/height 調整。
3. 語義化：優先使用HTML的 dir 屬性（如 <div dir="rtl">）聲明整體文檔方向。

通過靈活組合這些屬性，可以輕松實現復雜的多語言排版需求。 “`