Beranda / CSS / Pemrograman / Web

Mengenal CSS Text Alignment (Tutorial CSS Part 32)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 32 : Logo CSS

Cara Mengatur Posisi dan Arah Teks dengan Mudah

Saat membuat tampilan web, teks adalah elemen penting yang harus ditata dengan rapi. Salah satu cara menatanya adalah dengan CSS Text Alignment, yaitu sekumpulan properti CSS yang bisa mengatur posisi dan arah teks di halaman. Artikel ini akan membahas berbagai teknik alignment teks mulai dari arah horizontal, vertikal, sampai tabel properti lengkap yang bisa kamu gunakan.

Yuk, langsung kita bahas satu per satu!

1. Text Alignment dan Text Direction: Apa Bedanya?

Sebelum masuk ke teknis, kita harus bedain dulu antara text alignment dan text direction.

  • Text Alignment: Ini soal posisi teks secara horizontal. Mau rata kiri, rata kanan, tengah, atau justified.
  • Text Direction: Ini soal arah bacaan teks. Misalnya dari kiri ke kanan (default-nya bahasa Indonesia dan Inggris) atau kanan ke kiri (kayak bahasa Arab atau Ibrani).

Jadi, alignment itu soal "teksnya rata ke mana", sedangkan direction itu "teksnya dibaca dari arah mana".

2. Text Alignment

Properti text-align digunakan untuk mengatur posisi teks secara horizontal di dalam elemen. Nilai-nilainya antara lain: 

p {
  text-align: left;     /* Rata kiri (default) */
  text-align: right;    /* Rata kanan */
  text-align: center;   /* Tengah */
  text-align: justify;  /* Rata kiri dan kanan */
}

Contoh Penggunaan:

<p style="text-align: center;">Teks ini akan ditampilkan di tengah.</p>

Justify sering dipakai di artikel karena bikin tampilan teks lebih rapi kayak koran.

Contoh HTML + CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    .tengah {
      text-align: center;
    }

    .justify {
      text-align: justify;
    }
  </style>
</head>
<body>

  <h2 class="tengah">Teks Ini Ditampilkan di Tengah</h2>

  <p class="justify">
    Ini adalah paragraf yang menggunakan text-align: justify.
    Baris teks akan diratakan ke kiri dan ke kanan seperti pada koran.
  </p>

</body>
</html>

Hasilnya:

Contoh CSS Text Alignment
Gambar 32.1 : Contoh CSS Text Alignment

3. Text Align Last

Properti text-align-last digunakan untuk mengatur posisi baris terakhir dari teks yang dibungkus dalam justify.

Contoh Penggunaan:

p {
  text-align: justify;
  text-align-last: right;
}

Ini artinya semua baris akan justify, tapi baris terakhir akan rata kanan.

Contoh HTML + CSS :

<!DOCTYPE html>
<html>
<head>
  <style>
    .teks {
      width: 100%;
      text-align: justify;
      text-align-last: right;
    }
  </style>
</head>
<body>

  <p class="teks">
    Paragraf ini menggunakan text-align: justify untuk meratakan teks kiri dan kanan,
    tetapi baris terakhirnya akan rata kanan berkat text-align-last: right.
  </p>

</body>
</html>
<

Hasilnya:

Contoh CSS Text Align Last
Gambar 32.2 : Contoh CSS Text Align Last

4. Text Direction

Arah teks bisa diatur dengan properti direction dan unicode-bidi.

Contoh Penggunaan:

div {
  direction: rtl; /* Right to left */
  unicode-bidi: bidi-override;
}

Ini berguna untuk menampilkan bahasa seperti Arab atau Ibrani di situs kamu. Tanpa unicode-bidi, teks RTL bisa kelihatan kacau kalau dicampur dengan teks LTR.

Contoh HTML + CSS :

<!DOCTYPE html>
<html>
<head>
  <style>
    .rtl-text {
      direction: rtl;
      unicode-bidi: bidi-override;
      background-color: #f2f2f2;
      padding: 10px;
    }
  </style>
</head>
<body>

  <div class="rtl-text">
   Contoh Teks Kanan ke kiri.
  </div>

</body>
</html>

Hasilnya:

Contoh CSS Text Direction
Gambar 32.3 : Contoh CSS Text Direction

5. Vertical Alignment

Kalau text-align itu untuk horizontal, nah vertical-align ini untuk mengatur posisi elemen inline secara vertikal. Cocok untuk elemen-elemen kayak gambar dalam teks.

Nilai-nilai umum:

  • top
  • middle
  • bottom
  • baseline
  • sub, super

Contoh:

<img src="icon.png" style="vertical-align: middle;"> Teks di sini

Gambar akan rata tengah terhadap teks.

Catatan: vertical-align hanya bekerja pada elemen inline atau inline-block, bukan blok biasa kayak <div>.

Contoh HTML + CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    .ikon {
      vertical-align: bottom;
      width: 5px;
    }
  </style>
</head>
<body>

  <p>
    <img src="ikon.gif" class="ikon" alt="ikon">
    Ini adalah teks dengan gambar yang rata bawah terhadap teks.
  </p>

</body>
</html>

Hasilnya:

Contoh CSS Vertical Alignment
Gambar 32.4 : Contoh CSS Vertical Alignment

6. Tabel Properti CSS Teks Alignment & Direction

Properti Keterangan Nilai Umum
text-align Mengatur perataan horizontal teks left, right, center, justify
text-align-last Mengatur perataan baris terakhir (untuk justify) left, right, center, justify, start, end
direction Mengatur arah baca teks ltr (kiri ke kanan), rtl (kanan ke kiri)
unicode-bidi Digunakan bersamaan dengan direction untuk teks campuran normal, embed, bidi-override
vertical-align Mengatur posisi vertikal elemen inline top, middle, bottom, baseline, dll

Kesimpulan

Mengatur alignment teks bukan cuma soal estetika, tapi juga soal kenyamanan baca. CSS menyediakan banyak tools buat itu: dari text-align, direction, sampai vertical-align. Jadi, pastikan kamu menggunakan properti ini dengan tepat sesuai konteks desain dan kebutuhan user.

Kalau kamu sering ngoding layout, paham tentang alignment ini akan sangat memudahkan kamu bikin halaman yang rapi dan enak dilihat. Yuk, langsung coba praktikkan di project-mu!

Posting Komentar untuk "Mengenal CSS Text Alignment (Tutorial CSS Part 32)"