फांसी-विराम चिह्न - सीएसएस-ट्रिक्स

Anonim

hanging-punctuationवेब देने पर संपत्ति उद्देश्य वेब पर टाइपोग्राफी पर एक महीन कणों का नियंत्रण डिजाइनरों।

विराम चिह्न के पीछे का विचार पाठ प्रवाह के "बाहरी" पाठ तत्वों के "(अंत में कुछ हद तक विस्तार) से प्रारंभ (या कुछ हद तक विस्तार) को पढ़ने के प्रवाह को संरक्षित करने के लिए है।

मूल रूप से, यह उस बोली, बुलेट या जो कुछ भी बाएं (या दाएं rtlमोड में) को थोड़ा स्थानांतरित करेगा ताकि पहला अक्षर बाकी दस्तावेज़ के साथ ठीक से गठबंधन हो।

स्टीव हिक्की के इस लेख का चित्र

कृपया ध्यान दें कि यह संपत्ति वैकल्पिक है इसलिए ब्राउज़र निर्माता इसका समर्थन कर सकते हैं या नहीं।

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

hanging-punctuation: none | ( first || ( force-end | allow-end ) || last ) blockquote p ( hanging-punctuation: first; )

none

कोई चरित्र नहीं लटकता। यह इस संपत्ति के लिए डिफ़ॉल्ट मान है।

first

किसी तत्व की पहली स्वरूपित रेखा के प्रारंभ में एक उपलब्ध वर्ण लटकता है।

last

किसी तत्व की अंतिम स्वरूपित रेखा के अंत में एक उपलब्ध वर्ण लटका रहता है।

force-end

एक पंक्ति के अंत में एक स्टॉप या कॉमा लटका हुआ है।

विराम चिह्न को लटका देने के लिए मजबूर किया जाता है और औचित्य के लिए लाइन को मापने पर विचार नहीं किया जाता है।

allow-end

एक पंक्ति के अंत में एक स्टॉप या अल्पविराम लटक जाता है यदि यह अन्यथा औचित्य से पहले फिट नहीं होता है।

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

उपलब्ध वर्ण

कोड चरित्र नाम
U+002C , अल्पविराम
U+002E पूर्ण विराम
U+060C ، अरब COMMA
U+06D4 आभारी पूर्ण स्टॉप
U+3001 IDEOGRAPHIC COMMA
U+3002 IDEOGRAPHIC पूरा स्टॉप
U+FF0C पूरी तरह से COMMA
U+FF0E फुलविद्ट फुल स्टॉप
U+FE50 छोटे COMMA
U+FE51 छोटे IDEOGRAPHIC COMMA
U+FE52 छोटे पूर्ण स्टॉप
U+FF61 हेलफीडहैड IDEOGRAPHIC फुल स्टॉप
U+FF64 हालीविदित IDEOGRAPHIC COMMA

ध्यान दें कि उपयोगकर्ता एजेंटों को इस सूची में किसी भी वर्ण को जोड़ने की अनुमति है। युक्ति का उद्धरण:

यूए उपयुक्त के रूप में अन्य वर्णों को शामिल कर सकता है।

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

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम फ़ायर्फ़ॉक्स अर्थात एज सफारी
नहीं न नहीं न नहीं न नहीं न १०

मोबाइल / टेबलेट

Android क्रोम Android फ़ायरफ़ॉक्स एंड्रॉयड iOS सफारी
नहीं न नहीं न नहीं न 10.0-10.2

असमर्थित ब्राउज़र के लिए एक सभ्य वापसी एक नकारात्मक पाठ-इंडेंट का उपयोग करना होगा:

blockquote p ( text-indent: -0.5em; /* Change according to your font */ )

बुलेट सूचियों के लिए, आप यह सुनिश्चित कर सकते हैं कि गोलियों की स्थिति सेट है outsideऔर कंटेनर का ओवरफ्लो सेट नहीं है hidden