Mengapa Sifat Logik: Pengantarabangsaan

CSS tradisional menggunakan arah fizikal: atas, kanan, bawah, kiri. Arah ini sesuai untuk bahasa kiri ke kanan (LTR) seperti bahasa Inggeris, tetapi tidak berfungsi dengan baik untuk bahasa kanan ke kiri (RTL) seperti bahasa Arab dan Ibrani, atau sistem tulisan menegak seperti bahasa Jepun tradisional.

Bandingkan:

• Fizikal: atas, kanan, bawah, kiri — tetap pada skrin
• Logik: permulaan blok, akhir blok, permulaan sebaris, akhir sebaris — bergantung pada mod tulisan

Setiap sistem tulisan mempunyai:

• Paksi blok: arah blok teks disusun bertindan (menegak dalam LTR/RTL, mendatar dalam tulisan menegak)
• Paksi sebaris: arah teks mengalir dalam satu baris (mendatar dalam LTR/RTL, menegak dalam tulisan menegak)

Dalam LTR (bahasa Inggeris): permulaan sebaris = kiri, akhir sebaris = kanan. Dalam RTL (bahasa Arab): permulaan sebaris = kanan, akhir sebaris = kiri. Sifat logik menyesuaikan diri secara automatik tanpa pertanyaan media atau JavaScript.

Laman yang ditulis dengan sifat fizikal memerlukan helaian gaya penggantian RTL yang berasingan atau penggantian mengikut sifat bagi setiap sifat jidar, pelapik, sempadan, kedudukan dan penjajaran teks yang perlu diterbalikkan. Ini menggandakan kerja penyelenggaraan.

Apabila writing-mode: vertical-rl ditetapkan (bahasa Jepun/Korea menegak), paksi blok menjadi mendatar dan paksi sebaris menjadi menegak. Sifat logik menyesuaikan diri secara automatik.

Semua pelayar utama menyokong sifat logik. Spesifikasi CSS kini mengesyorkan penggunaan sifat logik untuk mana-mana sifat yang berkaitan dengan arah yang boleh berubah mengikut mod tulisan atau arah.

Satu pangkalan kod yang menggunakan sifat logik dengan betul menyokong LTR, RTL dan tulisan menegak tanpa penduaan. CSS hanya mengikut nilai direction dan writing-mode pada unsur akar.

Tetapkan arah tulisan dalam HTML, bukan CSS sahaja:

Anda tidak perlu menulis semula semua CSS anda sekaligus. Mulakan penggunaan sifat logik untuk komponen baharu. Lama-kelamaan, ubah semula sifat fizikal dalam komponen yang terlibat dalam bahagian yang sensitif terhadap pengantarabangsaan.

Sifat CSS direction (ltr atau rtl) mempengaruhi arah aliran sebaris. Sifat ini berfungsi bersama writing-mode untuk mentakrifkan konteks sistem tulisan yang lengkap bagi unsur tersebut.

Sifat logik CSS menggunakan model blok/sebaris dan bukannya atas/kanan/bawah/kiri fizikal. Ini membolehkan satu helaian gaya berfungsi untuk sistem tulisan LTR, RTL dan menegak. Sifat direction dan writing-mode mentakrifkan konteks yang disesuaikan oleh sifat logik secara automatik.