अक्सर साइट पर सामग्री जोड़ते समय या जल्दी में, उदाहरण के लिए, मंच पर एक नया विषय बनाने के दौरान, उपयोगकर्ता एक छोटे (लोअरकेस) अक्षर के साथ एक वाक्य (शीर्षक) लिखना शुरू कर सकता है। यह कुछ हद तक एक गलती है।

मैं आपको इस समस्या को हल करने के लिए कई विकल्प दिखाऊंगा: PHP और CSS पहले से प्रकाशित सामग्रियों के लिए अधिक उपयुक्त हैं, जब jQuery प्रकाशन से पहले ही स्थिति को कैसे ठीक कर सकता है।

एक स्ट्रिंग का पहला अक्षर PHP में अपरकेस है

PHP में एक फ़ंक्शन होता है जिसे "कहा जाता है" ucfirst", जो सिर्फ स्ट्रिंग के पहले चरित्र को अपरकेस में परिवर्तित करता है, लेकिन इसका माइनस यह है कि यह सिरिलिक के साथ सही ढंग से काम नहीं करता है।

इसके लिए, हम अपने स्वयं के छोटे कार्य लिखेंगे। कार्यान्वयन इस तरह दिखेगा:

इस संस्करण में, हम एक वाक्य प्राप्त करेंगे जो कि एक बड़े अक्षर से शुरू होता है, जो वास्तव में, हमारी आवश्यकता है।

सीएसएस में स्ट्रिंग का पहला अक्षर अपरकेस

यह विधि नेत्रहीन (जो कि साइट के स्रोत कोड में है, ऑफ़र दिखेंगे जैसा कि है) भी पहले वर्ण को अपरकेस में कनवर्ट करता है।

उपयोग निम्नानुसार है:

छद्म तत्व का उपयोग " प्रथम अक्षर"और" पाठ बदलना»हमने पैराग्राफ के प्रत्येक पहले अक्षर के लिए उपस्थिति निर्धारित की है।

JQuery के बड़े अक्षर का पहला अक्षर

जैसा कि मैंने पहले कहा था, यह रूपांतरण विधि उन सामग्रियों के लिए सबसे उपयुक्त है जिन्हें अभी तक प्रकाशित नहीं किया गया है।

उदाहरण के लिए, हम एक पाठ क्षेत्र लेंगे (यह हमारे लिए एक शीर्षक में प्रवेश करने के लिए एक क्षेत्र के रूप में कार्य करेगा) और इसके लिए एक छोटी सी स्क्रिप्ट लिखेंगे, जो एक लोअरकेस अक्षर के साथ एक वाक्य में प्रवेश करते समय, इसे एक कैपिटलाइज़ेशन के साथ बनाता है:

पाठ लिखते समय और बस इसे चिपकाने के दौरान स्क्रिप्ट दोनों काम करती है। यह मत भूलो कि स्क्रिप्ट के लिए आपकी साइट पर काम करने के लिए, आपके पास jQuery लाइब्रेरी जुड़ा होना चाहिए।

तत्वों के पाठ को अपरकेस या लोअरकेस में बदलने पर नियंत्रण करता है। जब मान कोई नहीं है, तो स्रोत पाठ का मामला बदल दिया जाएगा।

कम जानकारी

पदनाम

मूल्य

कैपिटलाइज़ करें वाक्य में प्रत्येक शब्द का पहला वर्ण कैपिटल होगा। बाकी प्रतीक अपनी उपस्थिति नहीं बदलते हैं। लोअरकेस सभी टेक्स्ट कैरेक्टर लोअरकेस (लोअरकेस) बन जाते हैं। अपरकेस सभी टेक्स्ट अक्षर अपरकेस (अपरकेस) हैं। कोई भी मामला बदलता नहीं है।

सैंडबॉक्स

विनी द पूह हमेशा थोड़ा ताज़ा होने का विरोध नहीं करता था, विशेष रूप से सुबह ग्यारह बजे, क्योंकि इस समय नाश्ते का समय समाप्त हो गया था, और रात का खाना शुरू करने के बारे में सोचा भी नहीं था। और, ज़ाहिर है, वह खरगोशों को कप और प्लेटों को देखकर बहुत खुश था।

div (पाठ-परिवर्तन: बड़ा करना;)

उदाहरण

मध्य युग का सांस्कृतिक स्मारक

अमेजोनियन तराई क्षेत्रों में बिल्लियों और कुत्तों का एक छोटा परिवहन है, और हेओश बे अपनी लाल मदिरा के लिए प्रसिद्ध है।

इस उदाहरण का परिणाम अंजीर में दिखाया गया है। 1।

चित्र: 1. पाठ-परिवर्तनशील संपत्ति को लागू करना

ऑब्जेक्ट मॉडल

एक वस्तु.style.textTransform

विशिष्टता

प्रत्येक विनिर्देश अनुमोदन के कई चरणों से गुजरता है।

• सिफारिश - यह विनिर्देश W3C द्वारा अनुमोदित किया गया है और एक मानक के रूप में अनुशंसित है।
• उम्मीदवार की सिफारिश ( संभावित सिफारिश) - मानक के लिए जिम्मेदार समूह संतुष्ट है क्योंकि यह अपने उद्देश्यों के साथ फिट बैठता है, लेकिन मानक को लागू करने के लिए डेवलपर समुदाय की मदद की आवश्यकता होती है।
• प्रस्तावित सिफारिश ( सुझाए गए सुझाव) - इस बिंदु पर, अंतिम अनुमोदन के लिए डब्ल्यू 3 सी सलाहकार परिषद को दस्तावेज प्रस्तुत किया जाता है।
• वर्किंग ड्राफ्ट - समुदाय की समीक्षा के लिए चर्चा और संशोधन के बाद ड्राफ्ट का एक अधिक परिपक्व संस्करण।
• संपादक का मसौदा ( संपादकीय का मसौदा) - परियोजना संपादकों द्वारा संपादन के बाद मानक का एक मसौदा संस्करण।
• प्रारूप ( ड्राफ्ट विनिर्देश) मानक का पहला मसौदा है।

आपको पाठ के अक्षरों के मामले को बदलने की अनुमति देता है।

डिफ़ॉल्ट मान कोई भी नहीं है, जिसका पाठ पर कोई प्रभाव नहीं है। पाठ का मामला वही रहता है। अपरकेस और लोअरकेस मान क्रमशः ऊपरी और निचले मामले में वर्ण परिवर्तित करते हैं। यदि आप एक कैपिटलाइज़ वैल्यू निर्दिष्ट करते हैं, तो प्रत्येक शब्द के केवल पहले अक्षर को कैपिटलाइज़ किया जाएगा। इनहेरिट माता-पिता से मूल्य प्राप्त करता है।

उदाहरण

यह शीर्षक है। इसमें टेक्स्ट-ट्रांसफ़ॉर्म प्रॉपर्टी को अपरकेस पर सेट किया गया है। सभी पात्र अपरकेस होंगे।

इस पैराग्राफ में वैल्यू-लोअरकेस के साथ एक टेक्स्ट-ट्रांसफ़ॉर्मिंग प्रॉपर्टी है, जिसका मतलब है कि सभी अक्षर लोअरकेस में होंगे।

और इस अंतिम पैराग्राफ में एक टेक्स्ट-ट्रांसफ़ॉर्म प्रॉपर्टी है जिसके साथ एक CAPIZIZE गुण लागू है। प्रत्येक शब्द के पहले अक्षर अपरकेस होंगे, और केवल यही।

परिणाम

हालाँकि, यह सब इतना सरल नहीं है। कुछ बारीकियां हैं। यदि आप उपरोक्त उदाहरण के दूसरे पैराग्राफ पर ध्यान देते हैं, तो आप ध्यान देंगे कि पैराग्राफ पर लागू कैपिटलाइज़ वैल्यू के साथ टेक्स्ट-ट्रांसफ़ॉर्म प्रॉपर्टी के बावजूद कैपिटल शब्द पूरी तरह से कैपिटल अक्षरों में प्रदर्शित होता है, जो मूल टेक्स्ट से मेल खाता है। यह इस तथ्य से समझाया गया है कि निर्दिष्ट पूंजीगत मूल्य के साथ, केवल शब्दों के पहले अक्षर की जांच की जाती है, और शेष अपरिवर्तित रहते हैं, उनकी प्रारंभिक स्थिति की परवाह किए बिना।
इसकी सरलता प्रतीत होने के बावजूद, पाठ-रूपांतरित संपत्ति बहुत उपयोगी हो सकती है। उदाहरण के लिए, अपनी साइट पर सभी H1 शीर्षकों के पाठ को कैपिटल करने के लिए, आपको बस एक प्रॉपर्टी को स्टाइलशीट में जोड़ना होगा

एच 1 (पाठ-परिवर्तन: अपरकेस;)

और समस्या हल हो जाएगी। और सभी हेडर को मैन्युअल रूप से बदलने की आवश्यकता नहीं है, जिनमें से बहुत, बहुत हो सकते हैं।

सीएसएस राजधानी पत्र एक समान डिजाइन की एकरसता को तोड़ने में मदद करते हैं, जिनमें से ग्रंथ शुरू से अंत तक एक जैसे दिखते हैं।

पहले और अब कैप छोड़ते हैं

क्रॉसलर्स ने हस्तलिखित पांडुलिपियों में बड़े अक्षरों का इस्तेमाल किया, जिनमें से कुछ 5 वीं शताब्दी के थे। 8 वीं से 15 वीं शताब्दी तक अपरकेस अक्षर का उपयोग जारी रहा, जब प्रिंटिंग प्रेस ने मुद्रण को औद्योगिक बनाने की अनुमति दी। दोनों हस्तलिखित और मुद्रित ड्रॉप कैप्स को पाठ की शुरुआत में रखा गया था। उन्हें अक्सर एक सजावटी पैटर्न से सजाया जाता था जिसे पत्र के चारों ओर रखा जाता था।

उठाया और नीचा अक्षर आज भी उपयोग में हैं। वे समाचार पत्रों, पत्रिकाओं और पुस्तकों के साथ-साथ डिजिटल प्रिंटिंग में पाए जा सकते हैं। उठाए गए पत्रों को कभी-कभी विस्तारित रूप में संदर्भित किया जाता है। उन्हें पाठ के नीचे फ्लश रखा जाता है जो उनका अनुसरण करता है। पाठ के शीर्ष पर, कभी-कभी पाठ सामग्री के मुख्य निकाय के पीछे एक परत में, या उनके चारों ओर पाठ के प्रवाह के साथ ओट किए गए अक्षरों को फ्लश रखा जाता है।

उठाए गए अक्षरों को परिभाषित करना बहुत आसान है, क्योंकि वे बाकी पाठ के साथ फ्लश कर रहे हैं, और आमतौर पर आपको ऐसा करने के लिए बाहरी मार्जिन के आसपास प्रवाह को बदलने की आवश्यकता नहीं है। ओकेट किए गए पत्रों को अधिक बारीक ट्यूनिंग की आवश्यकता होती है। आपके लिए इसे सुलझाना आसान होगा यदि आप पहली बार समझते हैं कि कैसे उठाए गए पात्रों को संभाला जाता है।

कक्षाओं का उपयोग करना

जो डिज़ाइनर पहले से ही CSS से परिचित हैं, वे पहले कैपिटल लेटर के लिए एक अलग CSS क्लास बनाना जानते हैं।

अनुच्छेद तत्व और वर्ग के लिए सीएसएस जो पत्र बनाता है वह इस तरह दिखाई देगा:

p (फ़ॉन्ट-आकार: 20px; फ़ॉन्ट-परिवार: जॉर्जिया, "टाइम्स न्यू रोमन", टाइम्स, सेरिफ़;) .myinitialcaps (फ़ॉन्ट-आकार: 48px; फ़ॉन्ट-परिवार: Didot;)

और HTML कोड इस तरह दिखेगा:

जो हमें देता है:

बहुत आसान लगता है? वास्तव में, आपको विशिष्ट उठाए गए पत्रों के आधार पर समायोजन करना होगा, क्योंकि प्रत्येक पूंजी पत्र के लिए विशेष कर्निंग की आवश्यकता होती है। उठाए गए पत्रों के लिए और बॉडी टेक्स्ट के लिए एक फ़ॉन्ट चुनने के बाद, आपको प्रत्येक उठाए गए पत्र के लिए अलग-अलग कक्षाएं बनाने की आवश्यकता है। नीचे में CSS class.myinitialcapsi दाईं ओर का बॉक्स I और n के बीच की दूरी को कम करने के लिए ऋणात्मक है।

Myinitialcapsi (फ़ॉन्ट-आकार: 48px; फ़ॉन्ट-परिवार: Didot; मार्जिन-राइट: -1px);

मैंइस मामले में, "I" और "n" के बीच कुछ अतिरिक्त स्थान है।

मैंएक नकारात्मक वर्ग के साथ एक नए वर्ग को शामिल करने से यह करीब आता है।

उपरोक्त उदाहरण में स्क्रीन रिज़ॉल्यूशन के आधार पर, मैं और n यह देख सकते हैं कि वे एक साथ विलय कर चुके हैं। यह अक्षरों के सिरों पर सेरिफ़ के कारण होता है। इसलिए, अंतिम सीएसएस शैलियों पर निर्णय लेने से पहले, विभिन्न उपकरणों पर साइट का परीक्षण करें यह देखने के लिए कि सभी कैप्स सीएसएस में पाठ कैसा दिखता है।

उद्धरण और अन्य विशेष मामले

आप पाठ की शुरुआत में न केवल अक्षरों को बड़ा कर सकते हैं। आप पत्र के बगल में दिखाई देने वाले उद्धरण चिह्नों का एक बड़ा संस्करण बनाने के लिए एक और वर्ग लागू कर सकते हैं। हमारे मामले में, न तो 48 अक्षर वर्ग और न ही 20 पिक्सेल पाठ वर्ग उद्धरण चिह्नों के लिए उपयुक्त है। बल्कि, यह बीच में कुछ होगा - 30 पिक्सेल। हम उनके साथ वैकल्पिक रूप से संरेखित करने के लिए उद्धरणों को 4 पिक्सेल से नीचे ले जाएँगे:

Myinitialcapsq (फॉन्ट-साइज़: 30px; फॉन्ट-फ़ैमिली: डीडोट; फ़्लोट: लेफ्ट; मार्जिन-टॉप: 2 पीएक्स;)

“मैंncluding "एक नकारात्मक मार्जिन के साथ एक नया वर्ग इसे करीब खींचता है।

आपको प्रत्येक सीएसएस कैप को उद्धरण के साथ निर्दिष्ट करने के बारे में बहुत सावधानी बरतने की आवश्यकता है, ताकि उनकी कर्निंग और संरेखण आसपास के मार्कअप से मेल खाए। उदाहरण के लिए, पत्र टी को बाईं ओर स्थानांतरित करने की आवश्यकता होगी, पैराग्राफ के किनारे से थोड़ा परे, ताकि इसकी अनुप्रस्थ रेखा नेत्रहीन लेआउट में फिट हो। आपको सी, जी, ओ और क्यू जैसे गोल अक्षरों के साथ ऐसा करने की आवश्यकता होगी। इस उदाहरण में, उपयोग किए गए फ़ॉन्ट आकार 20, 30 और 48 हैं। लेकिन आपको उन फोंट की बारीकियों के आधार पर आकार चुनने की आवश्यकता होगी जिन्हें आपने चुना है। साथ ही स्क्रीन के आकार और संकल्प जिस पर साइट देखी जाएगी।

छद्म तत्व और छद्म वर्ग

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

p (फ़ॉन्ट-आकार: 1.2em; फ़ॉन्ट-परिवार: जॉर्जिया, "टाइम्स न्यू रोमन", टाइम्स, सेरिफ़; पंक्ति-ऊंचाई: 2em; गद्दी-निचला: 1.2em;) p :: पहला अक्षर (फ़ॉन्ट-आकार: 3.6em; पाठ-रूपांतर: अपरकेस। फ़ॉन्ट-परिवार: "मोनोटाइप बर्नार्ड कंडेंस्ड", सेरबोर्ड; मार्जिन-राइट: 0.03em;); इनसेंटिब (मार्जिन-राइट: -0.1em;); इनटेंसियल (मार्जिन-राइट: -0.15) उन्हें;)

HTML कोड जिसमें CSS वर्ग होते हैं जो N और B अक्षरों की कर्निंग के लिए होते हैं, इस तरह दिखेगा ...

पहला अक्षर, पहला अक्षर कैपिटल लेटर होता है।
एक पंक्ति विराम के साथ, अगली पंक्ति में कोई प्रारंभिक टोपी नहीं है।

nhTML स्रोत में ओटिस, HTML में कैपिटल लेटर नहीं, पहला अक्षर 3.6em के प्रारंभिक कैप साइज को कैसे प्राप्त होता है। नीट, हुह?

बीएक कठिन रिटर्न के साथ, और एक नया पैराग्राफ शुरू हुआ, एक और प्रारंभिक टोपी हमेशा बनती है। आप खुद से पूछ रहे होंगे, मैं इसका हिसाब कैसे दूंगा? क्या मैं बहुत नए पैराग्राफ की शुरुआत में एक शुरुआती टोपी रखने वाला हूं? खैर, आप कर सकते हैं। लेकिन, क्या आप चाहते हैं कि यह उस तरह से दिखे, और क्या यह बिल्कुल उस तरह से देखना है?

पैराग्राफ का पहला कैपिटल अक्षर एक अक्षर में बदल जाता है।
लाइन ब्रेक के बाद पहला अक्षर कैपिटल में नहीं होगा।

के बारे मेंध्यान दें कि HTML स्रोत में, पहले अक्षर को कैपिटल नहीं किया गया है, लेकिन इसे 3.6em वर्ण में बदल दिया गया है।

के बारे मेंहालांकि, एक मजबूर लाइन ब्रेक के बाद भी, और प्रत्येक नए पैराग्राफ की शुरुआत में, एक पत्र हमेशा बनाया जाता है। आप खुद से पूछ सकते हैं: मैं इसे कैसे ध्यान में रख सकता हूं? क्या मुझे इन सभी मामलों के लिए पत्र जोड़ने की आवश्यकता है? खैर, आप कर सकते हैं। लेकिन क्या यह जरूरी है?

यहां तक \u200b\u200bकि छद्म तत्व प्रदान करने वाले लाभों के साथ, हमें कर्लिंग और उत्पीड़न के मुद्दों को संभालने के लिए अलग-अलग वर्गों को परिभाषित करने के लिए बहुत सारे कोड जोड़ना पड़ा। लेकिन यह विधि प्रत्येक नए पैराग्राफ के पहले अक्षर को CSS में बड़े अक्षर में परिवर्तित करती है। कुछ के लिए, यह काम नहीं कर सकता है, क्योंकि आपको प्रत्येक पैराग्राफ के पहले अक्षर को बदलने की आवश्यकता नहीं है।

स्मार्ट लेआउट बनाने के लिए छद्म वर्ग और छद्म तत्व को मिलाकर

पहले अक्षर के अनावश्यक रूपांतरण की समस्या को हल करने में मदद करता है: प्रथम-बाल छद्म वर्ग जोड़ना

p (फ़ॉन्ट-आकार: 1.2em; फ़ॉन्ट-परिवार: जॉर्जिया, "टाइम्स न्यू रोमन", Times, serif; पंक्ति-ऊंचाई: 2em; गद्दी-निचला: 0.5em;) p: पहला-बच्चा :: पहला अक्षर ( फ़ॉन्ट-आकार: 3.6em; पाठ-परिवर्तन: अपरकेस; फ़ॉन्ट-परिवार: "मोनोटाइप बर्नार्ड कंडेंस्ड, सेरिफ़; मार्जिन-राइट: 0.03em;)

इस कोड को HTML के साथ मिलाकर:

पहला अक्षर, जिसे पहले बच्चे के रूप में परिभाषित किया गया है, एकमात्र ऐसा पत्र है, जो इस पद्धति में उभरी हुई ड्रॉप कैप में परिवर्तित हो जाता है।

चूंकि केवल पहले-बच्चे के रूप में परिभाषित पत्र को रूपांतरित किया जाता है, ध्यान दें कि यह उदाहरण पिछले वाले से अलग है, पहले-बच्चे के बिना। इसके अलावा, हम पहले अक्षरों को एक पैराग्राफ की शुरुआत के बाद और एक मजबूर लाइन ब्रेक के बाद परिवर्तित नहीं करते हैं। जब हम पैराग्राफ के सभी पहले अक्षरों को परिवर्तित करते हैं, तो लेआउट जैसा दिखता था, उससे अधिक सुरुचिपूर्ण यह दिखता है।

छद्म वर्गों का उपयोग करने का लाभ विभिन्न विशेष मामलों को संभालने की क्षमता है। चढ़ाव के बारे में क्या? कई अलग-अलग छद्म वर्ग हैं, और उन्हें इतने तरीकों से जोड़ा जा सकता है कि यह आपके सिर को स्पिन कर सकता है। उदाहरण के लिए, छद्म वर्ग: पहला-बच्चा और: पहला-प्रकार एक ही परिणाम दे सकता है। आप छद्म वर्ग को केवल एक पैराग्राफ तक ही नहीं, बल्कि तत्वों तक भी लागू कर सकते हैं