Pretext – pustaka layout JS murni untuk mengukur tinggi teks tanpa DOM

Mengetahui berapa banyak baris yang dipakai teks di browser ternyata lebih rumit dari yang terlihat. Biasanya orang memakai getBoundingClientRect atau offsetHeight, tetapi cara ini memaksa browser menghitung ulang layout. Inilah yang disebut layout reflow. Dari sudut pandang browser, ini pekerjaan yang cukup berat.
Pretext menyelesaikan masalah ini dengan pendekatan berbeda. Dengan measureText() dari Canvas, lebar karakter diambil langsung dari font engine, lalu perhitungan baris dilakukan hanya dengan operasi aritmetika murni memakai nilai lebar yang sudah di-cache. Sama sekali tidak mengakses DOM.

const prepared = prepare('AGI 春天到了. بدأت الرحلة 🚀', '16px Inter')
const { height, lineCount } = layout(prepared, textWidth, 20)

Performanya juga mengesankan. Dengan patokan 500 penataan teks, prepare() sekitar 19ms, dan layout() setelahnya berada di kisaran 0.09ms.
Dua cara penggunaan
Jika hanya butuh tinggi, kombinasi prepare() + layout() sudah cukup. Ini bisa dipakai untuk implementasi daftar virtual, menjaga posisi scroll, atau memeriksa apakah teks buatan AI meluber ke luar tombol.
Jika ingin mengontrol layout langsung per baris, gunakan API seperti layoutWithLines(), walkLineRanges(), dan layoutNextLine(). Ini juga bisa dihubungkan ke Canvas, SVG, WebGL, dan server-side rendering, serta dapat menangani layout dengan lebar berbeda di tiap baris, seperti teks yang mengalir di samping gambar.
Mendukung emoji, CJK, dan teks dua arah seperti bahasa Arab. Ini adalah proyek dari chenglou, pembuat React dan Relay. ⭐ 7.1k
https://github.com/chenglou/pretext​​​​​​​​​​​​​​​​

[xenoside]

Di bagian paling bawah, setelah tautan GitHub, tampaknya ada banyak %E2%80%8B (zero-width space).
js .replace(/\u200b/g, '')

[xguru]

Sepertinya halaman https://chenglou.me/pretext/editorial-engine/ yang ada di demo paling menunjukkan kemampuannya dengan baik.

[smboy86]

Saya tidak benar-benar paham dan menggunakannya, jadi mohon maklum sebelumnya.

Katanya dihitung ulang berdasarkan measureText di canvas..
Saya agak tidak percaya API itu.
Lebih tepatnya, bukan tidak percaya pada API-nya sendiri,
tetapi saat merender DOM yang sama, nilai kondisinya harus cocok sepenuhnya agar
tinggi atau bentuk yang terlihat di browser juga sama ketika diambil dalam bentuk API.
Saya pernah punya mimpi buruk yang bikin merinding, karena tidak menyadari hal ini lalu bertanya-tanya kenapa nilainya berbeda dan kenapa muncul bug...