Articles
Pengenalan ke CSS
Properti CSS terkait dengan jarak teks

Properti CSS terkait dengan jarak teks

Artikel ini menjelaskan properti CSS yang terkait dengan jarak teks.

Anda dapat mempelajari cara penggunaan dan penulisan properti seperti line-height dan word-spacing.

YouTube Video

Membuat HTML untuk pratinjau

css-text-space.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-text-space.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Text-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Text-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>line-height</h3>
 23            <section>
 24                <header><h4>line-height: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="line-height-normal">This is a paragraph with normal line height.</p>
 27                </section>
 28                <header><h4>line-height: 1.5</h4></header>
 29                <section class="sample-view">
 30                    <p class="line-height-150">This is a paragraph with 1.5 line height.</p>
 31                </section>
 32                <header><h4>line-height: 200%</h4></header>
 33                <section class="sample-view">
 34                    <p class="line-height-200">This is a paragraph with 200% line height.</p>
 35                </section>
 36            </section>
 37        </article>
 38        <article>
 39            <h3>letter-spacing</h3>
 40            <section>
 41                <header><h4>letter-spacing: normal</h4></header>
 42                <section class="sample-view">
 43                    <p class="letter-spacing-normal">This is text with normal letter spacing.</p>
 44                </section>
 45                <header><h4>letter-spacing: 4px</h4></header>
 46                <section class="sample-view">
 47                    <p class="letter-spacing-wide">This is text with wide letter spacing.</p>
 48                </section>
 49                <header><h4>letter-spacing: -1px</h4></header>
 50                <section class="sample-view">
 51                    <p class="letter-spacing-narrow">This is text with narrow letter spacing.</p>
 52                </section>
 53            </section>
 54        </article>
 55        <article>
 56            <h3>word-spacing</h3>
 57            <section>
 58                <header><h4>word-spacing: normal</h4></header>
 59                <section class="sample-view">
 60                    <p class="word-spacing-normal">This is text with normal word spacing.</p>
 61                </section>
 62                <header><h4>word-spacing: 4px</h4></header>
 63                <section class="sample-view">
 64                    <p class="word-spacing-wide">This is text with wide word spacing.</p>
 65                </section>
 66                <header><h4>word-spacing: -1px</h4></header>
 67                <section class="sample-view">
 68                    <p class="word-spacing-narrow">This is text with narrow word spacing.</p>
 69                </section>
 70                <header><h4>word-spacing: -0.1em; letter-spacing: -0.05em;</h4></header>
 71                <section class="sample-view">
 72                    <p class="word-and-letter-spacing">This is text with word and letter spacing.</p>
 73                </section>
 74            </section>
 75        </article>
 76        <article>
 77            <h3>word-break</h3>
 78            <section>
 79                <header><h4>word-break: normal</h4></header>
 80                <section class="sample-view">
 81                    <p class="box word-break-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 82                </section>
 83                <header><h4>word-break: break-all</h4></header>
 84                <section class="sample-view">
 85                    <p class="box word-break-break-all">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 86                </section>
 87                <header><h4>word-break: keep-all</h4></header>
 88                <section class="sample-view">
 89                    <p class="box word-break-keep-all">&#12371;&#12428;&#12399;&#26085;&#26412;&#35486;&#12398;&#25991;&#31456;&#12391;&#12377;&#12290;&#12371;&#12398;&#35373;&#23450;&#12391;&#12399;&#33258;&#28982;&#12395;&#25913;&#34892;&#12373;&#12428;&#12414;&#12377;&#12290;</p>
 90                </section>
 91            </section>
 92        </article>
 93        <article>
 94            <h3>hyphens</h3>
 95            <section>
 96                <header><h4>hyphens: none</h4></header>
 97                <section class="sample-view">
 98                    <p class="no-hyphens">
 99                        Supercalifragilisticexpialidocious is a very long word.
100                    </p>
101                </section>
102                <header><h4>HTML</h4></header>
103<pre>
104&lt;p class="no-hyphens"&gt;
105    Supercalifragilisticexpialidocious is a very long word.
106&lt;/p&gt;
107</pre>
108                <header><h4>hyphens: manual</h4></header>
109                <section class="sample-view">
110                    <p class="manual-hyphens">
111                        Super&shy;califragilistic&shy;expialidocious is a very long word.
112                    </p>
113                </section>
114                <header><h4>HTML</h4></header>
115<pre>
116&lt;p class="manual-hyphens"&gt;
117    Super&amp;shy;califragilistic&amp;shy;expialidocious is a very long word.
118&lt;/p&gt;
119</pre>
120                <header><h4>hyphens: auto</h4></header>
121                <section class="sample-view">
122                    <p class="auto-hyphens">
123                        Supercalifragilisticexpialidocious is a very long word.
124                    </p>
125                </section>
126                <header><h4>HTML</h4></header>
127<pre>
128&lt;p class="auto-hyphens"&gt;
129    Supercalifragilisticexpialidocious is a very long word.
130&lt;/p&gt;
131</pre>
132            </section>
133        </article>
134    </main>
135</body>
136</html>

Tipografi (Terkait Margin Teks)

Properti line-height 

 1/* Line height examples */
 2.line-height-normal {
 3    line-height: normal; /* Default line height */
 4}
 5
 6.line-height-150 {
 7    line-height: 1.5; /* 1.5 times the font size */
 8}
 9
10.line-height-200 {
11    line-height: 200%; /* 200% of the font size */
12}

line-height adalah properti CSS yang digunakan untuk mengatur jarak antar garis (tinggi garis). line-height menentukan ruang vertikal antar garis, yang digunakan untuk meningkatkan keterbacaan atau menyesuaikan jarak sebagai bagian dari desain.

Penggunaan utama dari line-height

Angka tanpa satuan 
1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}
  • Tetapkan tinggi relatif terhadap ukuran huruf. Misalnya, jika ditentukan 1.5, tinggi garis akan menjadi 1.5 kali ukuran huruf. Metode ini berguna untuk desain responsif.
Persentase 
1p {
2    line-height: 150%;
3}
  • Tetapkan tinggi garis sebagai persentase dari ukuran huruf. Misalnya, jika ditentukan 150%, tinggi garis akan menjadi 150% dari ukuran huruf.
Nilai tetap (px, em, rem, dll.) 
1p {
2    line-height: 20px;
3}
  • Tetapkan tinggi garis dalam satuan absolut. Misalnya, Anda dapat menetapkan nilai konkret seperti 20px, tetapi mungkin kurang fleksibel untuk desain responsif.
normal 
1p {
2    line-height: normal;
3}
  • Menentukan normal akan menerapkan pengaturan jarak garis standar dari browser. Biasanya, jarak garis akan sekitar 1.2 hingga 1.4 kali ukuran huruf.

Contoh Penggunaan line-height

Paragraf yang dapat dibaca
  • Tinggi garis sekitar 1.5 hingga 1.6 biasanya direkomendasikan untuk keterbacaan. Jika jarak garis terlalu sempit, teks akan terasa penuh dan sulit dibaca, dan jika terlalu lebar, teks akan terasa terputus-putus.
Desain judul
  • Untuk heading dan judul, di mana teks lebih besar, jarak garis dapat dikurangi. Pengaturan seperti 1.1 atau 1.2 sering digunakan.

Ringkasan

  • line-height adalah properti penting untuk meningkatkan keterbacaan maupun desain teks.
  • Menggunakan nilai relatif (angka atau persentase) mempermudah penyesuaian dengan desain responsif.
  • Untuk heading dengan teks besar dan paragraf dengan teks lebih kecil, penting untuk mengatur jarak garis yang sesuai untuk masing-masing.

Memanfaatkan properti ini dapat membuat tampilan teks lebih mudah dibaca dan meningkatkan kualitas desainnya.

Properti letter-spacing 

 1/* Letter spacing examples */
 2.letter-spacing-normal {
 3    letter-spacing: normal; /* Default letter spacing */
 4}
 5
 6.letter-spacing-wide {
 7    letter-spacing: 4px; /* Increase letter spacing */
 8}
 9
10.letter-spacing-narrow {
11    letter-spacing: -1px; /* Decrease letter spacing */
12}

letter-spacing adalah properti CSS yang digunakan untuk menyesuaikan jarak antar karakter (jarak huruf). Properti ini dapat digunakan untuk merapikan desain teks, meningkatkan keterbacaan, dan mencapai gaya tertentu.

Dalam contoh ini, ditentukan seperti berikut.

  • normal: Spasi huruf default. Ini adalah nilai standar yang ditentukan oleh browser dan font.
  • 4px: Contoh spasi huruf yang diperlebar. Menambahkan ruang sebesar 4 piksel di antara setiap karakter.
  • -1px: Contoh spasi huruf yang dipersempit. Mengurangi ruang sebesar 1 piksel di antara setiap karakter.

Cara Menggunakan letter-spacing

Nilai dengan satuan 
1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}
  • Mengatur nilai positif akan memperbesar spasi huruf.
  • Mengatur nilai negatif akan mempersempit spasi huruf.
  • Satuan biasanya dalam bentuk px (piksel) atau em.
Default: normal 
1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}
  • Gunakan jarak huruf bawaan. Biasanya, jarak huruf standar yang ditentukan oleh font akan diterapkan.

Contoh penggunaan letter-spacing

  • Peningkatan keterbacaan: Untuk ukuran huruf kecil atau font yang terlalu padat, Anda dapat meningkatkan keterbacaan dengan menambahkan letter-spacing.
  • Penyesuaian desain: Anda dapat menyesuaikan jarak huruf untuk menonjolkan elemen desain seperti judul atau logo.
  • Penyesuaian antar kata: Anda dapat menyesuaikan jarak pada level huruf, bukan antar kata. letter-spacing menyesuaikan jarak antar huruf, tetapi gunakan word-spacing untuk memperluas jarak antar kata.
  • Keseimbangan desain: Jika Anda meningkatkan jarak huruf terlalu banyak, keseluruhan teks mungkin terlihat terlalu melebar. Sebaliknya, jika Anda menguranginya terlalu banyak, teks bisa menjadi terlalu padat dan sulit dibaca, sehingga penting untuk menjaga keseimbangan yang sesuai.

Ringkasan

  • letter-spacing adalah properti yang menyesuaikan jarak antar huruf, memengaruhi baik desain maupun keterbacaan.
  • Anda dapat meningkatkan jarak huruf dengan nilai positif dan menguranginya dengan nilai negatif.
  • Ini efektif untuk judul dan elemen desain tertentu, tetapi berhati-hatilah agar tidak mengorbankan keterbacaan.

Dengan menggunakan properti ini, Anda dapat menyesuaikan tampilan teks dan menciptakan desain yang menarik.

Properti word-spacing 

 1/* Word spacing examples */
 2.word-spacing-normal {
 3    word-spacing: normal; /* Default word spacing */
 4}
 5
 6.word-spacing-wide {
 7    word-spacing: 4px; /* Increase word spacing */
 8}
 9
10.word-spacing-narrow {
11    word-spacing: -1px; /* Decrease word spacing */
12}
13
14.word-and-letter-spacing {
15    word-spacing: -0.1em;
16    letter-spacing: -0.05em;
17}

word-spacing adalah properti CSS yang mengontrol jarak antar kata dalam sebuah teks. Penggunaan properti ini dengan tepat dapat meningkatkan keseimbangan visual dan keterbacaan teks. word-spacing sangat berguna dalam desain yang berfokus pada tipografi dan skenario desain responsif.

Dalam contoh ini, ditentukan seperti berikut.

  • normal: Menerapkan jarak kata bawaan. Ini adalah nilai awal dari browser.
  • 4px: Contoh jarak antar kata yang diperbesar. Menambahkan margin sebesar 4 piksel di antara setiap kata.
  • -1px: Contoh jarak antar kata yang dikurangi. Mengurangi jarak antar kata sebesar 1 piksel.
  • word-and-letter-spacing: Contoh pengurangan jarak antar kata dan huruf. Mengurangi jarak antar kata sebesar 0.1em dan antar huruf sebesar 0.05em dibandingkan dengan normal.

Menggunakan Nilai Positif dan Negatif

Menetapkan nilai positif untuk word-spacing akan memperluas jarak antar kata. Sebaliknya, menggunakan nilai negatif akan mempersempit ruang di antara kata-kata. Nilai negatif dapat digunakan untuk menonjolkan efek visual atau mempersempit spasi huruf untuk alasan desain tertentu.

Perbedaan dengan letter-spacing

word-spacing adalah properti yang mengatur ruang di antara kata-kata, sedangkan letter-spacing mengatur ruang di antara huruf-huruf. Dengan menggabungkan properti-properti ini, Anda dapat memiliki kontrol yang lebih tepat atas tipografi seluruh teks.

Peringatan dan Praktik Terbaik

  • Penyesuaian Spasi Berlebihan: Penggunaan berlebihan pada word-spacing dapat menurunkan keterbacaan. Terutama jika ruang terlalu besar atau terlalu kecil, hal itu dapat membuat pengguna merasa tidak nyaman, sehingga penyesuaian yang moderat menjadi penting.
  • Desain Responsif: Menentukan nilai relatif menggunakan em atau rem efektif untuk desain responsif karena memastikan tampilan yang tepat di berbagai ukuran layar.
  • Penyesuaian Gaya Judul: Dengan memperlebar ruang antara kata-kata dalam teks judul, Anda dapat menambahkan penekanan visual. Ini memungkinkan Anda untuk memperjelas hierarki konten dan mencapai desain yang elegan.

Properti word-break 

 1p.box {
 2    width: 200px;
 3    border: 1px solid #000;
 4    margin-bottom: 20px;
 5}
 6
 7.word-break-normal {
 8    word-break: normal;
 9}
10
11.word-break-break-all {
12    word-break: break-all;
13}
14
15.word-break-keep-all {
16    word-break: keep-all;
17}

word-break adalah properti CSS yang mengontrol bagaimana teks terbungkus ketika melebihi lebar kontainer. Biasanya, browser memecah baris pada batas kata, tetapi pengaturan tertentu dapat meningkatkan tampilan dan keterbacaan saat ada kata-kata panjang atau URL.

Anda dapat menentukan nilai-nilai berikut untuk properti word-break.

  • normal

    normal adalah nilai bawaan. Ketika sebuah kata melebihi lebar kontainer, kata tersebut akan terputus pada batas kata. Pengaturan ini umum untuk bahasa seperti Inggris, dan pemutusan tidak terjadi di tengah kata.

  • break-all

    break-all adalah pengaturan di mana pemutusan baris dapat diterapkan setelah karakter apa pun, sesuai kebutuhan. Terutama ketika kata-kata panjang atau URL disertakan, pemutusan baris terjadi pada tingkat karakter untuk mencegah gangguan tata letak.

  • keep-all

    keep-all adalah pengaturan yang khusus digunakan untuk bahasa Asia (Jepang, Cina, Korea, dll.). Dalam pengaturan ini, seluruh kata dipertahankan, dan tidak ada pemutusan di tengah kata. Namun, untuk bahasa dengan spasi seperti Inggris, pemutusan baris sesuai batas kata normal diterapkan.

Contoh ini menunjukkan tiga pengaturan word-break yang berbeda. Dengan word-break-normal, seluruh kata dipertahankan dan terputus pada batas kata jika melebihi lebar kontainer. Dengan word-break-break-all, pemutusan terjadi bahkan di tengah kata. word-break-keep-all memungkinkan pemutusan alami untuk bahasa Asia seperti Jepang dan pemutusan batas kata untuk bahasa Inggris.

Skenario Aplikasi word-break

Perangkat Mobile dan Desain Responsif 

1@media (max-width: 600px) {
2  p {
3    word-break: break-all;
4  }
5}

Pada perangkat seluler, lebar layar terbatas, yang dapat menyebabkan teks termasuk URL atau kata-kata panjang melebihi lebar layar. Dalam kasus seperti ini, menggunakan word-break: break-all; memungkinkan pemutusan baris pada tingkat karakter untuk menyesuaikan lebar layar, meningkatkan keterbacaan.

hyphens Properti 

 1p.no-hyphens {
 2    width: 200px;
 3    hyphens: none;
 4}
 5
 6p.manual-hyphens {
 7    width: 200px;
 8    hyphens: manual;
 9}
10
11p.auto-hyphens {
12    width: 200px;
13    hyphens: auto;
14}

  • Properti hyphens digunakan dalam CSS untuk menentukan bagaimana pemenggalan kata (memisahkan kata dengan tanda hubung) harus ditangani saat memecah baris teks. Dengan mengatur properti ini dengan tepat, Anda dapat meningkatkan keterbacaan dan tampilan teks. Pemenggalan kata sangat berguna ketika kata-kata panjang perlu dipisahkan.

  • Karena aturan pemenggalan kata berbeda-beda tergantung bahasa, properti ini bergantung pada lokal teksnya.

Sintaksis 

1element {
2    hyphens: none | manual | auto;
3}

Properti hyphens dapat diatur dengan nilai-nilai berikut:.

  • none: Tidak ada pemenggalan kata yang diterapkan. Kata-kata biasanya hanya akan dipisahkan di akhir kata.
  • manual: Pemenggalan kata diterapkan secara manual. Dalam kasus ini, Anda perlu menetapkan titik pemenggalan kata secara manual dalam HTML. Contohnya, Anda dapat menggunakan &shy; (pemenggal lunak).
  • auto: Peramban secara otomatis menerapkan pemenggalan kata di posisi yang sesuai. Dalam kasus ini, bahasa dokumen (atribut lang) harus ditentukan dengan benar.

Catatan

  • Pentingnya Pengaturan Bahasa: Saat menggunakan hyphens: auto;, pemenggalan kata yang benar memerlukan atribut lang pada dokumen HTML diatur dengan tepat.
  • Ketergantungan pada Font: Beberapa font mungkin tidak cocok untuk pemenggalan kata.
  • Penggunaan Kamus Pemenggalan Kata: Aturan pemenggalan kata bergantung pada kamus yang digunakan oleh peramban. Oleh karena itu, mungkin tidak bekerja sebagaimana diharapkan untuk bahasa tertentu.

Ringkasan

Dengan menggunakan properti hyphens dengan tepat, Anda dapat secara signifikan meningkatkan tata letak teks. Terutama untuk situs web multibahasa dan desain ramah seluler, menggunakan auto dan manual dengan tepat dapat meningkatkan pengalaman pengguna.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Properti CSS terkait teksProperti CSS untuk Tampilan Kode dan Kutipan