SVG टेक्स्ट का लंबवत संरेखण: दोबारा बनाए लेबल को बीच में रखें

क्षैतिज SVG लेबल में y चुनी आधार रेखा का स्थान तय करता है। यह उस निर्देशांक पर अक्षरों का ऊपरी किनारा नहीं रखता। क्षैतिज गाइड के आसपास छोटा Latin लेबल रखते समय dominant-baseline="middle" से शुरू करें और वास्तविक फ़ॉन्ट में परिणाम देखें। x निर्देशांक के आसपास टेक्स्ट क्षैतिज रूप से बीच में रखने के लिए text-anchor="middle" इस्तेमाल करें।

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

संरेखण का लक्ष्य चुनें

समान y="100" अक्षरों के अलग स्थान दे सकता है:

W3C की आधार रेखा परिभाषाएँ middle और central का अंतर बताती हैं। कोई परिभाषा हर शब्द की रंगी सीमा बीच में रखने की गारंटी नहीं देती। MDN का dominant-baseline संदर्भ बताता है कि फ़ॉन्ट आधार रेखा तालिकाएँ और रेंडरर के अनुमान नियम भी मायने रखते हैं।

सामान्य क्षैतिज टेक्स्ट में text-anchor="middle" दूसरे अक्ष का काम करता है। यह दिए क्षैतिज स्थान के आसपास टेक्स्ट हिस्से को संरेखित करता है; लंबवत केंद्र नहीं देता। टेक्स्ट हिस्सों से उसका संबंध जानने के लिए text-anchor संदर्भ देखें।

प्रतीक और संपादन योग्य लेबल की तुलना करें

पूरा उदाहरण baseline-example.svg सेव करें और ब्राउज़र में खोलें। छल्ला मूल ज्यामिति है; Agyp परीक्षण शब्द है जिसमें ऊपर और नीचे बढ़े अक्षर हैं। लाल रेखा y=100 दिखाती है।

<svg xmlns="http://www.w3.org/2000/svg" width="840" height="400"
     viewBox="0 0 420 200">
  <path fill="#137f74" fill-rule="evenodd"
    d="M55 75A25 25 0 1 1 55 125A25 25 0 1 1 55 75
       M55 86A14 14 0 1 0 55 114A14 14 0 1 0 55 86"/>
  <path d="M20 100H400" fill="none" stroke="#c3594d"/>
  <text id="label" x="250" y="100" font-family="Arial, sans-serif"
        font-size="64" text-anchor="middle" dominant-baseline="middle"
        fill="#193e3a">Agyp</text>
</svg>

केवल dominant-baseline पहले alphabetic, फिर central करें। निर्देशांक, फ़ॉन्ट आकार और शब्द स्थिर रखें। फिर दूसरे उपलब्ध फ़ॉन्ट की तुलना करें। कई सेटिंग साथ बदलने से यह पहचानना कठिन होता है कि किसने लेबल खिसकाया।

हमने Arial और Times New Roman की लोड प्रतियों से तीनों मान रेंडर किए। हर पैनल समान SVG निर्देशांक और मूल छल्ला इस्तेमाल करता है। हरे आयत संपादन योग्य टेक्स्ट के लिए ब्राउज़र का getBBox() परिणाम दिखाते हैं।

Alphabetic उदाहरण छल्ले की केंद्र रेखा के मुकाबले ऊपर बैठते हैं। Middle उदाहरण नीचे जाते हैं, जबकि central बताए बॉक्स को गाइड के करीब रखता है। हर नमूने के नीचे माप इन फ़ॉन्ट फ़ाइलों और इस ब्राउज़र रेंडर के हैं। वे दूसरे डिज़ाइन में कॉपी करने के खिसकाव मान नहीं हैं।

मापने से पहले हमारी फ़ॉन्ट फ़ाइलें लोड हुईं। माँगा फ़ॉन्ट उपलब्ध न हो तो आपका एक्सपोर्ट SVG वैकल्पिक फ़ॉन्ट चुन सकता है; संरेखण पर निर्णय से पहले वह निर्भरता हल करें। SVG फ़ॉन्ट बदलने की मार्गदर्शिका वास्तविक फ़ॉन्ट जाँचना और वितरण प्रति बचाना बताती है।

बीच में रखा टेक्स्ट बॉक्स भी असंतुलित दिख सकता है

SVG टेक्स्ट सीमा आवश्यक नहीं कि दिखाई देने वाली स्याही के चारों ओर सबसे छोटा आयत हो। SVG बॉक्स सीमा नियम टेक्स्ट गणना में अक्षर सेल और फ़ॉन्ट की ऊपर-नीचे की ऊँचाई इस्तेमाल करते हैं। उन सेल के चारों ओर आयत में ऐसी जगह हो सकती है जिसे कोई अक्षर रंगता ही नहीं।

यह अंतर Agyp जैसे लेबल में मायने रखता है: g, y और p अक्षरीय आधार रेखा के नीचे जाते हैं। सभी बड़े अक्षरों वाला लेबल अलग दृश्य वितरण रखता है। संरेखण करते समय इच्छित फ़ॉन्ट और वास्तविक शब्द मौजूद होने चाहिए।

एक पंक्ति में पढ़े जाने वाले लेबल के लिए साझा अक्षरीय आधार रेखा बचाएँ। हर शब्द को उसकी दृश्य आकृति बीच में दिखने तक अलग खिसकाने से पंक्ति असमान हो सकती है।

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

यही लक्ष्य हो तो मापा SVG टेक्स्ट बॉक्स बीच में रखें

सरल, बिना ट्रांसफ़ॉर्म के एक पंक्ति वाले <text> तत्व के लिए बताए बॉक्स केंद्र से लक्ष्य तक खिसकाव गणना करें। फ़ॉन्ट तैयार होने के बाद उदाहरण वाले दस्तावेज़ में यह चलाएँ:

await document.fonts.ready;
 
const label = document.querySelector('#label');
const targetY = 100;
const originalY = label.y.baseVal.getItem(0).value;
const box = label.getBBox();
const shift = targetY - (box.y + box.height / 2);
 
label.setAttribute('y', String(originalY + shift));

गणना बताए टेक्स्ट बॉक्स को targetY से संरेखित करती है। यह दृश्य संतुलन की गणना नहीं करती और फ़ॉन्ट के खाली अक्षर सेल की जगह नहीं हटाती। टेक्स्ट, फ़ॉन्ट, मोटाई या आकार बदलने के बाद फिर मापें।

document.fonts.ready फ़ॉन्ट लोडिंग और संबंधित लेआउट काम की प्रतीक्षा करता है। यह इच्छित फ़ॉन्ट सफल मिलने का प्रमाण नहीं है; फ़ॉन्ट संसाधन या ब्राउज़र की रेंडर फ़ॉन्ट जानकारी भी जाँचें।

यह कोड एक y मान, हर अक्षर की अलग स्थिति न होना, dy खिसकाव न होना और ट्रांसफ़ॉर्म टेक्स्ट समूह न होना मानता है। getBBox() स्थानीय SVG बॉक्स लौटाता है। दूसरे निर्देशांक तंत्र के लक्ष्य के लिए मैपिंग चाहिए; स्क्रीन पिक्सेल और SVG इकाइयाँ मिलाने से पहले SVG सीमा प्रक्रिया इस्तेमाल करें।

और खिसकाव जोड़ने से पहले विरोधी सेटिंग हल करें

टेक्स्ट और पैरेंट समूह देखें। बचा dy, भीतर का <tspan> या ट्रांसफ़ॉर्म उस स्थान को बदल सकता है जिसे आप जाँच रहे हैं। प्रति में एक बार में एक संदिग्ध समायोजन हटाएँ और परिणाम तुलना करें।

पेज की शैलियाँ भी देखें। CSS, dominant-baseline प्रस्तुति एट्रिब्यूट को पीछे कर सकती है। एट्रिब्यूट बदलने का दृश्य असर न हो तो दूसरा सुधार जोड़ने से पहले गणना हुआ मान देखें।

alignment-baseline बताता है कि तत्व की आधार रेखा उसके पैरेंट की संबंधित आधार रेखा से कैसे संरेखित होती है। यह “इस लेबल को SVG में बीच में रखो” का सामान्य पर्याय नहीं है। MDN का alignment-baseline संदर्भ ब्राउज़र समर्थन सीमाएँ भी बताता है। इस स्वतंत्र लेबल के लिए परीक्षण dominant-baseline पर रखें, फिर वास्तविक एक्सपोर्ट गंतव्य जाँचें।

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

चिह्न और अक्षर अलग रखें

साफ़ वेक्टर प्रतीक पहले से हो तो उसे रखें और लेबल संपादन योग्य टेक्स्ट में फिर बनाएँ। लेबल खिसकाने या फ़ॉन्ट चुनने के लिए वेक्टराइज़ेशन नहीं चाहिए।

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

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

देने से पहले वास्तविक शब्द और फ़ॉन्ट देखें, अंतिम आकार पर संयोजन जाँचें और गंतव्य में एक्सपोर्ट SVG फिर खोलें। वितरण प्रति में आउटलाइन टेक्स्ट हो तो संपादन योग्य मूल रखें।

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

क्या dominant-baseline="middle" और central समान हैं? नहीं। Middle x-height से जुड़ी आधार रेखा इस्तेमाल करता है, जबकि central em बॉक्स की केंद्रीय फ़ॉन्ट आधार रेखा इस्तेमाल करता है। स्थान अलग हो सकते हैं और कोई भी हर शब्द के दृश्य केंद्र की गारंटी नहीं देता।

क्या text-anchor="middle" SVG टेक्स्ट लंबवत बीच में रखता है? सामान्य क्षैतिज टेक्स्ट में text-anchor x निर्देशांक के आसपास क्षैतिज स्थान नियंत्रित करता है। लंबवत आधार रेखा dominant-baseline से अलग चुनें, फिर इच्छित फ़ॉन्ट में परिणाम देखें।

क्या getBBox दिखाई देने वाले अक्षरों को बिल्कुल बीच में रख सकता है? यह ब्राउज़र का बताया SVG टेक्स्ट बॉक्स बीच में रख सकता है। टेक्स्ट सीमा में रंगे अक्षरों के बाहर अक्षर सेल की जगह हो सकती है, इसलिए यह गणना दृश्य केंद्र या कसी सीमा के संरेखण की गारंटी नहीं देती।

स्रोत

1. W3C — SVG आधार रेखा संरेखण — alphabetic, middle और central आधार रेखाएँ परिभाषित करता है।
2. MDN — dominant-baseline — आधार रेखा तालिकाएँ, फ़ॉन्ट अनुमान नियम और CSS प्राथमिकता समझाता है।
3. MDN — text-anchor — दिए स्थान के आसपास टेक्स्ट हिस्से का आधार बताता है।
4. W3C — SVG बॉक्स सीमाएँ — टेक्स्ट सीमा के अक्षर सेल मॉडल का विवरण।
5. MDN — FontFaceSet.ready — फ़ॉन्ट लोडिंग और लेआउट पूरा होने का समय परिभाषित करता है।
6. MDN — getBBox — स्थानीय SVG सीमा और ट्रांसफ़ॉर्म छोड़ना बताता है।
7. MDN — alignment-baseline — पैरेंट आधार रेखा संरेखण और ब्राउज़र समर्थन सीमाएँ समझाता है।

फिर बनाए लोगो को अब भी संपादन योग्य प्रतीक चाहिए तो PerfectVector से संभावित SVG तैयार करें, वापस प्राप्त आउटलाइन जाँचें, फिर संपादन योग्य अक्षरों के साथ रखकर अंतिम गंतव्य में संरेखण देखें।