Jenis dan Variasi CSS text-emphasis Lengkap dengan Contoh

Properti CSS text-emphasis digunakan untuk memberikan tanda penekanan pada teks, terutama pada bahasa Asia Timur seperti Jepang, Korea, dan China. Namun, properti ini juga dapat dimanfaatkan sebagai efek visual unik untuk heading, label, maupun elemen dekoratif pada halaman web modern.

Meskipun belum sepopuler text-decoration, fitur ini menawarkan berbagai bentuk simbol penekanan seperti titik, lingkaran, segitiga, hingga karakter khusus yang ditempatkan di atas atau di bawah teks.

Apa Itu CSS text-emphasis?

text-emphasis merupakan shorthand yang menggabungkan beberapa properti berikut:

• text-emphasis-style
• text-emphasis-color

Sintaks umum:

text-emphasis: style color;

Contoh penerapan:

.contoh {
    text-emphasis: filled circle red;
}

1. text-emphasis: filled dot

Menampilkan titik penuh (solid) sebagai tanda penekanan di atas teks.

.filled-dot {
    text-emphasis: filled dot crimson;
}

2. text-emphasis: open dot

Menghasilkan titik kosong (outline) sehingga tampil lebih ringan dibanding versi filled.

.open-dot {
    text-emphasis: open dot blue;
}

3. text-emphasis: filled circle

Menggunakan lingkaran penuh sebagai penanda setiap karakter.

.filled-circle {
    text-emphasis: filled circle #ff5722;
}

4. text-emphasis: open circle

Variasi lingkaran kosong yang sering digunakan untuk efek dekoratif ringan.

.open-circle {
    text-emphasis: open circle green;
}

5. text-emphasis: filled double-circle

Memberikan simbol lingkaran ganda dengan isi penuh sehingga lebih mencolok.

.filled-double {
    text-emphasis: filled double-circle purple;
}

6. text-emphasis: open double-circle

Menampilkan lingkaran ganda tanpa isi.

.open-double {
    text-emphasis: open double-circle teal;
}

7. text-emphasis: filled triangle

Menggunakan segitiga penuh sebagai tanda penekanan.

.filled-triangle {
    text-emphasis: filled triangle orange;
}

8. text-emphasis: open triangle

Versi outline dari simbol segitiga.

.open-triangle {
    text-emphasis: open triangle brown;
}

9. text-emphasis: filled sesame

Menggunakan bentuk menyerupai biji wijen (sesame). Variasi ini umum ditemukan pada tipografi Jepang.

.filled-sesame {
    text-emphasis: filled sesame red;
}

10. text-emphasis: open sesame

Bentuk sesame kosong dengan tampilan lebih tipis.

.open-sesame {
    text-emphasis: open sesame navy;
}

11. Menggunakan Karakter Khusus

Selain bentuk bawaan, Anda dapat menggunakan karakter Unicode sebagai simbol penekanan.

.star {
    text-emphasis: "★" red;
}

.heart {
    text-emphasis: "♥" hotpink;
}

.check {
    text-emphasis: "✔" green;
}

Cara ini memberikan fleksibilitas tinggi dalam membuat tampilan yang lebih kreatif.

Mengubah Warna Penekanan

Gunakan text-emphasis-color jika hanya ingin mengubah warna simbol.

.warna {
    text-emphasis-style: filled circle;
    text-emphasis-color: crimson;
}

Menggunakan text-emphasis-style

Jika hanya ingin menentukan bentuk tanpa mengatur warna, gunakan properti berikut.

.style {
    text-emphasis-style: open circle;
}

Mengatur Posisi Penekanan

Posisi simbol dapat diubah menggunakan text-emphasis-position.

.atas {
    text-emphasis: filled circle red;
    text-emphasis-position: over;
}

.bawah {
    text-emphasis: filled circle blue;
    text-emphasis-position: under;
}

Contoh Lengkap

Menggabungkan beberapa properti dalam satu struktur yang utuh.

<p class="judul">
Belajar CSS text-emphasis
</p>

.judul {
    font-size: 32px;
    text-emphasis: filled circle crimson;
}

Browser Support

Perlu diketahui bahwa text-emphasis belum didukung secara penuh oleh seluruh browser modern. Browser berbasis WebKit seperti Safari memiliki dukungan yang lebih baik, sedangkan browser lain mungkin memerlukan prefix atau bahkan belum mengimplementasikannya secara lengkap. Oleh karena itu, gunakan properti ini sebagai efek tambahan, bukan sebagai elemen penting dalam desain antarmuka.

Tips Menggunakan text-emphasis

• Gunakan untuk memberi penekanan pada kata penting.
• Hindari penggunaan berlebihan agar teks tetap nyaman dibaca.
• Kombinasikan dengan font-weight atau color untuk hasil yang lebih menarik.
• Pastikan melakukan pengujian pada beberapa browser.
• Cocok digunakan pada heading, label, atau teks dekoratif.

Kesimpulan

CSS text-emphasis merupakan fitur yang memungkinkan penambahan simbol penekanan pada setiap karakter teks. Properti ini menyediakan berbagai variasi seperti filled, open, circle, dot, double-circle, triangle, sesame, hingga penggunaan karakter Unicode khusus. Dengan memahami setiap variasinya, Anda dapat menciptakan tampilan tipografi yang lebih menarik, unik, dan tetap mudah dipelajari.