सीएसएस 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 प्रॉपर्टी की मदद से, आपको इस ड्रॉप कैप स्टाइल पर ज़्यादा कंट्रोल मिलता है. इसमें दो वैल्यू के बीच अलग-अलग वैल्यू होनी चाहिए:
p::first-letter {
initial-letter: 3.5 3;
}
- पहले तर्क से पता चलता है कि अक्षर का साइज़ क्या होगा और उसमें कितनी लाइनें होंगी. अक्षर का आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) बनाए रखते हुए, उसका साइज़ बड़ा होगा. नेगेटिव वैल्यू का इस्तेमाल नहीं किया जा सकता, लेकिन दशमलव वाली वैल्यू का इस्तेमाल किया जा सकता है.
- दूसरा तर्क, लेटर सिंक के बारे में बताता है. इसे उस जगह का ऑफ़सेट माना जा सकता है जहां पत्र मिलेगा. दूसरी वैल्यू ज़रूरी नहीं है और नेगेटिव नहीं हो सकती. अगर फ़ॉर्मैट मौजूद नहीं है, तो यह सबसे पास के पूर्णांक पर सेट किए गए अक्षर के साइज़ की वैल्यू मान लेता है. यह कीवर्ड “ड्रॉप” का इस्तेमाल करने के बराबर है. सिंक में एक और कीवर्ड वैल्यू, “बढ़ाएं” को भी स्वीकार किया जाता है, जो एक सिंक के बराबर होता है.
यह डेमो देखें. यहां वैल्यू में बदलाव करके यह जाना जा सकता है कि इससे ड्रॉप कैप स्टाइल पर क्या असर पड़ता है.
इसे ::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 दें. ध्यान दें कि इस उदाहरण में “ड्रॉप” कीवर्ड का इस्तेमाल किस तरह किया गया है, जो हटाए जाने पर डिफ़ॉल्ट होगा और तीन के बराबर होगा:
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 की मदद से ड्रॉप कैप स्टाइल पर ज़्यादा कंट्रोल मिल गया है! क्या आपको अपनी टाइपोग्राफ़ी में ड्रॉप कैप जोड़ने हैं? आप उन्हें किस तरह स्टाइल कर सकते हैं? हमें बताएं!