Perataan Tulisan Dengan CSS

View Categories

Perataan Tulisan Dengan CSS

Text Alignment dan Text Direction

Pada bagian ini akan mempelajari tentang properti berikut:

  • text-align
  • text-align-last
  • direction
  • unicode-bidi
  • vertikal-align

Text Alignment

Properti text-align digunakan untuk mengatur perataan posisi tulisan secara horizontal.

Posisi tulisan dapat diatur dengan nilai properti text-align left, right, center atau justify.

Contoh berikut menampilkan tulisan rata tengah, serta tulisan rata kiri dan kanan (perataan kiri adalah default jika arah tulisan dari kiri ke kanan, dan perataan kanan adalah default jika arah tulisan dari kanan ke kiri):

Contoh

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

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}
</style>
</head>
<body>

<h1>Judul 1 (tengah)</h1>
<h2>Judul 2 (kiri)</h2>
<h3>Judul 3 (kanan)</h3>

<p>Tiga judul di atas rata tengah, kiri, dan kanan.</p>

</body></html>

Jalankan Contoh

Ketika properti text-align diatur ke “justify”, setiap baris direntangkan sehingga setiap baris memiliki lebar yang sama, dan margin kiri dan kanan akan menjadi lurus sejajar (seperti pengaturan tulisan di majalah dan surat kabar):

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 10px;
  width: 200px;
  height: 200px;
  text-align: justify;
}
</style>
</head>
<body>

<h1>Contoh text-align: justify</h1>

<p>Perataan text-align: justify; setiap baris direntangkan sehingga setiap baris memiliki lebar yang sama, dan margin kiri dan kanan akan menjadi lurus sejajar (seperti pengaturan tulisan di majalah dan surat kabar).</p>

<div>
Di tahun-tahun saya masih muda dan masih rentan, ayah saya memberi saya beberapa nasihat yang telah saya ingat sejak saat itu. 'Setiap kali Anda ingin mengkritik seseorang,' katanya kepada diri Anda sendiri, 'ingatlah bahwa tidak semua orang di dunia ini memiliki kelebihan seperti yang Anda miliki.'
</div>

</body></html>

Jalankan Contoh

Properti text-align-last

Properti text-align-last menentukan cara mengatur posisi perataan baris terakhir tulisan.

Contoh

Mengatur posisi perataan baris terakhir tulisan dalam tiga elemen <p> :

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}

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

<h1>Properti text-align-last</h1>

<h2>text-align-last: right:</h2>
<p class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

<h2>text-align-last: center</h2>
<p class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

<h2>text-align-last: justify</h2>
<p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>

</body></html>

Jalankan Contoh

Properti direction

Properti direction dan unicode-bidi dapat digunakan untuk mengubah arah tulisan suatu elemen:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
  direction: rtl;
  unicode-bidi: bidi-override;
}
</style>
</head>
<body>

<p>Ini adalah arah teks default.</p>

<p class="ex1">Ini adalah arah teks dari kanan ke kiri.</p>

</body></html>

Jalankan Contoh

Properti vertical-align

Properti vertical-align mengatur posisi perataan suatu elemen secara vertikal.

Contoh

Menetapkan posisi perataan tulisan dalam gambar secara vertikal:

<!DOCTYPE html>
<html>
<head>
<style>
img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}
</style>
</head>
<body>

<h1>Properti vertical-align</h1>

<h2>vertical-align: baseline (default)</h2>
<p>Gambar <img class="a" src="sqpurple.jpeg" width="9" height="9"> Perataan default.</p>

<h2>vertical-align: text-top</h2>
<p>Gambar <img class="b" src="sqpurple.jpeg" width="9" height="9"> Perataan atas teks.</p>

<h2>vertical-align: text-bottom</h2>
<p>Gambar <img class="c" src="sqpurple.jpeg" width="9" height="9"> Perataan bawah teks.</p>

<h2>vertical-align: sub</h2>
<p>Gambar <img class="d" src="sqpurple.jpeg" width="9" height="9"> Perataan sub.</p>

<h2>vertical-align: super</h2>
<p>Gambar <img class="e" src="sqpurple.jpeg" width="9" height="9"> Perataan super.</p>

</body></html>

Jalankan Contoh

Referensi Semua Properti  Perataan Tulisan

Properti CSS direction

Contoh

Menetapkan arah tulisan dari kanan ke kiri:

<!DOCTYPE html>
<html>
<head>
<style>
p.rtl {
  direction: rtl;
}
</style>
</head>
<body>

<h1>Properti direction</h1>

<p>Teks ini mengarah dari kiri ke kanan. Ini default.</p>

<p class="rtl">Teks ini mengarah dari kanan ke kiri.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti direction menentukan arah tulisan/arah penulisan tulisan dalam suatu elemen.

Properti CSS text-align

Contoh

Menetapkan perataan tulisan untuk berbagai elemen <div> :

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

div.b {
  text-align: left;
}

div.c {
  text-align: right;
} 

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

<h1>Properti text-align</h1>

<div class= "a">
<h2>text-align: center</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

<div class= "b">
<h2>text-align: left</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

<div class= "c">
<h2>text-align: right</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

<div class="d">
<h2>text-align: justify</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti text-align menentukan perataan tulisan secara horizontal dalam suatu elemen.

Contoh

Contoh text-align lainnya:

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

p.date {
  text-align: right;
}

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

<h1>Contoh perataan teks CSS</h1>

<p class="date">Mei, 2014</p>

<p class="main">Di tahun-tahun saya masih muda dan masih rentan, ayah saya memberi saya beberapa nasihat yang telah saya ingat sejak saat itu. 'Setiap kali Anda ingin mengkritik seseorang,' katanya kepada diri Anda sendiri, 'ingatlah bahwa tidak semua orang di dunia ini memiliki kelebihan seperti yang Anda miliki.'</p>

<p><b>Catatan:</b> Ubah ukuran jendela browser untuk melihat cara kerja nilai text-align: justify.</p>

</body></html>

Jalankan Contoh

Properti CSS text-align-last

Contoh

Menentukan posisi perataan baris terakhir tulisan dalam tiga elemen <div> :

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
  text-align: justify; /* For Edge */
  -moz-text-align-last: right; /* For Firefox prior 58.0 */
  text-align-last: right;
}

div.b {
  text-align: justify; /* For Edge */
  -moz-text-align-last: center; /* For Firefox prior 58.0 */
  text-align-last: center;
}

div.c {
  text-align: justify; /* For Edge */
  -moz-text-align-last: justify; /* For Firefox prior 58.0 */
  text-align-last: justify;
}
</style>
</head>
<body>

<h1>Properti text-align-last</h1>

<h2>text-align-last: right</h2>
<div class= "a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

<h2>text-align-last: center</h2>
<div class= "b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

<h2>text-align-last: justify</h2>
<div class= "c">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti text-align-last menentukan posisi perataan baris terakhir pada tulisan.

Perhatikan bahwa properti text-align-last mengatur perataan untuk semua baris terakhir dalam elemen yang dipilih. Jadi, jika memiliki <div> dengan tiga paragraf di dalamnya, text-align-last akan diterapkan ke baris terakhir SETIAP paragraf. Untuk menggunakan text-align-last hanya pada paragraf terakhir, dapat menggunakan :last child.

Contoh

Gunakan text-align-last hanya pada baris terakhir:

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
  text-align: justify; /* For Edge */
  -moz-text-align-last: center; /* For Firefox prior 58.0 */
  text-align-last: center;
}

div.b {
  text-align: justify; /* For Edge */
}

div.b p:last-child {
  -moz-text-align-last: center; /* For Firefox prior 58.0 */
  text-align-last: center;
}
</style>
</head>
<body>

<h1>Properti text-align-last</h1>

<h2>text-align-last: center (mempengaruhi semua paragraf):</h2>
<div class= "a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

<h2>text-align-last: center; Hanya untuk paragraf terakhir:</h2>
<div class= "b">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Etiam semper diam di erat pulvinar, di pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</div>

</body></html>

Jalankan Contoh

Properti CSS unicode-bidi

Contoh

Ganti tulisan:

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  direction: rtl;
  unicode-bidi: bidi-override;
}
</style>
</head>
<body>

<h1>Properti unicode-bidi</h1>

<div>Arah penulisan default.</div>
<div class="ex1">Arah penulisan kanan ke kiri.</div>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti unicode-bidi digunakan bersama dengan properti direction untuk mengatur atau mengembalikan apakah tulisan harus diganti untuk mendukung beberapa bahasa dalam dokumen yang sama.

Properti CSS direction

Contoh

Menetapkan arah tulisan dari kanan ke kiri:

<!DOCTYPE html>
<html>
<head>
<style>
p.rtl {
  direction: rtl;
}
</style>
</head>
<body>

<h1>Properti direction</h1>

<p>Teks ini mempunyai arah dari kiri ke kanan. Ini default.</p>

<p class="rtl">Teks ini mempunyai arah dari kanan ke kiri.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti direction menentukan arah tulisan/arah penulisan dalam suatu elemen.

Catatan: Gunakan properti ini bersama dengan properti unicode-bidi untuk mengatur atau mengembalikan apakah tulisan harus diganti untuk mendukung beberapa bahasa dalam dokumen yang sama.

Properti CSS vertical-align

Contoh

Menetapkan perataan gambar menjadi sejajar secara vertikal:

<!DOCTYPE html>
<html>
<head>
<style>
img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}
</style>
</head>
<body>

<h1>Properti vertical-align</h1>

<h2>vertical-align: baseline (default)</h2>
<p>Gambar <img class="a" src="sqpurple.jpeg" width="9" height="9"> Perataan default.</p>

<h2>vertical-align: text-top</h2>
<p>Gambar <img class="b" src="sqpurple.jpeg" width="9" height="9"> Perataan atas teks.</p>

<h2>vertical-align: text-bottom</h2>
<p>Gambar <img class="c" src="sqpurple.jpeg" width="9" height="9"> Perataan bawah teks.</p>

<h2>vertical-align: sub</h2>
<p>Gambar <img class="d" src="sqpurple.jpeg" width="9" height="9"> Perataan sub.</p>

<h2>vertical-align: super</h2>
<p>Gambar <img class="e" src="sqpurple.jpeg" width="9" height="9"> Perataan super.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti vertical-align mengatur perataan tulisan secara vertikal dalam suatu elemen.

Tutorial sebelumnya : Mengatur Warna Tulisan Dengan CSS
Tutorial setelahnya : Dekorasi Tulisan Dengan CSS
Semua Tutorial CSS : Tutorial CSS 

Tinggalkan Balasan