Rumah hujung hadapan web tutorial css css中关于direction与unicode-bidi的对比

css中关于direction与unicode-bidi的对比

Jun 20, 2017 am 10:39 AM
css direction kira-kira kontras

在做多语言页面,接触过阿利伯语、希伯来语的同学肯定了解书写方向的重要性,包括我们五四运动前的书写顺序也是从右到左的。css中 unicode-bididirection属性决定了HTML或XML文字渲染方向,两个属性结合使用可以改变文字书写顺序

direction

direction属性有三个值

inherit 使用父元素的设置

ltr 默认值,left to right,从左到右

rtl right to left 从右到左

我们默认的书写顺序是从左到右的,不用做特殊设置,但是对于阿拉伯语是从右到左的,这时候就需要设置direction属性来正确展示了

防止浏览器重写text-align我们做一下默认设置

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

对应的也有个html属性dir可以设置

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

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>
Salin selepas log masuk

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>
Salin selepas log masuk

第一行就是简单的右对齐,文字不会倒着写(阿拉伯语会,后面有解释)

第二行两个属性结合使用,不但右对左书写而且真的是从右到左书写了,这才是正经的阿拉伯语写法

第三行的效果奇妙之处在于在第二行的基础上加了样式unicode-bidi:embed;不会倒着写了,按着正常的书写顺序在写

为什么对于阿拉伯语只设置direction就能正确展示了,但是英文单词却只有右对齐效果,不会从右到左书写,只有设置了unicode-bidi:bidi-override;才好使呢

这和具体语言有关,对于阿拉伯语和希伯来语自动就好使了,单个数字、字母浏览器不能判断语言就用rtl默认设置了,英语等还是使用默认的左到右的方式,只能用unicode-bidi重写

在声明的时候指定语言为阿拉伯语页面会自动书写顺序rtl

<html lang="ar">
Salin selepas log masuk

direction是表示书写方向的,和writing-mode是不同的作用,各有长短,可以结合使用。

Atas ialah kandungan terperinci css中关于direction与unicode-bidi的对比. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menggunakan bootstrap di vue Cara menggunakan bootstrap di vue Apr 07, 2025 pm 11:33 PM

Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Cara Menulis Garis Pecah Di Bootstrap Cara Menulis Garis Pecah Di Bootstrap Apr 07, 2025 pm 03:12 PM

Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.

Memahami HTML, CSS, dan JavaScript: Panduan Pemula Memahami HTML, CSS, dan JavaScript: Panduan Pemula Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Cara menggunakan butang bootstrap Cara menggunakan butang bootstrap Apr 07, 2025 pm 03:09 PM

Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang

Cara Menyiapkan Kerangka untuk Bootstrap Cara Menyiapkan Kerangka untuk Bootstrap Apr 07, 2025 pm 03:27 PM

Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.

Cara memasukkan gambar di bootstrap Cara memasukkan gambar di bootstrap Apr 07, 2025 pm 03:30 PM

Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.

Cara mengubah saiz bootstrap Cara mengubah saiz bootstrap Apr 07, 2025 pm 03:18 PM

Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-

See all articles