Pretext – DOM olmadan metin yüksekliğini ölçen saf JS yerleşim kütüphanesi

 (github.com/chenglou)
23 puan yazan princox 2026-03-30 | 3 yorum | WhatsApp'ta paylaş

Tarayıcıda bir metnin kaç satır kapladığını öğrenmek sanıldığından daha zordur. Genelde getBoundingClientRect veya offsetHeight kullanılır, ancak bu yöntemler tarayıcıyı yerleşimi yeniden hesaplamaya zorlar. Buna yerleşim reflow’u denir. Tarayıcı açısından oldukça ağır bir işlemdir.
Pretext bu sorunu farklı bir şekilde çözüyor. Canvas’ın measureText() API’siyle yazı genişliğini doğrudan font motorundan alıyor, ardından satır hesaplamasını önbelleğe alınmış genişlik değerleriyle yalnızca aritmetik işlemler yaparak gerçekleştiriyor. DOM’a hiç erişmiyor.

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

Performansı da etkileyici. 500 metin yerleşimi ölçümünde prepare() yaklaşık 19ms, sonrasındaki layout() ise 0.09ms seviyesinde.
İki kullanım biçimi var
Yalnızca yükseklik gerekiyorsa prepare() + layout() kombinasyonu yeterli. Sanallaştırılmış liste uygulamaları, kaydırma konumunu koruma, yapay zeka tarafından üretilen metnin buton dışına taşıp taşmadığını kontrol etme gibi kullanım alanları var.
Yerleşimi doğrudan satır bazında kontrol etmek isterseniz layoutWithLines(), walkLineRanges(), layoutNextLine() gibi API’lerden yararlanabilirsiniz. Canvas, SVG, WebGL ve sunucu tarafı render ile de entegre edilebilir; ayrıca görselin yanından akan metin gibi satır başına genişliğin değiştiği yerleşimler de işlenebiliyor.
Emoji, Çince-Japonca-Korece ve Arapça gibi çift yönlü metinleri de destekliyor. React ve Relay’in yaratıcısı chenglou’nun projesi. ⭐ 7.1k
https://github.com/chenglou/pretext​​​​​​​​​​​​​​​​

İlgili okumalar

3 yorum

 
xenoside 2026-03-31

En alttaki github bağlantısının sonuna %E2%80%8B (zero-width space) çokça eklenmiş görünüyor.
js .replace(/\u200b/g, '')
 
xguru 2026-03-30

Demodaki https://chenglou.me/pretext/editorial-engine/ sayfası bunu en iyi gösteriyor gibi görünüyor.
 
smboy86 2026-03-30

Tam olarak bilerek kullandığım bir şey değil, şimdiden anlayışınızı rica ederim.

canvasın measureTextine dayanarak yeniden hesaplama yaptığını söylüyor ama...
ben o API'ye pek güvenemiyorum.
Tam olarak API'nin kendisine güvenmediğimden değil;
aynı DOM'u çizerken koşul değerlerini tamamen birebir eşleştirmeniz gerekiyor ki tarayıcıda gördüğünüz
yükseklik ya da biçim, API üzerinden alındığında da aynı olsun.
Bunu gözden kaçırıp "neden değerler farklı" diye uğraştığım ve bug çıkardığım
ürkütücü bir kâbus anım var...