सीएसएस initial-letter प्रॉपर्टी की मदद से, यह काम आसानी से किया जा सकता है.
ब्राउज़र समर्थन
initial-letter को कहां आज़माया जा सकता है? यह सुविधा Safari और Chrome 110 में उपलब्ध है. Safari में, प्रॉपर्टी के लिए -webkit- प्रीफ़िक्स ज़रूरी है. Firefox में इसे लागू करने के लिए, एक समस्या मौजूद है.
initial-letter के साथ काम करने की सुविधा की जांच करने के लिए:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
मौजूदा सलूशन
आज सीएसएस में ड्रॉप कैप की स्टाइल कैसे बनाई जा सकती है?
::first-letter स्यूडो-एलिमेंट से हमें कुछ मदद मिलती है.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
हालांकि, आपको उस पहले अक्षर का साइज़ कैलकुलेट करते समय, "float" जैसी प्रॉपर्टी तक पहुंचना होगा.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
lh जैसी नई सीएसएस यूनिट के आने से, इस समस्या को कुछ हद तक कम किया जा सकता है. हालांकि, इनका इस्तेमाल सीमित तौर पर किया जा सकता है. फ़िलहाल, lh का इस्तेमाल सिर्फ़ Chrome में किया जा सकता है.
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
पेश है initial-letter
initial-letter प्रॉपर्टी की मदद से, आपको इस ड्रॉप कैप स्टाइल पर ज़्यादा कंट्रोल मिलता है. इसमें स्पेस से अलग की गई दो वैल्यू डाली जा सकती हैं:
p::first-letter {
initial-letter: 3.5 3;
}
- पहले तर्क से पता चलता है कि अक्षर का साइज़ क्या होगा और उसमें कितनी लाइनें होंगी. आसपेक्ट रेशियो को बनाए रखते हुए, लेटर का साइज़ बड़ा हो जाएगा. नेगेटिव वैल्यू का इस्तेमाल नहीं किया जा सकता. हालांकि, दशमलव वाली वैल्यू का इस्तेमाल किया जा सकता है.
- दूसरा तर्क, लेटर सिंक के बारे में बताता है. इसे अक्षर के बैठने की जगह के ऑफ़सेट के तौर पर देखा जा सकता है. दूसरी वैल्यू देना ज़रूरी नहीं है. यह वैल्यू ऋणात्मक नहीं हो सकती. अगर यह मौजूद नहीं है, तो लेटर साइज़ की वैल्यू को सबसे करीब वाली पूरी संख्या मान लिया जाता है. यह कीवर्ड “ड्रॉप” का इस्तेमाल करने के बराबर है. सिंक में एक दूसरा कीवर्ड मान “बढ़ाएं” भी शामिल है, जो 1 के सिंक के बराबर है.
यह डेमो देखें. यहां वैल्यू में बदलाव करके यह जाना जा सकता है कि इससे ड्रॉप कैप स्टाइल पर क्या असर पड़ता है.
इसे ::first-line के साथ जोड़ें और आपके पास ऐसा कुछ हो सकता है
p::first-line {
font-variant: small-caps;
font-weight: bold;
font-size: 1.25rem;
}
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
text-shadow: 0.25rem 0.25rem #be4bdb;
}
या शायद, इसे border दें. ध्यान दें कि नीचे दिए गए उदाहरण में “drop” कीवर्ड का इस्तेमाल कैसे किया गया है. अगर इसे छोड़ दिया जाता है, तो यह डिफ़ॉल्ट तौर पर लागू होगा और इसकी वैल्यू 3 होगी:
css
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 drop;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
border: 0.25rem dashed #be4bdb;
padding: 0.5rem;
border-radius: 5px;
}
आप शायद कोई background या कुछ box-shadow जोड़ें:
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: var(--surface-1);
background: #be4bdb;
padding: 0.5rem;
border-radius: 5px;
box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}
इसके अलावा, टेक्स्ट के बैकग्राउंड को क्लिप करने के लिए:
p::first-letter {
background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: transparent;
-webkit-background-clip: text;
padding: 0.5rem;
}
आपके पास कई विकल्प हैं!
अब आपको initial-letter की मदद से ड्रॉप कैप स्टाइल पर ज़्यादा कंट्रोल मिल गया है! क्या आपको अपने टाइपोग्राफ़ी में ड्रॉप कैप जोड़ने हैं? इनका स्टाइल कैसे किया जा सकता है? हमें बताएं!