टेक्स्ट लॉक-अप - सीएसएस-ट्रिक्स

 The Cat in the Hat

एसवीजी टैग प्रदान करता है । हालांकि यह HTML में एक सामान्य की तरह बहुत काम करता है, यह उन विशेषताओं को स्वीकार करता है जो शक्तिशाली पाठ-आकार देने की क्षमताओं को अनलॉक करती हैं।

उन विशेषताओं में से एक है textLength। यदि हम इसे सेट करते हैं 100, तो लिपटे हुए पाठ को एसवीजी कंटेनर की पूरी लंबाई के लिए मजबूर किया जाएगा।

पेन एसवीजी टेक्स्ट लॉकअप - कोड 1 पर ज्यॉफ ग्राहम (@geoffgraham) द्वारा चरण 1 देखें।

उन विशेषताओं में से एक और है lengthAdjust। यह केवल तब लागू होता है जब (या ) में एक सेट होता है textLengthऔर उस स्थान को फिट करने के लिए पाठ को विस्तारित या संकुचित करने के तरीके को संभालता है। डिफ़ॉल्ट मान spacingजो अक्षर आकृतियों को संरक्षित करता है लेकिन वर्णों के बीच अंतराल को समायोजित करता है। हम spacingAndGlyphsइसके बजाय उपयोग कर सकते हैं और जो प्राकृतिक रिक्ति के अजीब होने के साथ-साथ वर्णों के आकार को संपीड़ित करने के विस्तार को समायोजित करेगा।

पेन एसवीजी टेक्स्ट लॉकअप - कोड 2 पर ज्यॉफ ग्राहम (@geoffgraham) द्वारा चरण 2 देखें।

जैसे , टैग भी एक font-sizeविशेषता को स्वीकार करता है जो ठीक उसी तरह से करता है जैसा आप उम्मीद कर सकते हैं: पाठ का आकार बदलें। हम इसका उपयोग उस पाठ में समायोजन करने के लिए कर सकते हैं जहां textLengthबहुत अधिक या बहुत कम जगह बढ़ती है और lengthAdjustपात्रों को अजीब से बाहर निकाल देती है।

एक साथ संयुक्त, ये तीन विशेषताएँ हमें पाठ लॉक-अप बनाने की क्षमता देती हैं। यहां हमें अतिरिक्त स्टाइल के लिए कुछ अतिरिक्त सीएसएस के साथ ऊपर स्निपेट के परिणामस्वरूप मिलता है:

कोडपेन पर ज्योफ ग्राहम (@geoffgraham) द्वारा पेन एसवीजी टेक्स्ट लॉकअप देखें।

अन्य लॉकअप

हमने पहले लॉकअप के बारे में लिखा है:

एक प्रकार का लॉकअप एक टाइपोग्राफिक डिज़ाइन है जहां शब्दों और पात्रों को बहुत विशेष रूप से स्टाइल और व्यवस्थित किया जाता है। जैसे डिजाइन वस्तुतः जगह पर बंद है।

एसवीजी इस तरह की चीज़ के लिए एकदम सही है, क्योंकि यह जिस तरह से आकार बदलता है। एसवीजी के अंदर पाठ एचटीएमएल में टाइप की तरह रिफ्लेक्ट नहीं होता है, यह एसवीजी करता है, जो अक्सर सही पहलू अनुपात पर होता है जो इसे डिजाइन किया गया था (हालांकि आप इसे नियंत्रित कर सकते हैं)।

तो अगर आप वेक्टर संपादन सॉफ्टवेयर जैसे Adobe Illustrator में कुछ इस तरह से डिज़ाइन करते हैं: