Pada panduan CSS kali ini kita akan membahas mengenai Cara Mengatur Tinggi Baris dalam Paragraf HTML. Tinggi baris atau besar “spasi paragraf” di pada CSS diatur menggunakan property: line-height.
Mengatur Tinggi Baris pada Paragraf dengan line-height
Yang dimaksud dengan tinggi baris pada paragraf yaitu besar jarak antara satu baris dengan baris di bawahnya. Pada pemakaian sehari-hari kita menggunakan istilah “spasi paragraf” bagi hal ini. Misalnya agar tulisan skripsi menjadi lebih gampang dibaca, kita mengganti spasi (pada program microsoft word) menjadi 1,5. Dibandingi dengan jarak 1 spasi, pengaturan paragraf sebesar 1,5 spasi akan merancang jarak baris di pada paragraf menjadi lebih “lega”. Didalam CSS, pengaturan “besar spasi” ini ditangani dengan property line-height.
Nilai dari property line-height dapat diisi dengan nilai pixel, persen, em, atau angka (tanpa satuan). Berikut yaitu contoh penulisannya:
|
1 |
p {<br/> line-height:16px;<br/>} |
Cara Perhitungan Nilai line-height
Bila nilai line-height ditetapkan dengan satuan pixel, perhitungan nilai line-height lumayan sederhana. Bagi paragraf yang mempunyai ukuran font (font-size) sebesar 14px, dan line-height sebesar 18px, karenanya jarak antar baris dihitung merujuk pada rumus berikut: 18px-14px. Hasil perhitungannya, yakni 4px yaitu jarak antar baris yang didapatkan. Jarak antar baris ini dikenal pun dengan istilah leading.
Bagaimana sekiranya satuannya dicantumkan pada persen atau em? Bila kita merancang line-height: 150% atau line-height: 1.5em di teks yang berukuran 14px, karenanya line-height akan menjadi 150%*14px=21px. Sehingga jarak antar baris (leading) bagi contoh ini yaitu 21px-14px=7px.
Selain satuan pixel, persen dan em, line-height pun mempunyai satuan khusus yang digunakan bagi line-height, yaitu angka (tanpa satuan). Contoh penulisannya yaitu selaku berikut:
|
1 |
p {<br/> line-height:1.5;<br/>} |
Bagaimana perhitungan hasil leading dari penulisan line-height ini? Pada kebanyakan kasus, line-height:1.5 akan menghasilkan nilai yang sama dengan line-height: 150%. Namun bagi kasus tag di pada tag (nested tag) hasil yang didapat akan berbeda.
Misalkan kita merancang property line-height: 150% dan font-size: 14px di tag <body>. Karena sifat line-height ini diturunkan ke pada tag-tag lain (bersifat inherit) karenanya seluruh tag di pada halaman HTML akan memperoleh 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 pada halaman tersebut kita mempunyai tag <p> dengan font-size sebesar 36 pixel, karenanya line height:21px akan merancang paragraf susah dibaca.
Pada kasus ini, sekiranya kita mengganti property line-height menjadi line-height:1.5 di tag <body>, karenanya setiap tag dibawahnya akan memperoleh nilai line-height:1.5. Sehingga bagi paragraf dengan font-size: 36px, efek turunan line-height:1.5 akan menghasilkan nilai line-height: 54px (hasil dari 150%*36).
Panduan Mengatur Tinggi Baris Paragraf (line-height)
Selaku contoh panduan bagi property line-height yang telah kita bahas, berikut yaitu kode HTML dan CSS dengan menggunakan pelbagai nilai line-height:
|
1 |
<!DOCTYPE html><br/><html><br/><head><br/><title>Belajar Tinggi Baris Paragraf CSS</title><br/><style type=text/css><br/> .contoh1 { font-size:16px; }<br/> .contoh2 { font-size:16px; line-height: 20px;}<br/> .contoh3 { font-size:16px; line-height: 1.5em;}<br/> .contoh4 { font-size:16px; line-height: 2;}<br/></style><br/></head><br/><body><br/> <h2>Belajar Tinggi Baris CSS: line-height</h2><br/> <br/> <h3>Font-size: 16px, tanpa line-height (nilai line-height: 1.2)</h3><br/> <p class=contoh1>Lorem ipsum dolor sit amet, consectetur<br/> adipiscing elit. Nulla erat dolor, ullamcorper in ultricies<br/> eget,fermentum rhoncus leo. Curabitur eu mi vitae metus<br/> posuere laoreet. Eam facilis omittantur at, usu efficiantur<br/> neglegentur delicatissimi et, in per vero splendide<br/> persequeris.<p><br/> <br/> <h3>Font-size: 16px, line-height: 20px</h3><br/> <p class=contoh2>Lorem ipsum dolor sit amet, consectetur<br/> adipiscing elit. Nulla erat dolor, ullamcorper in ultricies<br/> eget,fermentum rhoncus leo. Curabitur eu mi vitae metus<br/> posuere laoreet. Eam facilis omittantur at, usu efficiantur<br/> neglegentur delicatissimi et, in per vero splendide<br/> persequeris.<p><br/> <br/> <h3>Font-size: 16px, line-height: 1.5em</h3><br/> <p class=contoh3>Lorem ipsum dolor sit amet, consectetur<br/> adipiscing elit. Nulla erat dolor, ullamcorper in ultricies<br/> eget,fermentum rhoncus leo. Curabitur eu mi vitae metus<br/> posuere laoreet. Eam facilis omittantur at, usu efficiantur<br/> neglegentur delicatissimi et, in per vero splendide<br/> persequeris.<p><br/> <br/> <h3>Font-size: 16px, line-height: 2</h3><br/> <p class=contoh4>Lorem ipsum dolor sit amet, consectetur<br/> adipiscing elit. Nulla erat dolor, ullamcorper in ultricies<br/> eget,fermentum rhoncus leo. Curabitur eu mi vitae metus<br/> posuere laoreet. Eam facilis omittantur at, usu efficiantur<br/> neglegentur delicatissimi et, in per vero splendide<br/> persequeris.<p><br/></body><br/></html> |
eBook CSS Uncover Duniailkom
Sumber https://www.duniailkom.com/
