Sifat Logis

Pola antarmuka pengguna yang sangat umum adalah label teks dengan ikon inline pendukung.

Ikon berada di sebelah kiri teks dengan celah kecil di antara keduanya, yang disediakan oleh margin-right pada ikon. Namun demikian, ada masalah, karena ini hanya akan berfungsi jika arah teks dari kiri ke kanan. Jika arah teks berubah menjadi kanan-ke-kiri—yang seperti bahasa Arab membaca—ikon akan berada di depan teks.

Bagaimana cara Anda memperhitungkan hal ini di CSS? Properti logis memungkinkan Anda menyelesaikan situasi ini. Di antara banyak manfaat lainnya, mereka menyediakan dukungan gratis dan otomatis untuk internasionalisasi. Membantu Anda membangun front end yang lebih tangguh dan inklusif.

Terminologi

Properti fisik atas, kanan, bawah, dan kiri merujuk pada dimensi fisik area pandang. Anda dapat menganggapnya seperti mawar kompas di peta. Di sisi lain, properti logika merujuk ke tepi kotak karena berhubungan dengan aliran konten. Oleh karena itu, jenis huruf tersebut dapat berubah jika arah teks atau mode penulisan berubah. Ini adalah perubahan besar dari gaya terarah, dan memberi lebih banyak fleksibilitas saat menata gaya antarmuka.

Alur blok

Alur blok adalah arah penempatan blok konten. Misalnya, jika ada dua paragraf, alur blok adalah tempat paragraf kedua akan masuk. Dalam dokumen berbahasa Inggris, alur blok ditampilkan dari atas ke bawah. Pikirkan ini dalam konteks paragraf teks yang saling mengikuti, dari atas ke bawah.

Tiga blok, elemen div, dengan panah bawah, berlabel 'alur blok'

Alur inline

Alur inline adalah bagaimana teks mengalir dalam sebuah kalimat. Dalam dokumen berbahasa Inggris, alur inline dari kiri ke kanan. Jika Anda mengubah bahasa dokumen halaman web ke bahasa Arab (<html lang="ar">), maka alur {i>inline<i} akan berada dari kanan ke kiri.

Tiga kata, &#39;dia menjual kerang&#39;, dengan tanda panah kiri-ke-kanan, berlabel &#39;{i>inline flow<i}&#39;

Teks mengalir ke arah yang ditentukan oleh mode penulisan dokumen. Anda dapat mengubah arah penataan teks dengan properti writing-mode. Ini dapat diterapkan ke seluruh dokumen, atau ke elemen individual.

Relatif aliran

Secara historis di CSS, kita hanya dapat menerapkan properti seperti margin sesuai dengan arah sisi mereka. Misalnya, margin-top diterapkan ke bagian atas fisik elemen. Dengan properti logis, margin-top menjadi margin-block-start. Ini berarti bahwa terlepas dari bahasa dan arah teks, alur pemblokiran memiliki aturan margin yang sesuai.

Diagram yang menunjukkan berbagai ukuran kotak dan di mana setiap bagian pengukuran dimulai dan diakhiri

Pengaturan ukuran

Untuk mencegah elemen melebihi lebar atau tinggi tertentu, tulis aturan seperti ini:

.my-element {
  max-width: 150px;
  max-height: 100px;
}

Padanan yang relatif terhadap alur adalah max-inline-size dan max-block-size. Anda juga dapat menggunakan min-block-size dan min-inline-size, bukan min-height dan min-width.

Dengan sifat logis, aturan lebar dan tinggi maksimal akan terlihat seperti ini:

.my-element {
  max-inline-size: 150px;
  max-block-size: 100px;
}

Awal dan akhir

Alih-alih menggunakan arah seperti atas, kanan, bawah, dan kiri, gunakan start dan end. Cara ini akan memberi Anda block-start, inline-end, block-end, dan inline-start. Ini memungkinkan Anda menerapkan properti CSS yang merespons perubahan mode penulisan.

Misalnya, untuk meratakan teks ke kanan, Anda dapat menggunakan CSS ini:

p {
  text-align: right;
}

Jika tujuan Anda bukan untuk menyelaraskan dengan hak fisik, melainkan ke awal arah pembacaan, maka hal ini tidak membantu. Dengan nilai logis, ada nilai start dan end yang lebih bermanfaat yang memetakan ke arah teks. Aturan perataan teks sekarang terlihat seperti ini:

p {
  text-align: end;
}

Spasi dan posisi

Properti logis untuk margin, padding, dan inset membuat elemen pemosisian, dan menentukan bagaimana elemen-elemen ini berinteraksi satu sama lain di seluruh mode penulisan menjadi lebih mudah dan lebih efisien. Properti terkait margin dan {i>padding<i} masih memetakan data langsung ke arah, tetapi perbedaan utamanya adalah ketika mode penulisan berubah, mode penulisan juga berubah.

.my-element {
  padding-top: 2em;
  padding-bottom: 2em;
  margin-left: 2em;
  position: relative;
  top: 0.2em;
}

Tindakan ini akan menambahkan beberapa ruang vertikal di dalam dengan padding dan mendorongnya dari kiri dengan margin. Properti top juga menggesernya ke bawah. Dengan padanan properti logis, akan terlihat seperti ini:

.my-element {
  padding-block-start: 2em;
  padding-block-end: 2em;
  margin-inline-start: 2em;
  position: relative;
  inset-block-start: 0.2em;
}

Tindakan ini akan menambahkan beberapa spasi di dalam inline dengan padding dan mendorongnya keluar dari mulai inline dengan margin. Properti inset-block memindahkannya ke dalam dari blok-start.

Properti inset-block bukanlah satu-satunya opsi singkat dengan properti logis. Aturan ini bisa dipadatkan lebih lanjut, menggunakan versi singkat dari properti margin dan padding.

.my-element {
  padding-block: 2em;
  margin-inline: 2em 0;
  position: relative;
  inset-block: 0.2em 0;
}

Batas

Menambahkan border dan border-radius juga dapat dilakukan dengan properti logis. Untuk menambahkan batas di bagian bawah dan kanan, dengan radius sebelah kanan, Anda dapat menulis aturan seperti ini:

.my-element {
  border-bottom: 1px solid red;
  border-right: 1px solid red;
  border-bottom-right-radius: 1em;
}

Atau, Anda bisa menggunakan properti logis seperti ini:

.my-element {
  border-block-end: 1px solid red;
  border-inline-end: 1px solid red;
  border-end-end-radius: 1em;
}

end-end di border-end-end-radius adalah ujung blok dan akhir inline.

Unit

Properti logis membawa dua unit baru: vi dan vb. Unit vi adalah 1% ukuran area tampilan dalam arah inline. Setara properti non-logis adalah vw. Unit vb adalah 1% dari area tampilan dalam arah blok. Setara properti non-logis adalah vh.

Unit ini akan selalu memetakan ke arah pembacaan. Misalnya, jika Anda ingin elemen menggunakan 80% dari ruang inline yang tersedia dari area pandang, menggunakan unit vi akan otomatis mengubah ukuran tersebut menjadi dari atas ke bawah jika mode penulisannya vertikal.

Menggunakan sifat logis secara pragmatis

Properti logis dan mode penulisan tidak hanya untuk internasionalisasi. Anda dapat menggunakannya untuk menghasilkan antarmuka pengguna yang lebih fleksibel.

Jika Anda memiliki diagram yang memiliki label pada sumbu X dan sumbu Y, Anda mungkin ingin teks di label Y dibaca secara vertikal.

Karena label sumbu Y dalam demo memiliki writing-mode dari vertical-rl, Anda dapat menggunakan nilai margin yang sama pada kedua label. Nilai margin-block-start berlaku untuk kedua label karena awal blok ada di sebelah kanan sumbu Y dan di bagian atas untuk sumbu X. Sisi blok-start memiliki batas merah sehingga Anda dapat melihatnya.

Menyelesaikan masalah ikon

Setelah kita membahas properti logika, pengetahuan ini dapat diterapkan pada masalah desain yang kita mulai.

p {
  display: inline-flex;
  align-items: center;
}

p svg {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
  flex: none;
}

Margin telah diterapkan di sebelah kanan elemen ikon. Agar spasi antara ikon dan teks mendukung semua arah pembacaan, properti margin-inline-end harus digunakan sebagai gantinya.

p {
  display: inline-flex;
  align-items: center;
}

p svg {
  width: 1.2em;
  height: 1.2em;
  margin-inline-end: 0.5em;
  flex: none;
}

Sekarang, terlepas dari arah pembacaan, ikon akan memosisikan dirinya sendiri dan mengatur spasi dengan tepat.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang sifat-sifat logika

Saat Anda menulis dengan tangan, pergelangan tangan Anda bergerak di sepanjang sumbu logis yang mana?

block
inline

Centang semua yang dapat memanfaatkan properti logis

sudut kotak
perataan
kotak sisi
warna
sizes
bayangan

Sisi logis kata mana yang digarisbawahi?

ujung inline
akhiri blok
mulai blokir
mulai inline