Pretext – DOM के बिना टेक्स्ट की ऊंचाई मापने वाली शुद्ध JS layout लाइब्रेरी

ब्राउज़र में यह पता लगाना कि टेक्स्ट कितनी लाइनों में जाएगा, जितना लगता है उससे ज़्यादा पेचीदा है। आम तौर पर getBoundingClientRect या offsetHeight का इस्तेमाल किया जाता है, लेकिन ये तरीके ब्राउज़र को layout फिर से calculate करने के लिए मजबूर करते हैं। इसे layout reflow कहा जाता है। ब्राउज़र के लिए यह काफ़ी भारी काम है。
Pretext इस समस्या को अलग तरीके से हल करता है। यह Canvas के measureText() से font engine से सीधे character width लेता है, और उसके बाद line calculation cached width values के साथ सिर्फ arithmetic operations से करता है। यह DOM को बिल्कुल भी access नहीं करता।

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

इसकी performance भी प्रभावशाली है। 500 टेक्स्ट layouts के आधार पर prepare() लगभग 19ms लेता है, और उसके बाद layout() 0.09ms के स्तर पर चलता है।
इस्तेमाल के दो तरीके
अगर सिर्फ height चाहिए, तो prepare() + layout() का संयोजन ही काफ़ी है। इसे virtualized list implementation, scroll position बनाए रखने, या यह जांचने के लिए इस्तेमाल किया जा सकता है कि AI द्वारा generate किया गया टेक्स्ट button के बाहर overflow तो नहीं हो रहा।
अगर आप line-by-line layout को सीधे control करना चाहते हैं, तो layoutWithLines(), walkLineRanges(), layoutNextLine() जैसे API का उपयोग कर सकते हैं। इसे Canvas, SVG, WebGL, और server-side rendering से भी जोड़ा जा सकता है, और यह ऐसे layouts भी संभालता है जिनमें हर line की width अलग होती है, जैसे image के बगल में बहता हुआ टेक्स्ट।
यह emoji, CJK, और Arabic जैसी bidirectional text का भी समर्थन करता है। यह React और Relay बनाने वाले chenglou का प्रोजेक्ट है। ⭐ 7.1k
https://github.com/chenglou/pretext​​​​​​​​​​​​​​​​