पाठ-सजावट-मोटाई - सीएसएस-ट्रिक्स

text-decoration-thicknessसीएसएस में संपत्ति सजावट लाइन है कि एक तत्व में पाठ पर प्रयोग किया जाता है के स्ट्रोक मोटाई निर्धारित करता है। text-decoration-lineमूल्य की जरूरत है या तो होना करने के लिए underline, line-throughया overlineमोटाई संपत्ति प्रतिबिंबित करने के लिए।

.text ( text-decoration-line: underline; text-decoration-thickness: 2px; )

वाक्य - विन्यास

auto | from-font | | 

मूल्यों

• auto: (डिफ़ॉल्ट) ब्राउज़र को पाठ सजावट लाइन के लिए एक उपयुक्त मोटाई निर्दिष्ट करने की अनुमति देता है।
• from-font: यदि पहले उपलब्ध फ़ॉन्ट में मेट्रिक्स एक पसंदीदा मोटाई निर्दिष्ट करता है, तो यह उस मोटाई का उपयोग करता है; अन्यथा यह ऑटो मूल्य की तरह व्यवहार करता है।
• : एक इकाई के साथ कोई भी वैध लंबाई एक निश्चित लंबाई के रूप में पाठ सजावट लाइनों की मोटाई को निर्दिष्ट करती है। यह फ़ॉन्ट और ब्राउज़र में किसी भी जानकारी को डिफ़ॉल्ट रूप से बदल देता है।
• percentage: तत्व के फ़ॉन्ट में 1em के प्रतिशत के रूप में पाठ सजावट लाइनों की मोटाई को निर्दिष्ट करता है।
• initial: संपत्ति की डिफ़ॉल्ट सेटिंग जो ऑटो है।
• inherit: माता-पिता की सजावट मोटाई मूल्य को गोद लेती है।
• unset: तत्व से वर्तमान मोटाई को निकालता है।

डेमो

text-decoration-thicknessनिम्नलिखित डेमो के मूल्य को बदलकर देखें कि संपत्ति तत्व की टेक्स्ट सजावट को कैसे प्रभावित करती है:

यह वंश के लिए स्थिर है

एक तत्व के लिए सजावट स्थापित करने के बाद, उसके सभी बच्चों के पास वह सजावट भी होगी। अब कल्पना करें कि हम बच्चों में से एक के लिए सजावट की मोटाई बदलना चाहते हैं:

p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; ) 
 p span ( text-decoration-thickness: 0.1em; /* Doesn't work */ )

यह काम नहीं करता है क्योंकि पूर्वज तत्वों द्वारा निर्दिष्ट सजावट मोटाई को ओवरराइड नहीं किया जा सकता है। इस कार्य के लिए, तत्व के लिए एक सजावट विशिष्टता निर्धारित की जानी चाहिए:

p ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.2em; ) p span ( text-decoration-line: underline; text-decoration-color: green; text-decoration-thickness: 0.1em; /* It works! */ )

प्रतिशत और कैस्केड

इस संपत्ति के लिए, एक निश्चित मूल्य के रूप में एक लंबाई विरासत में मिलेगी, और फ़ॉन्ट के साथ पैमाना नहीं होगा। दूसरी ओर, एक प्रतिशत एक सापेक्ष मूल्य के रूप में विरासत में मिलेगा और इसलिए, फ़ॉन्ट में परिवर्तन के साथ पैमाने पर जैसे कि यह विरासत में मिला है।

p ( text-decoration-thickness: 20%; ) 
 p span ( font-size: 20px; text-decoration-line: underline; text-decoration-thickness: inherit; /* = 20% */ )

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

जबकि विनिर्देश के वर्तमान कार्य मसौदे में प्रतिशत मूल्यों का संदर्भ दिया गया है text-decoration-thickness, वास्तविक समर्थन वर्तमान में फ़ायरफ़ॉक्स तक सीमित है।

के साथ उपयोग कर रहा है text-decoration

CSS पाठ सजावट मॉड्यूल स्तर 4 विनिर्देश के वर्तमान कामकाजी मसौदे में आशुलिपि संपत्ति text-decoration-thicknessमें एक मूल्य के रूप में शामिल text-decorationहै।

.link ( text-decoration: underline solid green 1px; ) 
 /* The longhand equivalent */ .link ( text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: green, text-decoration-thickness: 1px; )

जबकि text-decorationअच्छी तरह से समर्थित है, text-decoration-thicknessवर्तमान में शामिल करने के लिए समर्थन फ़ायरफ़ॉक्स तक सीमित है।

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

फ़ीचर	अर्थात	एज	फ़ायर्फ़ॉक्स	क्रोम	सफारी	ओपेरा
संपत्ति	नहीं न	नहीं न	70	नहीं न	12.1	नहीं न
प्रतिशत	नहीं न	नहीं न	.६	नहीं न	नहीं न	नहीं न
आशुलिपि	नहीं न	नहीं न	70	नहीं न	नहीं न	नहीं न

फ़ीचर	Android क्रोम	Android फ़ायरफ़ॉक्स	Android ब्राउज़र	iOS सफारी	ऑपेरा मिनी
संपत्ति	नहीं न	नहीं न	नहीं न	12.2	नहीं न
प्रतिशत	नहीं न	नहीं न	नहीं न	नहीं न	नहीं न
आशुलिपि	नहीं न	नहीं न	नहीं न	नहीं न	नहीं न

टिप्पणियाँ

• संपत्ति कहा जाता text-decoration-widthथा, लेकिन सीएसएस पाठ सजावट मॉड्यूल स्तर 4 विनिर्देश के 2019 के कामकाजी मसौदे में अपडेट किया गया था।
• ब्राउज़र को 1 डिवाइस पिक्सेल की न्यूनतम मोटाई का उपयोग करना चाहिए।