पाठ-रेखांकन-ऑफसेट - सीएसएस-ट्रिक्स

text-underline-offsetसीएसएस में संपत्ति उनकी प्रारंभिक स्थिति से पाठ रेखांकन की दूरी तय करता है।

.text ( text-underline-offset: 0.5em; )

एक बार जब आप अंडरलाइन text-decorationके मूल्य के साथ एक तत्व के लिए एक अंडरलाइन लागू करते हैं , तो आप कह सकते हैं कि text-underline-offsetसंपत्ति का उपयोग करके आपके पाठ से वह रेखा कितनी दूर होनी चाहिए ।

मूल्यों

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

डेमो

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

टिप्पणियाँ

• text-underline-offset के आशुलिपि का हिस्सा नहीं है text-decoration।
• यह अन्य लाइनों, जैसे या पर काम नहीं करता है ।text-decorationline-throughoverline
• नकारात्मक मूल्यों को स्वीकार किया जाता है, जो अंडरलाइन को आवक को बंद कर देता है।

यह वंश के लिए निरंतर है

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

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-underline-offset: 1.5em; /* Doesn't work */ )

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

p ( text-decoration: underline; text-underline-offset: 0.5em; ) 
 p span ( text-decoration: underline; text-underline-offset: 1.5em; /* It works! */ )

उन्हें इस्तेमाल करने की सलाह दी जाती है

एम जैसे एक सापेक्ष मूल्य का उपयोग करने का लाभ यह है कि ऑफसेट font-sizeमूल्य के परिवर्तन के साथ पैमाने पर होगा । दूसरी ओर, यदि आप एक निश्चित लंबाई इकाई (जैसे पिक्सेल) का उपयोग करते हैं, तो ऑफसेट परिवर्तनों में समायोजित नहीं होगा और यह वह दूरी नहीं हो सकती है जो आप अपने पाठ के लिए रखना चाहते हैं:

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

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

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

लेखन मोड और पाठ-रेखांकन-स्थिति

वर्टिकल राइटिंग मोड होने से अंडरलाइन की स्थिति पर प्रभाव पड़ता है। वह तत्व पर लागू ऑफसेट की दिशा बदल देगा। निम्नलिखित डेमो में मूल्यों के साथ खेलें:

सम्बंधित

• text-decoration
• text-underline-position
• text-decoration-thickness

अधिक जानकारी

सीएसएस पाठ सजावट मॉड्यूल स्तर 4 (संपादक का मसौदा)

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

इस लेखन के समय, फ़ायरफ़ॉक्स पूर्ण समर्थन वाला एकमात्र ब्राउज़र है। सफारी प्रतिशत मूल्यों का समर्थन नहीं करता है।

पाठ-रेखांकन-ऑफसेट

अर्थात	एज	फ़ायर्फ़ॉक्स	क्रोम	सफारी	ओपेरा
नहीं न	नहीं न	70+	नहीं न	12.1+	सब

Android क्रोम	Android फ़ायरफ़ॉक्स	Android ब्राउज़र	iOS सफारी	ओपेरा मिनी
नहीं न	नहीं न	नहीं न	12.2+	हाँ

पाठ-रेखांकन-ऑफसेट: प्रतिशत

अर्थात	एज	फ़ायर्फ़ॉक्स	क्रोम	सफारी	ओपेरा
नहीं न	नहीं न	74+	नहीं न	नहीं न	नहीं न

Android क्रोम	Android फ़ायरफ़ॉक्स	Android ब्राउज़र	iOS सफारी	ओपेरा मिनी
नहीं न	नहीं न	नहीं न	नहीं न	हाँ