Mengatur jarak tulisan di html

Question

Untuk mengatur jarak antara huruf pada website digunakan properties letter-spacing. Kemudian diikuti value. Untuk satuan nilai bisa digunakan px, em dan %. Sebagai contoh format penulisan jarak anar huruf bisa di perhatikan di bawah ini.

Table of Contents Show

Letter spacing dengan satuan normal
Letter spacing dengan satuan px
Letter spacing dengan satuan em
Letter spacing dengan satuan mm
Mengatur Jarak (Spasi) Antar Kata
Word spacing dengan satuan normal
Word spacing dengan satuan px
Word spacing dengan satuan em
Word spacing dengan satuan mm
Penggunaan Word Spacing Dan Kaitannya Dengan Text Align Justify
Apa itu pada HTML?
Apa itu Line
Apa CSS property untuk mengatur jarak antar baris?

Kali ini kita akan mempelajari cara mengubah jarak baris dan jarak spasi antar kata pada tampilan HTML. Dua properti yang akan kita gunakan adalah word-spacing dan line-height. Word-spacing digunakan untuk menentukan spasi atau jarak antar kata. Sedangkan line-height digunakan untuk mengatur jarak antara tiap baris. Contoh kode CSS-nya lihat di bawah ini.

p{
    margin-bottom : 2px;
    margin-top : 2px;
}

.styleku{
    width : 300px;
    height : auto;
    background : yellow;
}

.styleku *{
    width : auto;
    height : auto;
    background : green;
}

.styleku1{
    line-height : 1;
    word-spacing : 1em;
}

.styleku2{
    line-height : 2;
    word-spacing : 2em;
}

.styleku3{
    line-height : 1;
    word-spacing : 2em;
}

.styleku4{
    line-height : 2;
    word-spacing : 1em;
}

Kode HTML-nya bisa kalian buat sendiri. Kalian juga bisa menggunakan kode HTML di bawah ini jika malas mengetik.

<HTML>
<HEAD>
    <TITLE>Belajar HTML</TITLE>
    <link rel="stylesheet" href="cssku.css">
</HEAD>
<BODY>
<h3>Belajar HTML</h3>
    <div class="styleku">
        <div class="styleku1">
            <p>Ini kalimat ke-1. Ini kalimat ke-2. Ini kalimat ke-3. Ini kalimat ke-4. Ini paragraf pertama.
            </p>
        </div>

        <div class="styleku2">
            <p>Ini kalimat ke-1. Ini kalimat ke-2. Ini kalimat ke-3. Ini kalimat ke-4. Ini paragraf pertama.
            </p>
        </div>

        <div class="styleku3">
            <p>Ini kalimat ke-1. Ini kalimat ke-2. Ini kalimat ke-3. Ini kalimat ke-4. Ini paragraf pertama.
            </p>
        </div>
  
        <div class="styleku4">
            <p>Ini kalimat ke-1. Ini kalimat ke-2. Ini kalimat ke-3. Ini kalimat ke-4. Ini paragraf pertama.
            </p>
        </div>
    </div>
</BODY>
</HTML>

Nilai-nilai yang bisa diberikan pada line-height dan word spacing, yaitu :

normal
initial
inherit
Panjang berupa angka dengan satuan px, cm, pt, em, dll.

Khusus untuk line-height, penulisan angka tanpa satuan bisa berarti kelipatan dari ukuran normal. Dalam hal ini, nilai 2 berbeda dengan 2px, 2cm, 2em, dan 2pt.

Jarak (spasi) antar huruf adalah ruang kosong yang menghubungkan huruf satu dan huruf lain di sebelahnya agar tersusun rata sesuai dengan nilai jarak yang sudah ditetapkan. Sedangkan jarak (spasi) pada kata merupakan ruang kosong yang menghubungkan antara kata satu dengan lainnya pada suatu paragraf. Jarak atau spasi pada huruf dan kata mempunyai peranan penting di dalam menyusun suatu halaman web. Pengaturan jarak spasi pada huruf dan kata akan memberikan kemudahan bagi pengunjung untuk membaca dan memahami konten yang disajikan.

Mungkin suatu waktu, anda menemukan suatu jenis font yang unik dan cocok untuk digunakan sebagai font (huruf) utama pada halaman web. Namun terdapat kendala bahwa jenis font tersebut memiliki spasi huruf yang terlalu dekat dan rapat. Anda tidak perlu khawatir, dengan menggunakan properti letter-spacing agar jarak antar huruf dapat diatur sesuai dengan keinginan.

Pengaturan jarak antar huruf pada suatu paragraf dapat menggunakan properti letter-spacing. Properti ini akan menerapkan nilai kerapatan huruf dengan berbagai nilai satuan. Satuan absolute yang dapat digunakan seperti px, pt, mm, cm, in dan lainnya. Namun untuk satuan relative yang dapat digunakan hanya satuan em, sedangkan satuan persentase (%) tidak akan mengubah nilai dari letter spacing.

Pemberian nilai negatif akan membuat huruf terlihat berhimpitan satu sama lain, sedangkan pemberian nilai positif akan membuat jarak huruf terlihat semakin renggang.

letter-spacing: normal | value | inherit;

Nilai normal merupakan nilai yang diberikan agar jarak antar huruf dalam keadaan default. Nilai inherit akan menjadikan nilai letter spacing sesuai dengan elemen induknya.

Sebagai contoh misalnya :

letter-spacing: 2px;
letter-spacing: 1mm;
letter-spacing: 2pt;
letter-spacing: 0.1in;

Berikut contoh letter spacing dengan variasi nilai dalam beberapa satuan :

Letter Spacing

Letter spacing dengan satuan normal

Paragraf ini menggunakan spasi huruf dengan nilai normal..

Letter spacing dengan satuan px

1.Paragraf ini menggunakan spasi huruf dengan nilai -3px.

2.Paragraf ini menggunakan spasi huruf dengan nilai 1px.

3.Paragraf ini menggunakan spasi huruf dengan nilai 3px.

4.Paragraf ini menggunakan spasi huruf dengan nilai 6px.

5.Paragraf ini menggunakan spasi huruf dengan nilai 9px.

Letter spacing dengan satuan em

1.Paragraf ini menggunakan spasi huruf dengan nilai -0.3em.

2.Paragraf ini menggunakan spasi huruf dengan nilai 0.1em.

3.Paragraf ini menggunakan spasi huruf dengan nilai 0.2em.

4.Paragraf ini menggunakan spasi huruf dengan nilai 0.3em.

5.Paragraf ini menggunakan spasi huruf dengan nilai 0.4em.

6.Paragraf ini menggunakan spasi huruf dengan nilai 0.5em.

7.Paragraf ini menggunakan spasi huruf dengan nilai 0.6em.

Letter spacing dengan satuan mm

1.Paragraf ini menggunakan spasi huruf dengan nilai -1mm.

2.Paragraf ini menggunakan spasi huruf dengan nilai 1mm.

3.Paragraf ini menggunakan spasi huruf dengan nilai 2mm.

4.Paragraf ini menggunakan spasi huruf dengan nilai 3mm.

5.Paragraf ini menggunakan spasi huruf dengan nilai 4mm.

6.Paragraf ini menggunakan spasi huruf dengan nilai 5mm.

7.Paragraf ini menggunakan spasi huruf dengan nilai 6mm.

Mengatur Jarak (Spasi) Antar Kata

Word spacing pada CSS merupakan properti yang digunakan untuk memberikan ruang (spasi) antara satu kata dengan lainnya pada suatu paragraf. Word spacing akan efektif pada setiap spasi putih yang berada pada suatu paragraf. Di mana lebar jarak spasi putih tersebut ditentukan oleh nilai dari properti dari word-spacing.

Nilai satuan word-spacing dapat menggunakan satuan px, pt, mm, em dan lainnya. Nilai yang dimasukkan dapat menggunakan nilai positif dan juga nilai negatif. Nilai negatif akan menghasilkan kata satu dengan lainnya menjadi saling berhimpitan.

word-spacing: normal | value | inherit;

Sebagai contoh misalnya :

word-spacing: 10px;
word-spacing: 10mm;
word-spacing: 1em;

Berikut contoh word spacing dengan variasi nilai dalam beberapa nilai satuan :

Word Spacing

Word spacing dengan satuan normal

Paragraf ini menggunakan spasi kata dengan nilai normal..

Word spacing dengan satuan px

1.Paragraf ini menggunakan spasi kata dengan nilai -5px.

2.Paragraf ini menggunakan spasi kata dengan nilai 1px.

3.Paragraf ini menggunakan spasi kata dengan nilai 3px.

4.Paragraf ini menggunakan spasi kata dengan nilai 6px.

5.Paragraf ini menggunakan spasi kata dengan nilai 9px.

Word spacing dengan satuan em

1.Paragraf ini menggunakan spasi kata dengan nilai -0.5em.

2.Paragraf ini menggunakan spasi kata dengan nilai 0.1em.

3.Paragraf ini menggunakan spasi kata dengan nilai 0.3em.

4.Paragraf ini menggunakan spasi kata dengan nilai 0.6em.

5.Paragraf ini menggunakan spasi kata dengan nilai 0.9em.

6.Paragraf ini menggunakan spasi kata dengan nilai 2em.

Word spacing dengan satuan mm

1.Paragraf ini menggunakan spasi kata dengan nilai -5mm.

2.Paragraf ini menggunakan spasi kata dengan nilai 1mm.

3.Paragraf ini menggunakan spasi kata dengan nilai 2mm.

4.Paragraf ini menggunakan spasi kata dengan nilai 3mm.

5.Paragraf ini menggunakan spasi kata dengan nilai 4mm.

6.Paragraf ini menggunakan spasi kata dengan nilai 5mm.

Penggunaan Word Spacing Dan Kaitannya Dengan Text Align Justify

Penggunaan word spacing pada CSS dalam penataan jarak spasi antar kata akan menghadapi suatu kegagalan saat berhadapan dengan pengaturan kerataan huruf (text alignment) dalam suatu paragraf. Jarak spasi antar huruf (word-spacing) akan berjalan baik dan seirama saat berdampingan dengan penataan huruf dengan nilai rata kiri (align left) dan kanan (align-right). Namun tidak demikian dengan rata kanan dan rata kiri (align-justify).

Pada kerataan teks rata kanan dan kiri (align-justify), spasi putih antar kata akan dipaksa agar memiliki nilai lebar tertentu supaya huruf paling kanan dan paling kiri dapat sejajar secara tegak lurus (vertikal). Nilai lebar pada spasi putih tersebut akan mengabaikan nilai dari word spacing.

Apa itu pada HTML?

Tikkan   untuk menambahkan spasi di tempat yang Anda inginkan. Hasil kode ini dikenal sebagai non-breaking space atau spasi tetap karena mencegah pemisahan baris pada lokasi penempatan kode.