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

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

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

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

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

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

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

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

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

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

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

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

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

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

तेज़ी से आगे बढ़ें

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

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

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

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

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

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

नतीजा

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

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

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

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