<html lang="zh-ch">
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
.test {
width: 100px;
height: 100px;
}
.lr-tb {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<div class="test lr-tb">
本段文字將按照<span>水平從右到左</span>的書寫方向進行流動。
</div>
</body>
</html>
參考:https://ask.csdn.net/questions/843363
參考:https://www.onepound.cn/yc/?p=10120
CSS實現阿拉伯語網站內容從右向左排版
不同的語言書寫習慣和排版習慣都不一樣,通常情況下,我們閱讀文章都是從左往右看,但是阿拉伯語,波斯語,希伯來文等,書寫和閱讀習慣都是從右向左,因此文字排版也要求是從右向左。解決方法:
在CSS中添加
html{direction:rtl;unicode-bidi:bidi-override;}
這個樣式即可。
關於此樣式的詳細解釋:
1. direction:
語法:
direction : ltr | rtl | inherit
取值:
ltr : 默認值。文本從左到右流入
rtl : 文本從右到左流入
inherit : 文本流入方向由繼承獲得
說明:
用於設置文本流入的方向。
此屬性不會影響拉丁文的字母數字字符,它們總是以 ltr 值被呈遞。但是此屬性會作用於拉丁文的標點符號。
假如您想應用此屬性於內聯文本,您必須設定 unicode-bidi 屬性爲 embed 或 bidi-override 。
2. unicode-bidi:
語法:
unicode-bidi : normal | bidi-override | embed
取值:
normal :默認值。對象不打開附加的嵌入層,對於內聯要素,隱式重排序跨對象邊界進行工作
bidi-override :嚴格按照 direction 屬性的值重排序。忽略隱式雙向運算規則
embed :對象打開附加的嵌入層, direction 屬性的值指定嵌入層,在對象內部進行隱式重排序
說明:
用於同一個頁面裏存在從不同方向讀進的文本顯示。與 direction 屬性一起使用。
假如您想應用 direction 屬性於內聯文本,您必須設定此屬性值爲 embed 或 bidi-override 。
Unicode 雙向運算法則自動翻轉嵌入字符順序依照它們固有的流動方向。例如,英文文檔的默認書寫方向是左-右,假如其
中包含的部分其他語種的字符其書寫方向是右-左,雙向運算法則就可以用來代理用戶正確的反轉其流動方向。
這的確是個很特別的一種語言,但阿拉伯語網站設計的時候就要用到, 當然在實際使用過程中還有一些小問題我們要自己注意!