पाठ प्रतिपादन: यह कितना जटिल हो सकता है? यह अविश्वसनीय रूप से चुनौतीपूर्ण हो जाता है! जहां तक ​​मुझे पता है, शाब्दिक रूप से कोई भी सिस्टम "पूरी तरह से" पाठ प्रदर्शित नहीं करता है। कहीं बेहतर, कहीं बदतर।

मान लें कि आप मनमाने ढंग से फोंट, रंग और शैलियों के साथ मनमाना पाठ चाहते हैं, जिसमें लाइन रैपिंग और टेक्स्ट हाइलाइटिंग समर्थन है। वास्तव में, ये जटिल पाठ, एक टर्मिनल विंडो, एक वेब पेज आदि के सही प्रदर्शन के लिए न्यूनतम आवश्यकताएं हैं।

सामान्य तौर पर, हम तुरंत कहते हैं: लगातार सही उत्तर नहीं हैं, सब कुछ आपके विचार से बहुत अधिक महत्वपूर्ण है, और सब कुछ बाकी सब को प्रभावित करता है।

हम उन विषयों पर चर्चा करेंगे जो एक अवधारणा के भीतर एकजुट नहीं हैं, ये सिर्फ ऐसे मुद्दे हैं जो मुझे फ़ायरफ़ॉक्स में पाठ प्रदान करने पर काम करने के कई वर्षों के दौरान सामना करना पड़ा। उदाहरण के लिए, हम पाठ विभाजन या किसी विशेष मंच के लिए विभिन्न पाठ पुस्तकालयों के प्रबंधन की समस्याओं पर बहुत विस्तार से चर्चा नहीं करेंगे, क्योंकि मैं इसमें बहुत दिलचस्पी नहीं रखता हूं।

1. शब्दावली

पाठ की प्रकृति जटिल है, और अंग्रेजी सभी बारीकियों को खराब रूप से बताती है। इस दस्तावेज़ के लिए, मैं निम्नलिखित शर्तों का पालन करने की कोशिश करूंगा। कृपया ध्यान दें कि ये शब्द "सही" नहीं हैं, मैं उन्हें मूल अंग्रेजी बोलने वालों के लिए महत्वपूर्ण अवधारणाओं को बताने के लिए उपयोगी हूं, जिनके पास भाषा विज्ञान में कोई अनुभव नहीं है।

वर्ण (अक्षर):

• स्केलर (स्केलर): यूनिकोड स्केलर, यूनिकोड में "सबसे छोटी इकाई" (यह एक कोड बिंदु भी है)।
  
• चरित्र: एक विस्तारित यूनिकोड ग्रेफेम क्लस्टर (ईजीसी), यूनिकोड में "सबसे बड़ी इकाई" (संभावित रूप से कई स्केलर से मिलकर)।
  
• ग्लिफ़ (ग्लिफ़): एक फ़ॉन्ट में दिए गए प्रतिपादन की परमाणु इकाई। यह आमतौर पर फ़ॉन्ट में एक विशिष्ट पहचानकर्ता होता है।
  
• संयुक्ताक्षर: एक ग्लिफ़ जिसमें कई स्केल होते हैं और संभावित रूप से भी कई वर्ण होते हैं (देशी वक्ताओं कई वर्णों के रूप में संयुक्ताक्षर का प्रतिनिधित्व कर सकते हैं, लेकिन एक फ़ॉन्ट के लिए यह सिर्फ एक वर्ण है)।
  
• इमोजी: "पूर्ण रंग" ग्लिफ़।

फ़ॉन्ट्स (फोंट):

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

2. क्या स्टाइल, लेआउट और फॉर्म एक दूसरे पर निर्भर करते हैं?

यहाँ एक संक्षिप्त रूपरेखा आपको यह बताने के लिए दी गई है कि एक ठेठ टेक्स्ट रेंडरिंग पाइपलाइन कैसे काम करती है:

1. स्टाइलाइजेशन (पार्सिंग मार्कअप, फोंट के लिए क्वेरी सिस्टम)।
   
2. लेआउट (लाइनों में पाठ को तोड़ना)।
   
3. आकार देना, आकार देना (ग्लिफ़ और उनकी स्थिति की गणना)।
   
4. बनावट एटलस / कैश के लिए आवश्यक ग्लिफ़ का रेखांकन)।
   
5. रचना (एटलस से वांछित स्थिति में ग्लिफ़ की प्रतिलिपि बनाना)।

दुर्भाग्य से, ये चरण उतने सरल नहीं हैं जितने कि लग सकते हैं।

अधिकांश फोंट वास्तव में मांग पर सभी संभावित ग्लिफ़ का उत्पादन नहीं करते हैं। बहुत सारे ग्लिफ़ हैं, इसलिए फोंट आमतौर पर केवल एक विशिष्ट पत्र को लागू करते हैं। अंत उपयोगकर्ताओं को आमतौर पर पता नहीं है या इस बारे में परवाह नहीं है, इसलिए एक विश्वसनीय प्रणाली को अन्य फोंट के लिए कैस्केड करना चाहिए यदि वर्ण उपलब्ध नहीं हैं।

उदाहरण के लिए, हालांकि निम्न पाठ का मार्कअप एक से अधिक फ़ॉन्ट नहीं देता है , यह किसी भी सिस्टम पर उचित प्रतिपादन के लिए आवश्यक है: हैलो मने ب بم 好। इसलिए हम खतरनाक तरीके से इस तथ्य के करीब पहुंच रहे हैं कि चरण 1 (शैलीकरण) चरण 3 (आकार देना) पर निर्भर होना शुरू हो जाता है!

(वैकल्पिक रूप से, आप नोटो दृष्टिकोण ले सकते हैं और एक Uber फ़ॉन्ट का उपयोग कर सकते हैं जिसमें सभी वर्ण शामिल हैं। हालांकि तब उपयोगकर्ता फ़ॉन्ट को कॉन्फ़िगर नहीं कर सकते हैं, और आप सभी प्लेटफार्मों पर उपयोगकर्ताओं को "मूल" टेक्स्ट इंटरफ़ेस प्रदान नहीं कर सकते। लेकिन मान लीजिए कि आपको अधिक विश्वसनीय चाहिए। समाधान)।

इसी तरह, लेआउट के लिए आपको यह जानना होगा कि पाठ का प्रत्येक टुकड़ा कितना स्थान लेता है, लेकिन यह केवल आकार देने के बाद ही ज्ञात होता है! क्या चरण 2 चरण 3 के परिणामों पर निर्भर करता है?

लेकिन आकार देने के लिए, आपको लेआउट और शैली जानने की आवश्यकता है, इसलिए हम अटक गए हैं। क्या करें?

सबसे पहले, शैलीीकरण धोखा देती है। यद्यपि हम वास्तव में पूर्ण ग्लिफ़ प्राप्त करना चाहते हैं , स्टाइल के लिए स्केलर पर्याप्त हैं । यदि फ़ॉन्ट ठीक से लिखने का समर्थन नहीं करता है, तो यह उस लेखन के स्केलर के बारे में कुछ भी जानने का दावा नहीं करेगा। इस प्रकार, आप आसानी से "सर्वश्रेष्ठ" फ़ॉन्ट निम्नानुसार पा सकते हैं:

हमारे पाठ में प्रत्येक प्रतीक (ईजीसी) के लिए, हम सूची (कैस्केड) में प्रत्येक फ़ॉन्ट से पूछताछ करते हैं कि क्या इस प्रतीक को बनाने वाले सभी स्केलर इसे जानते हैं। यदि हां, तो उनका उपयोग करें। यदि हम बिना किसी परिणाम के सूची के अंत में जाते हैं, तो हमें टोफू मिलता है ( , ग्लिफ़ संकेतक गायब है)।

इमोजी के साथ मिलते समय आपने शायद ही ऐसा कोई संकेतक देखा हो! चूंकि कुछ इमोजी वास्तव में कई सरल इमोजी के लिगचर हैं, एक फ़ॉन्ट केवल व्यक्तिगत घटकों को जारी करके एक चरित्र के लिए समर्थन का संकेत दे सकता है। इस तरह से सचमुच की तरह लग सकता है यदि फ़ॉन्ट नए लिगचर के बारे में जानने के लिए "बहुत पुराना" है। यह तब भी हो सकता है जब आपके पास "बहुत पुराना" यूनिकोड कार्यान्वयन हो जो नए चरित्र के बारे में नहीं जानता हो, इस तरह के आंशिक मैच को स्वीकार करने के लिए शैली प्रणाली को मजबूर करता है।

तो, अब हम जानते हैं कि लेआउट या फ़ॉर्म को संदर्भित किए बिना हम वास्तव में कौन से फ़ॉन्ट का उपयोग करेंगे, (हालांकि आकार देने से हमारे रंग बदल सकते हैं, अगले भाग में उस पर और अधिक)। क्या हम इसी तरह लेआउट और फॉर्म की अन्योन्याश्रयता से निपट सकते हैं? नहीं! पैराग्राफ ब्रेक जैसी चीजें आपको एक कठिन लाइन ब्रेक देती हैं, लेकिन आकार देने का एकमात्र तरीका पुनरावृत्त आकार देने के माध्यम से है!

यह मान लेना आवश्यक है कि पाठ एक पंक्ति में रखा गया है, और इस रेखा को तब तक बनाते हैं जब तक कि स्थान समाप्त न हो जाए। इस बिंदु पर, आप टाइपसेटिंग ऑपरेशन कर सकते हैं और पता लगा सकते हैं कि टेक्स्ट को कहाँ तोड़ना है और अगली पंक्ति शुरू करना है। तब तक दोहराएं जब तक सब कुछ न हो जाए।

3. पाठ अलग वर्ण नहीं है

केवल अंग्रेजी को देखते हुए, तो आप सोच सकते हैं कि लिगचर किसी प्रकार का विचित्र बकवास है। मेरा मतलब है, जो वास्तव में परवाह करता है कि "" "वर्तनी" ए "है? लेकिन यह पता चला है कि कुछ भाषाओं में अनिवार्य रूप से पूरी तरह से लिगमेंट्स शामिल हैं। उदाहरण के लिए, ड़ ب بم में अलग-अलग वर्ण होते हैं। किसी भी उन्नत पाठ रेंडरिंग सिस्टम में (जो कि किसी भी मुख्य ब्राउज़र में), ये दोनों लाइनें बहुत अलग दिखेंगी।

और नहीं: यह यूनिकोड स्केलर्स और विस्तारित ग्रैफेम क्लस्टर के बीच अंतर के बारे में नहीं है। यदि आप एक विश्वसनीय यूनिकोड प्रणाली (उदाहरण के लिए, स्विफ्ट) को इस पंक्ति के विस्तारित अंगूर के समूहों को देने के लिए कहते हैं, तो यह इन पांच पात्रों को बाहर कर देगा!

चरित्र का आकार उसके पड़ोसियों पर निर्भर करता है: पाठ चरित्र के बाद चरित्र को सही ढंग से प्रदर्शित नहीं कर सकता है ।

यही है, आपको एक आकार देने वाले पुस्तकालय का उपयोग करना चाहिए। यहां उद्योग मानक हार्फबज है , और इन कार्यों को अपने दम पर हल करना बेहद मुश्किल है। इसलिए हर्फ़ बज़ का उपयोग करें।

3.1। पाठ ओवरले

हस्तलिखित फ़ॉन्ट में, ग्लिफ़ अक्सर सीम से बचने के लिए ओवरलैप करते हैं, और यह समस्या पैदा कर सकता है।

आइए एक और नज़र डालते हैं man م منش पर। क्या यह सामान्य दिखता है? अब वृद्धि:



यह अभी भी सुंदर लगता है, लेकिन पाठ को आंशिक रूप से पारदर्शी बनाते हैं। यदि आप सफारी या एज पर हैं, तो पाठ ठीक लग सकता है! लेकिन फ़ायरफ़ॉक्स या क्रोम पर, दृश्य भयानक है:



समस्या यह है कि क्रोम और फ़ायरफ़ॉक्स धोखा देने की कोशिश कर रहे हैं। उन्होंने सही ढंग से पाठ का गठन किया, लेकिन जैसे ही वे ऐसे ग्लिफ़ का सामना करते हैं, वे अभी भी उन्हें अलग से खींचने की कोशिश कर रहे हैं। यह आमतौर पर ठीक काम करता है, सिवाय इसके कि पारदर्शिता और ओवरलैप है जो इस तरह के डिमिंग का उत्पादन करता है।

एक "सही" कार्यान्वयन पाठ को पारदर्शिता के बिना एक अस्थायी सतह पर लाएगा, और फिर पारदर्शिता के साथ दृश्य में । फ़ायरफ़ॉक्स और क्रोम ऐसा नहीं करते हैं क्योंकि यह महंगा है और आमतौर पर प्रमुख पश्चिमी भाषाओं के लिए इसकी आवश्यकता नहीं है। दिलचस्प है, वे वास्तव में समस्या को समझते हैं, क्योंकि वे विशेष रूप से इमोजी के लिए इस तरह की स्क्रिप्ट की प्रक्रिया करते हैं (लेकिन हम इस पर बाद में लौटेंगे)।

3.2। स्टाइल लिगचर को बदल सकता है

ठीक है, यह उदाहरण हम मुख्य रूप से जिज्ञासा से बाहर का विश्लेषण कर रहे हैं कि मार्कअप कैसे टूट सकता है, हालांकि मैं किसी भी उचित परिदृश्य को नहीं जानता जहां यह वास्तव में चोट पहुंचा सकता है। यहां एक ही सामग्री के दो टुकड़े हैं लेकिन अलग-अलग रंग हैं:



यहाँ वे सफारी में क्या दिखते हैं:



यह वे क्रोम में दिखते हैं (जब अपने नए मॉकअप कार्यान्वयन का उपयोग करते हैं):



और यहाँ वे फ़ायरफ़ॉक्स में हैं:



संक्षेप में:

• सफारी अपर्याप्त है
  
• क्रोम ग्लिफ़ को पार्स करता है लेकिन कई रंगों को छोड़ देता है
  
• फ़ायरफ़ॉक्स एक साथ ग्लिफ़ को पार्स करता है और रंगों को प्रदर्शित करता है

मुझे लगता है कि हर किसी को फ़ायरफ़ॉक्स पर होना चाहिए, है ना? लेकिन अगर आप ज़ूम इन करते हैं, तो हम देखेंगे कि वह कुछ बहुत अजीब कर रहा है:



उन्होंने बस इस संयुक्ताक्षर को अलग-अलग रंगों के साथ चार बराबर भागों में विभाजित किया!

समस्या यह है कि वास्तव में कोई उचित जवाब नहीं है कि यहां क्या किया जाना चाहिए । हमने लिगचर को अलग-अलग शैलियों में विभाजित किया है, और चूंकि लिगचर एक अर्थ में, प्रतिपादन की एक "इकाई" है, यह समझ में आता है कि इस तरह के अलगाव का समर्थन करने से इंकार कर दें (जैसा कि अधिकांश करते हैं)।

किसी कारण से, फ़ायरफ़ॉक्स में कोई व्यक्ति वास्तव में अधिक सुरुचिपूर्ण कार्यान्वयन करने के बारे में उत्साहित था । उनका दृष्टिकोण इष्टतम मुखौटे और विभिन्न रंगों के साथ कई बार संयुक्ताक्षर खींचना है, जो आश्चर्यजनक रूप से अच्छी तरह से काम करता है!

इन "आंशिक संयुक्ताक्षर" का समर्थन करने की कोशिश करने में कुछ समझदारी है: केवल आकार देने से पता चल सकता है कि क्या एक विशेष संयुक्ताक्षर प्रदर्शित किया जाएगा, और यह सिस्टम फोंट पर निर्भर करता है, इसलिए संयुक्ताक्षर दिखाई दे सकते हैं जहां किसी को इसकी उम्मीद नहीं थी! एक क्लासिक अंग्रेजी भाषा का उदाहरण एक हाइपरलिंक की सीमा पर एक उपयोगकर्ता द्वारा स्थापित फ़ॉन्ट से एक संयुक्ताक्षर है।

यह भी अजीब है कि अंग्रेजी एक शब्द के बीच में बदल सकती है, लेकिन फ़ॉन्ट को हस्तलिखित नहीं कर सकती है?

ऐसे कोड के बारे में भी न पूछें जो आंशिक लिगचर के साथ लाइनों को तोड़ते हैं।

4. इमोजी रंग और शैली को तोड़ते हैं

यदि आप इमोजी प्रदर्शित करते हैं जैसा कि देशी सिस्टम करता है, तो आपको पाठ रंग सेटिंग्स (पारदर्शिता के अपवाद के साथ) को अनदेखा करने की आवश्यकता है:



आमतौर पर इमोजी के अपने मूल रंग होते हैं, और इस रंग का अर्थ अर्थ भी हो सकता है, जैसा कि त्वचा के रंग संशोधक के साथ होता है। इसके अलावा: वे कई रंग हो सकते हैं!

जहां तक ​​मैं बता सकता हूं, इमोजी से पहले ऐसी कोई समस्या नहीं थी, इसलिए विभिन्न प्लेटफार्मों में हल करने के लिए अलग-अलग दृष्टिकोण हैं। कुछ इमोजीस को एक ठोस चित्र (Apple) के रूप में दिखाते हैं, अन्य मोनोक्रोम परतों (Microsoft) की एक श्रृंखला के रूप में।

उत्तरार्द्ध दृष्टिकोण बुरा नहीं है, क्योंकि यह मौजूदा पाठ रेंडरिंग पाइपलाइनों के साथ अच्छी तरह से एकीकृत करता है, "बस" ग्लूकोस को मोनोक्रोम ग्लिफ़ की एक श्रृंखला में तोड़ देता है जो सभी के साथ काम करने के लिए उपयोग किया जाता है।

हालांकि, इसका मतलब यह है कि जब आप "सिंगल" ग्लिफ़ खींचते हैं, तो आपकी शैली बार-बार बदल सकती है। इसका मतलब यह भी है कि "एक" ग्लिफ़ खुद को ओवरलैप कर सकता है, जो पिछले अनुभाग में वर्णित पारदर्शिता मुद्दों की ओर जाता है। फिर भी, ब्राउज़र वास्तव में इमोजीस में परतों की पारदर्शिता को सही ढंग से जोड़ते हैं!

इस विसंगति को तीन तरीकों से समझाया जा सकता है:

• आप पहले से ही उन्हें एक विशेष तरीके से संसाधित करने के लिए रंगीन ग्लिफ़ की तलाश कर रहे हैं, इसलिए उनके लिए एक विशेष लेआउट पथ चुनना आसान है।
  
• खराब पारदर्शिता के साथ हस्तलिखित फोंट थोड़ा बदसूरत दिखते हैं, लेकिन इमोजी पूरी तरह से टूट जाते हैं और एक अवैध चरित्र सेट में बदल जाते हैं, इसलिए अतिरिक्त काम उचित है।
  
• पश्चिमी डेवलपर्स अरबी और मराठी जैसी भाषाओं की तुलना में इमोजी की अधिक देखभाल करते हैं।

अपने स्वाद के लिए विकल्प चुनें।

और फिर भी, इटैलिक या बोल्ड में एक इमोटिकॉन को कैसे उजागर किया जाए? इन शैलियों को अनदेखा करें? क्या उन्हें संश्लेषित किया जाना चाहिए? कौन जानता है ...

इसके अलावा, क्या ये इमोजी अजीब तरह से छोटे नहीं लगते हैं?

हां, किसी कारण से, सिस्टम का एक गुच्छा चुपके से इमोजी के फ़ॉन्ट आकार को बढ़ाता है ताकि वे बेहतर दिख सकें।

5. चिकना करना नरक है

पाठ के पात्र बहुत छोटे और विस्तृत हैं। यह बहुत महत्वपूर्ण है कि पाठ को पढ़ना आसान है। एक चौरसाई कार्य की तरह लगता है! नरक, 480p वास्तव में कम संकल्प है। अधिक चौरसाई !!!

तो, दो मुख्य प्रकार हैं:

• ग्रेस्केल स्मूदी
  
• उपपीठ मृदुकरण

ग्रेस्केल स्मूथिंग एक "प्राकृतिक" दृष्टिकोण है। मूल विचार यह है कि आंशिक रूप से लेपित पिक्सल को आंशिक पारदर्शिता मिलती है। रचना के दौरान, इससे पिक्सेल को उपयुक्त रंग मिल जाएगा, जिससे समग्र विवरण में सुधार होगा।

शब्द "ग्रे के शेड्स" का उपयोग एक आयामी रंग के लिए किया जाता है, जैसे हमारी एक आयामी पारदर्शिता (अन्यथा ग्लिफ़ को एक ठोस रंग में प्रदर्शित किया जाता है)। इसके अलावा, एक सफेद पृष्ठभूमि पर काले पाठ की एक विशिष्ट स्थिति में, एंटी-अलियासिंग सचमुच किनारों के साथ ग्रे रंगों को प्रदर्शित करता है।

सबपिक्सल एंटी-अलियासिंग एक चाल है जो मॉनिटर पर पिक्सेल के सामान्य प्लेसमेंट का दुरुपयोग करता है। यह बहुत अधिक जटिल है, इसलिए यदि आप वास्तव में रुचि रखते हैं, तो आपको अधिक विस्तृत प्रलेखन पढ़ना होगा, यहां उच्च-स्तरीय अवधारणा का संक्षिप्त विवरण है।

आपके मॉनिटर के पिक्सल वास्तव में लाल, हरे और नीले रंग के तीन छोटे कॉलम होते हैं। यदि आप लाल प्राप्त करना चाहते हैं, तो आप कहते हैं "सफेद काला काला"। उसी तरह, यदि आप एक नीला रंग प्राप्त करना चाहते हैं, तो "ब्लैक ब्लैक व्हाइट" निर्दिष्ट करें। दूसरे शब्दों में, यदि आप फूलों के साथ टिंकर करते हैं, तो आप क्षैतिज संकल्प को तीन गुना कर सकते हैं और बहुत अधिक विवरण प्राप्त कर सकते हैं!

आप सोच सकते हैं कि इस तरह के "इंद्रधनुष" बहुत बदसूरत होंगे, लेकिन व्यवहार में प्रणाली बहुत अच्छी तरह से काम करती है (हालांकि कुछ लोग इससे असहमत हैं)। मानव मस्तिष्क पैटर्न को पहचानना और उन्हें चिकना करना पसंद करता है। फिर भी, यदि आप उप-पृष्ठ स्मूथिंग के साथ पाठ का स्क्रीनशॉट लेते हैं, तो आप स्पष्ट रूप से सभी अतिरिक्त रंगों को देखेंगे यदि आप छवि का आकार बदलते हैं या मॉनिटर पर एक अलग उप-लेआउट लेआउट के साथ देखते हैं। यही कारण है कि पाठ वाले स्क्रीनशॉट अक्सर बहुत अजीब और खराब दिखते हैं।

(सामान्य तौर पर, इस प्रणाली का अर्थ यह भी है कि आइकन का रंग गलती से अपने कथित आकार और स्थिति को बदल सकता है, जो वास्तव में कष्टप्रद है)।

इसलिए सबपिक्सल एंटी-अलियासिंग एक बहुत ही साफ हैक है जो कि टेक्स्ट इंटेलीजेंस को बेहतर कर सकता है! लेकिन, दुर्भाग्य से, यह भी गधे में एक विशाल किरच है!

ध्यान दें कि किसी भी एंटी-अलियासिंग सिस्टम में सबपिक्सल ग्लिफ़ शिफ्ट होता है। आप हमेशा चाहते हैं कि आपके रेखांकन वाले ग्लिफ़ को पूर्ण पिक्सल्स में तड़कने के लिए रखा जाए, लेकिन रैस्टराइज़ेशन को एक विशिष्ट उप-पिक्सेल ऑफ़सेट (0 और 1 के बीच का मान) के लिए डिज़ाइन किया गया है।

इसे समझने के लिए, ग्रेस्केल स्मूथिंग के साथ 1x1 काले वर्ग की कल्पना करें:

• यदि इसका सबपिक्सल ऑफसेट 0 है, तो बस एक ब्लैक पिक्सेल रेखांकन के दौरान निकलता है।
  
• यदि सबपिक्सल ऑफसेट 0.5 है, तो जब रैस्टराइज़ किया जाता है, तो दो पिक्सेल 50% ग्रे पर निकलते हैं।

5.1। सबपिक्सल ऑफ़सेट्स ग्लिफ़ कैश को तोड़ते हैं

ग्लिफ़्स को रेखापुंज करने के लिए गणना की एक अद्भुत मात्रा की आवश्यकता होती है, इसलिए उन्हें बनावट एटलस में कैश करना बेहतर होता है। लेकिन सबपिक्सल ऑफसेट के साथ बनावट को कैश कैसे करें? प्रत्येक ऑफसेट का अपना अनूठा रेखांकन है!

यहां आपको गुणवत्ता और प्रदर्शन के बीच समझौता करने की आवश्यकता है, और यह सबपिक्सल ऑफ़सेट को अनुकूलित करके किया जा सकता है। अंग्रेजी पाठ के लिए, एक उचित संतुलन एक पूर्णांक की एक चौथाई से बंधे क्षैतिज ऑफसेट के साथ ऊर्ध्वाधर उपपिक्सेल सटीकता की कमी होगी। यह केवल चार उप-पिक्सेल स्थिति छोड़ता है, जो अभी भी एक उचित कैश आकार बनाए रखते हुए गुणवत्ता में सुधार करता है।

5.2। स्मूदिंग सबपिक्सल समग्र नहीं हो सकते

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

यदि आप उप-एंटी-अलियासिंग के साथ भी ऐसा ही करते हैं, तो यह भयानक लगेगा। उनका पूरा विचार डिस्प्ले पर पिक्सल में हेरफेर करना है। यदि डिस्प्ले पिक्सल आपकी बनावट के पिक्सल से मेल नहीं खाते हैं, तो लाल और नीले रंग के किनारों को स्पष्ट रूप से दिखाई देगा!

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

नतीजतन, ब्राउज़र में पृष्ठ के इस भाग के लिए उप-पिक्सेल एंटी-एलियासिंग (और आदर्श रूप से उप-पिक्सेल स्थिति) के लिए बाध्य करने के लिए इस तरह के एनिमेशन का पता लगाने के लिए कई आंकड़े हैं। इसे मज़बूती से लागू करना काफी मुश्किल है, क्योंकि एक एनीमेशन को मनमाने ढंग से जटिल जेएस द्वारा ट्रिगर किया जा सकता है, बिना ब्राउज़र को कोई स्पष्ट "संकेत" दिए बिना।

इसके अलावा, आंशिक पारदर्शिता की उपस्थिति में उपयोग करने के लिए सबपिक्सल स्मूथिंग मुश्किल है। वास्तव में, यहां हम अपने चैनल R, G और B को तीन पारदर्शिता मान (प्रत्येक उप-अक्षर के लिए एक) को एनकोड करने के लिए कॉन्फ़िगर करते हैं, लेकिन पाठ में स्वयं भी एक रंग और एक पृष्ठभूमि होती है, इसलिए जानकारी आसानी से खो जाती है।

ग्रेस्केल एंटी-अलियासिंग का उपयोग करते समय, हमारे पास एक समर्पित अल्फा चैनल है, इसलिए कुछ भी नहीं खोया है। इस प्रकार, ब्राउज़र आमतौर पर पारभासी वस्तुओं के साथ काम करने के लिए भूरे रंग के रंगों का उपयोग करते हैं।

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

सौभाग्य से, पिछले कुछ वर्षों में, उप-पिक्सेल चौरसाई कम प्रासंगिक हो गई है:

• रेटिना डिस्प्ले को इसकी बिल्कुल भी आवश्यकता नहीं है।
  
• फोन पर उप-पिक्सेल लेआउट इस ट्रिक (गंभीर काम के बिना) को अवरुद्ध करता है।
  
• MacOS के नए संस्करणों में, उपप्रिक्सल पाठ ओएस स्तर पर डिफ़ॉल्ट रूप से अक्षम होता है।
  
• सबपिक्सल एंटी-अलियासिंग को अक्षम करने में क्रोम अधिक आक्रामक लगता है (यह सुनिश्चित नहीं है कि यह सटीक नीति है)।
  
• नए फ़ायरफ़ॉक्स ग्राफिकल बैकएंड (वीब्रेंडर) ने सादगी के लिए अल्फा घटक को छोड़ दिया।

6. गूढ़

यह हिस्सा केवल छोटी चीजों का एक संग्रह है जो बहुत चर्चा के लायक नहीं है।

6.1। फ़ॉन्ट्स में SVG हो सकता है

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

और क्या आपने एसवीजी एनिमेटेड फोंट के बारे में सुना है ? नहीं? सब ठीक है। मुझे लगता है कि वे या तो टूट गए हैं या हर जगह लागू नहीं किए गए हैं (फ़ायरफ़ॉक्स ने गलती से उन्हें किसी तरह के उत्साही डेवलपर के कारण थोड़ी देर के लिए समर्थन दिया)।

6.2। वर्ण बड़ा हो सकता है

यदि आप किसी बहुत बड़े फ़ॉन्ट (या बहुत बड़े ज़ूम स्तर) के लिए उपयोगकर्ता के अनुरोध को आसानी से संतुष्ट करना चाहते हैं, तो आप इस आकार के एक ग्लिफ़ एटलस के लिए चरम मेमोरी प्रबंधन समस्याओं का सामना करेंगे, क्योंकि प्रत्येक चरित्र पूरी स्क्रीन से बड़ा हो सकता है। इसे संभालने के कई तरीके हैं:

• ग्लिफ़ (उदास उपयोगकर्ता) आकर्षित करने के लिए मना कर दिया।
  
• ग्लिफ़ को छोटे आकार में व्यवस्थित करें और रचना के दौरान स्केल बढ़ाएँ (यह आसान है, लेकिन किनारों के साथ धुंधला हो जाता है)।
  
• रचना के बाद सतह पर सीधे ग्लिफ़ को व्यवस्थित करें (मुश्किल, संभावित रूप से महंगा)।

6.3। चयन एक फ्रेम नहीं है, लेकिन पाठ सभी दिशाओं में जाता है

लोग आमतौर पर जानते हैं कि पाठ की मुख्य दिशा दाएं (अंग्रेजी), दाएं से बाएं (अरबी), या ऊपर से नीचे (जापानी) हो सकती है।

तो, यहां आपके लिए एक मज़ेदार पाठ है:

सभी को नमस्कार, بلم الله لا बीप बीप !!

यदि आप माउस से बाएं से दाएं डेस्कटॉप पर पाठ का चयन करते हैं, तो चयन रुक-रुक कर होता है और बीच में किसी तरह से अजीब तरह से घूमता है। ऐसा इसलिए है क्योंकि हम टेक्स्ट को एक लाइन में बाएं से दाएं और दाएं से बाएं में मिलाते हैं, जो हर समय होता है।

पहले, दाईं ओर का चयन चयन को बढ़ाता है, लेकिन तब तक घट जाता है जब तक कि यह अचानक फिर से बढ़ना शुरू न हो जाए। यह वास्तव में काफी सही है: चयन केवल वास्तविक रेखा पर निरंतर रहता है । इस प्रकार, आप सही ढंग से पाठ का एक टुकड़ा कॉपी कर सकते हैं।

आपको पाठ को हाइलाइट करने के लिए अपने कोड में, साथ ही लेआउट के लिए लाइन ब्रेक एल्गोरिथ्म में इसे ध्यान में रखना होगा।

लेकिन यह सब नहीं है।


मुझे उम्मीद है कि आपको ऐसी चीजों से निपटना नहीं होगा।

6.4। कैसे लिखना है जो लिखना असंभव है?

जब फ़ॉन्ट में कोई वर्ण नहीं है, तो उपयोगकर्ता को इसके बारे में सूचित करना अच्छा होगा। ग्लिफ़ "टोफू" इसके लिए अभिप्रेत है। आप बस एक खाली टोफू (आयत) खींच सकते हैं और अपने आप को उस तक सीमित कर सकते हैं। लेकिन अगर आप वास्तव में उपयोगी जानकारी प्रदान करना चाहते हैं, तो आप डिबगिंग को सरल बनाने के लिए लापता चरित्र का मूल्य लिख सकते हैं।

लेकिन रुकिए, हम पाठ का उपयोग यह समझाने के लिए करते हैं कि हम पाठ का उत्पादन नहीं कर सकते हैं? हम्म।

आप कह सकते हैं कि सिस्टम में एक मूल फ़ॉन्ट होना चाहिए जो हमेशा वर्णों को 0-9 और AF दिखाएगा, लेकिन यह wimps के लिए एक धारणा है। यदि उपयोगकर्ता ने अपने टूल के साथ अपने टूल को वास्तव में नष्ट कर दिया है, तो फ़ायरफ़ॉक्स एक रास्ता प्रदान करता है: एक माइक्रो फॉन्ट!

फ़ायरफ़ॉक्स के अंदर, इन 16 अक्षरों के एक छोटे से एटलस के साथ एक-बिट पिक्सेल आर्ट की एक छोटी हार्ड-कोडित सरणी है। इसलिए टोफू बनाते समय वह फोंट की चिंता किए बिना इन पात्रों को आगे बढ़ा सकता है।

6.5। शैली फ़ॉन्ट का हिस्सा है (जब तक कि यह नहीं है)

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

हालांकि, कुछ फोंट इन शैलियों के बिना आते हैं, इसलिए आपको अभी भी इन प्रभावों को बनाने के लिए एक सरल एल्गोरिथम तरीका चाहिए।

शैलियों का सटीक पता लगाने और प्रसंस्करण अत्यधिक प्रणाली पर और विशेषज्ञता के मेरे क्षेत्र के बाहर निर्भर है, इसलिए मैं इसे अच्छी तरह से समझा नहीं सकता। मैं सिर्फ वेब्रेंडर में फ़ॉन्ट हैंडलिंग कोड में तल्लीन कर दूंगा ।

किसी भी मामले में, आपको एक सिंथेटिक कमबैक की आवश्यकता है । सौभाग्य से, कार्यान्वयन वास्तव में काफी सरल है:

सिंथेटिक इटैलिक्स: प्रत्येक ग्लिफ़ को झुकाएं।

सिंथेटिक बोल्ड: पाठ की दिशा में थोड़ी सी ऑफसेट के साथ प्रत्येक ग्लिफ़ को कई बार खींचें।

ईमानदारी से, ये दृष्टिकोण बहुत अच्छा करते हैं! लेकिन उपयोगकर्ताओं को लगता है कि सब कुछ "गलत" हो सकता है। इसलिए, यदि आप प्रयास करते हैं तो आप बेहतर कर सकते हैं।

6.6। कोई सटीक पाठ रेंडरिंग नहीं

प्रत्येक प्लेटफ़ॉर्म की अपनी त्रुटियां, अनुकूलन, और इतने लंबे समय के लिए quirks हैं कि वे सौंदर्यशास्त्र बन गए हैं। इसलिए, यहां तक ​​कि अगर आप दृढ़ता से मानते हैं कि कुछ चीजें आदर्श या महत्वपूर्ण हैं, तो हमेशा विभिन्न वरीयताओं वाले उपयोगकर्ताओं का एक बड़ा समूह होगा। एक मजबूत पाठ विज़ुअलाइज़ेशन सिस्टम इन विभिन्न प्राथमिकताओं का समर्थन करता है (जब उचित चूक चुनते हैं)।

आपके कॉन्फ़िगरेशन को उपयोगकर्ता की प्रणाली, विशिष्ट फ़ॉन्ट, विशिष्ट एप्लिकेशन और विशिष्ट ग्रंथों को ध्यान में रखना चाहिए। आपको प्रत्येक प्लेटफ़ॉर्म (ऐसे quirks) के मूल "लुक" से मेल खाने की कोशिश करनी चाहिए।

इसमें शामिल हैं:

• उप-पिक्सेल एंटी-एलियासिंग को अक्षम करने की क्षमता (कुछ वास्तव में इसे नफरत करते हैं)।
  
• किसी भी विरोधी अलियासिंग को बंद करने की क्षमता (हाँ, लोग ऐसा करते हैं)।
  
• प्लेटफ़ॉर्म / प्रारूप-विशिष्ट गुणों का एक टन, जैसे इशारा करना, चौरसाई करना, विविधताएँ, गामा, आदि।

इसका अर्थ यह भी है कि प्रत्येक सिस्टम के सौंदर्यशास्त्र (कोर टेक्स्ट, डायरेक्टराइट और फ्रीटाइप) को अपने संबंधित प्लेटफॉर्म पर मेल करने के लिए देशी टेक्स्ट लाइब्रेरी का उपयोग किया जाना चाहिए ।

7. अतिरिक्त लिंक

यहाँ प्रस्तुत है दुःस्वप्न के पाठ के बारे में कुछ और लेख:

• "विंडोज को काम करने के लिए कुछ ट्रू टाइप फ़ॉन्ट पैच करने होंगे"
  
• "फ़ायरफ़ॉक्स में बहुत सारे समन्वय स्थान हैं।"