pretext

Pretext एक शुद्ध JavaScript/TypeScript लाइब्रेरी है जो मल्टीलाइन टेक्स्ट को मापने और लाइन लेआउट की गणना करने के लिए बनाई गई है। यह `getBoundingClientRect` और `offsetHeight` जैसे DOM मापन API से बचती है, जो लेआउट रिफ्लो को बाध्य करते हैं, और इसके बजाय ब्राउज़र के canvas `measureText` को आधार सत्य मानकर अपना मापन स्वयं करती है। यह वर्चुअलाइज़ेशन, कस्टम लेआउट इंजन, canvas/SVG रेंडरिंग और डेवलपमेंट-टाइम ओवरफ़्लो जाँच के लिए उपयोगी है। ## इंस्टॉलेशन ```sh npm install @chenglou/pretext ``` ## मुख्य उपयोग के मामले ### 1. DOM को छुए बिना पैराग्राफ़ की ऊँचाई मापना ```ts import { prepare, layout } from '@chenglou/pretext' const prepared = prepare('AGI 春天到了. بدأت الرحلة 🚀', '16px Inter') const { height, lineCount } = layout(prepared, 320, 20) ``` `prepare()` एक बार का काम करता है: व्हाइटस्पेस नॉर्मलाइज़ेशन, टेक्स्ट सेगमेंटेशन, ग्लू नियम अनुप्रयोग और canvas-आधारित मापन। इसके बाद `layout()` कैश्ड चौड़ाइयों पर एक सस्ता शुद्ध-अंकगणितीय ऑपरेशन है, इसलिए इसे रीसाइज़ पर बिना दोबारा तैयार किए फिर से चलाया जा सकता है। `prepare()` के विकल्पों में textarea जैसे व्यवहार के लिए `whiteSpace: 'pre-wrap'`, CSS जैसे `word-break: keep-all` के लिए `wordBreak: 'keep-all'`, और CSS `letter-spacing` के लिए `letterSpacing` शामिल हैं। ### 2. मैनुअल लाइन लेआउट `prepareWithSegments()` कस्टम लेआउट के लिए एक समृद्ध संरचना लौटाता है। निम्नलिखित API उपलब्ध हैं: - `layoutWithLines()` — निश्चित अधिकतम चौड़ाई पर सभी लाइनें लौटाता है, जिसमें टेक्स्ट और मापी गई चौड़ाइयाँ शामिल होती हैं। - `walkLineRanges()` — लाइन स्ट्रिंग बनाए बिना प्रत्येक लाइन के लिए चौड़ाई और प्रारंभ/अंत कर्सर के साथ कॉलबैक कॉल करता है। - `measureLineStats()` — बिना एलोकेशन के लाइन गणना और सबसे चौड़ी लाइन की चौड़ाई लौटाता है। - `measureNaturalWidth()` — जब चौड़ाई रैपिंग का कारण न हो तो सबसे चौड़ी बाध्य लाइन लौटाता है। - `layoutNextLine()` / `layoutNextLineRange()` — एक-एक करके संभावित भिन्न चौड़ाइयों के साथ लाइनें लेआउट करने के लिए इटरेटर-शैली API, जो फ़्लोट्स या गतिशील कंटेनरों के चारों ओर टेक्स्ट प्रवाहित करने के लिए उपयोगी है। - `materializeLineRange()` — लेआउट रेंज को वापस पूर्ण लाइन स्ट्रिंग में परिवर्तित करता है। ये Canvas, SVG, WebGL और अंततः सर्वर-साइड वातावरण में रेंडरिंग सक्षम करते हैं। डेमो रिपॉज़िटरी में और chenglou.me/pretext पर शामिल हैं। ## रिच इनलाइन हेल्पर `@chenglou/pretext/rich-inline` पर एक अलग हेल्पर मिश्रित फ़ॉन्ट, परमाणु आइटम (जैसे चिप्स और मेंशन) और पिल क्रोम के लिए कॉलर-स्वामित्व वाली अतिरिक्त चौड़ाई के साथ बुनियादी रिच-टेक्स्ट इनलाइन फ़्लो का समर्थन करता है। यह जानबूझकर संकीर्ण है: केवल इनलाइन, केवल `white-space: normal`, और सामान्य CSS इनलाइन फ़ॉर्मेटिंग इंजन नहीं। ## API शब्दावली की मुख्य बातें - `PreparedText` अपारदर्शी फ़ास्ट-पाथ हैंडल है; `PreparedTextWithSegments` समृद्ध मैनुअल-लेआउट हैंडल है। - `LayoutCursor` कच्चे स्ट्रिंग ऑफ़सेट के बजाय सेगमेंट/ग्राफ़ीम इंडेक्स का उपयोग करता है। - खाली स्ट्रिंग पर `layout()` `{ lineCount: 0, height: 0 }` लौटाता है; ब्राउज़र खाली ब्लॉक को एक `line-height` का आकार देते हैं, इसलिए कॉलर क्लैंप करना चाह सकते हैं। - सॉफ़्ट हाइफ़न समर्थित हैं: वे वैकल्पिक ब्रेक पॉइंट के रूप में कार्य करते हैं और चुने जाने पर अंत में `-` के रूप में प्रकट होते हैं। - `clearCache()` साझा आंतरिक कैश साफ़ करता है; `setLocale()` भविष्य की तैयारी कॉल के लिए लोकेल सेट करता है। - समृद्ध हैंडल में कस्टम bidi-जागरूक रेंडरिंग के लिए अनुमानित `segLevels` शामिल हैं, लेकिन Pretext पूर्ण Unicode Bidirectional Algorithm लागू नहीं करता। ## चेतावनियाँ Pretext पूर्ण फ़ॉन्ट रेंडरिंग इंजन नहीं है। यह सामान्य CSS टेक्स्ट सेटअप को लक्षित करता है: - `white-space: normal` और `pre-wrap` - `word-break: normal` और `keep-all` - `overflow-wrap: break-word` - `line-break: auto` - `letter-spacing` एक संख्यात्मक पिक्सेल मान के रूप में - टैब डिफ़ॉल्ट `tab-size: 8` का पालन करते हैं उल्लेखनीय सीमाएँ: - `system-ui` और `-apple-system` macOS पर `layout()` सटीकता के लिए असुरक्षित हैं; नामित फ़ॉन्ट की सिफ़ारिश की जाती है। - विराम चिह्न के बगल में इमोजी ब्राउज़र से भिन्न तरीके से रैप हो सकते हैं। - कुछ फ़ॉन्ट, जैसे Shantell Sans, लंबे शब्दों में भिन्न लाइन ब्रेक उत्पन्न कर सकते हैं। - रनटाइम के लिए `Intl.Segmenter`, Canvas 2D टेक्स्ट मापन और Unicode property escapes आवश्यक हैं। - canvas `font` शॉर्टहैंड के बाहर CSS फ़ॉन्ट सुविधाएँ अलग से मॉडल नहीं की जाती हैं। कुल मिलाकर, Pretext को मल्टीलाइन टेक्स्ट मापन के लिए एक केंद्रित लाइब्रेरी के रूप में स्थापित किया गया है जो वेब डेवलपर्स को ब्राउज़र लेआउट क्वेरी का तेज़, नियतात्मक विकल्प देती है।