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​​​​​​​​​​​​​​​​

[xenoside]

सबसे नीचे वाले github लिंक के बाद %E2%80%8B (zero-width space) बहुत ज़्यादा जुड़ रहे हैं.
js .replace(/\u200b/g, '')

[xguru]

लगता है कि डेमो में मौजूद https://chenglou.me/pretext/editorial-engine/ पेज इसे सबसे अच्छी तरह दिखाता है।

[smboy86]

मैंने इसे पूरी तरह समझकर इस्तेमाल नहीं किया है, इसलिए पहले से माफ़ी चाहता हूँ.

कहा जा रहा है कि यह canvas के measureText के आधार पर दोबारा कैलकुलेट करता है..
मुझे उस API पर भरोसा नहीं है.
सही कहूँ तो API पर ही भरोसा नहीं है, ऐसा भी नहीं,
बल्कि जब DOM को उसी तरह रेंडर किया जाता है, तो ब्राउज़र में दिखने वाली
ऊँचाई या रूप वही तभी रहेगा जब सभी condition values पूरी तरह मैच करें, और API के रूप में लेते समय भी वही होना चाहिए,
लेकिन यह बात समझ न पाने की वजह से "मान अलग क्यों है, और यह bug कैसे आया" जैसी
एक सिहरन पैदा कर देने वाली बुरी याद मेरे पास है...