एंटीलियाज़िंग 101

शुरुआती जानकारी

ऐंटीलियासिंग वेब ग्राफ़िक्स में ऐसा हीरो होता है जो आम तौर पर खुद को हूबहू नहीं करता. यही वजह है कि स्क्रीन पर टेक्स्ट और वेक्टर का ऐनिमेशन साफ़ नज़र आता है. आज-कल ब्राउज़र में एंटी-एलियासिंग के कई तरीके इस्तेमाल किए जा रहे हैं, जो टेक्स्ट रेंडरिंग के मामले में सबसे आसान हैं. जब एंटी-एजलाइज़िंग स्विच के लिए इस्तेमाल किया जाने वाला एल्गोरिदम होता है, तो इससे अनचाहे विज़ुअल नतीजे मिल सकते हैं. इस लेख में हम एंटीएलियाज़िंग के तरीकों पर चर्चा करेंगे और देखेंगे कि पिक्सल कैसे बनाए जाते हैं.

जैसा कि हम सभी जानते हैं, हमारी सभी स्क्रीन पिक्सल से बनी होती हैं. यह ब्लॉक का एक बहुत बड़ा ग्रिड है. हर ब्लॉक में लाल, हरे, और नीले (आरजीबी) कॉम्पोनेंट मौजूद होते हैं. हमें दूर से इमेज, टेक्स्ट, और आइकॉन दिखते हैं, लेकिन आरजीबी कॉम्पोनेंट के ग्रिड को करीब से देखा जा सकता है. साथ ही, यह भी देखा जा सकता है कि सब कुछ कैसे बना है.

एंटीएलियासिंग

तो क्या होता है जब हम किसी सदिश का आकार बनाते हैं और वह किसी पिक्सेल के "हिस्सा" से गुज़रता है? मान लेते हैं कि हम जो आकार बना रहे हैं वह काला है और बैकग्राउंड सफ़ेद है. क्या हम उस पिक्सल को रंग भी दें? अगर हम इसे रंग दें, तो यह कौनसा रंग होना चाहिए? काला, स्लेटी, कुछ और?

एंटीएलियासिंग की प्रक्रिया से यह तय होता है कि पिक्सल डालते समय हमें किस रंग का इस्तेमाल करना चाहिए. इसके सबसे आसान वर्शन को ग्रेस्केल एंटीएलियाज़िंग कहा जाता है और यह पिक्सल के तीन कॉम्पोनेंट के साथ एक जैसा व्यवहार करता है. इसलिए अगर पिक्सेल आधा कवर किया गया है - और मान लीजिए कि इसे आसान बनाए रखने के लिए एक सेकंड के लिए सफ़ेद रंग के टेक्स्ट को काले रंग में ढाला जाए - तो आपको लगेगा कि हर एक कॉम्पोनेंट की चमक आधी होगी (मुझे पता है कि यह असल में है), लेकिन असल में यह इससे ज़्यादा जटिल है: आपको गामा को ध्यान में रखना होगा, जिसका मतलब है कि इसे कभी भी उस सटीक मान पर सेट नहीं किया जा सकता. वैसे तो इससे चीज़ें थोड़ी मुश्किल हो जाती हैं, लेकिन यह इस विषय की जानकारी है, इसलिए मैं इसके बारे में यहां नहीं बताऊंगा. यह जानना ज़रूरी है कि ग्रेस्केल एंटीएलियाज़िंग का काम पिक्सल लेवल पर किया जाता है और असल में हम इससे बेहतर काम कर सकते हैं.

चित्र 2 में आप वही त्रिभुज देख सकते हैं जिसे बनाया जा रहा है, लेकिन बाईं ओर एंटीएलियाज़िंग सक्षम है और दाईं ओर इसे अक्षम किया गया है. जैसा कि आप देख सकते हैं कि एंटीएलियासिंग की सुविधा चालू होने पर, जब त्रिभुज सिर्फ़ पिक्सल के हिस्से से होकर गुज़रता है, तो पिक्सल का रंग स्लेटी हो जाता है. हालांकि, इसे बंद करने पर पिक्सल गहरे काले या सफ़ेद रंग में भर जाता है और आकार दांतेदार दिखता है.

टेक्स्ट रेंडरिंग

जब भी कोई ब्राउज़र टेक्स्ट रेंडर करता है, जो कि वेक्टर की आकृति होती है, तो हमें उसी समस्या का सामना करना पड़ता है: टेक्स्ट के वर्ण कुछ ही पिक्सल को आंशिक रूप से भरेंगे. इसलिए, हम एक रणनीति बनाना चाहेंगे कि उन पिक्सल को कैसे भरा जाए. आम तौर पर, हम चाहते हैं कि टेक्स्ट को पहले से हटा दिया जाए. ऐसा करने से, टेक्स्ट पढ़ने में ज़्यादा आसान और आसान हो जाएगा.

हालांकि, यह पता चला है कि एंटीएलियाज़िंग के लिए ग्रेस्केल तरीके से समस्या को हल करने का एक तरीका ही है. पिक्सल के आरजीबी कॉम्पोनेंट को चालू करने के तरीके को लेकर अक्सर थोड़ा और ज़्यादा चुना जाने वाला तरीका अपनाया जाता है. इस प्रक्रिया को सब-पिक्सल एंटीएलियासिंग कहा जाता है. पिछले कुछ सालों में Microsoft की clearType टीम ने इसे बेहतर बनाने के लिए काफ़ी समय लगाया है और इसे बेहतर बनाने की कोशिश की है. अब इसका ज़्यादा इस्तेमाल किया जाता है और सभी प्रमुख ब्राउज़र इसका इस्तेमाल कम या ज़्यादा करते हैं.

सबसे पहले, चूंकि हम जानते हैं कि प्रत्येक पिक्सेल वास्तव में अलग-अलग लाल, हरे और नीले घटकों से बना है, इसलिए हम यह पता लगाते हैं कि बताए गए पिक्सेल के लिए उनमें से प्रत्येक घटक में से कितना “चालू” होना चाहिए. इसलिए, अगर बाईं ओर से कोई पिक्सल “आधे में ढका हुआ” है, तो हम लाल रंग के कॉम्पोनेंट को पूरी तरह से, हरे रंग के कॉम्पोनेंट को आधी पर स्विच कर सकते हैं, और नीले रंग को बंद रख सकते हैं. इस प्रोसेस को अक्सर “स्क्रीन के हॉरिज़ॉन्टल रिज़ॉल्यूशन को तीन गुना बढ़ाने वाला” कहा जाता है. यह इस बात पर निर्भर करता है कि हर पिक्सल एक इकाई न होकर एक साथ तीन अलग-अलग कॉम्पोनेंट है.

ऊपर दी गई तीसरी इमेज में देखा जा सकता है कि बाईं ओर मौजूद हर कॉम्पोनेंट को एक जैसा इस्तेमाल किया जाता है. साथ ही, हर कॉम्पोनेंट चालू या बंद करने की प्रोसेस एक जैसी है, यानी ग्रेस्केल. हालांकि, दाईं ओर हम सबपिक्सल वाले तरीके का इस्तेमाल करते हैं. हम हर कॉम्पोनेंट (लाल, हरा, और नीला) को अलग-अलग तरीके से चालू करते हैं. यह इस बात पर निर्भर करता है कि यह बनाए जा रहे आकार के साथ कितना ओवरलैप करता है.

हालांकि, इन सभी बातों के बाद भी, इंसान की आंखों की रोशनी असल में लाल, हरी और नीली रोशनी को बराबर नहीं माना जाता. हम लाल या नीले रंग की तुलना में हरे रंग के प्रति ज़्यादा संवेदनशील हैं और इसका मतलब है कि ग्रेस्केल एंटीएलियाज़िंग से काफ़ी फ़ायदा हो सकता है. डैरेल रेक्स फ़िन्ली के मुताबिक, हर कॉम्पोनेंट को अलग-अलग चालू करने से साफ़ तौर पर तीन गुना सुधार नहीं होता. हालांकि, सब-पिक्सल एंटीएलियासिंग से काफ़ी मदद मिलती है और इसका मतलब यह है कि ग्रेस्केल एंटीएलियासिंग के इस्तेमाल की तुलना में हमें टेक्स्ट ज़्यादा साफ़ तौर पर दिखता है.

लक्ष्य पूरा करने के लिए

डेवलपर के तौर पर, हमारे लिए इन सभी बातों का क्या मतलब है? Chrome के नज़रिए से देखा जाए, तो टेक्स्ट को रेंडर करने के लिए ग्रेस्केल और सब-पिक्सल एंटी-एलियासिंग दोनों का मिला-जुला रूप इस्तेमाल होता है. आपको कौनसी चीज़ें मिल सकती हैं, यह कुछ चीज़ों पर निर्भर करता है. हालांकि, शुरू करने के लिए हमें लेयर के बारे में कुछ समझना होगा, क्योंकि यह मुख्य मापदंड है. अगर आपको नहीं पता है कि लेयर किस तरह से लेयर का इस्तेमाल करती हैं और Chrome में उनका इस्तेमाल किस तरह किया जाता है, तो टॉम विल्ज़ियस ने विषय का बेहतरीन परिचय लिखा है, जिसे आपको पहले पढ़ना चाहिए.

यह मानकर कि आपको लेयर के बारे में जानकारी है या आपने अभी इनके बारे में पढ़ लिया है, तो आइए आगे बढ़ें. यदि पृष्ठ के लिए हार्डवेयर कंपोज़िटिंग सक्षम है और आपकी लेख सामग्री किसी ऐसी लेयर पर है जो रूट लेयर नहीं है, तो यह डिफ़ॉल्ट रूप से ग्रेस्केल एंटीलियाज़िंग का उपयोग करके रेंडर की जाएगी. डेवलपर अक्सर देखते हैं कि अगर वे एलिमेंट को अपनी (नॉन-रूट) लेयर में (जैसे कि translateZ का इस्तेमाल करके) करने के लिए हैक लागू करते हैं, तो उन्हें टेक्स्ट अलग तरह से रेंडर होता हुआ दिखता है. अक्सर डेवलपर JavaScript या सीएसएस के ज़रिए तुरंत “नई लेयर” ट्रिगर लागू करते हैं. इसकी वजह से, टेक्स्ट रेंडरिंग सब-पिक्सल से ग्रेस्केल में बदल जाती है. अगर आपको यह पता न हो कि रेंडरिंग में बदलाव की वजह क्या है, तो यह काफ़ी मुश्किल काम हो सकता है. अगर आपका टेक्स्ट रूट लेयर में मौजूद है, तो इसे सबपिक्सल एंटी-एलियाज़िंग के साथ रेंडर किया जाना चाहिए. इस वजह से इसे पढ़ना ज़्यादा आसान होगा.

लेकिन, वेब की सभी चीज़ों की तरह, यह भी बदल रहा है. Chrome में नॉन-रूट लेयर में टेक्स्ट के लिए सबपिक्सल एंटीएलियाज़िंग चालू है, बशर्ते लेयर तीन शर्तों को पूरा करती हो. यह कहना सही है कि ये नियम आज लागू होते हैं, लेकिन हो सकता है कि इनमें बदलाव हों. समय के साथ, आपको ज़्यादा मामले दिखेंगे. मौजूदा समय में ये शर्तें:

1. लेयर का बैकग्राउंड पूरी तरह से ओपेक है. खास तौर पर, border-radius या नॉन-डिफ़ॉल्ट background-clip वैल्यू का इस्तेमाल करने से, लेयर को नॉन-ओपेक माना जाता है और टेक्स्ट रेंडरिंग ग्रेस्केल एंटीएलियाज़िंग में बदल जाती है.
2. लेयर में सिर्फ़ आइडेंटिटी ट्रांसफ़ॉर्म या इंटिग्रल अनुवाद लागू किया जा सकता है. इंटीग्रल से हमारा मतलब पूर्णांकित मान से है. उदाहरण के लिए, translate(20.2px, 30px) फ़ंक्शन को ग्रेस्केल एंटीएलियाज़िंग मिलेगी, क्योंकि x कॉम्पोनेंट, 20.2px, इंटिग्रल नहीं है. आइडेंटिटी ट्रांसफ़ॉर्म का मतलब सिर्फ़ इतना होता है कि इसके डिफ़ॉल्ट से अलग कोई और रोटेशन, ट्रांसलेशन या स्केलिंग लागू नहीं होती है.
3. लेयर की ओपैसिटी 1.0 है. ओपैसिटी में कोई भी बदलाव होने पर एंटीएलियाज़िंग सब-पिक्सल से ग्रेस्केल में बदल जाएगा.

एक और बात, ध्यान रखने वाली बात यह है कि सीएसएस ऐनिमेशन लागू करने से नई लेयर बन सकती है, जबकि requestAnimationFrame का इस्तेमाल करने से ऐसा नहीं होता. कुछ डेवलपर के लिए, टेक्स्ट रेंडरिंग में अंतर होने की वजह से, सीएसएस ऐनिमेशन का इस्तेमाल नहीं किया जा सकता. इसलिए, अगर टेक्स्ट रेंडरिंग में अंतर की वजह से, एलिमेंट को ऐनिमेट करने के लिए JavaScript का इस्तेमाल किया जा रहा है, तो देखें कि इस अपडेट से आपकी समस्या ठीक होती है या नहीं!

इसमें Chrome शामिल है. जहां तक अन्य ब्राउज़र की बात है, तो Opera, Chrome के तरीके से मेल खाना चाहिए. यह Chrome के काम करने के तरीके से मेल खाना चाहिए. ऐसा लगता है कि Internet Explorer करीब सभी टेक्स्ट के लिए सब-पिक्सल एंटीएलियासिंग का इस्तेमाल करता है (अगर आपने वाकई में clearType को चालू किया हुआ है!), हालांकि ऐसा लगता है कि वह Windows 8 के मेट्रो मोड में नहीं है. WebKit, Blink के निकट होने के कारण, Chrome के समान ही व्यवहार करता है, इन नए सुधारों के बिना, जो अधिक सबपिक्सल एंटी-एलियासिंग की अनुमति देते हैं. Firefox आम तौर पर Internet Explorer जैसा ही काम करता है, क्योंकि यह करीब-करीब सभी टेक्स्ट के लिए सब-पिक्सल एंटीएलियाज़िंग का इस्तेमाल करता है. बेशक यह पूरी सूची नहीं है. ऐसा सभी ब्राउज़र में हो सकता है, जहां सब-पिक्सल के बजाय ग्रेस्केल एंटीएलियाज़िंग का इस्तेमाल किया जाता है. हालांकि, यह जानना अच्छा है कि सबपिक्सल एंटीएलियाज़िंग का इस्तेमाल ब्राउज़र के मुख्य सेट में बड़े पैमाने पर किया जाता है.

नतीजा

इसलिए अब आपको थोड़ा बहुत जानकारी है कि एंटीएलियासिंग कैसे काम करता है और आज आपको अपनी साइटों और ऐप्लिकेशन में टेक्स्ट रेंडरिंग में अंतर क्यों दिख सकता है, खासकर कम डीपीआई डिवाइसों पर. अगर टेक्स्ट रेंडरिंग के लिए Chrome को लागू करने के साथ-साथ आपको इन गड़बड़ियों को ठीक करना है, तो आपको इन गड़बड़ियों पर स्टार का निशान लगाना चाहिए:

• 48 पिक्सल से बड़े साइज़ के अपने-आप फ़ॉन्ट ग्रेस्केल एंटी-एलियासिंग को बदला नहीं जा सकता
• Windows के लिए Chrome पर Google Web Fonts की मदद से डरावना फ़ॉन्ट रेंडरिंग)
• DirectWrite सहायता

संसाधन और रेफ़रंस

• Wikipedia पर सब-पिक्सल रेंडरिंग
• सबपिक्सल टेक्स्ट रेंडरिंग पर डेरेल रेक्स फ़िनली
• सबपिक्सल रेंडरिंग कैसे काम करती है
• टाइप रेंडरिंग पर असर डालने वाली सीएसएस प्रॉपर्टी