KAL
Menu

Penataan gaya teks

Pengendalian line-height, letter-spacing, text-transform, dan pemotongan teks.

Daftar isi

Topik ini membahas properti penataan gaya teks pada CSS, yaitu line-height untuk jarak antar baris, letter-spacing untuk jarak antar huruf, text-align untuk perataan, text-transform untuk kapitalisasi, text-decoration untuk garis, serta pemotongan judul menjadi satu baris dengan tanda elipsis. Pengendalian properti-properti ini menentukan keterbacaan teks dan kerapian antarmuka. Setelah membacanya, teks isi, judul, dan label dapat ditata dengan nilai yang memiliki dasar jelas.

line-height untuk jarak antar baris#

Properti line-height menetapkan tinggi setiap baris teks, dan nilainya sebaiknya ditulis tanpa satuan. Nilai tanpa satuan berarti pengali dari font-size elemen bersangkutan, sehingga line-height: 1.5 pada teks 16px menghasilkan tinggi baris 24px. Nilai tanpa satuan juga diwariskan sebagai angka, sehingga setiap elemen turunan menghitung ulang tinggi barisnya dari font-size miliknya sendiri. Sebaliknya, nilai persen atau piksel diwariskan sebagai hasil hitung yang sudah jadi, dan itulah sumber jarak baris yang kaku pada halaman.

css Contoh: line-height tanpa satuan 
body {
  font-size: 1rem;
  line-height: 1.6;  /* setara 16 x 1.6 = 25.6px */
}

h2 {
  font-size: 1.5rem;
  line-height: 1.25; /* dihitung dari 24px, bukan dari 16px */
}

Rentang nilai yang lazim adalah 1.4 hingga 1.6 untuk teks isi dan 1.1 hingga 1.3 untuk judul. Nilai di bawah 1.2 pada teks isi membuat bagian huruf yang naik dan turun dari baris bersebelahan hampir bersentuhan, sehingga keterbacaan turun. Panjang baris ikut berperan, karena baris dengan 45 hingga 75 karakter lebih mudah diikuti daripada baris yang membentang lebar. Kedua pengaturan tersebut bekerja bersama, sehingga line-height yang lega sering dipilih untuk kolom teks yang lebar.

letter-spacing pada heading dan label#

Properti letter-spacing menambah atau mengurangi jarak antar huruf, dan nilainya lazim ditulis dalam em agar mengikuti ukuran huruf elemen. Label kecil berhuruf kapital menerima spasi positif sekitar 0.05em hingga 0.1em, karena huruf kapital tidak memiliki bagian turun dan spasi ekstra membuatnya lebih mudah dibedakan. Judul besar kadang justru diberi spasi negatif tipis, misalnya -0.02em, agar hurufnya terasa rapat dan utuh. Kedua arah pemakaian itu sah, dan yang membedakannya hanyalah ukuran teks yang disetel.

css Contoh: letter-spacing pada label kapital dan judul besar 
.label-piket {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

h1 {
  font-size: 2.5rem;
  letter-spacing: -0.02em;
}

Pemakaian letter-spacing sebaiknya tetap pada ukuran yang kecil. Spasi antar huruf yang berlebihan pada teks isi memecah kata menjadi potongan-potongan yang sulit dienali, sehingga keterbacaan justru turun. Nilai normal, yaitu 0, tetap menjadi pilihan terbaik untuk paragraf, dan penyetelan jarak hanya dilakukan pada elemen pendek seperti label, tajuk, dan tombol. Properti letter-spacing juga diwariskan ke elemen turunan, sehingga nilai yang disetel pada elemen induk perlu dikembalikan bila teks di dalamnya harus kembali normal.

text-align, text-transform, dan text-decoration#

Properti text-align mengatur perataan horizontal teks dengan nilai start, left, center, right, dan justify. Nilai start mengikuti arah tulis dokumen sehingga lebih aman daripada left untuk halaman yang berpotensi memakai arah tulis lain. Perataan justify mengulur spasi antar kata agar tepi kanan lurus, tetapi pada kolom sempit hasilnya berupa celah kata yang tidak beraturan dan keterbacaan menurun. Karena itu justify hanya dipilih untuk kolom teks yang cukup lebar dan tersusun rapi.

Properti text-transform mengubah tampak huruf dengan nilai uppercase, lowercase, capitalize, dan none. Perubahannya hanya pada penyajian, sedangkan isi HTML tetap bentuk aslinya, sehingga data tersimpan konsisten dan pembaca layar tetap membaca teks semula. Properti text-decoration menambahkan garis pada teks melalui text-decoration-line dengan nilai seperti underline dan line-through, lalu dapat dihaluskan dengan text-decoration-color, text-decoration-thickness, dan text-underline-offset. Contoh berikut menyatukan ketiga properti tersebut pada satu blok gaya.

css Contoh: perataan, kapitalisasi, dan garis pada teks 
.kop-surat {
  text-align: center;
  text-transform: uppercase;
}

.istilah-dihapus {
  text-decoration: line-through;
  text-decoration-color: #dc2626;
  text-decoration-thickness: 2px;
}

Pemotongan judul satu baris dengan ellipsis#

Judul pada daftar sering lebih panjang daripada ruang yang tersedia, misalnya judul kegiatan pada jadwal piket. Pemotongan satu baris membutuhkan tiga deklarasi yang bekerja sebagai satu paket. Deklarasi white-space: nowrap melarang teks pindah baris, overflow: hidden menyembunyikan bagian yang meluber, dan text-overflow: ellipsis mengganti bagian terpotong dengan tanda …. Melewatkan salah satu deklarasi membuat dua lainnya tidak menunjukkan hasil apa pun.

css Contoh: pemotongan judul satu baris dengan ellipsis 
.judul-baris {
  white-space: nowrap;      /* larang teks pindah baris */
  overflow: hidden;         /* sembunyikan bagian yang meluber */
  text-overflow: ellipsis;  /* tandai bagian terpotong dengan … */
}

Syarat lainnya ada pada elemennya, yaitu elemen berjenis block atau inline-block dan memiliki lebar terbatas, karena peluberan baru ada bila ada batas. Untuk pemotongan lebih dari satu baris, CSS menyediakan pola -webkit-line-clamp yang menggabungkan display: -webkit-box, -webkit-box-orient: vertical, nilai jumlah baris, dan overflow: hidden. Pola ini didukung browser modern dan lazim digunakan untuk ringkasan artikel dua baris.

Demo berikut menampilkan daftar jadwal piket dalam dua panel. Panel kiri menerapkan ketiga deklarasi pemotongan pada setiap judul, sedangkan panel kanan membiarkan judul mengalir tanpa pemotongan. Jalankan demo, bandingkan kedua panel, lalu perhatikan tanda … pada setiap judul yang terpotong.

Kode sumber demo
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo pemotongan judul satu baris dengan ellipsis</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <main>
    <section class="panel">
      <h2>Dengan pemotongan</h2>
      <ul class="daftar">
        <li class="judul-baris" title="Laporan keuangan bulan November untuk rapat pleno">Laporan keuangan bulan November untuk rapat pleno</li>
        <li class="judul-baris" title="Rencana kegiatan ekstrakurikuler semester genap">Rencana kegiatan ekstrakurikuler semester genap</li>
        <li class="judul-baris" title="Daftar perlengkapan kemping angkatan pertama">Daftar perlengkapan kemping angkatan pertama</li>
      </ul>
    </section>
    <section class="panel">
      <h2>Tanpa pemotongan</h2>
      <ul class="daftar">
        <li>Laporan keuangan bulan November untuk rapat pleno</li>
        <li>Rencana kegiatan ekstrakurikuler semester genap</li>
        <li>Daftar perlengkapan kemping angkatan pertama</li>
      </ul>
    </section>
  </main>

<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 16px;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #1e293b;
  background-color: #f8fafc;
}

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.panel {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px 16px;
}

.panel h2 {
  margin: 0 0 10px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}

.daftar {
  margin: 0;
  padding: 0;
  list-style: none;
}

.daftar li {
  padding: 8px 0;
  border-top: 1px solid #e2e8f0;
}

.judul-baris {
  white-space: nowrap;      /* larang teks pindah baris */
  overflow: hidden;         /* sembunyikan bagian yang meluber */
  text-overflow: ellipsis;  /* tandai bagian terpotong dengan … */
}

</style>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 16px;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #1e293b;
  background-color: #f8fafc;
}

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.panel {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px 16px;
}

.panel h2 {
  margin: 0 0 10px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}

.daftar {
  margin: 0;
  padding: 0;
  list-style: none;
}

.daftar li {
  padding: 8px 0;
  border-top: 1px solid #e2e8f0;
}

.judul-baris {
  white-space: nowrap;      /* larang teks pindah baris */
  overflow: hidden;         /* sembunyikan bagian yang meluber */
  text-overflow: ellipsis;  /* tandai bagian terpotong dengan … */
}

</style></body>
</html>

Tanda elipsis bersifat visual semata, karena teks lengkap tetap berada di HTML. Pemotongan tidak menghapus data, melainkan hanya menyembunyikan tampilan bagian yang tidak muat. Bila judul utuh tetap diperlukan, misalnya saat kursor melayang, atribut title dapat menampung teks lengkapnya tanpa mengubah penataan.

Kesalahan umum#

Kesalahan pertama adalah menulis text-overflow: ellipsis tanpa white-space: nowrap dan overflow: hidden. Tanpa dua deklarasi itu, teks justru pindah baris dengan normal dan tidak ada bagian yang terpotong. Perbaikannya, gunakan ketiga deklarasi bersamaan pada elemen yang sama.

Kesalahan kedua adalah menerapkan pemotongan pada elemen inline seperti span. Elemen inline tidak memiliki kotak yang lebarnya dapat dibatasi, sehingga mekanisme peluberan tidak bekerja. Perbaikannya, ubah display ke block atau inline-block, atau gunakan elemen yang memang berjenis block seperti li.

Kesalahan ketiga adalah menyetel line-height di bawah 1.2 pada teks isi. Baris saling menimpa pada bagian huruf yang naik dan turun, sehingga kata sulit dibaca dan tampilan terasa padat tanpa alasan. Perbaikannya, gunakan rentang 1.4 hingga 1.6 untuk teks isi dan simpan nilai rapat untuk judul yang barisnya pendek.

Ringkasan#

  • line-height tanpa satuan adalah pengali font-size dan diwariskan sebagai angka, sehingga setiap elemen turunan menghitung ulang tinggi barisnya sendiri.
  • letter-spacing ditulis dalam em, dengan spasi positif untuk label kapital dan spasi negatif tipis untuk judul besar.
  • text-transform mengubah tampilan huruf tanpa mengubah isi dokumen, dan text-decoration mengatur garis beserta warna serta ketebalannya.
  • Pemotongan satu baris membutuhkan white-space: nowrap, overflow: hidden, dan text-overflow: ellipsis sekaligus pada elemen block berlebar terbatas.

Referensi#