पाठ-प्रतिपादन - सीएसएस-ट्रिक्स

text-renderingसीएसएस में संपत्ति आप गति (या इसके विपरीत) पर पाठ की गुणवत्ता का चयन करने के लिए कि यह कैसे स्क्रीन के पाठ को प्रस्तुत करना चाहिए के रूप में ब्राउज़र के लिए सुझाव देकर ठीक धुन अनुकूलन करने के लिए आप की अनुमति देता है की अनुमति देता है। MDN में एक और तरीका कहा:

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

आप यहां उदाहरण से पहले / बाद में कुछ देख सकते हैं। कभी-कभी परिणाम बेहतर कर्नेल के सीधे ऊपर होता है:

कुछ फ़ॉन्ट फ़ाइलों में अतिरिक्त जानकारी होती है कि फ़ॉन्ट को कैसे प्रस्तुत किया जाना चाहिए। optimizeLegibilityइस जानकारी का उपयोग optimizeSpeedकरता है , और नहीं करता है।

उदाहरण

p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )

प्रदर्शन

जब यह कहा जाता है कि गति और सटीकता के बीच एक व्यापार है, तो वे मजाक नहीं कर रहे हैं। विचार करने के लिए महत्वपूर्ण प्रदर्शन मुद्दे हो सकते हैं। यह लेख पूरी तरह से उद्धृत करने योग्य है:

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

लगभग अनुमानित अनुकूलन क्षमता प्रदर्शन सीमाओं को निर्धारित करने के लिए मैंने Instapaper के साथ कुछ परीक्षण किया। उदाहरण के लिए, आईओएस के लिए इंस्टापैपर में 5,000 शब्द का लेख केवल A5- श्रेणी या अधिक सीपीयू वाले उपकरणों पर ऑप्टिमाइजेशन का उपयोग करेगा। पुराने iOS उपकरणों पर समस्याओं से बचने के लिए, मैं लगभग 1,000 शब्दों से अधिक लंबे समय तक किसी भी पेज पर आँख बंद करके और बिना किसी अनुकूलन के अनुकूलन की सलाह नहीं दूंगा। और मैं Android पर इसे सक्षम करने की अनुशंसा नहीं करूंगा।

यह करने के लिए आकर्षक है:

/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )

लेकिन उस बारे में सावधान रहना, विशेष रूप से एक मनमाना पृष्ठ पर लागू होने पर खतरनाक लगता है।

ब्राउज़र का समर्थन

क्रोम	सफारी	फ़ायर्फ़ॉक्स	ओपेरा	अर्थात	एंड्रॉयड	आईओएस
4+	5+	3+	शायद पोस्ट ब्लिंक?	नहीं	२.३+?	3+?

विभिन्न कीड़े हैं। नई लाइनों के साथ Android मुद्दा। Chrome में पत्र-रिक्ति सहित विभिन्न हैं। सफारी (और अन्य) मक्खी पर निर्धारण के बजाय ऑप्टिमोस्पीड के लिए डिफ़ॉल्ट।