SVG textLength: अक्षरों को बिगाड़े बिना लेबल फ़िट करें

जब SVG लेबल की लंबाई तय होनी चाहिए और अक्षरों के बीच दूरी में थोड़ा बदलाव स्वीकार्य हो, तो textLength के साथ lengthAdjust="spacing" इस्तेमाल करें। अक्षरों की आकृति वैसी ही रहती है। spacingAndGlyphs चुनने पर रेंडरर टेक्स्ट की दिशा में अक्षरों को भी खींच या दबा सकता है। SVG टेक्स्ट विनिर्देश में यही दो तरीके बताए गए हैं।

ध्यान लक्ष्य पर दें: textLength माँगी गई लंबाई है, अधिकतम चौड़ाई नहीं। यह छोटे लेबल को फैलाने में उतना ही सक्षम है जितना लंबे लेबल को दबाने में। यह कई पंक्तियों में टेक्स्ट भी नहीं बाँटता।

हर समायोजन क्या बदलता है

lengthAdjust का मान दिए बिना textLength सेट करने पर spacing डिफ़ॉल्ट होता है। MDN का textLength संदर्भ बताता है कि माँगी गई लंबाई और समायोजन का तरीका साथ कैसे काम करते हैं।

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

समान लक्ष्य पर छोटा और लंबा लेबल

हमने हीरे के आकार का मौलिक प्रतीक बनाया और Abel Regular में 64 SVG इकाइयों के फ़ॉन्ट आकार पर दो संपादन योग्य लेबल परखे। तय फ़ॉन्ट लोड करने के बाद ब्राउज़र ने PINE की लंबाई लगभग 115.6 इकाइयाँ और PINE & FIELD की 325.3 इकाइयाँ मापी। दोनों समायोजित पंक्तियों में 240 इकाइयाँ माँगी गई हैं।

समान लक्ष्य, अलग अक्षर विन्यास

छोटे लेबल में spacing स्पष्ट बड़े अंतर बनाता है। लंबे लेबल में यह अक्षरों को पास-पास दबाता है। दोनों में अक्षरों की आकृति बची रहती है, फिर भी कोई परिणाम इस डिज़ाइन के लिए सही नहीं है। spacingAndGlyphs वाली पंक्ति फ़ॉन्ट के अनुपात को स्पष्ट रूप से बदलकर उतनी ही लंबाई तक पहुँचती है।

हमारे परीक्षण में इन-ऐप ब्राउज़र का Chrome 154 इस्तेमाल हुआ। हमने पहले अक्षर की शुरुआत से अंतिम अक्षर के अंत तक क्षैतिज दूरी मापी; हर समायोजित पंक्ति लगभग 240 इकाइयों तक पहुँची। नमूने में एक Latin फ़ॉन्ट और साधारण बाएँ से दाएँ टेक्स्ट है। यह अलग-अलग रेंडरर या कई भाषाओं का अनुकूलता परीक्षण नहीं है।

लंबाई में मामूली सुधार करें

ऊपर के लंबे लेबल के लिए 330 इकाइयाँ उसकी स्वाभाविक 325.3 इकाइयों की लंबाई के करीब हैं। उसे जबरन 240 तक घटाने के मुकाबले यह संतुलन का अधिक उपयोगी उदाहरण है।

Google Fonts की Abel डायरेक्टरी से Abel-Regular.ttf और उसका OFL.txt डाउनलोड करें। इन्हें इस मार्कअप वाली HTML फ़ाइल के पास fonts फ़ोल्डर में रखें, फिर उस फ़ोल्डर को स्थानीय सर्वर से उपलब्ध करें:

<style>
  @font-face {
    font-family: Abel;
    src: url('./fonts/Abel-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
  }
</style>
 
<svg xmlns="http://www.w3.org/2000/svg"
     width="540" height="136" viewBox="0 0 540 136"
     role="img" aria-label="Pine and Field emblem and label">
  <path d="M25 80L63 24L101 80L63 114Z" fill="#287967"/>
  <path d="M43 80L63 49L83 80L63 97Z" fill="#c2d998"/>
  <text id="label" x="135" y="86"
        font-family="Abel" font-size="64" font-weight="400"
        textLength="330" lengthAdjust="spacing"
        fill="#17372e">PINE &amp; FIELD</text>
</svg>

बिना इकाई वाला 330 SVG के निर्देशांक तंत्र का हिस्सा है। पेज पर पूरे SVG का आकार बदलने से स्क्रीन पर यह दूरी भी बदलती है। प्रतीक और टेक्स्ट अलग रखें, ताकि अक्षर विन्यास बदलने से चित्र न बदले।

फ़ॉन्ट अब भी महत्वपूर्ण है। textLength अक्षरों को आउटलाइन में नहीं बदलता और फ़ॉन्ट को फ़ाइल में पैक नहीं करता। दूसरे कंप्यूटर पर अक्षरों की आकृति बदल जाए तो दूरी बदलने से पहले SVG में फ़ॉन्ट बदलने की समस्या जाँचें।

अधिकतम चौड़ाई के लिए पहले मापें

अगर नियम है “छोटे लेबल वैसे ही रहने दें, केवल लंबे लेबल छोटे करें,” तो यह शर्त आपको जोड़नी होगी। यह उदाहरण फ़ॉन्ट आकार घटाता है, इसलिए दोनों दिशाओं में छोटे होते हुए अक्षरों का अनुपात बना रहता है।

ऊपर के SVG के बाद यह स्क्रिप्ट रखें। यह तय 330 इकाइयों के समायोजन को अधिकतम 240 इकाइयों से बदलती है:

<script type="module">
  const label = document.querySelector('#label');
  const baseSize = 64;
  const maxWidth = 240;
 
  await document.fonts.load('64px Abel', label.textContent);
  await document.fonts.ready;
 
  label.removeAttribute('textLength');
  label.removeAttribute('lengthAdjust');
  label.setAttribute('font-size', String(baseSize));
 
  const naturalWidth = label.getComputedTextLength();
  if (naturalWidth > maxWidth) {
    const fittedSize = baseSize * maxWidth / naturalWidth;
    label.setAttribute('font-size', String(fittedSize));
  }
</script>

document.fonts.ready दस्तावेज़ के फ़ॉन्ट लोड होने और लेआउट का काम पूरा होने तक प्रतीक्षा करता है। स्पष्ट load() कॉल पहले इस उदाहरण का फ़ॉन्ट माँगती है। तय फ़ॉन्ट लोड होने से पहले मापने पर फ़ॉलबैक अक्षरों के आधार पर फ़िट करने का निर्णय हो सकता है।

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

इस स्क्रिप्ट के साथ छोटा PINE लेबल 64 इकाइयों का आकार रखता है। लंबा लेबल लगभग 47.2 इकाइयों तक घटता है। परिणाम को उसके वास्तविक प्रदर्शन या प्रिंट आकार पर देखें। घटाए हुए शब्द बहुत छोटे हों तो आकार लगातार घटाने के बजाय लेआउट या शब्द बदलें। शब्द या फ़ॉन्ट सेटिंग बदलने पर फ़िट करने का चरण दोबारा चलाएँ।

अंतिम लेबल को उसके इस्तेमाल की जगह जाँचें

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

कई पंक्तियों के लिए जानबूझकर पंक्तियाँ बनाएँ और उन्हें रखें; अकेला textLength टेक्स्ट बाँटने का नियम नहीं देता। घुमावदार बैज के लिए अलग SVG में पाथ पर टेक्स्ट रखने की प्रक्रिया अपनाएँ। वह मार्गदर्शिका उस आधार रेखा को नियंत्रित करती है जिस पर अक्षर चलते हैं।

मूल फ़ाइल में संपादन योग्य टेक्स्ट रखें, फिर देने वाली फ़ाइल को उसी संपादक, ब्राउज़र या रेंडरर में खोलें जो उसे इस्तेमाल करेगा। SVG फ़ाइल मार्गदर्शिका बताती है कि समान एक्सटेंशन के बावजूद SVG में संपादन योग्य टेक्स्ट, वेक्टर पाथ या एम्बेडेड इमेज क्यों हो सकती है।

आपका शुरुआती लोगो केवल रास्टर इमेज में हो तो PerfectVector का लोगो वेक्टराइज़र प्रतीक की कलाकृति वापस प्राप्त कर सकता है। उन पाथ को जाँचें और साफ़ करें, फिर लेबल फ़िट करने से पहले शब्दों को संपादन योग्य टेक्स्ट के रूप में दोबारा टाइप करें। ट्रेस किया शब्द पाथ ज्यामिति होता है; textLength उसके अक्षरों की दूरी नहीं बदल सकता। हमारा लोगो वेक्टराइज़ करने का चरणबद्ध लेख मूल कलाकृति वापस प्राप्त करने का वह चरण समझाता है।

अक्सर पूछे जाने वाले सवाल

क्या textLength केवल बहुत लंबे टेक्स्ट को छोटा करता है? नहीं। यह लंबाई माँगता है, इसलिए स्वाभाविक रूप से छोटे टेक्स्ट को फैला भी सकता है। अधिकतम चौड़ाई का नियम चाहिए तो स्वाभाविक लेबल मापें और अपनी शर्त लगाएँ।

lengthAdjust का कौन-सा मान अक्षरों की आकृति बचाता है? अक्षरों को खींचे बिना उनकी दूरी बदलने के लिए spacing इस्तेमाल करें। बड़ा समायोजन फिर भी असहज अंतर या टकराव बना सकता है, इसलिए अंतिम आकार पर अक्षर जाँचें।

क्या textLength PNG से ट्रेस किए अक्षरों को फ़िट कर सकता है? यह SVG टेक्स्ट पर काम करता है, अक्षरों के आकार वाले पाथ पर नहीं। textLength या संपादन योग्य अक्षर दूरी चाहिए तो शब्द संपादन योग्य टेक्स्ट में फिर टाइप करें और प्रतीक को अलग वेक्टर कलाकृति रखें।

स्रोत

1. W3C — SVG 2 में टेक्स्ट समायोजन — दोनों तरीके और अक्षरों की आकृति तथा अगले अक्षर तक की दूरी पर उनका असर।
2. MDN — textLength — माँगी गई लंबाई और डिफ़ॉल्ट spacing तरीका।
3. MDN — FontFaceSet.ready — फ़ॉन्ट लोड होने और लेआउट की प्रतीक्षा।
4. MDN — getComputedTextLength — SVG टेक्स्ट तत्व मापना।
5. Google Fonts — Abel — मूल तुलना में इस्तेमाल फ़ॉन्ट और लाइसेंस।

ज़रूरत हो तो लोगो वेक्टराइज़र से रास्टर प्रतीक वापस प्राप्त करें, फिर अक्षरों को अलग टेक्स्ट तत्व रखें। आउटलाइन वाली अंतिम प्रति या रास्टर एक्सपोर्ट बनाने से पहले सामान्य आकार पर अंतिम लेबल की तुलना करें।