Mode Penulisan Dan Tata Letak CSS

Ini bukan artikel tentang aplikasi praktis atau kreatif dari properti ini. Sebagai gantinya, saya ingin menunjukkan mengapa memahami mode penulisan sangat penting — bahkan bagi kita yang jarang perlu mengubah mode penulisan halaman atau komponen. Dukungan beberapa mode penulisan adalah kunci cara metode tata letak Flexbox dan Tata Letak Kotak kami yang baru telah dirancang. Memahami hal ini dapat membuka pemahaman yang lebih baik tentang cara kerja metode tata letak ini.

Apa Itu Mode Menulis?

Mode penulisan dokumen atau komponen mengacu pada arah aliran teks. Di CSS, untuk bekerja dengan mode penulisan, kami menggunakan properti writing-mode . Properti ini dapat mengambil nilai berikut:

• horizontal-tb
• vertical-rl
• vertical-lr
• sideways-rl
• sideways-lr

Jika Anda membaca artikel ini di Majalah Smashing dalam bahasa Inggris, maka mode penulisan dokumen ini adalah horizontal-tb , atau Horizontal Top To Bottom . Dalam bahasa Inggris, kalimat ditulis secara horizontal — huruf pertama dari setiap baris dimulai dari kiri.

Bahasa seperti bahasa Arab juga memiliki mode penulisan horizontal-tb . Ini ditulis horizontal, dari atas ke bawah, namun tulisan Arab ditulis dari kanan ke kiri, dan kalimat dalam bahasa Arab dimulai di sebelah kanan.

Cina, Jepang dan Korea ditulis secara vertikal, dengan karakter pertama dari kalimat pertama berada di kanan atas. Kalimat berikut ditambahkan di sebelah kiri. Oleh karena itu, mode penulisan yang digunakan adalah vertical-rl . Mode penulisan vertikal berjalan dari kanan ke kiri.

Bahasa Mongolia juga ditulis secara vertikal, tetapi dari kiri ke kanan. Oleh karena itu, jika Anda ingin mengeset aksara Mongolia, Anda akan menggunakan mode penulisan vertical-lr .

Dua nilai lain dari writing-mode dirancang lebih untuk tujuan kreatif daripada untuk skrip vertikal pengaturan huruf. Menggunakan sideways-lr dan sideways-rl mengubah teks ke samping — bahkan karakter yang biasanya ditulis secara vertikal dan tegak. Sayangnya, nilai tersebut hanya didukung di Firefox saat ini. CodePen berikut menunjukkan semua nilai yang berbeda dari writing-mode , Anda harus menggunakan Firefox jika Anda ingin melihat yang sideways-* beraksi.

Mode Penulisan dapat digunakan saat membuat dokumen yang menggunakan bahasa yang ditulis menggunakan mode penulisan tersebut. Mereka juga dapat digunakan secara kreatif, misalnya, untuk mengatur heading secara vertikal di sisi beberapa konten. Namun, dalam artikel ini, saya ingin melihat dampak yang mendukung bahasa vertikal, dan kemungkinan teks vertikal, terhadap tata letak CSS, dan di seluruh CSS secara umum.

Sebelum saya melakukannya — jika Anda tertarik dengan penggunaan mode penulisan untuk teks vertikal — berikut adalah beberapa sumber yang berguna:

• Situs Internasionalisasi W3C memiliki banyak informasi berguna. Baca tentang skrip RTL dan teks vertikal.
• Jen Simmons menulis artikel yang sangat bagus tentang Mode Penulisan CSS yang juga menyertakan beberapa contoh dari cetakan mode yang digunakan.
• Pemikiran tentang dunia dan sistem penulisan kita - Chen Hui Jing
• Pengaturan Huruf Vertikal Dengan Mode Penulisan ditinjau kembali - Chen Hui Jing
• Properti mode penulisan di MDN

Dimensi Blok Dan Inline

Saat kita mengubah mode penulisan dokumen, yang kita lakukan adalah mengalihkan arah aliran blok . Oleh karena itu, dengan cepat menjadi sangat berguna bagi kita untuk memahami apa yang dimaksud dengan blok dan inline.

Salah satu hal pertama yang kita pelajari tentang CSS adalah bahwa beberapa elemen adalah elemen blok, misalnya paragraf. Elemen-elemen ini ditampilkan satu demi satu dalam arah blok. Elemen sebaris, seperti kata dalam kalimat ditampilkan satu demi satu dalam arah sebaris. Bekerja dalam mode penulisan horizontal, kita menjadi terbiasa dengan kenyataan bahwa dimensi blok berjalan dari atas ke bawah secara vertikal, dan dimensi inline dari kiri ke kanan secara horizontal.

Karena elemen blok dan inline berhubungan dengan mode penulisan dokumen kita, bagaimanapun, dimensi inline adalah horizontal hanya jika kita berada dalam mode penulisan horizontal. Itu tidak berhubungan dengan lebar, tetapi dengan ukuran sebaris. Dimensi blok hanya vertikal ketika dalam mode penulisan horizontal. Oleh karena itu tidak berhubungan dengan tinggi, tetapi untuk memblokir ukuran.

Logis, Sifat Aliran-Relatif

Istilah, ukuran inline, dan ukuran blok ini juga digunakan sebagai nama properti CSS baru yang dirancang untuk mencerminkan dunia sadar mode penulisan baru kami. Jika, dalam mode penulisan horizontal Anda menggunakan properti inline-size alih-alih width , itu akan bertindak dengan cara yang persis sama dengan width - hingga Anda mengganti mode penulisan komponen Anda. Jika Anda menggunakan width yang akan selalu menjadi dimensi fisik, itu akan selalu menjadi ukuran komponen secara horizontal. Jika Anda menggunakan inline-size , itu akan menjadi ukuran dalam dimensi inline, seperti yang ditunjukkan contoh di bawah ini.

Hal yang sama berlaku untuk height . Properti height akan selalu menjadi ukuran secara vertikal. Hal ini berkaitan dengan seberapa tinggi item tersebut. Properti block-size , bagaimanapun, memberikan ukuran dalam dimensi blok , secara vertikal jika kita berada dalam mode penulisan horizontal dan horizontal dalam mode vertikal.

Seperti yang saya jelaskan dalam artikel saya “Memahami Properti dan Nilai Logis”, ada pemetaan untuk semua properti fisik, yang terkait dengan dimensi layar. Begitu Anda mulai memikirkannya, begitu banyak CSS yang ditentukan dalam kaitannya dengan tata letak fisik layar. Kami mengatur posisi, margin, padding dan batas menggunakan atas, kanan, bawah, dan kiri. Kami mengapungkan barang ke kiri dan ke kanan. Terkadang mengikat sesuatu ke dimensi fisik akan menjadi apa yang kita inginkan, namun semakin kita memikirkan tata letak kita tanpa mengacu pada lokasi fisik. Spesifikasi Logical Properties and Values ​​meluncurkan cara agnostik mode penulisan ini untuk bekerja di seluruh CSS.

Mode Penulisan, Kisi, dan Flexbox

Ketika metode tata letak baru kami muncul, mereka membawa cara agnostik dalam melihat mode penulisan komponen yang ditata sebagai tata letak fleksibel atau kisi. Untuk pertama kalinya orang diminta untuk berpikir tentang awal dan akhir, daripada kiri dan kanan, atas dan bawah.

Ketika saya pertama kali mulai mempresentasikan subjek CSS Grid, presentasi awal saya adalah ikhtisar dari semua properti dalam spesifikasi. Saya menyebutkan bahwa properti grid-area dapat digunakan untuk mengatur keempat baris untuk menempatkan item grid. Urutan garis-garis itu bukanlah, namun, bagian atas, kanan, bawah, dan kiri yang biasa kita gunakan untuk mengatur keempat margin. Sebagai gantinya, kita perlu menggunakan atas, kiri, bawah, kanan - kebalikan dari urutan itu! Sampai saya memahami hubungan antara mode grid dan penulisan, ini sepertinya keputusan yang sangat aneh. Saya menyadari bahwa apa yang kami lakukan adalah mengatur kedua garis awal, lalu kedua garis akhir. Menggunakan atas, kanan, bawah, dan kiri akan berfungsi dengan baik jika kita berada dalam mode penulisan horizontal, namun putar kisi di sisinya dan itu tidak masuk akal. Jika kita menggunakan grid-area: 1 / 2 / 3 / 5; seperti pada pena di bawah ini diatur garis-garis sebagai berikut:

• grid-row-start: 1; - blok mulai
• grid-column-start: 2 - mulai sebaris
• grid-row-end: 3 - ujung blok
• grid-column-end: 5 - ujung sebaris

Baris dan Kolom Flexbox

Jika Anda menggunakan Flexbox dan menambahkan display: flex ke wadah, item Anda akan ditampilkan sebagai baris karena nilai awal properti flex-direction adalah row . Sebuah baris akan mengikuti dimensi inline dari mode penulisan yang digunakan. Oleh karena itu jika mode penulisan Anda horizontal-tb , sebuah baris berjalan secara horizontal. Jika arah teks skrip saat ini dari kiri ke kanan maka item akan berbaris mulai dari kiri, jika dari kanan ke kiri akan berbaris mulai dari kanan.

Namun, gunakan mode penulisan vertikal, seperti vertical-rl dan flex-direction: row akan menyebabkan item diletakkan secara vertikal, karena arah inline adalah vertikal. Dalam CodePen berikutnya ini semua contoh memiliki flex-direction: row , hanya mode atau arah penulisan yang berubah.

Tambahkan flex-direction: column , dan tata letak item dalam dimensi blok mode penulisan Anda. Dalam mode penulisan horizontal, dimensi blok adalah dari atas ke bawah, sehingga kolom adalah vertikal. Dengan mode penulisan vertical-rl kolom adalah horizontal. Seperti contoh sebelumnya, satu-satunya perbedaan antara tata letak fleksibel di bawah ini adalah mode penulisan yang digunakan.

Penempatan Otomatis Grid

Saat menggunakan penempatan otomatis dalam kisi, Anda akan melihat perilaku yang serupa dengan tata letak fleksibel. Item kotak ditempatkan secara otomatis sesuai dengan mode penulisan dokumen. Standarnya adalah menempatkan item dalam baris, yang akan menjadi arah inline - horizontal dalam mode penulisan horizontal dan vertikal dalam mode vertikal.

Coba ubah alur item menjadi column seperti pada contoh di bawah ini. Item sekarang akan mengalir dalam dimensi blok - vertikal dalam mode penulisan horizontal dan horizontal dalam mode vertikal.

Penempatan Garis Grid

Penempatan berbasis garis juga menghormati mode penulisan. Garis grid kita mulai dari 1, baik untuk baris maupun kolom. Jika kita memposisikan item dari baris kolom 1 ke baris kolom 3, dan berada dalam mode penulisan horizontal dengan arah kiri ke kanan, item tersebut akan merentang dari baris kolom paling kiri melintasi dua trek kisi secara horizontal. Jadi mencakup dua kolom.

Ubah mode penulisan ke vertical-rl dan baris kolom 1 akan berada di bagian atas kisi, item yang mencakup dua trek secara vertikal. Masih mencakup dua kolom, tetapi kolom sekarang berjalan horizontal.

Alignment Dalam Grid Dan Flexbox

Salah satu tempat pertama yang akan dihadapi banyak orang dengan cara Flexbox menangani mode penulisan, adalah saat menyelaraskan item dalam tata letak fleksibel. Jika kita mengambil contoh flex-direction: row di atas, dan menggunakan properti justify-content untuk menyelaraskan semua item ke flex-end item pindah ke akhir baris mereka. Ini berarti bahwa dalam mode penulisan horizontal dengan arah kiri ke kanan semua item bergerak ke kanan, karena ujung baris itu ada di kanan. Jika arahnya dari kanan ke kiri, maka mereka semua bergerak ke kiri.

Dalam mode penulisan vertikal, mereka bergerak ke bawah, dengan asumsi ada ruang bagi mereka untuk melakukannya. Saya telah menetapkan inline-size pada komponen dalam contoh ini untuk memastikan bahwa kami memiliki ruang kosong di wadah fleksibel kami untuk melihat keselarasan beraksi.

Perataan sedikit lebih mudah dipahami dalam tata letak kisi, karena kami selalu memiliki dua sumbu untuk dimainkan. Grid adalah dua dimensi, dua dimensi itu adalah blok dan inline. Oleh karena itu, Anda dapat mengingat satu aturan jika Anda ingin mengetahui apakah akan menggunakan properti yang dimulai dengan align- atau yang dimulai dengan justify- . Dalam tata letak grid, align- properties:- align-content , align-items , align-self digunakan untuk melakukan penyelarasan sumbu blok. Dalam mode penulisan horizontal yang berarti secara vertikal, dan dalam mode penulisan vertikal secara horizontal.

Sekali lagi, kami tidak menggunakan kiri dan kanan atau atas dan bawah, karena kami ingin tata letak kisi kami bekerja dengan cara yang persis sama, apa pun mode penulisannya. Jadi kami menyelaraskan menggunakan start dan end . Jika kita menyelaraskan untuk start pada dimensi blok, itu akan menjadi top ketika di horizontal-tb , tetapi akan right ketika di vertical-rl . Perhatikan contoh di bawah ini, nilai alignment pada kedua grid sama, yang membedakan hanya mode penulisan yang digunakan.

Properti justify-content , justify-items , justify-self selalu digunakan untuk penyelarasan inline dalam tata letak grid. Itu akan horizontal dalam mode penulisan horizontal dan vertikal dalam mode penulisan vertikal.

Penjajaran Flexbox agak rumit karena fakta bahwa sumbu utama dapat dialihkan dari baris ke kolom. Oleh karena itu, di Flexbox, kita perlu memikirkan metode alignment sebagai sumbu utama versus sumbu silang. Properti align- digunakan pada sumbu silang. Pada sumbu utama, yang Anda miliki hanyalah justify-content karena kami menangani item sebagai grup di Flexbox. Pada sumbu silang, Anda dapat menggunakan align-content jika Anda memiliki beberapa garis fleksibel dan ruang dalam wadah fleksibel untuk memisahkannya. Anda juga dapat menggunakan align-items dan align-self untuk memindahkan item fleksibel pada sumbu silang dalam hubungan satu sama lain dan garis fleksibelnya.

Untuk lebih lanjut tentang penyelarasan dalam tata letak CSS, lihat artikel Majalah Smashing saya sebelumnya:

• Cara Menyelaraskan Hal-Hal Dalam CSS
• Semua yang Perlu Anda Ketahui Tentang Penjajaran Di Flexbox

Kesadaran Mode Penulisan Dan CSS Lama

Tidak semua CSS sepenuhnya memahami cara kerja agnostik mode penulisan relatif aliran ini. Tempat-tempat di mana ia tidak mulai menonjol sebagai sesuatu yang tidak biasa, semakin Anda memikirkan hal-hal dalam hal blok dan inline, awal dan akhir. Misalnya, dalam tata letak multi-kolom, kami menentukan column-width , yang sebenarnya berarti ukuran sebaris kolom, karena tidak dipetakan ke lebar fisik saat bekerja dalam mode penulisan vertikal.

Seperti yang Anda lihat, mode penulisan mendukung banyak hal yang kita lakukan di CSS, bahkan jika kita tidak pernah menggunakan mode penulisan selain horizontal-tb .

Saya merasa sangat membantu untuk memikirkan tata letak CSS dengan cara agnostik mode penulisan ini. Meskipun mungkin terlalu dini untuk mengalihkan semua properti dan nilai kita ke yang logis, kita sudah berada di dunia aliran-relatif ketika berhadapan dengan metode tata letak baru. Memiliki model mental Anda menjadi salah satu blok dan inline, awal dan akhir, daripada terikat ke empat sudut layar Anda, memperjelas banyak hal yang kami temui saat menggunakan FlexBox dan grid.