LayoutNG एक नया लेआउट इंजन है. इसे Chrome 76 में रिलीज़ होने के लिए शेड्यूल किया गया है. इसे कई साल बाद पूरा किया जा रहा है. तुरंत कई शानदार सुधार किए गए हैं. साथ ही, परफ़ॉर्मेंस में सुधार के साथ-साथ बेहतर लेआउट वाली सुविधाएं भी आने वाली हैं.
नया क्या है?
- परफ़ॉर्मेंस आइसोलेशन में सुधार करता है.
- लैटिन के अलावा अन्य स्क्रिप्ट के लिए बेहतर सहायता.
- फ़्लोट और मार्जिन से जुड़ी कई समस्याओं को ठीक करता है.
- वेब के साथ काम करने से जुड़ी कई समस्याओं को ठीक करता है.
कृपया ध्यान दें कि LayoutNG को अलग-अलग चरणों में लॉन्च किया जाएगा. Chrome 76 में, LayoutNG का इस्तेमाल इनलाइन और ब्लॉक लेआउट के लिए किया जाता है. अन्य लेआउट प्रिमिटिव (जैसे कि टेबल, फ़्लेक्सबॉक्स, ग्रिड, और ब्लॉक फ़्रैगमेंटेशन) को बाद वाली रिलीज़ में बदल दिया जाएगा.
डेवलपर को दिखने वाले बदलाव
हालांकि, उपयोगकर्ता का दिखने वाला असर कम से कम होना चाहिए, LayoutNG कुछ व्यवहार को बहुत ही बारीकी से बदलता है, सैकड़ों जांचों को ठीक करता है, और अन्य ब्राउज़र के साथ बेहतर काम करता है. हमारी पूरी कोशिशों के बावजूद, हो सकता है कि इसकी वजह से कुछ साइटें और ऐप्लिकेशन थोड़ा अलग तरह से रेंडर या व्यवहार करें.
परफ़ॉर्मेंस की विशेषताएं भी अलग हैं; हालांकि पूरी तरह से परफ़ॉर्मेंस पहले से मिलती-जुलती या थोड़ी बेहतर है, इस्तेमाल के कुछ मामलों में परफ़ॉर्मेंस में सुधार दिख सकता है. वहीं, कुछ मामलों में कम से कम कुछ समय के लिए, परफ़ॉर्मेंस में सुधार होने की उम्मीद है.
फ़्लोट
LayoutNG, फ़्लोट करने वाले एलिमेंट (float: left; और float: right;) के लिए काम करने की सुविधा को फिर से लागू करता है. यह अन्य कॉन्टेंट के मुकाबले फ़्लोट की प्लेसमेंट को सही करने से जुड़ी कई समस्याओं को ठीक करता है.
सुपरइम्पोज़्ड सामग्री
किसी फ़्लोटिंग एलिमेंट के आस-पास कॉन्टेंट रखते समय, लेगसी फ़्लोट लागू करने पर मार्जिन सही तरीके से नहीं गिने जाते. इस वजह से, कॉन्टेंट का कुछ हिस्सा या पूरी तरह से फ़्लोट को ओवरलैप करता है. इस गड़बड़ी का सबसे सामान्य मेनिफ़ेस्ट तब दिखता है, जब किसी इमेज को पैराग्राफ़ के बगल में रखा जाता है. इस स्थिति में, बचने का लॉजिक, लाइन की ऊंचाई तय नहीं कर पाता. (Chromium बग #861540 देखें.)
टेक्स्ट, फ़्लोटिंग इमेज को दाईं ओर ओवरलैप करता है
टेक्स्ट को दाईं ओर फ़्लोटिंग इमेज के बगल में रखा जाना चाहिए
यही समस्या किसी एक पंक्ति में भी आ सकती है. नीचे दिए गए उदाहरण में, फ़्लोटिंग एलिमेंट (#895962) के बाद नेगेटिव मार्जिन वाला ब्लॉक एलिमेंट दिखाया गया है. टेक्स्ट फ़्लोट के साथ ओवरलैप नहीं होना चाहिए.
टेक्स्ट, फ़्लोट करने वाले नारंगी एलिमेंट को ओवरलैप करता है
टेक्स्ट को फ़्लोट करने वाले नारंगी एलिमेंट के बगल में रखा गया है
फ़ॉर्मैटिंग के लिए कॉन्टेक्स्ट की पोज़िशनिंग
जब ब्लॉक फ़ॉर्मैटिंग के कॉन्टेक्स्ट बनाने वाले किसी एलिमेंट का साइज़ फ़्लोट के बगल में होता है, तो लेगसी लेआउट इंजन, हारने से पहले एक तय संख्या पर ब्लॉक को साइज़ करने की कोशिश करता है. इस तरीके से यह उम्मीद के मुताबिक और अस्थिर होने लगा कि यह दूसरे तरीकों से मेल नहीं खा सका. LayoutNG में, ब्लॉक को आकार देते समय सभी फ़्लोट को ध्यान में रखा जाता है. (Chromium गड़बड़ी #548033 देखें.)
ऐब्सलूट और फ़िक्स्ड पोज़िशनिंग, अब W3C स्पेसिफ़िकेशन के मुताबिक हैं. साथ ही, ये दूसरे ब्राउज़र के व्यवहार से बेहतर तरीके से मेल खाते हैं. दोनों के बीच यह अंतर दो मामलों में सबसे ज़्यादा दिखता है:
- ब्लॉक वाला कई लाइन वाला इनलाइन
अगर पूरी तरह से एक जगह पर मौजूद ब्लॉक में एक से ज़्यादा लाइनें हैं, तो हो सकता है कि लेगसी इंजन, गलत तरीके से लाइनों के सिर्फ़ एक सबसेट का इस्तेमाल करे. ऐसा करके, ब्लॉक की सीमाओं का पता लगाया जा सकता है. - वर्टिकल राइटिंग मोड
लेगसी इंजन में, वर्टिकल राइटिंग मोड में आउट-ऑफ़-फ़्लो एलिमेंट को डिफ़ॉल्ट पोज़िशन में रखने में कई समस्याएं थीं. लिखने के मोड की बेहतर सुविधा के बारे में ज़्यादा जानकारी के लिए, अगला सेक्शन देखें.
दाएं से बाएं (आरटीएल) भाषाएं और वर्टिकल राइटिंग मोड
LayoutNG को शुरू से ही वर्टिकल राइटिंग मोड और RTL भाषाओं के साथ काम करने के लिए डिज़ाइन किया गया है. इनमें दो-तरफ़ा कॉन्टेंट भी शामिल है.
दो-तरफ़ा टेक्स्ट
LayoutNG, यूनिकोड स्टैंडर्ड में तय किए गए सबसे अप-टू-डेट दोतरफ़ा एल्गोरिदम के साथ काम करता है. इस अपडेट से न सिर्फ़ रेंडरिंग की कई गड़बड़ियां ठीक होती हैं, बल्कि इसमें कुछ सुविधाएं भी शामिल नहीं होती हैं, जैसे कि जुड़े हुए ब्रैकेट सपोर्ट (Chromium बग #302469 देखें.)
ऑर्थोगोनल फ़्लो
LayoutNG, वर्टिकल फ़्लो लेआउट को ज़्यादा सटीक बनाने में मदद करता है, जैसे कि बिलकुल सही पोज़िशन में रखे गए ऑब्जेक्ट का प्लेसमेंट और ऑर्थोगोनल फ़्लो बॉक्स का साइज़ (खास तौर पर तब, जब प्रतिशत का इस्तेमाल किया गया हो). W3C टेस्ट सुइट के 1,258 टेस्ट में से, 103 टेस्ट, LayoutNG के पुराने लेआउट इंजन पास में फ़ेल हुए.
मूल साइज़
जब किसी ब्लॉक में ऑर्थोगोनल राइटिंग मोड में बच्चे होते हैं, तो इंटिग्रिटी साइज़ की गिनती सही तरीके से की जाती है.
टेक्स्ट का लेआउट और लाइन ब्रेकिंग
Chromium के लेगसी लेआउट इंजन ने, हर एलिमेंट और लाइन के हिसाब से टेक्स्ट एलिमेंट तय किए हैं. यह तरीका ज़्यादातर मामलों में कारगर साबित हुआ, लेकिन स्क्रिप्ट के साथ काम करने और अच्छी परफ़ॉर्मेंस हासिल करने में बहुत मुश्किल आई. उसके मेज़रमेंट में भी अंतर था. इसकी वजह से, साइज़-टू-कॉन्टेंट कंटेनर के साइज़ और उनके कॉन्टेंट या गै़र-ज़रूरी लाइन ब्रेक के साइज़ में बहुत ही अंतर था.
LayoutNG में, टेक्स्ट को पैराग्राफ़ लेवल पर व्यवस्थित किया जाता है और फिर उसे लाइनों में बांटा जाता है. इससे बेहतर परफ़ॉर्मेंस मिलती है, बेहतर क्वालिटी की टेक्स्ट रेंडरिंग होती है. साथ ही, लाइन ब्रेकिंग भी होती है. सबसे अहम अंतरों के बारे में नीचे बताया गया है.
एलिमेंट की सीमाओं को जोड़ना
कुछ स्क्रिप्ट में, कुछ वर्ण आस-पास होने पर विज़ुअल तौर पर जोड़े जा सकते हैं. अरबी भाषा में यह उदाहरण देखें:
LayoutNG में, अब वर्ण जोड़ने की सुविधा तब भी काम करती है, जब वर्ण अलग-अलग एलिमेंट में हों. अलग-अलग स्टाइल लागू करने पर, जॉइन भी सेव रहेंगे. (Chromium बग #6122 देखें.)
ग्राफ़ीम, किसी भाषा के लेखन सिस्टम की सबसे छोटी यूनिट होती है. उदाहरण के लिए, अंग्रेज़ी और लैटिन वर्णमाला का इस्तेमाल करने वाली अन्य भाषाओं में, हर अक्षर एक ग्राफ़ीम होता है.
नीचे दी गई इमेज में, लेगसी लेआउट इंजन में नीचे दिए गए एचटीएमएल और LayoutNG में क्रम से रेंडरिंग को दिखाया गया है:
<div>نسق</div>
<div>نس<span>ق</span></div>
ध्यान दें कि दूसरे लेटर का फ़ॉर्मैट कैसे बदलता है
अब दोनों वर्शन एक जैसे हैं
चाइनीज़, जैपनीज़, और कोरियन (सीजेके) लिगेचर
हालांकि, Chromium पहले से ही लिगेचर के साथ काम करता है और उन्हें डिफ़ॉल्ट रूप से चालू करता है. हालांकि, इसकी कुछ सीमाएं हैं: रेंडरिंग ऑप्टिमाइज़ेशन की वजह से, लेगसी लेआउट इंजन में ऐसे लिगेचर काम नहीं करते जिनमें एक से ज़्यादा सीजेके कोडपॉइंट शामिल होते हैं. LayoutNG इन पाबंदियों को हटा देता है. साथ ही, स्क्रिप्ट पर ध्यान दिए बिना लिगेचर के साथ काम करता है.
नीचे दिए गए उदाहरण में, Adobe SourceHanSansJP फ़ॉन्ट का इस्तेमाल करके तीन सूझ-बूझ वाले लिगेचर को रेंडर करने को दिखाया गया है:
मेगाहर्ट्ज़ सही तरीके से लिगचर बनाता है
लेकिन マンション और 10点 ऐसा नहीं करता है
तीनों ग्रुप उम्मीद के मुताबिक लिगेचर बनाते हैं
साइज़-टू-कॉन्टेंट एलिमेंट
कॉन्टेंट के साइज़ वाले एलिमेंट (जैसे, इनलाइन ब्लॉक) के लिए, मौजूदा लेआउट इंजन, पहले ब्लॉक के साइज़ का हिसाब लगाता है. इसके बाद, कॉन्टेंट पर लेआउट लागू करता है. कुछ मामलों में, जैसे कि जब कोई फ़ॉन्ट तेज़ी से बदलता है, तो इससे कॉन्टेंट के साइज़ और ब्लॉक के साइज़ में अंतर हो सकता है. LayoutNG में, इस गड़बड़ी मोड को हटा दिया गया है, क्योंकि ब्लॉक का साइज़, असल कॉन्टेंट के आधार पर तय किया गया है.
नीचे दिए गए उदाहरण में, कॉन्टेंट के हिसाब से पीले रंग के ब्लॉक का साइज़ दिखाया गया है. इसमें लाटो फ़ॉन्ट का इस्तेमाल किया गया है, जिसमें T और - के बीच की स्पेसिंग में बदलाव करने के लिए करिंग का इस्तेमाल किया गया है. पीले बॉक्स के बाउंड, टेक्स्ट की सीमाओं से मेल खाने चाहिए.
आखिरी खाली सफ़ेद जगह पर ध्यान दें
ध्यान दें कि बॉक्स के बाएं और दाएं किनारे, टेक्स्ट की सीमाओं से कैसे मेल खाते हैं
लाइन रैप करना
ऊपर बताई गई समस्या की तरह ही, अगर कॉन्टेंट के साइज़ से छोटे कॉन्टेंट वाले ब्लॉक का कॉन्टेंट, ब्लॉक की तुलना में बड़ा (चौड़ा) है, तो कभी-कभी कॉन्टेंट को बेवजह रैप किया जा सकता है. ऐसा कम ही होता है. हालांकि, कभी-कभी ऐसा कॉन्टेंट अलग-अलग दिशाओं में देखने की वजह से होता है.
दाईं ओर गैर-ज़रूरी लाइन ब्रेक और अतिरिक्त जगह पर ध्यान दें
ध्यान दें कि बॉक्स के बाएं और दाएं किनारे, टेक्स्ट की सीमाओं से कैसे मेल खाते हैं
ज़्यादा जानकारी
LayoutNG के ज़रिए ठीक की गई काम करने की खास समस्याओं और बग के बारे में ज़्यादा जानकारी के लिए, कृपया ऊपर लिंक की गई समस्याएं देखें या Fixed-In-LayoutNG के तौर पर मार्क किए गए बग के लिए Chromium बग डेटाबेस खोजें.
अगर आपको लगता है कि LayoutNG की वजह से किसी वेबसाइट में रुकावट आ रही है, तो कृपया गड़बड़ी की रिपोर्ट दर्ज करें. हम इसकी जांच करेंगे.