Menerapkan Properti Logis CSS Pada Aplikasi Web — Smashing Magazine

Pelokalan adalah salah satu bidang yang paling menarik dalam hal antarmuka pengguna: panjang teks mungkin berbeda tergantung pada bahasanya, perataan default untuk teks mungkin berbeda, arah membaca dapat dicerminkan atau vertikal, dan begitu banyak kasus berbeda lainnya. Singkatnya, ini adalah sumber keragaman yang luar biasayang membuat antarmuka dan front-end kami berfungsi lebih kuat, lebih andal, dan lebih menantang.

Kebutuhan Antarmuka Kanan-Ke-Kiri

Sebagian besar bahasa, seperti Prancis atau Inggris, dimaksudkan untuk dibaca dari Left-To-Right (LTR). Namun, dalam kasus ini, beberapa bahasa seperti Farsi (Persia), Arab, dan Ibrani memiliki arah bacaan yang berbeda — Kanan-Ke-Kiri (RTL).

Pertanyaannya adalah bagaimana bisakah kita menyesuaikan antarmuka kita dengan perubahan besar ini?

Sebelum Properti Logika CSS

Sebelum CSS Logical Properties, kita bisa membuat adaptasi RTL dengan metode yang berbeda:

• Menambahkan file CSS khusus hanya untuk biaya tambahan/tata letak RTL;
• Surcharging hanya bagian yang perlu diadaptasi dalam CSS yang sama, misalnya [dir="rtl"] .float-left float: right; .

Bahkan jika metode ini berhasil – saya menggunakan yang kedua untuk membuat situs web Stand Up for Human Rights versi bahasa Arab beberapa tahun yang lalu – keduanya kurang optimal:

• Anda perlu memelihara file lain untuk yang pertama;
• File CSS untuk yang kedua sedikit lebih berat, dan mungkin ada beberapa masalah yang harus dihadapi (kekhususan, lebih banyak properti untuk ditambahkan, dan sebagainya).

Yang pasti, kami dapat membuat mesin besar dengan Sass untuk menghasilkan beberapa bangunan dan menggunakan beberapa alat seperti UnCSS untuk menghapus apa yang tidak diperlukan, tapi jujur ​​saja: ini membosankan, dan dapat menyebabkan potongan kode yang “tidak alami”.seperti pada contoh sebelumnya.

Mengapa Properti Logika CSS Sangat Cocok/Menjanjikan

Di sinilah modul CSS Logical Properties masuk ke dalam game. Ide utama dari modul CSS ini adalah memiliki a abstraksi logis yang memungkinkan kita menghasilkan satu tata letak yang akan menyesuaikan diri tergantung pada arah teks dan mode penulisan (properti seperti writing-mode, directiondan text-orientationatau dir atribut dalam HTML). Ini memberi kita kemungkinan seperti horizontal kanan-ke-kiri atau kiri-ke-kanan, RTL vertikal, dan seterusnya.

Implementasi Dalam Praktek

Bagaimana itu bekerja

Ada beberapa konsep yang perlu dipahami, sudah dijelaskan oleh Rachel Andrews di sini di “Memahami Properti Logis dan Nilai”:

• Kami tidak lagi berpikir dalam hal left/right tetapi start/end (hal yang sama berlaku untuk top/bottom):
• Kami tidak lagi mengatakan width atau height melainkan inline dan block – cukup klasik. (Anda mungkin pernah mendengar tentang default inline atau block elemen. 😉)

Ide ini start/end bukanlah hal baru. Anda menggunakannya mungkin setiap hari dengan hal-hal seperti justify-content: start.

Selamat, Anda sekarang tahu — hampir — semuanya! 🎉 Mari kita lihat beberapa contoh praktis.

Contoh

Mari kita mulai dengan dasar-dasarnya:

Margin mengikuti logika yang sama:

Hal yang sama berlaku untuk padding. Mari beralih ke pemosisian:

Sederhana, bukan? float, text-aligndan border ikuti jalan yang sama:

Saya tidak akan merinci beberapa orang lain seperti resize atau scroll-margin-toptetapi sebagai gantinya, mari kita lihat kasus khusus dari border-radius:

Agak berbeda, tapi tetap mudah dimengerti.

Beberapa kemungkinan dengan nilai sangat keren — Anda dapat menyederhanakan beberapa notasi. Berikut adalah beberapa contoh lebih lanjut:

Ini adalah emas murni di dunia terbaik, bukan? Lebih sedikit kode untuk dukungan sempurna bahasa RTL! 🎉

Sekarang saya minta maaf untuk menghilangkan beberapa bintang di mata Anda – memang ada beberapa batasan.

Beberapa Keterbatasan

Sintaks yang Hilang

Properti Logika CSS cukup baru, meskipun dukungannya bagus di browser terbaru. Namun, modul Properti Logika CSS agak “muda” dan membutuhkan level 2.

Untuk memberikan contoh sederhana: komponen toggle kami menggunakan transformasi CSS di antara status yang berbeda (memuat, aktif, dan seterusnya), sebagian besar karena transform adalah cara yang andal untuk memiliki transisi atau animasi yang lancar.

Jadi, kami memiliki sesuatu seperti ini:

.element 
   transform: translateX(#$toggle-width - $toggle-width-button);

Sayangnya, tidak ada sintaks aliran-relatif untuk transform. Jadi, kita harus melakukan sesuatu seperti berikut:

[dir="rtl"] .element 
    transform: translateX(-#$toggle-width - $toggle-width-button);

Jika Anda ingin mengetahui hal-hal yang hilang seperti ini, Anda dapat memeriksa masalah yang dibuka pada alat peraga logis CSS.

Properti Singkatan

Beberapa notasi steno tidak didukung untuk saat ini, seperti nilai 2, 3, atau 4 untuk margin:

Jangan gunakan contoh klasik ini dengan kebutuhan logis. Anda akan mengalami masalah karena sebenarnya tidak berfungsi. Lebih baik eksplisit. Juga, itu lebih mudah dibaca, menurut pendapat saya.

Menampilkan Beberapa Masalah Nyata Dan Beberapa Solusi

Gambar Dimana Arah Membaca Penting

Beberapa gambar memiliki arti langsung. Mari kita ambil contoh kartu tema:

Dalam hal ini, jika kita hanya menerapkan hal-hal RTL untuk ini, kita akan mendapatkan ini:

Urutannya adalah RTL, tetapi setiap gambar tidak terlihat seperti antarmuka pengguna RTL. Ini versi LTR! Dalam hal ini, karena arah pembacaan gambar menyampaikan informasi.

Kami memiliki pembantu kelas CSS yang membuatnya sangat mudah untuk mencapai perbaikan ini:

[dir="rtl"] .on-rtl-mirror 
  transform: rotateY(180deg);

Ini juga berlaku untuk gambar apa pun dengan arah baca, seperti panah atau ikon chevron ganda yang menunjukkan atau menunjuk ke sesuatu.

Gaya/Nilai Dihitung Melalui JavaScript

Bayangkan Anda memiliki plugin yang menghitung beberapa pemosisian dalam JavaScript dan memberikan nilai yang dapat Anda gunakan di JS atau CSS. Pustaka tarik-turun yang kami gunakan hanya menyediakan left nilai dalam konteks RTL/LTR, dan kami mentransfer ke CSS menggunakan properti Kustom CSS.

Jadi, jika kita menggunakan ini dengan Logical Properties, yaitu inset-inline-start: calc(var(--left) * 1px);kami akan mendapatkan yang berikut dengan mengeklik tarik-turun pengguna:

Solusinya sederhana di sini. Kami menjaga properti non-logis:

/* stylelint-disable */
top: calc(var(--top) * 1px);
left: calc(var(--left) * 1px); // JS provide left value only
/* stylelint-enable */

Dan kami menonaktifkan linting kami untuk kasus khusus ini.

Mencampur konten RTL dan LTR

Bahkan dengan modul CSS terbaik, siapa pun yang telah membuat beberapa adaptasi RTL akan mengatakan bahwa mencampur konten RTL dan LTR terkadang (sering) menghasilkan hal-hal gila.

Mari kita ambil contoh di Proton Drive dengan komponen bernama MiddleEllipsis. Tujuan dari komponen ini adalah untuk menerapkan elipsis sebelum perpanjangan file untuk mendapatkan sesuatu seperti my-filename-blahblahblah…blah.jpg.

Tidak ada yang gila: kami membagi konten menjadi dua bagian dan menerapkannya text-overflow: ellipsis pada yang pertama. Anda dapat memeriksa sumber ini MiddleEllipsis komponen.

Mari terapkan beberapa RTL yang baik — kita kemudian akan mendapatkan yang berikut ini:

Aneh, bukan? Ini sederhana untuk dijelaskan, namun:

• MiddleEllipsis struktur adalah RTL;
• Dan kami menyuntikkan konten LTR. (Ingat, kami melakukan RTL-cut konten LTR ini.)

Peramban melakukan yang terbaik, dan apa yang ditampilkan tidak salah dari sudut pandangnya, tetapi ini tidak masuk akal bagi seseorang. Dalam hal ini, kami memilih untuk mempertahankan tampilan LTR untuk mempertahankan tujuan nama file tetapi menyelaraskannya ke kanan:

Mencari Pola LTR Asli

Itu MiddleEllipsis contoh menunjukkan bahwa jika konten buatan pengguna adalah LTR, lebih baik menampilkannya sebagai LTR.

Tapi kita bisa bertanya-tanya apakah ada beberapa pola yang secara alami LTR. Jawaban singkatnya adalah ya. Di bawah ini Anda dapat menemukan contohnya.

Nomor telepon

Nomor telepon mungkin merupakan kasus yang paling jelas di sini karena biasanya menggunakan nomor barat, yang dimaksudkan untuk dibaca LTR.

Jika kami menerapkan alat peraga Logis langsung ke sana, mungkin akan memberikan yang berikut:

Meskipun secara teknis tidak salah, ini agak aneh untuk ditampilkan +33 6 12 34 56 78 seperti ini. Dalam hal ini, kami memutuskan untuk mempertahankan penyelarasan LTR secara default untuk menghindari hasil yang aneh ini.

Kami memiliki kasus yang sama untuk masukan 2FA menggunakan nomor barat. Kami belum memiliki kasingnya tetapi bayangkan input 4 bagian untuk memasukkan alamat IP. Ini tidak masuk akal untuk menampilkannya sepenuhnya RTL seperti yang dipahami orang 1.0.163.192 menggantikan 192.163.0.1.

Kesesuaian

Masalah terbesar yang kami hadapi sebagian besar berkaitan dengan kompatibilitas. Ini dapat dilihat pada tabel Dapatkah Saya Menggunakan untuk Alat Peraga Logis:

Jika targetnya hanya browser-browser modern terkini, tidak masalah. Tetapi jika ada kebutuhan untuk Safari versi lama, misalnya, dukungannya sangat buruk. Dan dalam hal ini, CSS Logical Properties tidak terdegradasi dengan baik. Dengan demikian semuanya mungkin terlihat rusak.

Beberapa opsi dimungkinkan:

• Sajikan build CSS untuk browser modern dan satu lagi untuk browser lama;
• Transpile semuanya untuk setiap kasus.

Dalam kasus Proton, karena kami belum sepenuhnya siap untuk mengirimkan bahasa RTL saat kami menggabungkannya, dan karena alasan lain, keputusan diambil untuk mengubah semuanya menjadi properti CSS klasik yang bagus. Baru-baru ini, kami menemukan solusi untuk satu kasus yang memerlukan dukungan RTL untuk bahasa Farsi (akun VPN):

1. Kami membuat dua file CSS: satu modern dengan alat peraga Logis dan satu warisan;
2. Kami memuat yang modern;
3. Kami menguji dukungan yang benar dari border-start-start-radius;
4. Jika tidak didukung, kami kembali ke warisan.

Kesimpulan

Bahkan jika kesempurnaan mutlak keluar dari dunia ini, pindah ke properti CSS Logical adalah langkah yang sangat menarik dan taruhan yang bagus untuk masa depan: kami menulis lebih sedikit kode dengan Alat Peraga Logis CSS ini, dan kami mengurangi jumlah pekerjaan di masa mendatang dengan menggunakannya, jadi ini benar-benar mengarah ke arah yang menarik.

Sebagai takeaway terakhir, dan bahkan jika itu membutuhkan lebih banyak pekerjaan, kami melakukan beberapa pengujian tampilan RTL vertikal untuk menguji properti CSS Logical lebih lanjut.

Terlihat cukup menarik bukan? 😉

Sumber Daya Terkait

• “Sumber daya W3C i18n”, W3C.org
• “RTL Styling 101”, Ahmad Shadeed
• “Bahasa Apa yang Menggunakan Skrip RTL?”, Richard Ishida, W3C
• “Masalah Terbuka Pada Alat Peraga Logis CSS”, W3C, GitHub
• “Properti dan Nilai Logis CSS”, Dokumen Web MDN
• “Dasar-Dasar Algoritma Dua Arah Unicode”, Richard Ishida, W3C
• “Properti Logis CSS dan Nilai Level 1,” Draf Kerja W3C
• “Penerbitan Desktop Multibahasa: Tip & Trik #3”, Kirill Fedotov, InText
• “Memahami Properti Logis Dan Nilai”, Rachel Andrew

(yk, il)