प्रारंभिक पत्र - सीएसएस-ट्रिक्स

initial-letter एक सीएसएस संपत्ति है जो उस तत्व के पहले अक्षर का चयन करती है जहां इसे लागू किया जाता है और पत्र में रहने वाली लाइनों की संख्या निर्दिष्ट करता है।

आपने समाचार साइटों पर ऐसा कुछ देखा होगा, जहां एक प्रमुख पैराग्राफ का पहला अक्षर बाकी सामग्री से बड़ा है।

सामग्री के पहले अक्षर को स्टाइल करने के साथ एक छोटी सी हैक का उपयोग करने की चाल, जिसमें आप पत्र को एक में लपेटते हैं और इसे शैली में एक वर्ग लागू करते हैं:

/* Style that first letter! */ .first-letter ( font-size: 35px; line-height: 70px; )

Once upon a time in a faraway land…

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

वह जहां initial-letterआता है:

/* Style that first letter! */ .subhead ( initial-letter: 2; )

Once upon a time in a faraway land…

यह क्लीनर है! एक और तरीका यह है कि ::first-letterइसके बजाय इसे प्यूसीडो-चयनकर्ता को लागू किया जाए :

/* Style that first letter! */ .subhead::first-letter ( initial-letter: 2; )

क्या तुमने देखा? initial-letterसंपत्ति स्वचालित रूप से दोनों फ़ॉन्ट आकार और हमारे शैली ड्रॉप टोपी बनाने के लिए आवश्यक लाइनों की संख्या की गणना करता है! यह बिल्कुल 2, 3, 4 या अधिक रेखाएँ लेना चाहते हैं? संपत्ति बताओ और यह भारी उठाने का काम करेगा।

सिंटेक्स और मान

initial-letter: normal | ( );

initial-letter निम्नलिखित मूल्यों को स्वीकार करता है:

• normal: पहले अक्षर पर स्केलिंग प्रभाव लागू नहीं करता है। यह उस मूल्य को रीसेट करने के लिए उपयोगी हो सकता है जहां एक कैस्केड से विरासत में मिला हो सकता है।
• : पत्र को कितनी लाइनों पर कब्जा करना चाहिए जहां नकारात्मक मूल्यों की अनुमति नहीं है।
• : पत्र को कितनी पंक्तियों में डूबना चाहिए जहां नकारात्मक मूल्यों की अनुमति नहीं है। यह आसान है आपको पेचीदा रिक्ति मुद्दों को समायोजित करने के लिए पत्र को कम करने की आवश्यकता है लेकिन, यदि निर्दिष्ट नहीं है, तो इसका मूल्य लगता है

उदाहरण

प्रारंभिक पत्र को स्टाइल करने के लिए कुछ फैंसी टाइपोग्राफिक डिजाइन विधियों को प्राप्त करने के लिए इस्तेमाल किया जा सकता है। कृपया ध्यान दें कि निम्नलिखित उदाहरण केवल वर्तमान में सफारी द्वारा समर्थित हैं।

ड्रॉप कैप्स शायद सबसे परिचित उपयोग मामला है:

पेन प्रारंभिक पत्र देखें: कोडपेन पर ज्यॉफ ग्राहम (@geoffgraham) द्वारा ड्रॉप कैप।

उठाया टोपियां एक और उदाहरण हैं:

पेन इनिशियल-लेटर देखें: कोडऑन पर ज्यॉफ ग्राहम (@geoffgraham) द्वारा उठाया गया कैप।

ब्लॉक कैप्स पुरानी परियों की कहानियों को वापस ले गई:

पेन प्रारंभिक अक्षर देखें: कोडपेन पर ज्योफ ग्राहम (@geoffgraham) द्वारा ब्लॉक कैप।

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

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

डेस्कटॉप

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

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

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

सम्बंधित

• ::first-letter
• ड्रॉप कैप्स स्निपेट

अधिक जानकारी

• सीएसएस इनलाइन लेआउट मॉड्यूल लेवल 3: ऑफिशियल स्पेसिफिकेशन
• जेन सिमंस लैब्स: डेमो और उपयोग मामलों के उदाहरण
• फ़ायरफ़ॉक्स टिकट: सुविधा का समर्थन करने के लिए खुला टिकट
• इंटरनेट एक्सप्लोरर टिकट: सुविधा का समर्थन करने के लिए टिकट खोलें