css中關於direction與unicode-bidi的對比-css教學-PHP中文網

首頁

web前端

css教學

css中關於direction與unicode-bidi的對比

黄舟

Jun 20, 2017 am 10:39 AM

css direction 關於對比

在做多語言頁面，接觸過阿利伯語、希伯來語的同學肯定了解書寫方向的重要性，包括我們五四運動前的書寫順序也是從右到左的。 css中 unicode-bidi和direction屬性決定了HTML或XML文字渲染方向，兩個屬性結合使用可以改變文字書寫順序

direction

direction屬性有三個值

inherit 使用父元素的設定

ltr 預設值，left to right，從左到右

rtl right to left 從右到左

我們預設的書寫順序是從左到右的，不用做特殊設置，但是對於阿拉伯語是從右到左的，這時候就需要設置direction屬性來正確展示了

防止瀏覽器重寫text-align我們做一下預設設定

<p style="direction:rtl;text-align: initial;">
    طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد    
</p>

登入後複製

對應的也有個html屬性dir可以設定

<p dir="rtl" dtyle="text-align: initial;">
    طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد    
</p>

登入後複製

# direction屬性局定了預設的書寫順序這是和text-align的區別，後者是對其方向，書寫書寫順序不變

<p style="direction: rtl;text-align: initial;">1 2 3 4 5 6。</p>
<p style="text-align:right;">1 2 3 4 5 6。</p>

登入後複製

unicode-bidi

貌似有direction就可以應付書寫方向的問題了，unicode-bidi是做什麼的呢？

瀏覽器通常根據lang屬性或特殊的font-family決定書寫方向，但是如果一句話中同時包含兩個方向的文案的時候就需要用到unicode-bidi屬性了

unicode-bidi 有三個廣泛支援的值

normal 原來是什麼順序就使用什麼順序

embed 作用於inline元素，direction屬性的值指定嵌入層，在物件內部進行隱式重新排序

bidi-override 嚴格依照direction屬性的值重新排序。忽略隱式雙向運算規則

說實話這麼解釋我也看不懂，看例子

<p style="direction:rtl;text-align: initial;">this is a test</p>
<p style="direction:rtl;unicode-bidi:bidi-override;text-align: initial;">
    this is a test
</p>
<p style="direction:rtl;unicode-bidi:bidi-override;text-align: initial;">
    this <span style="unicode-bidi:embed;">is a</span> test
</p>

登入後複製

第一行就是簡單的右對齊，文字不會倒著寫（阿拉伯語會，後面有解釋）

第二行兩個屬性結合使用，不但右對左書寫而且真的是從右到左書寫了，這才是正經的阿拉伯語寫法

第三行的效果奇妙之處在於在第二行的基礎上加了樣式unicode-bidi:embed;不會倒著寫了，按著正常的書寫順序在寫

為什麼對於阿拉伯語只設定direction就能正確展示了，但是英文單字卻只有右對齊效果，不會從右到左書寫，只有設定了unicode-bidi:bidi-override;才好使呢

這和具體語言有關，對於阿拉伯語和希伯來語自動就好使了，單個數字、字母瀏覽器不能判斷語言就用rtl默認設置了，英語等還是使用默認的左到右的方式，只能用unicode- bidi重寫

在聲明的時候指定語言為阿拉伯語頁面會自動書寫順序rtl

<html lang="ar">

登入後複製

direction是表示書寫方向的，和writing-mode是不同的作用，各有長短，可以結合使用。

以上是css中關於direction與unicode-bidi的對比的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7749

Java教學

1643

CakePHP 教程

1397

Laravel 教程

1293

PHP教程

1234

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。