Ok disini yang saya akan berbagi cara mengatur tinggi baris dalam paragraf HTML dengan tinggi baris dalam paragraf. Yang dimaksud dengan tinggi baris dalam paragraf disini adalah besar jarak antara satu baris dengan baris di bawahnya. Dalam penggunaan sehari-hari kita menggunakan istilah spasi paragraf untuk hal ini.

Misalnya agar tulisan  (dalam aplikasi microsoft word) yang kita ketik menjadi lebih mudah dibaca kita mengganti spasi menjadi 1,5. Dibandingkan dengan jarak 1 spasi, pengaturan paragraf sebesar 1,5 spasi akan membuat jarak baris di dalam paragraf menjadi lebih lega. Didalam CSS, pengaturan besar spasi ini ditangani dengan property line-height.

Cara Mengatur Tinggi / Jarak antar Baris dalam Paragraf HTML
Cara Mengatur Tinggi / Jarak antar Baris dalam Paragraf HTML

Nilai dari property line-height bisa diisi dengan nilai pixel (px), persen (%), em , atau angka (tanpa satuan).

Font size dan line height
Font size dan line height

Berikut adalah contoh penulisannya:

p {  line-height:20px; }

Cara Perhitungan Nilai line-height


Jika nilai line-height ditetapkan dengan satuan pixel, perhitungan nilai line-height cukup sederhana. Untuk paragraf yang memiliki ukuran font (font-size) sebesar 14px, dan line-height sebesar 18px, maka jarak antar baris dihitung berdasarkan rumus berikut: 18px-14px. Hasil perhitungannya, yakni 4px adalah jarak antar baris yang dihasilkan. Jarak antar baris ini dikenal juga dengan istilah leading.

leading, font size, line height
leading, font size, line height

Bagaimana jika satuannya dicantumkan dalam persen atau em? 


jika satuannya dicantumkan dalam persen atau em, Jika kita membuat line-height: 150% atau line-height: 1.5em pada teks yang berukuran 14px, maka line-height akan menjadi 150%*14px=21px. Sehingga jarak antar baris (leading) untuk contoh ini adalah 21px-14px=7px.

Selain satuan pixel, persen dan em, line-height juga memiliki satuan khusus yang digunakan untuk line-height, yaitu angka (tanpa satuan). Contoh penulisannya adalah sebagai berikut:

p {  line-height:1.5; }

Bagaimana perhitungan hasil leading dari penulisan line-height ini? 


Dalam kebanyakan kasus, line-height:1.5 akan menghasilkan nilai yang sama dengan line-height: 150%. Namun untuk kasus tag di dalam tag (nested tag) hasil yang didapat akan berbeda.

Misalkan kita membuat property line-height: 150% dan font-size: 14px pada tag <body>. Karena sifat line-height ini diturunkan ke dalam tag-tag lain (bersifat inherit) maka seluruh tag di dalam halaman HTML akan mendapatkan nilai line-height yang sama. Akan tetapi, nilai line-height yang diturunkan bukanlah line-height:150%, namun hasil perhitungannya, yakni line-height sebesar 21px (hasil dari 150%*14px).

Apabila di dalam halaman tersebut kita memiliki tag <p> dengan font-size sebesar 36px, maka line height:21px akan membuat paragraf susah dibaca.

Dalam kasus ini, jika kita mengganti property line-height menjadi line-height:1.5 pada tag <body>, maka setiap tag dibawahnya akan mendapatkan nilai line-height:1.5. Sehingga untuk paragraf dengan font-size: 36px, efek turunan line-height:1.5 akan menghasilkan nilai line-height: 54px (hasil dari 150%*36).

Jika kita tidak mendefenisikan nilai line-height, maka web browser akan menggunakan nilai bawaan yang umumnya bernilai line-height:1.2.

Tutorial Mengatur Jarak / Tinggi Baris Paragraf (line-height)


Sebagai contoh tutorial untuk property line-height yang telah kita bahas, berikut adalah kode HTML dan CSS dengan menggunakan berbagai nilai line-height:

<!DOCTYPE html>
<html>
<head>
<title>Belajar Tinggi Baris Paragraf CSS</title>
<style type="text/css">
   .contoh1 { font-size:16px; }
   .contoh2 { font-size:16px; line-height: 20px;}
   .contoh3 { font-size:16px; line-height: 1.5em;}
   .contoh4 { font-size:16px; line-height: 2;}
</style>
</head>
<body>
   <h2>Belajar Tinggi Baris CSS: line-height</h2>

   <h3>Font-size: 16px, tanpa line-height (nilai line-height: 1.2)</h3>
   <p class="contoh1">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
   eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet. Eam facilis omittantur at, usu efficiantur
   neglegentur delicatissimi et, in per vero splendide
   persequeris.<p>

   <h3>Font-size: 16px, line-height: 20px</h3>
   <p class="contoh2">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
   eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet. Eam facilis omittantur at, usu efficiantur
   neglegentur delicatissimi et, in per vero splendide
   persequeris.<p>

   <h3>Font-size: 16px, line-height: 1.5em</h3>
   <p class="contoh3">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
   eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet. Eam facilis omittantur at, usu efficiantur
   neglegentur delicatissimi et, in per vero splendide
   persequeris.<p>

   <h3>Font-size: 16px, line-height: 2</h3>
   <p class="contoh4">Lorem ipsum dolor sit amet, consectetur
   adipiscing elit. Nulla erat dolor, ullamcorper in ultricies
   eget,fermentum rhoncus leo. Curabitur eu mi vitae metus
   posuere laoreet. Eam facilis omittantur at, usu efficiantur
   neglegentur delicatissimi et, in per vero splendide
   persequeris.<p>
</body>
</html>

Maka contoh hasilnya adalah sebagai berikut:

Tutorial Mengatur Jarak / Tinggi Baris Paragraf (line-height)
Tutorial Mengatur Jarak / Tinggi Baris Paragraf (line-height)

Dalam contoh diatas, nilai line-height yang berbeda-beda untuk setiap paragraf. Untuk paragraf pertama, tidak mencantumkan nilai line-height, sehingga akan menggunakan nilai bawaan web browser.

Selain untuk mengatur tinggi baris dalam paragraf, property line-height sering juga digunakan untuk membuat text berada di tengah-tengah sebuah objek (vertical align). Misalkan kita memiliki kotak dengan tinggi 100px, dengan membuat nilai line-height: 100px, akan membuat text tampil di tengah-tengah kotak tersebut.
0 Komentar untuk "Cara Mengatur Tinggi / Jarak antar Baris dalam Paragraf di Blog"