Pretext: मल्टीलाइन टेक्स्ट माप और लेआउट के लिए TypeScript लाइब्रेरी

 (github.com/chenglou)
4 पॉइंट द्वारा GN⁺ 2026-03-30 | अभी कोई टिप्पणी नहीं है. | WhatsApp पर शेयर करें
  • Pretext एक शुद्ध JavaScript/TypeScript लाइब्रेरी है जो DOM access के बिना मल्टीलाइन टेक्स्ट की ऊंचाई और लाइन लेआउट की गणना करती है, और browser तथा server दोनों environments को support करती है
  • यह getBoundingClientRect जैसे DOM measurement API का उपयोग नहीं करती, इसलिए layout reflow cost को हटाती है, और font engine-आधारित अपनी measurement logic से accuracy सुनिश्चित करती है
  • prepare() / layout() API के जरिए टेक्स्ट को preprocess किया जाता है, और cached width data का उपयोग करके शुद्ध arithmetic operations से तेज height calculation किया जाता है
  • यह emoji, mixed-direction text (bidi), और कई भाषाओं को support करती है, तथा Canvas·SVG·WebGL·server rendering में भी एक जैसे परिणाम देती है
  • यह high-performance text engine है, जिसे virtualized scroll, text overflow validation, floating text placement जैसे सटीक UI layout implementations में उपयोग किया जा सकता है

अवलोकन

  • Pretext मल्टीलाइन टेक्स्ट माप और लेआउट के लिए एक शुद्ध JavaScript/TypeScript लाइब्रेरी है, जो DOM, Canvas, SVG, और server-side rendering तक support करती है
  • यह DOM measurement API (getBoundingClientRect, offsetHeight आदि) का उपयोग नहीं करती, इसलिए layout reflow cost को हटाती है
  • browser के font engine पर आधारित अपनी measurement logic के जरिए यह सटीक और तेज performance प्रदान करती है
  • यह सभी भाषाओं, emoji, mixed-direction text (bidi) को support करती है, और browser के बीच के अंतर भी संभालती है

इंस्टॉलेशन और डेमो

मुख्य फीचर्स

  • Pretext दो मुख्य usage patterns प्रदान करता है

  • 1. DOM access के बिना paragraph height मापना

    • prepare() टेक्स्ट को preprocess करता है, whitespace normalization·segment separation·glue rules application·canvas-आधारित measurement करता है, और एक opaque handle लौटाता है
    • layout() cached width data का उपयोग करके शुद्ध arithmetic operations से height और line count की गणना करता है
    • समान टेक्स्ट और settings में prepare() को बार-बार call करने की जरूरत नहीं होती, और resize होने पर केवल layout() फिर से चलाना होता है
    • { whiteSpace: 'pre-wrap' } option के साथ whitespace, tab(\t), line break(\n) को जस का तस रखा जा सकता है
    • benchmark परिणाम: prepare() लगभग 19ms (500 टेक्स्ट के आधार पर), layout() लगभग 0.09ms
    • लौटाई गई height value का उपयोग निम्न UI फीचर्स में किया जा सकता है
      • virtualization और occlusion handling में सटीक height calculation
      • JS-आधारित layout systems (जैसे masonry, flexbox-जैसी संरचना)
      • AI-आधारित text overflow validation
      • text load होने पर scroll position बनाए रखना

  • 2. मैन्युअल paragraph layout बनाना

    • prepareWithSegments() से segment-स्तर का data बनाया जाता है
    • layoutWithLines() fixed width पर हर line का text और width information लौटाता है
    • walkLineRanges() text string बनाए बिना हर line की width और cursor range पर iterate करता है
      • उदाहरण: कई widths को test करके उपयुक्त line count और height खोजने के लिए binary-search शैली का layout adjustment संभव है
    • layoutNextLine() जब हर line की width अलग हो तब line-by-line क्रमिक layout करता है
      • उदाहरण: image के आसपास text flow कराने के लिए floating text placement
    • यह तरीका Canvas, SVG, WebGL, server-side rendering पर भी समान रूप से लागू होता है

API सारांश

  • बेसिक measurement API

    • prepare(text, font, options?): टेक्स्ट का analysis और measurement, layout() को देने के लिए handle लौटाता है
    • layout(prepared, maxWidth, lineHeight): दी गई width और line height के अनुसार text height और line count की गणना

  • मैन्युअल layout API

    • prepareWithSegments(text, font, options?): segment-स्तर का data लौटाता है
    • layoutWithLines(prepared, maxWidth, lineHeight): हर line के text, width, cursor information सहित
    • walkLineRanges(prepared, maxWidth, onLine): हर line की width और cursor range को callback के जरिए देता है
    • layoutNextLine(prepared, start, maxWidth): iterator के रूप में line-स्तर layout करता है
    • LayoutLine, LayoutLineRange, LayoutCursor type definitions शामिल हैं

  • अन्य utilities

    • clearCache(): internal cache initialize करता है
    • setLocale(locale?): locale सेट करता है और cache initialize करता है (मौजूदा state पर असर नहीं)

सीमाएँ और सावधानियाँ

  • Pretext पूर्ण font rendering engine नहीं है
  • डिफ़ॉल्ट target CSS properties
    • white-space: normal
    • word-break: normal
    • overflow-wrap: break-word
    • line-break: auto
  • { whiteSpace: 'pre-wrap' } इस्तेमाल करने पर whitespace, tab, line break को बनाए रखता है और tab-size: 8 लागू करता है
  • macOS पर system-ui font, layout() accuracy के लिए उपयुक्त नहीं है, इसलिए explicit font name का उपयोग recommended है
  • overflow-wrap: break-word के कारण बहुत संकरी width पर शब्द के भीतर भी line break हो सकता है, लेकिन यह केवल grapheme unit के आधार पर ही विभाजित होता है

डेवलपमेंट से जुड़ी जानकारी

  • development environment और commands के लिए DEVELOPMENT.md देखें

योगदान और पृष्ठभूमि

  • Sebastian Markbage के text-layout प्रोजेक्ट से विचार आगे बढ़ाए गए हैं
  • canvas measureText-आधारित shaping, pdf.js की bidi processing, और streaming line breaking डिज़ाइन को आगे विकसित किया गया है

संबंधित पढ़ाई

अभी कोई टिप्पणी नहीं है.

अभी कोई टिप्पणी नहीं है.