CSS text-autospace (Property)

TL;DR: CSS text-autospace adalah properti baru yang otomatis menyisipkan spasi tipis (sekitar 1/4 em) di antara karakter CJK (Chinese, Japanese, Korean) dengan alfanumerik Latin atau angka. Properti ini menghapus kebutuhan kerning manual dan polyfill JavaScript, sehingga keterbacaan heading multi-bahasa naik tanpa biaya runtime.

Apa itu CSS text-autospace?

CSS text-autospace adalah properti tingkat tipografi yang mengontrol penyisipan spasi ideografik secara otomatis. Browser akan menambahkan jarak proporsional di batas antara skrip CJK dan skrip non-CJK, mengikuti rekomendasi Unicode UAX #50 dan praktik typesetting Asia Timur. Untuk landing page Indonesia yang sering memuat istilah Inggris berdampingan dengan teks lokal, properti ini berfungsi seperti text-wrap: balance tapi pada level spasi antar-skrip.

Nilai Properti yang Sering Dipakai

Dukungan stabil mulai Chromium 125 dan Safari 18, sementara Firefox masih flagged. Untuk fallback, gunakan progressive enhancement dengan @supports.

Kenapa Penting?

Marketer Indonesia yang membangun konten edukatif sering mencampur frasa seperti "konversi SEO 2026" atau "Next.js untuk UMKM". Tanpa text-autospace, jarak antara karakter Latin dan tanda baca terlihat rapat, terutama di mobile. Properti ini menaikkan persepsi profesionalisme typesetting tanpa override CSS nesting atau utility class tambahan. Dari pengalaman menangani landing page klien, satu deklarasi text-autospace memangkas 6-10 baris override line-height di komponen heading.

Pertanyaan Umum

Apakah text-autospace mempengaruhi performa rendering?

Tidak signifikan. Browser menghitung jarak saat layout pass, sama biayanya dengan kerning normal, jadi tidak ada penalty Layout Shift.

Apakah perlu polyfill untuk Firefox?

Belum perlu polyfill berat. Cukup @supports (text-autospace: auto) untuk menyembunyikan fitur dari browser yang belum dukung, fallback ke spasi default tetap dapat dibaca.