CSS float से SVG आकृति के आसपास HTML टेक्स्ट लपेटें

SVG सिलुएट के आसपास HTML टेक्स्ट लपेटने के लिए इमेज को float करें, स्पष्ट आयाम दें और shape-outside में पारदर्शी SVG का URL रखें। कंटूर के आसपास जगह के लिए shape-margin जोड़ें। पैराग्राफ सामान्य HTML रहता है; SVG उस इमेज को देता है जिससे लपेटने की सीमा निकलती है।

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

वास्तविक ज़रूरत वाला टेक्स्ट लेआउट चुनें

SVG फ़ाइल आसपास के पैराग्राफ का लेआउट नहीं रखती। इमेज दूसरे दस्तावेज़ में कॉपी करने से यह HTML/CSS संबंध नहीं जाएगा।

1. float को आकार और पारदर्शी इमेज दें

MDN का shape-outside संदर्भ इसे उस float क्षेत्र को बदलने का गुण बताता है जिसके आसपास पास की इनलाइन सामग्री लिपटती है। डिफ़ॉल्ट में वह क्षेत्र float के margin बॉक्स का अनुसरण करता है। इमेज URL इसके बजाय इमेज के अल्फ़ा, यानी पारदर्शिता, से आकृति निकालता है।

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

यह मूल आर्टवर्क silhouette.svg में सहेजें:

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="180" viewBox="0 0 150 180">
  <path fill="#2f6977" d="M30 20 C80 5 135 35 138 75 C140 110 105 140 65 150 L45 170 L37 142 C8 125 8 85 22 62 C10 47 16 31 30 20 Z"/>
</svg>

इसका मूल आकार 150 × 180 है और CSS वही चौड़ाई तथा ऊँचाई लेता है। अनुपात समान रखने से दिखते आर्ट और आकृति इमेज का संबंध जाँचना आसान है।

इस उदाहरण की इमेज सजावटी है, इसलिए खाली alt एट्रिब्यूट है। अर्थ रखने वाली इमेज को पेज के अनुसार उचित टेक्स्ट विकल्प दें; उसके आसपास लपेटना उसका अर्थ अपने आप नहीं बताता।

2. पूरा HTML उदाहरण चलाएँ

इसे silhouette.svg के पास index.html में सहेजें:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>HTML text around an SVG silhouette</title>
<style>
* { box-sizing: border-box; }
.sample {
  display: flow-root;
  color: #183a42;
  font: 16px/24px Arial, sans-serif;
}
.sample p { margin: 0; }
.sample img { float: left; width: 150px; height: 180px; margin: 0; }
.sample.narrow { width: 360px; }
.sample.wide { width: 520px; }
.sample.contour img {
  shape-outside: url("silhouette.svg");
  shape-image-threshold: 0.5;
  shape-margin: 10px;
}
</style>
<div class="sample narrow contour">
  <img src="silhouette.svg" alt="">
  <p>The neighborhood library keeps a small garden beside its reading room. Volunteers label the seedlings, share spare pots, and record which plants attract insects. A curved illustration can sit beside this paragraph while the browser keeps the words in their original order. As the column becomes narrower, the same sentence needs different line breaks. The artwork remains the same size in this example, so the available room beside it changes. After the illustration ends, the paragraph can use the full column again. Editors can revise this text without moving individual words or drawing separate text lines. The layout belongs to the web page, while the SVG supplies the visible silhouette.</p>
</div>
</html>

फ़ोल्डर HTTP पर चलाएँ, जैसे python -m http.server 8000, और http://localhost:8000/index.html खोलें। दोनों फ़ाइलें तब समान origin साझा करती हैं। स्थानीय file URL यहाँ जाँचा लोडिंग सेटअप नहीं है।

सामान्य आयताकार float लपेट से तुलना के लिए class="sample narrow contour" को class="sample narrow" करें। 520-पिक्सेल कॉलम जाँचने के लिए narrow को wide करें। पैराग्राफ और इमेज समान रहते हैं।

display संदर्भ कहता है कि flow-root ब्लॉक फ़ॉर्मैटिंग संदर्भ बनाता है। यहाँ वह floated इमेज को उसके नमूने के भीतर रखता है। शब्दों की स्थिति वह नहीं देता; ब्राउज़र का इनलाइन लेआउट देता है।

3. एक से अधिक चौड़ाई पर रेंडर पंक्तियाँ जाँचें

हमने Chromium 155 में Arial 16px और 24px लाइन ऊँचाई पर चार दिखने वाले नमूने चलाए। इमेज 150 × 180px रही और कॉलम की स्थिर कंटेंट चौड़ाई 360px तथा 520px थी। दोनों कंटूर नमूनों में shape-margin: 10px और shape-image-threshold: 0.5 थे।

संकरा कंटूर कुल पंक्ति संख्या घटाए बिना लपेट बदलता है। बड़ी चौड़ाई पर कंटूर नमूने ने आयताकार नियंत्रण से एक कम पंक्ति ली।

हमने हर शब्द के मूल DOM Range आयत मापकर लंबवत स्थिति से समूह बनाए। ये रेंडर टेक्स्ट-पंक्ति माप हैं, ब्राउज़र के भीतरी line-box ऑब्जेक्ट तक पहुँच नहीं। गणना किए float और shape मान, लोड इमेज आयाम और वास्तविक SVG इमेज के अल्फ़ा नमूने भी जाँचे।

दोनों चौड़ाई में कुछ कंटूर पंक्तियाँ आयताकार float की 150px रोक सीमा के बाएँ शुरू हुईं। इमेज के बाद टेक्स्ट फिर पूरे कॉलम में आया। इससे पता चलता है कि जाँचे कंटूर ने वास्तविक लेआउट बदला, केवल स्क्रीनशॉट का रूप नहीं।

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

4. shape margin, अल्फ़ा और लोडिंग अलग देखें

shape-margin लपेट आकृति बढ़ाकर उसके और टेक्स्ट के बीच जगह बनाता है। यहाँ 10px लेआउट का चुनाव है, हर दिखते अक्षर और चित्र के हर बिंदु का मापा न्यूनतम अंतर नहीं।

CSS Shapes विनिर्देश सामान्य बॉक्स मॉडल बनाए रखता है और आकृति के प्रभाव को float के margin बॉक्स तक काटता है। बड़ा shape margin इमेज का CSS बॉक्स बड़ा नहीं करता। डिज़ाइन को अधिक जगह चाहिए तो float आयाम और सामान्य margin भी देखें।

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

इमेज URL भी shape लोडिंग के योग्य होना चाहिए। CSS Shapes इमेज URL के लिए CORS अनुरोध बताता है और लोड विफल हो तो कस्टम आकृति नहीं लेता। उदाहरण में SVG पेज के पास सर्व करने से cross-origin निर्भरता नहीं। CDN पर हो तो सर्वर का CORS उत्तर सेट करें और अनुरोध तथा लेआउट देखें। केवल img में इमेज दिखने से shape अनुरोध सफल साबित नहीं होता।

5. टेक्स्ट क्रम बचाएँ और तैयार पेज देखें

चारों जाँचे पैराग्राफ में एक टेक्स्ट नोड में बिल्कुल वही टेक्स्ट रहा, br एलिमेंट या हर शब्द का अलग स्थान नहीं था। CSS ने पैराग्राफ का DOM क्रम बदले बिना दिखने वाले लाइन ब्रेक बदले। हमने स्क्रीन-रीडर सत्र नहीं चलाया या स्रोत जाँच से एक्सेसिबिलिटी ऑडिट का दावा नहीं किया।

इमेज उपलब्ध न हो या लेआउट बदले तब भी पैराग्राफ पढ़ने योग्य रखें। बहुत संकरे कॉलम में पास की पतली टेक्स्ट पट्टी से बेहतर इमेज ऊपर रखना हो सकता है। कंटूर प्रभाव के लिए टेक्स्ट छोटा करने के बजाय अपना breakpoint और कंटेंट जाँचें।

float अब भी CSS बॉक्स आरक्षित करता है। shape लपेट उसे ऐसी सामान्य बाधा नहीं बनाता जिसके हर तरफ़ टेक्स्ट बहे। इस left-float में साथ का टेक्स्ट दाएँ लिपटता और फिर नीचे जारी रहता है।

लक्षण के मूल कारण को सुधारें

उपयुक्त सपाट चित्र केवल रास्टर में बचा हो और संपादन योग्य सिलुएट चाहिए तो PerfectVector का क्लिपआर्ट से SVG कार्यप्रवाह उम्मीदवार वापस पाने में मदद कर सकता है। रूपरेखा और आसपास की पारदर्शिता स्रोत से मिलाएँ, फिर पेज में वास्तविक SVG URL जाँचें। पारदर्शी रास्टर भी इमेज-आधारित CSS आकृति दे सकता है; केवल अल्फ़ा लपेट चालू करने के लिए SVG ज़रूरी नहीं।

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

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

क्या shape-outside SVG के भीतर टेक्स्ट लपेटता है? नहीं। यह उदाहरण floated इमेज के पास HTML इनलाइन flow बदलता है। SVG लेबल, SVG में एम्बेडेड HTML और पाथ वाला टेक्स्ट अलग लेआउट काम हैं।

पारदर्शी दिखता SVG अब भी आयत जैसा क्यों लपेटता है? फ़ाइल में अपारदर्शी बैकग्राउंड, असफल shape अनुरोध, गायब float आकार या निष्क्रिय float संदर्भ जाँचें। सफ़ेद पिक्सेल पारदर्शी पिक्सेल नहीं।

क्या पहले PNG को SVG करना चाहिए? केवल अल्फ़ा-आधारित लपेट के लिए नहीं। उचित पारदर्शी रास्टर भी आकृति दे सकता है। संपादन या अन्य वेक्टर ज़रूरत हो तब SVG लें।

क्या हर स्क्रीन आकार पर लाइन ब्रेक समान रहेंगे? नहीं। उपलब्ध चौड़ाई, फ़ॉन्ट माप, टेक्स्ट, इमेज आकार और ब्राउज़र लेआउट पंक्तियाँ बदलते हैं। असली कंटेंट एक से अधिक चौड़ाई पर जाँचें।

स्रोत

1. MDN shape-outside — float क्षेत्र और अल्फ़ा से निकली इमेज आकृति का दस्तावेज़।
2. MDN shape-margin — लपेट आकृति के आसपास जोड़ी दूरी तय करता है।
3. MDN shape-image-threshold — इमेज आकृति का अल्फ़ा थ्रेशोल्ड बताता है।
4. CSS Shapes Module Level 1 — float-बॉक्स सीमा, इमेज लोडिंग और CORS व्यवहार तय करता है।
5. MDN display और flow-root — float को समेटने वाला फ़ॉर्मैटिंग संदर्भ समझाता है।

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