CSS Teks Stroke Generator

Asal usul CSS text stroke

Ide menebalkan glif mendahului CSS selama beberapa dekade; ini asli dari PostScript (Adobe, 1984) dan dibawa ke SVG 1.1 (Rekomendasi W3C, edisi ke-2, 16 Agustus 2011), yang mendefinisikan atribut cat stroke, stroke-width, stroke-linecap, dan stroke-linejoin untuk bentuk apa pun termasuk <text>. CSS mendapatkan versinya sendiri ketika Apple mengirim -webkit-text-stroke di Safari 3 pada Juni 2007, bersama -webkit-text-fill-color. Properti tersebut tidak pernah distandardisasi dalam spec W3C yang diterbitkan; ia hidup di Editor's Draft CSS Text Decoration Module Level 4 sebagai text-stroke tanpa awalan, tetapi pada 2026 nama tanpa awalan masih belum diaktifkan di browser apa pun. Firefox 49 (20 September 2016) dan Edge 15 (5 April 2017) keduanya menambahkan -webkit-text-stroke sebagai alias kompatibilitas web eksplisit untuk menangani halaman yang hanya menggunakan nama dengan awalan WebKit. Di produksi, tulis awalannya.

Tiga cara menebalkan teks di web

Ada lebih dari satu cara untuk menggambar garis luar di sekitar teks. Alat yang tepat tergantung pada lebar, anggaran keterbacaan, dan apakah glif yang mendasari perlu tetap tajam:

• -webkit-text-stroke, properti yang dipancarkan oleh generator ini. Satu baris CSS, dikomposit oleh GPU, gratis pada framerate apa pun. Stroke digambar terpusat pada garis luar glif, separuh di dalam dan separuh di luar, yang berarti stroke tebal mulai memakan bentuk huruf.
• text-shadow empat arah, fallback universal yang bekerja di setiap browser hingga IE 10. text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; menumpuk empat bayangan 1 piksel di setiap sudut untuk memalsukan garis luar 1 px. Didefinisikan di CSS Text Decoration Module Level 3 (W3C Candidate Recommendation Agustus 2019). Pada stroke yang lebih lebar, artefak tangga menjadi terlihat; delapan atau enam belas arah dapat menghaluskannya dengan biaya lebih banyak bayangan.
• SVG <text> dengan paint-order: stroke fill;, jawaban yang tepat ketika Anda memerlukan stroke tebal tanpa tinta yang berdarah di dalam bentuk huruf. Properti paint-order menggambar stroke terlebih dahulu, lalu fill di atas, sehingga fill tetap pada lebar penuh yang diiklankan.

Aksesibilitas: logika kontras, tidak untuk body-text, ya untuk dekoratif

Kriteria Sukses WCAG 2.1 1.4.3 «Kontras (Minimum)» (Rekomendasi W3C 5 Juni 2018) memerlukan kontras 4,5:1 untuk teks normal dan 3:1 untuk teks besar (18 pt / 14 pt tebal). Dengan stroke yang diterapkan, tepi yang dominan secara visual dari glif adalah warna stroke, sehingga pemeriksaan kontras harus membandingkan warna itu dengan latar belakang, bukan fill. Kegagalan umum: logo kuning pada putih dengan stroke hitam tipis lolos jika Anda memeriksa hitam vs putih, tetapi tubuh huruf adalah kuning pada putih dan terbaca buruk pada ukuran kecil. Stroke menghancurkan keterbacaan pada body-text. Di bawah 16 px ukuran font, stroke 1 px mengisi 10 hingga 15 persen dari interior glif dan stroke 2 px dapat menutup counter (lubang di «a», «e», «o»). Cadangkan text stroke untuk heading, tipografi display, dan penggunaan dekoratif; jangan pernah menerapkannya pada teks paragraf tanpa pengujian eksplisit di setiap breakpoint.

Kapan text stroke adalah alat yang tepat

• Judul buku komik dan UI gaming: tampilan klasik Marvel / Nintendo stroke hitam tebal pada fill cerah.
• Watermark dan overlay dekoratif: hanya stroke semi-transparan, tanpa fill, duduk di atas gambar.
• Grafis tutorial, screenshot, callout di mana teks harus menonjol dari latar belakang yang tidak dikenal.
• Tombol «hantu» di mana teks tombol menggunakan stroke dan fill transparan untuk terasa cocok bobotnya dengan tombol bergaris itu sendiri.
• Heading hanya garis luar dalam desain editorial, tampilan «huruf berongga» yang besar di akhir 2010-an.

Kesalahan umum

• Melupakan awalan -webkit-. text-stroke tanpa awalan hanya dalam status Editor's Draft dan tidak dikirim. Selalu tulis bentuk dengan awalan di produksi.
• Mencoba menganimasikan -webkit-text-stroke-width. Itu tidak ada dalam daftar properti CSS yang dapat dianimasikan. Transisi akan «snap» daripada tween. Animasikan text-shadow atau gunakan SVG ketika gerakan diperlukan.
• Menerapkan stroke pada teks kecil. Di bawah 16 px, stroke mengisi interior glif dan menutup counter. Atur penjaga ukuran font minimum dengan media query.
• Menggabungkan stroke lebar dengan letter-spacing ketat. Stroke melintas antara glif yang berdekatan dan menghasilkan noda abu-abu di mana bentuk-bentuk bersentuhan.
• Menghitung warna stroke sebagai «warna teks» dalam pemeriksaan kontras. Baik fill maupun stroke harus lulus WCAG 1.4.3 terhadap latar belakang.
• Tidak menguji stylesheet cetak. Stroke dapat dirender secara dramatis lebih tebal atau lebih tipis saat dicetak, terutama pada browser yang menurunkan skala gamut warna untuk output PDF.

Pertanyaan yang lebih sering diajukan

Mengapa stroke saya terlihat lebih tebal di layar Retina daripada di monitor 1080p?

Tidak, dalam piksel CSS. Stroke 2px adalah tepat 2 piksel CSS di keduanya. Yang berubah adalah ketajaman yang dirasakan: pada layar Retina (DPR 2×), stroke 2 piksel CSS adalah 4 piksel perangkat dan antialiasing bersih. Pada layar 1×, 2 piksel perangkat memberikan tepi yang jauh lebih buram. Jika Anda perlu hairline yang menempel ke satu piksel perangkat di Retina, tulis 0.5px; browser membulatkan ke satu piksel perangkat pada layar DPR tinggi.

Bisakah saya memiliki warna stroke berbeda untuk setiap huruf?

Tidak dengan satu deklarasi -webkit-text-stroke. Bungkus setiap huruf dalam <span> dan beri gaya secara individual, atau gunakan elemen SVG <tspan> dengan atribut stroke mereka sendiri. Pseudo-elemen ::first-letter menerima text-stroke jika Anda hanya membutuhkan huruf pertama yang berbeda.

Seberapa tebal stroke yang terlalu tebal?

Plafon praktis adalah sekitar 8 persen dari ukuran font. Pada font 100 px, itu adalah stroke 8 px; di luar itu huruf-huruf mulai saling tumpang tindih. Jika Anda ingin tampilan garis luar yang lebih tebal, gunakan SVG <text> dengan paint-order: stroke fill; agar fill tetap pada lebar asli dan stroke hanya meluas ke luar.

Apakah -webkit-text-stroke bekerja pada emoji?

Pada emoji berwarna (default di browser modern), stroke berlaku pada siluet luar glif emoji. Hasilnya biasanya halus karena emoji sudah memiliki garis luar dan bayangan sendiri. Untuk emoji hitam-putih (variasi font text), stroke berlaku dengan rapi seperti glif lainnya.

Apakah ada yang dikirim ke server?

Tidak. Teks yang Anda ketik ke pratinjau, warna yang Anda pilih, dan CSS yang dihasilkan semuanya diproses di JavaScript browser Anda. Tidak ada panggilan jaringan yang dilakukan. Buka tab Jaringan di DevTools untuk memverifikasi.