Sejajarkan Dengan Properti Perataan Teks CSS

Salah satu fitur pertama yang dipelajari semua pengembang saat memahami pengolah kata adalah perataan teks. Alat kecil itu sangat penting bagi pembuat huruf profesional dan desainer selebaran amatir. Tidak mengherankan bahwa CSS memiliki dukungan untuk perataan teks dalam hal desain web.

NS perataan teks properti, bersama dengan satu atau dua lainnya, mengontrol bagaimana elemen menyelaraskan teksnya secara horizontal. Di luar dasar-dasarnya, browser perlahan-lahan menerapkan lebih banyak spesifikasi, tetapi dukungan penuh bervariasi. Pelajari cara menyelaraskan teks dan fitur mana yang didukung browser umum saat ini.

Dasar-dasar Properti perataan teks CSS

Alignment adalah salah satu istilah tipografi yang paling familiar. Dalam konteks CSS, perataan teks mengacu pada keselarasan horizontal.

Perataan teks horizontal hanya berlaku untuk penampung blok. Ini adalah elemen lebar penuh seperti paragraf dan div. Menggunakan perataan teks properti pada elemen sebaris seperti di dalam tidak akan berpengaruh. Anda juga dapat menyelaraskan item daftar dan sel tabel:

cara internetan di rumah

Secara default, dalam bahasa kiri-ke-kanan (lebih lanjut nanti), teks rata ke kiri:

Di CSS, ini sama dengan:

p { text-align: left; }

Atau:

p { text-align: start; }

Terkait: Apa Itu Cascading Style Sheets dan Untuk Apa CSS Digunakan?

Anda dapat menggunakan nilai lain untuk perataan teks properti untuk mengubah perataan horizontal. Nilai yang paling umum dikenal dari aplikasi pengolah kata:

text-align: left  
text-align: center  
text-align: right

Gunakan Justifikasi untuk Menyejajarkan Tepi Kiri dan Kanan

Nilai umum lainnya untuk perataan teks adalah membenarkan . Browser menambahkan ruang ke teks yang dibenarkan sehingga setiap baris memanjang untuk mengisi ruang yang tersedia:

Saat Anda membenarkan teks, baris terakhir bisa rumit. Karena mungkin sangat pendek (mungkin hanya satu kata), spasi di seluruh lebar bisa jelek. Secara default, bahkan teks yang dibenarkan akan menyelaraskan baris terakhir ke kiri.

skype menampilkan pesan yang rusak

Anda mungkin terkadang menginginkan efek yang berbeda. Implementasi browser mengejar spesifikasi, tetapi dua pendekatan dimungkinkan.

NS membenarkan-semua value harus berarti browser memperlakukan baris terakhir seperti yang lainnya, dan meregangkannya hingga lebar penuh. Namun, pada saat penulisan, tidak ada browser yang mendukung nilai ini. Kamu bisa periksa caniuse untuk melihat apakah mereka melakukannya ketika Anda membaca artikel ini.

Properti CSS lainnya, text-align-last , Lebih fleksibel dan memiliki dukungan yang lebih baik. Anda dapat memperlakukannya kurang lebih sama dengan perataan teks , tetapi itu hanya berlaku untuk baris terakhir:

Dukungan browser untuk properti ini lebih baik, tetapi tidak sempurna. Lagi, periksa caniuse sebelum Anda menggunakannya . Jika browser tidak mengenali properti ini, itu akan mengabaikannya.

Perataan Teks dan Arah Membaca

Anda mungkin bekerja dengan bahasa, seperti Arab atau Ibrani, yang dibaca dari kanan ke kiri. CSS menggunakan arah properti untuk menentukan ini, misalnya:

direction: rtl;

Bahasa ini biasanya menyelaraskan teks ke kanan secara default.

Alih-alih harus menentukan kiri / Baik , cara yang disukai untuk menyelaraskan teks menggunakan nilai Mulailah dan akhir . Ini menentukan apakah teks harus berbaris di awal setiap baris atau di akhir. Dalam bahasa kiri-ke-kanan, Mulailah setara dengan kiri . Dalam bahasa kanan-ke-kiri, teks dimulai di kanan dan berakhir di kiri.

kenapa laptopku jadi panas

Menggunakan Mulailah atau akhir berarti bahwa, terlepas dari arah teks, perataan tetap konsisten.

Bagaimana Elemen Mewarisi Properti perataan teks

Anda harus menyadari bahwa perataan teks harta warisan. Misalnya, jika Anda mengaturnya di tubuh elemen, itu akan berlaku untuk setiap elemen di halaman. Anda dapat, tentu saja, menimpanya pada elemen apa pun.

Menggunakan Properti perataan teks untuk Mengontrol Tata Letak

Anda dapat menggunakan perataan teks Properti CSS untuk menentukan bagaimana browser meletakkan teks secara horizontal. Nilai yang paling umum adalah kiri , Baik , Tengah , dan membenarkan . Ini cukup mudah, meskipun membenarkan memperkenalkan beberapa kompleksitas.

Anda harus menggunakan perataan teks dengan hemat. Pada papan reklame dan poster, perataan tengah mungkin sesuai, tetapi dapat membuat blok teks yang lebih panjang sulit dibaca. Pembenaran biasanya lebih mudah dibaca ketika baris teks lebih panjang. Membenarkan kolom teks pendek dapat membuat spasi jelek.

NS perataan teks properti adalah salah satu dari banyak properti CSS yang menyediakan pemformatan dan pemosisian dasar yang berguna.

Membagikan Membagikan Menciak Surel 10 Contoh Kode CSS Sederhana yang Dapat Anda Pelajari dalam 10 Menit

Butuh bantuan dengan CSS? Cobalah contoh kode CSS dasar ini untuk memulai, lalu terapkan ke halaman web Anda sendiri.

Baca Selanjutnya Topik-topik yang berkaitan

Pemrograman
Pengembangan web
Desain web
CSS

Tentang Penulis Bobby Jack(58 Artikel Diterbitkan)

Bobby adalah penggemar teknologi yang bekerja sebagai pengembang perangkat lunak selama hampir dua dekade. Dia bersemangat tentang game, bekerja sebagai Editor Ulasan di Majalah Switch Player, dan mendalami semua aspek penerbitan online & pengembangan web.

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan