# Ukur lebar piksel yang tepat dari teks apa pun
Apakah teks Anda meluap dari wadahnya? Perlu tahu berapa banyak ruang yang digunakan judul sebelum merendernya? API Canvas browser memungkinkan Anda mengukur lebar tepat dari string teks apa pun dengan presisi piksel, tanpa harus merendernya di DOM. # Mengapa menghitung karakter saja tidak cukup
Jenis huruf modern bersifat proporsional: setiap glif memiliki lebar yang berbeda. Huruf "W" dapat memakan ruang tiga kali lebih banyak daripada huruf "i". Jumlah karakter tidak memberi tahu Anda apa pun tentang ruang visual sebenarnya yang ditempati teks. -
Desain web: Mencegah luapan (overflow) pada tombol, label, dan sel tabel.
-
SEO: Mesin pencari memotong judul berdasarkan piksel, bukan karakter.
-
Canvas dan PDF: Hitung posisi tepat sebelum menggambar teks secara terprogram.
-
Tooltip dan gelembung: Ukur wadah secara dinamis berdasarkan teks di dalamnya.
# Cara kerja pengukuran dengan Canvas
Metode ctx.measureText() dari API Canvas mengembalikan objek TextMetrics dengan properti width yang mencerminkan lebar piksel CSS menggunakan font yang saat ini aktif. Alat ini mengonfigurasi konteks dengan font, ukuran, ketebalan, dan gaya Anda sebelum mengukur.
const ctx = document.createElement('canvas').getContext('2d');
ctx.font = '700 16px Inter, system-ui, sans-serif';
const width = ctx.measureText('Halo Dunia').width; // mis. 74.5
# Privasi dan pemrosesan lokal
Semua perhitungan terjadi di browser Anda. Tidak ada teks, cuplikan kode, atau data pribadi yang meninggalkan perangkat Anda.
Jenis huruf Google Fonts
Untuk mengukur jenis huruf Google Fonts secara akurat, pastikan font tersebut sudah dimuat di halaman atau terpasang di sistem Anda. Jika tidak, browser akan menggunakan font pengganti dan hasilnya akan berbeda.