क्या पाठ अवरोही के साथ टकराव को रेखांकित करना चाहिए?

Question

CSS3 के टेक्स्ट-डेकोरेशन मॉड्यूल में एक टेक्स्ट-अंडरलाइन-पोजीशन प्रॉपर्टी शामिल है, जो यह निर्दिष्ट करती है कि क्या अंडरलाइन को पूरे टेक्स्ट के नीचे पोस्ट किया जाना चाहिए

          

या बेसलाइन के ठीक नीचे, इसे टेक्स्ट डिसकेंडर के साथ टकराते हुए:

          

ठीक है, हम सभी जानते हैं कि अंडरलाइन को केवल अंतिम उपाय के रूप में कैसे उपयोग किया जाना चाहिए, लेकिन ... यदि आप इसका उपयोग करने जा रहे हैं, तो इसे करने का सबसे आम तरीका क्या है? प्रत्येक अंडरलाइन शैली के पेशेवरों और विपक्ष क्या हैं?

Comments

CSS के बारे में: यह css3 jsfiddle.net/lollero/B45A4 (बेहतर ब्राउज़र समर्थन के बिना प्राप्त करने योग्य है। इसके अलावा आप उदाहरण के लिए एक धराशायी रेखांकित कर सकते हैं।)

— जूनस

एक खुला स्रोत पुस्तकालय निर्माण का यह बहुत ही समस्या से निपटने के लिए: eager.io/showcase/SmartUnderline ।

— एडम

Answer 1

सबसे आम क्या है?

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

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

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

फायदा और नुकसान

आपके अवरोही के साथ अंडरलाइन ओवरलैप होने का लाभ यह है कि यह आपकी लाइन रिक्ति (या "अग्रणी") को बिल्कुल प्रभावित नहीं करता है - आपको अंडरलाइन को समायोजित करने के लिए लाइनों के बीच के अंतर को बढ़ाने की आवश्यकता नहीं है।

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

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

Answer 2

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

मैं डेसकेंडर्स पर ब्रेक के साथ बेसलाइन पोजिशनिंग को ज्यादा पसंद करता हूं: text-decoration-skip: ink;हालांकि, यह वास्तव में वर्तमान में समर्थित नहीं है। मैं अब तक दो वर्गों के रूप में जा चुका हूं और अवरोही को उनसे हटाने के लिए एक अवधि जोड़ने के लिए उतर गया हूं। (पाठ php के माध्यम से प्रतिस्थापित करता है, इसलिए इसे बनाने के लिए बहुत सारे कोड नहीं हैं)।

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

मैं कोशिश करता हूं और जब भी संभव हो, अंडरलाइन करने के बजाय बोल्ड, इटैलिक, बोल्ड इटैलिक्स या रंग रूपांतरों पर स्विच करता हूं।

Comments

+1 (ए) का उल्लेख करना text-decoration-skip: ink;और (बी) अवरोही के निचले हिस्से के नीचे अपनी रेखांकित करने की स्थिति को महसूस करने के लिए बाध्य नहीं होना चाहिए।

— सम्पाबल्कुपर

मार्च 2018 तक टेक्स्ट-डेकोरेशन-स्किप-इंक: ऑटो | Chrome (64 और बाद के) में डिफ़ॉल्ट रूप से कोई भी सक्षम नहीं है। प्रारंभिक मूल्य: ऑटो। यह अन्य ब्राउज़रों के लिए भी आ रहा है।

— mdahlman

Answer 3

का वर्णनtext-decoration: underline सीएसएस में 2.1 कल्पना, बस रेखांकित के रूप में उसके प्रभाव को परिभाषित करता है जानकारी के बिना, लेकिन ब्राउज़रों आधारभूत नीचे बस थोड़ी प्रदर्शित होने के रूप में इसे लागू। इस प्रकार, यह अक्सर descenders (और एक पत्र के नीचे रखा गया dicritic निशान) में कटौती करता है।

CSS3 के पाठ ड्राफ्ट में, text-underline-positionस्थिति है, लेकिन यह किसी भी ब्राउज़र द्वारा समर्थित नहीं लगता है। ( Css666.com जानकारी के अनुसार , यह IE द्वारा समर्थित है, लेकिन कम से कम IE 9 पर, समर्थन संपत्ति को पहचानने और मूल्य को स्वीकार करने तक सीमित प्रतीत होता है auto, प्रारंभिक मूल्य - तो यह वास्तव में समर्थन नहीं है।) अपडेट : वास्तव में। , IE (संस्करण 6 से) का थोड़ा अधिक समर्थन है , लेकिन यह वास्तव में आपको पाठ के ऊपर केवल अंडरलाइन जगह देता है () और इसके नीचे नहीं।

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