सीएसएस 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;
}
हालांकि, इसके बाद आपको उस पहले अक्षर के साइज़ का हिसाब लगाते समय, "फ़्लोट" जैसी प्रॉपर्टी का इस्तेमाल करना पड़ सकता है.
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;
}
- पहले आर्ग्युमेंट से अक्षर का साइज़ और यह तय होता है कि वह कितनी लाइनों में दिखेगा. आसपेक्ट रेशियो को बनाए रखते हुए, लेटर का साइज़ बड़ा हो जाएगा. नेगेटिव वैल्यू का इस्तेमाल नहीं किया जा सकता. हालांकि, दशमलव वाली वैल्यू का इस्तेमाल किया जा सकता है.
- दूसरा आर्ग्युमेंट, लेटर सिंक तय करता है. इसे अक्षर के बैठने की जगह के ऑफ़सेट के तौर पर देखा जा सकता है. दूसरी वैल्यू देना ज़रूरी नहीं है. यह वैल्यू ऋणात्मक नहीं हो सकती. अगर यह मौजूद नहीं है, तो लेटर साइज़ की वैल्यू को सबसे करीब वाली पूरी संख्या मान लिया जाता है. यह “drop” कीवर्ड का इस्तेमाल करने जैसा है. सिंक में एक और कीवर्ड वैल्यू, “raise” भी स्वीकार की जाती है. यह वैल्यू, सिंक के 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 की मदद से, ड्रॉप कैप की स्टाइल को बेहतर तरीके से कंट्रोल किया जा सकता है! क्या आपको अपने टाइपोग्राफ़ी में ड्रॉप कैप जोड़ने हैं? इनका स्टाइल कैसे किया जा सकता है? हमें बताएं!