CSS text-spacing-trim

TL;DR: CSS text-spacing-trim adalah property baru yang lulus Baseline 2026 dan mengatur spasi otomatis di sekitar tanda baca, kutipan, dan karakter CJK. Nilai utamanya trim-start, trim-end, dan trim-both. Property ini menggantikan hack margin negatif yang umum di landing page Asia.

Apa itu text-spacing-trim?

text-spacing-trim adalah property CSS yang mengontrol bagaimana browser merapikan whitespace internal di sekitar tanda baca dan karakter ideografik. Property ini bagian dari CSS Text Module Level 4 dan menjadi solusi resmi untuk masalah yang sebelumnya membutuhkan content-visibility atau script JavaScript untuk diperbaiki.

Tanpa property ini, heading Bahasa Indonesia yang dicampur dengan kutipan atau heading multibahasa sering tampak miring atau punya celah aneh. Dengan satu baris CSS, browser otomatis menghapus padding visual yang tidak perlu.

Nilai yang Tersedia

Praktik standar di industri saat ini menggunakan trim-start untuk heading dan trim-both untuk paragraf body Asia.

Kenapa Penting?

Untuk marketer Indonesia yang sering memakai heading bilingual (campuran istilah Inggris dan Indonesia, atau quote dari klien internasional), property ini memangkas 8 hingga 20 baris CSS reset per landing page. Ini sejalan dengan praktik text-wrap pretty yang juga merapikan tipografi tanpa script. Per Mei 2026, dukungan browser sudah mencapai 91 persen menurut data Can I Use.

Pertanyaan Umum

Apa beda text-spacing-trim dengan text-wrap pretty?

text-wrap pretty mengatur pemotongan baris supaya tidak ada single-word last line. text-spacing-trim mengatur spasi internal di sekitar tanda baca. Keduanya saling melengkapi, bukan menggantikan.

Apakah aman dipakai sekarang tanpa fallback?

Aman untuk progressive enhancement. Browser lama akan abaikan property ini tanpa error. Tidak perlu polyfill untuk konten Latin-only.