CSS पाठ स्ट्रोक जनरेटर

CSS टेक्स्ट स्ट्रोक कहाँ से आया

एक ग्लिफ को स्ट्रोक करने का विचार CSS से दशकों पहले का है; यह PostScript (Adobe, 1984) के लिए मूल है और इसे SVG 1.1 (W3C अनुशंसा, द्वितीय संस्करण, 16 अगस्त 2011) में ले जाया गया, जो किसी भी आकार के लिए stroke, stroke-width, stroke-linecap, और stroke-linejoin पेंट गुणों को परिभाषित करता है, जिसमें <text> शामिल है। CSS को अपना संस्करण तब मिला जब Apple ने जून 2007 में Safari 3 में -webkit-text-stroke को शिप किया, -webkit-text-fill-color के साथ। यह संपत्ति किसी भी शिपिंग W3C स्पेक में मानकीकृत नहीं की गई थी; यह CSS Text Decoration Module Level 4 Editor's Draft में बिना-उपसर्ग के text-stroke के रूप में रहती है, लेकिन 2026 तक बिना-उपसर्ग नाम अभी भी किसी भी ब्राउज़र में सक्षम नहीं है। Firefox 49 (20 सितंबर 2016) और Edge 15 (5 अप्रैल 2017) दोनों ने वेब-संगतता उपनाम के रूप में -webkit-text-stroke जोड़ा, उन पृष्ठों को संभालने के लिए जो केवल WebKit-उपसर्ग वाले नाम का उपयोग करते हैं। प्रोडक्शन में, उपसर्ग लिखें।

वेब पर टेक्स्ट को बाहर निकालने के तीन तरीके

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

• -webkit-text-stroke, यह संपत्ति जो यह जनरेटर उत्सर्जित करता है। एक CSS पंक्ति, GPU-संयोजित, किसी भी फ़्रेमरेट पर मुफ़्त। स्ट्रोक ग्लिफ रूपरेखा पर केंद्रित खींचा जाता है, आधा अंदर और आधा बाहर, जिसका अर्थ है कि मोटे स्ट्रोक अक्षर-रूपों में खाने लगते हैं।
• चार-दिशा text-shadow, सार्वभौमिक फॉलबैक जो IE 10 तक के हर ब्राउज़र में काम करता है। text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; प्रत्येक कोने में चार 1-पिक्सेल छायाएं ढेर करता है ताकि 1 px रूपरेखा का नकली बनाया जा सके। CSS Text Decoration Module Level 3 (W3C Candidate Recommendation अगस्त 2019) में परिभाषित। व्यापक स्ट्रोक पर, सीढ़ी-कदम कलाकृतियां दृश्यमान हो जाती हैं; आठ या सोलह दिशाएं उन्हें अधिक छायाओं की कीमत पर चिकना कर सकती हैं।
• SVG <text> के साथ paint-order: stroke fill;, सही उत्तर जब आपको अक्षर-रूप के अंदर रक्तस्राव वाली स्याही के बिना मोटी स्ट्रोक की आवश्यकता हो। paint-order संपत्ति पहले स्ट्रोक खींचती है, फिर शीर्ष पर भरण, इसलिए भरण अपनी पूरी विज्ञापित चौड़ाई पर रहता है।

अभिगम्यता: कंट्रास्ट तर्क, बॉडी-टेक्स्ट नहीं, सजावटी हाँ

WCAG 2.1 सफलता मानदंड 1.4.3 «कंट्रास्ट (न्यूनतम)» (W3C अनुशंसा 5 जून 2018) सामान्य टेक्स्ट के लिए 4.5:1 कंट्रास्ट और बड़े टेक्स्ट (18 pt / 14 pt बोल्ड) के लिए 3:1 की आवश्यकता है। एक स्ट्रोक के साथ, ग्लिफ का दृश्य रूप से प्रमुख किनारा स्ट्रोक रंग है, इसलिए कंट्रास्ट जांच को उस रंग की पृष्ठभूमि से तुलना करनी होती है, न कि भरण की। एक सामान्य विफलता: पतले काले स्ट्रोक के साथ सफेद पर पीला लोगो काले बनाम सफेद की जांच करने पर पास हो जाता है, लेकिन अक्षर का शरीर सफेद पर पीला होता है और छोटे आकार में खराब पढ़ता है। स्ट्रोक बॉडी-टेक्स्ट पर पठनीयता को नष्ट कर देता है। 16 px फॉन्ट साइज से नीचे, 1 px स्ट्रोक ग्लिफ इंटीरियर के 10 से 15 प्रतिशत को भरता है और 2 px स्ट्रोक काउंटर्स (« a», « e», « o» में छेद) बंद कर सकता है। टेक्स्ट स्ट्रोक को शीर्षकों, डिस्प्ले प्रकार और सजावटी उपयोग के लिए आरक्षित करें; पैराग्राफ टेक्स्ट पर बिना हर ब्रेकपॉइंट पर स्पष्ट परीक्षण के कभी भी लागू न करें।

जब एक टेक्स्ट स्ट्रोक सही उपकरण है

• कॉमिक-बुक और गेमिंग UI शीर्षक: क्लासिक Marvel / Nintendo चमकीले भरण पर मोटा-काला-स्ट्रोक का लुक।
• वॉटरमार्क और सजावटी ओवरले: केवल अर्ध-पारदर्शी स्ट्रोक, कोई भरण नहीं, इमेजरी पर बैठा हुआ।
• ट्यूटोरियल ग्राफिक्स, स्क्रीनशॉट, कॉलआउट जहां टेक्स्ट को अज्ञात पृष्ठभूमि के विरुद्ध खड़ा होना चाहिए।
• « घोस्ट» बटन जहां बटन टेक्स्ट स्ट्रोक और पारदर्शी भरण का उपयोग करता है ताकि बॉर्डर वाले बटन के साथ वजन-मेल खाता हुआ महसूस हो।
• केवल-रूपरेखा शीर्षक संपादकीय डिज़ाइन में, « खोखला अक्षर» लुक जो देर-2010 के दशक में बड़ा था।

सामान्य गलतियाँ

• -webkit- उपसर्ग भूलना। बिना-उपसर्ग वाला text-stroke केवल Editor's Draft स्थिति में है और शिप नहीं किया गया है। प्रोडक्शन में हमेशा उपसर्ग वाला रूप लिखें।
• -webkit-text-stroke-width को एनिमेट करने की कोशिश करना। यह एनिमेट करने योग्य CSS गुणों की सूची में नहीं है। संक्रमण ट्वीन के बजाय « स्नैप» करेंगे। जब गति की आवश्यकता हो तो text-shadow को एनिमेट करें या SVG का उपयोग करें।
• छोटे टेक्स्ट पर एक स्ट्रोक लागू करना। 16 px से नीचे, स्ट्रोक ग्लिफ इंटीरियर को भरता है और काउंटर्स बंद करता है। एक मीडिया क्वेरी के साथ न्यूनतम फॉन्ट-साइज गार्ड सेट करें।
• तंग letter-spacing के साथ चौड़े स्ट्रोक संयोजन। स्ट्रोक आसन्न ग्लिफ्स के बीच पार करता है और जहां आकार स्पर्श करते हैं वहां ग्रे स्मज पैदा करता है।
• कंट्रास्ट जांच में स्ट्रोक रंग को « टेक्स्ट रंग» के रूप में गिनना। भरण और स्ट्रोक दोनों को पृष्ठभूमि के विरुद्ध WCAG 1.4.3 स्पष्ट करना चाहिए।
• प्रिंट स्टाइलशीट्स का परीक्षण नहीं करना। स्ट्रोक मुद्रित होने पर नाटकीय रूप से अधिक मोटा या पतला रेंडर हो सकता है, विशेष रूप से उन ब्राउज़रों पर जो PDF आउटपुट के लिए रंग गामुट को डाउनस्केल करते हैं।

अधिक अक्सर पूछे जाने वाले प्रश्न

मेरा स्ट्रोक 1080p मॉनिटर की तुलना में रेटिना डिस्प्ले पर अधिक मोटा क्यों दिखता है?

ऐसा नहीं है, CSS पिक्सेल में। 2px स्ट्रोक दोनों पर बिल्कुल 2 CSS पिक्सेल है। जो बदलता है वह कथित तीक्ष्णता है: रेटिना (2× DPR) डिस्प्ले पर, 2 CSS पिक्सेल का स्ट्रोक 4 डिवाइस पिक्सेल है और स्वच्छ रूप से एंटी-एलियासिंग करता है। 1× डिस्प्ले पर, 2 डिवाइस पिक्सेल काफी धुंधले किनारे देते हैं। यदि आपको रेटिना पर एक डिवाइस पिक्सेल पर स्नैप होने वाली हेयरलाइन की आवश्यकता है, तो 0.5px लिखें; ब्राउज़र हाई-DPR स्क्रीन पर एक डिवाइस पिक्सेल पर राउंड करते हैं।

क्या मैं प्रत्येक अक्षर के लिए एक अलग स्ट्रोक रंग रख सकता हूँ?

एकल -webkit-text-stroke घोषणा के साथ नहीं। या तो प्रत्येक अक्षर को <span> में लपेटें और अलग-अलग स्टाइल करें, या SVG <tspan> तत्वों का उपयोग करें जिनकी अपनी stroke विशेषता हो। यदि केवल पहला अक्षर अलग चाहिए तो ::first-letter स्यूडो-तत्व text-stroke स्वीकार करता है।

स्ट्रोक कितना मोटा बहुत मोटा है?

एक व्यावहारिक छत लगभग फॉन्ट-साइज का 8 प्रतिशत है। 100 px फॉन्ट पर, यह 8 px स्ट्रोक है; इसके बाद अक्षर एक-दूसरे को ओवरलैप करने लगते हैं। यदि आप एक मोटा रूपरेखा दृश्य चाहते हैं, तो paint-order: stroke fill; के साथ SVG <text> का उपयोग करें ताकि भरण मूल चौड़ाई पर रहे और स्ट्रोक केवल बाहर की ओर बढ़े।

क्या -webkit-text-stroke इमोजी पर काम करता है?

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

क्या कुछ सर्वर पर भेजा जाता है?

नहीं। आप पूर्वावलोकन में जो टेक्स्ट टाइप करते हैं, आप जो रंग चुनते हैं और उत्पन्न CSS सभी आपके ब्राउज़र के JavaScript में संसाधित होते हैं। कोई नेटवर्क कॉल नहीं की जाती। सत्यापन के लिए DevTools में नेटवर्क टैब खोलें।