Cara Mengatur Teks yang Dijustifikasi Dengan CSS

click fraud protection

Salah satu properti tipografi situs web yang dapat Anda pilih untuk disesuaikan selama pengembangan situs adalah bagaimana teks situs dibenarkan. Secara default, teks situs web dibiarkan rata dan ini adalah jumlah situs yang meninggalkan teksnya. Satu-satunya pilihan lain adalah benar dibenarkan, yang jarang, atau sepenuhnya dibenarkan.

Teks yang dibenarkan adalah blok teks yang rata di sisi kiri dan kanan, berlawanan dengan hanya salah satu sisi tersebut (yang dilakukan oleh pembenaran "kiri" dan "kanan"). Efek dibenarkan ganda dicapai dengan menyesuaikan spasi kata dan huruf di setiap baris teks untuk memastikan bahwa setiap baris memiliki panjang yang sama. Efek ini disebut pembenaran penuh. Membenarkan teks dalam CSS dengan menggunakan perataan teks Properti.

Bagaimana Justifikasi Bekerja?

Alasan Anda sering melihat tepi yang tidak rata di sisi kanan blok teks adalah karena setiap baris teks tidak sama panjangnya. Beberapa baris memiliki lebih banyak kata atau kata-kata yang lebih panjang sementara yang lain memiliki kata-kata yang lebih sedikit atau lebih pendek. Untuk membenarkan blok teks itu, spasi ekstra harus ditambahkan ke beberapa baris untuk meratakan semua baris dan membuatnya konsisten.

instagram viewer

Setiap browser web memiliki algoritme sendiri untuk menerapkan spasi ekstra dalam satu baris. Peramban melihat panjang kata, tanda hubung, dan faktor lain untuk menentukan di mana harus meletakkan spasi. Akibatnya, teks yang dibenarkan mungkin tidak terlihat identik dari satu browser ke browser berikutnya. Namun, yakinlah bahwa dukungan browser utama bagus untuk membenarkan teks dengan CSS.

Bagaimana Membenarkan Teks

Membenarkan teks dengan CSS membutuhkan bagian teks untuk membenarkan. Biasanya, Anda akan menggunakan paragraf teks karena blok besar konteks teks yang mencakup beberapa baris akan ditandai dengan tag paragraf.

Setelah Anda memiliki blok teks untuk dibenarkan, itu hanya masalah pengaturan gaya untuk dibenarkan dengan properti gaya penyelarasan teks CSS. Terapkan aturan CSS ini ke pemilih yang sesuai untuk mendapatkan blok teks untuk dirender sebagaimana dimaksud.

Kapan Membenarkan Teks

Banyak orang menyukai tampilan teks yang dibenarkan dari sudut pandang desain, sebagian besar karena itu menciptakan tampilan yang sangat konsisten dan terukur, tetapi ada kerugian untuk membenarkan teks sepenuhnya pada halaman web.

Pertama, teks yang dibenarkan bisa sulit dibaca. Ini karena ketika Anda membenarkan teks, banyak ruang ekstra terkadang dapat ditambahkan di antara beberapa kata di baris. Kesenjangan yang tidak konsisten tersebut dapat membuat teks lebih sulit dibaca. Ini sangat penting pada halaman web, yang mungkin sudah sulit dibaca karena pencahayaan, resolusi, atau kualitas perangkat keras lainnya. Menambahkan spasi yang tidak biasa ke teks dapat membuat situasi yang buruk menjadi lebih buruk.

Selain tantangan keterbacaan, ruang kosong terkadang berbaris satu sama lain untuk menciptakan "sungai" ruang putih di tengah teks. Kesenjangan ruang putih yang besar itu benar-benar dapat membuat tampilan yang canggung. Selain itu, pada baris yang sangat pendek, pembenaran dapat menyebabkan baris yang berisi satu kata dengan spasi ekstra di antara huruf itu sendiri.

Jadi kapan Anda harus menggunakan pembenaran teks? Waktu terbaik untuk membenarkan teks terjadi ketika garisnya panjang dan ukuran fontnya kecil — sesuatu yang sulit dipastikan di situs web responsif di mana panjang garis berubah berdasarkan ukuran layar. Tidak ada nomor keras dan cepat untuk panjang garis atau ukuran teks; Anda harus menggunakan penilaian terbaik Anda.

Setelah Anda menerapkan gaya perataan teks untuk membenarkan teks, uji untuk memastikan teks tidak memiliki ruang kosong — dan uji pada berbagai ukuran. Tes termudah tidak membutuhkan yang lebih rumit daripada mata Anda sendiri yang menyipit. Sungai-sungai menonjol sebagai bercak putih dalam blok teks abu-abu. Jika Anda melihat sungai, Anda harus mengubah ukuran teks atau lebar blok teks untuk mengubah teks.

Gunakan justifikasi hanya setelah Anda membandingkannya dengan teks rata kiri. Anda mungkin menyukai konsistensi pembenaran penuh, tetapi teks rata kiri standar biasanya lebih mudah dibaca. Pada akhirnya, Anda harus membenarkan teks karena Anda telah memilih untuk membenarkan teks untuk tujuan desain dan telah memastikan bahwa situs Anda tetap mudah dibaca.

instagram story viewer