html實現文本從右向左

<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 雙向運算法則自動翻轉嵌入字符順序依照它們固有的流動方向。例如,英文文檔的默認書寫方向是左-右,假如其

中包含的部分其他語種的字符其書寫方向是右-左,雙向運算法則就可以用來代理用戶正確的反轉其流動方向。
這的確是個很特別的一種語言,但阿拉伯語網站設計的時候就要用到, 當然在實際使用過程中還有一些小問題我們要自己注意!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章