HN परिचय: Node या <canvas> के लिए CSS layout engine, Dropflow

 (github.com/chearon)
3 पॉइंट द्वारा GN⁺ 2024-03-22 | 3 टिप्पणियां | WhatsApp पर शेयर करें

Dropflow का परिचय

  • Dropflow एक CSS layout engine है, जिसे बुनियादी CSS standards (inline, block, float, positioning, table आदि) के दायरे को समझने और परखने के लिए बनाया गया है।
  • यह उच्च-गुणवत्ता वाले text layout implementation को सपोर्ट करता है और दुनिया की कई भाषाओं को प्रदर्शित कर सकता है।
  • इसका उपयोग backend में Node और node-canvas के साथ PDF या image बनाने के लिए, या browser में canvas पर rich और wrapped text render करने के लिए किया जा सकता है।

मुख्य विशेषताएँ

  • float जैसी जटिल 30 से अधिक properties का समर्थन
  • bidirectional और RTL text का समर्थन
  • HTML और CSS स्वीकार करने के अलावा, object के रूप में style देने वाली Hyperscript(h()) API का समर्थन
  • सभी OpenType/TrueType buffers को register करना आवश्यक है
  • grapheme स्तर पर font fallback
  • रंगीन pronunciation marks का समर्थन
  • बेहतर line breaking (जैसे: अगली पंक्ति की शुरुआत में padding को स्थानांतरित करना)
  • optimized shaping
  • inherited और cascaded styles की गणना दो बार नहीं की जाती
  • CSS layout के जितने संभव edge cases हैं, उनका हैंडलिंग
  • पूर्ण typing
  • बहुत सारे tests
  • तेज़

समर्थित CSS नियम

  • inline formatting: color, direction, font-family, font-size, font-stretch, font-style, font-weight, line-height, text-align, vertical-align, white-space आदि properties काम करती हैं।
  • block formatting: clear, float properties काम करती हैं।
  • box और positioning: background-clip, background-color, border-color, border-style, border-width, top, right, bottom, left, box-sizing, display, height, margin, padding, position, width, z-index आदि properties काम करती हैं।

उपयोग का तरीका

  • Dropflow inherited और computed styles वाले DOM पर काम करता है।
  • h() function का उपयोग करके DOM बनाया जाता है, और style को सामान्य object के रूप में दिया जाता है।
  • layout से पहले fonts को register करना एक अनिवार्य चरण है।
  • canvas के पूरे आकार पर layout करके drawing की जा सकती है।

प्रदर्शन विशेषताएँ

  • performance, correctness के बाद सबसे महत्वपूर्ण लक्ष्य है।
  • कई उदाहरणों के ज़रिए performance की पुष्टि की जा सकती है।
  • 2019 MacBook Pro पर HTML को image में बदलने में 9ms, और 2012 MacBook Pro पर 13ms लगते हैं।
  • 'The Little Prince' को HTML से image में बदलने में 2019 MacBook Pro पर 160ms से कम, और 2012 MacBook Pro पर 250ms से कम समय लगता है।
  • 10-अक्षरों वाले शब्द को generate और layout करने में (drawing छोड़कर) 2019 MacBook Pro पर 25µs से कम, और 2012 MacBook Pro पर 50µs से कम समय लगता है।
  • Hyperscript API का उपयोग करने पर HTML और CSS parsing चरण को छोड़कर सीधे DOM बनाया जा सकता है, जिससे सबसे तेज़ performance मिलती है।

API

  • font registration और DOM creation पहले दो चरण हैं।
  • DOM को canvas पर render किया जा सकता है, या यदि layout बनाए रखना हो तो lower-level functions का उपयोग किया जा सकता है।

HarfBuzz

  • glyph layout, WebAssembly में compile किए गए HarfBuzz द्वारा किया जाता है।
  • इससे measureText API का उपयोग करते समय संभव न होने वाली सटीकता हासिल की जा सकती है।

आभार

  • dropflow की package.json dependencies नहीं हैं, लेकिन यह कई अन्य projects की बदौलत संभव हुआ है।
  • Javascript dependencies को project के अनुरूप संशोधित करके check in किया गया है।

GN⁺ की राय

  • Dropflow वेब developers के लिए CSS layout की जटिलता को संभालने और browser तथा backend दोनों में एकसमान text layout देने वाला एक नया tool है।
  • इस तरह के tools खासकर उन internationalized web applications के विकास में उपयोगी हो सकते हैं, जिन्हें कई भाषाओं और fonts का समर्थन करना होता है।
  • HarfBuzz का उपयोग text rendering की सटीकता को काफ़ी बेहतर बना सकता है, लेकिन WebAssembly तकनीक से परिचित न होने वाले developers के लिए यह प्रवेश बाधा बन सकता है।
  • समान कार्यक्षमता देने वाले अन्य projects में CSS Grid और Flexbox का उपयोग करने वाली layout libraries शामिल हैं, लेकिन Dropflow अधिक पारंपरिक CSS layout पद्धति पर केंद्रित है।
  • Dropflow अपनाने से पहले performance और compatibility को ध्यान में रखते हुए यह आकलन करना चाहिए कि यह project की आवश्यकताओं के साथ कितना मेल खाता है।

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

3 टिप्पणियां

 
winterjung 2024-03-23

मूल शीर्षक शायद यह था: "Show HN: Dropflow, a CSS layout engine for node or <canvas>". अभी यह "GN⁺: HN परिचय: node या <canvas> के लिए CSS लेआउट इंजन, Dropflow</canvas>" के रूप में दिख रहा है।
 
dlehals2 2024-03-22

शीर्षक में टैग हैं, इसलिए डिटेल पेज का title वाला हिस्सा टूट रहा है.. haha, escape करना चाहिए..
 
GN⁺ 2024-03-22
Hacker News टिप्पणी
  • ब्राउज़र rendering engine के 'magic box' को स्पष्ट रूप से समझाने वाली सामग्री के महत्व पर ज़ोर दिया गया है। अगर HTML और CSS rendering के लिए machine-readable पूरी specification बनाई जा सके, तो renderer बनाया जा सकता है, और browser की विशिष्टताएँ उसका extension हो सकती हैं।
  • इस काम को open source में उपलब्ध कराने के लिए आभार जताया गया है। backend में सुंदर PDF बनाने का मौजूदा तरीका headless browser चलाना और browser API का इस्तेमाल करके HTML/CSS को PDF में बदलना है, लेकिन server पर browser instance चलाना और बड़े workload के हिसाब से उसे scale करना महंगा पड़ता है। अब browser overhead के बिना HTML/CSS का उपयोग करके PDF को design और generate किया जा सकता है।
  • इस बात को लेकर जिज्ञासा जताई गई है कि क्या CSS और SVG को graphics और UI libraries के लिए abstraction के रूप में इस्तेमाल किया जा सकता है। node-canvas drawing वाले हिस्से को भरता हुआ दिखता है, और लगता है कि यह UI library में ज़रूरी layout वाला हिस्सा कर सकता है। CSS implementation की कठिनाई पर भी सवाल उठाया गया है।
  • कहा गया है कि वे अपने project के लिए इसी तरह की किसी चीज़ की तलाश में थे, और यह SVG या canvas का उपयोग करने वाले दूसरे projects में भी उपयोगी होगा।
  • कहा गया है कि ज़्यादातर लोग यह नहीं समझते कि HTML को प्रोग्राम के ज़रिए PNG में बदलना कितना कठिन है। इसमें Node और browser के अंतर, या HTML और canvas के अंतर से जुड़े अनगिनत छोटे-छोटे मुद्दों का सामना करना पड़ता है।
  • यह राय दी गई है कि CSS को समझने और उसके आसपास layout engine बनाने में कितनी विशाल मात्रा में काम लगता है, इसकी कल्पना करना भी मुश्किल है।
  • Flexbox से जूझ रहे लोगों के लिए, ऐसा tool पेश किया गया है जो अलग-अलग properties पर ध्यान दिए बिना responsive layout बनाने की प्रक्रिया को सरल कर सकता है।
  • इसे बड़ी उपलब्धि बताते हुए बधाई दी गई है। कहा गया है कि इसमें बहुत समय लगा होगा, और यह भी जिज्ञासा जताई गई है कि क्या वे spreadsheet product और PDF (preview?) product भी बना रहे हैं, और उन्हें आपस में कैसे जोड़ते हैं।
  • काम की तारीफ़ के साथ chearon को धन्यवाद दिया गया है।
  • साझा किया गया है कि वे इसे NativeScript या Node.js जैसी किसी चीज़ के building block के रूप में इस्तेमाल करने की संभावना को देखेंगे। text, UI frameworks द्वारा दिए जाने वाले सबसे जटिल UI elements में से एक है, और अगर Flow Layout काम करता है तो यह बहुत उत्साहजनक है। gestures (खासकर text highlighting) और IME integration जैसी सुविधाओं पर कितना काम हुआ है, इसे लेकर भी रुचि जताई गई है। किसी भी हाल में इसे open source में उपलब्ध कराने के लिए प्रशंसा की गई है।