कस्टम पाथ के आस-पास कॉन्टेंट रैप करना
लंबे समय से, वेब डिज़ाइनर को रेक्टैंगल के दायरे में ही काम करना पड़ता था. वेब पर मौजूद ज़्यादातर कॉन्टेंट अब भी सामान्य बॉक्स में फंसा हुआ है, क्योंकि ज़्यादातर क्रिएटिव, रेक्टैंगल के अलावा किसी दूसरे लेआउट में काम नहीं करते. Chrome 37 की शुरुआत से उपलब्ध सीएसएस के आकार की शुरुआत के साथ ही इसमें बदलाव होने वाला है. सीएसएस शेप की मदद से, वेब डिज़ाइनर सर्कल, दीर्घवृत्त, और पॉलीगॉन जैसे कस्टम पाथ के चारों ओर कॉन्टेंट को रैप कर सकते हैं. इससे, उन्हें रेक्टैंगल की सीमाओं से मुक्ति मिलती है.
आकार मैन्युअल तरीके से तय किए जा सकते हैं या इमेज से अनुमान लगाया जा सकता है.
आइए, एक बहुत ही आसान उदाहरण देखते हैं.
ऐसा हो सकता है कि जब पहली बार किसी इमेज को इस तरह से फ़्लोट किया गया हो कि वह साफ़ तौर पर दिख रहा हो, तो हो सकता है कि इस पर कॉन्टेंट दिख जाए और वह खाली हो जाए. इसलिए, आपको असल में एलिमेंट के आस-पास मौजूद आयताकार रैप के आकार से निराशा होगी. इस समस्या को हल करने के लिए, सीएसएस शेप का इस्तेमाल किया जा सकता है.
<img class="element" src="image.png" />
<p>Lorem ipsum…</p>
<style>
.element{
shape-outside: url(image.png);
shape-image-threshold: 0.5;
float: left;
}
</style>
shape-outside: url(image.png) सीएसएस एलान में, ब्राउज़र को इमेज से आकार निकालने के लिए कहा जाता है.
shape-image-threshold प्रॉपर्टी, पिक्सल के कम से कम ओपैसिटी लेवल को तय करती है. इसका इस्तेमाल आकार बनाने के लिए किया जाएगा. इसकी वैल्यू, 0.0 (पूरी तरह से पारदर्शी) और 1.0 (पूरी तरह से अपारदर्शी) के बीच होनी चाहिए. इसलिए, shape-image-threshold: 0.5 का मतलब है कि आकार बनाने के लिए, सिर्फ़ 50% और उससे ज़्यादा ओपैसिटी वाले पिक्सल का इस्तेमाल किया जाएगा.
यहां float प्रॉपर्टी अहम है. shape-outside प्रॉपर्टी से उस हिस्से का आकार तय होता है जिसके आस-पास कॉन्टेंट रैप होगा. हालांकि, फ़्लोट के बिना आपको आकार के असर नहीं दिखेंगे.
एलिमेंट के float वैल्यू के दूसरी तरफ़ एक फ़्लोट एरिया होता है. उदाहरण के लिए, अगर कॉफ़ी कप की इमेज वाले किसी एलिमेंट को बाईं ओर फ़्लोट किया जा रहा है, तो फ़्लोट एरिया कप की दाईं ओर बन जाएगा. दोनों ओर गैप वाली इमेज बनाई जा सकती है. हालांकि, कॉन्टेंट सिर्फ़ उस तरफ़ मौजूद आकार के चारों ओर रैप होगा जिसे फ़्लोट प्रॉपर्टी से तय किया गया है. यह आकार, बाईं या दाईं ओर हो सकता है, दोनों ओर नहीं.
आने वाले समय में, उन एलिमेंट पर shape-outside का इस्तेमाल किया जा सकेगा जो सीएसएस एक्सक्लूज़न के साथ फ़्लोट नहीं किए गए हैं.
मैन्युअल तरीके से आकार बनाना
इमेज से आकार निकालने के अलावा, उन्हें मैन्युअल रूप से कोड भी किया जा सकता है. आकार बनाने के लिए, फ़ंक्शन वाली इन वैल्यू में से किसी एक को चुना जा सकता है: circle(), ellipse(), inset(), और polygon(). हर शेप फ़ंक्शन, निर्देशांक का एक सेट स्वीकार करता है. साथ ही, इसे रेफ़रंस बॉक्स के साथ जोड़ा जाता है, जो निर्देशांक सिस्टम को सेट करता है. रेफ़रंस बॉक्स के बारे में थोड़ी देर में ज़्यादा जानकारी दी जाएगी.
circle() फ़ंक्शन
सर्कल आकार की वैल्यू के लिए पूरा नोटेशन circle(r at cx cy) है, जहां r सर्कल की त्रिज्या है, जबकि cx और cy, X-ऐक्सिस और Y-ऐक्सिस पर सर्कल के केंद्र के निर्देशांक हैं. सर्कल के बीच के निर्देशांक देना ज़रूरी नहीं है. अगर इन पैरामीटर को शामिल नहीं किया जाता है, तो एलिमेंट के बीच (उसके डायगनल के इंटरसेक्शन) का इस्तेमाल डिफ़ॉल्ट तौर पर किया जाएगा.
.element{
shape-outside: circle(50%);
width: 300px;
height: 300px;
float: left;
}
ऊपर दिए गए उदाहरण में, कॉन्टेंट सर्कुलर पाथ के बाहरी हिस्से पर रैप होगा. सिंगल आर्ग्युमेंट 50%, सर्कल की त्रिज्या के बारे में बताता है. इस मामले में, यह एलिमेंट की चौड़ाई या ऊंचाई का आधा होता है. एलिमेंट के डाइमेंशन बदलने पर, सर्कल के आकार की त्रिज्या पर असर पड़ेगा. यह एक बुनियादी उदाहरण है कि सीएसएस शेप, रिस्पॉन्सिव कैसे हो सकते हैं.
आगे बढ़ने से पहले, एक ओर एक नज़र: यह ध्यान रखना ज़रूरी है कि सीएसएस के आकार, एलिमेंट के आस-पास के फ़्लोट एरिया के आकार पर सिर्फ़ असर डालते हैं. अगर एलिमेंट का कोई बैकग्राउंड है, तो उसे शेप से क्लिप नहीं किया जाएगा. इस इफ़ेक्ट को पाने के लिए, आपको सीएसएस मास्किंग से जुड़ी प्रॉपर्टी का इस्तेमाल करना होगा - या तो clip-path या मास्क-इमेज. clip-path प्रॉपर्टी का इस्तेमाल करना काफ़ी आसान है, क्योंकि यह CSS शेप के नोटेशन का इस्तेमाल करती है. इसलिए, इसकी वैल्यू का फिर से इस्तेमाल किया जा सकता है.
इस दस्तावेज़ में मौजूद इलस्ट्रेशन में, आकार को हाइलाइट करने और इफ़ेक्ट को समझने में आपकी मदद करने के लिए क्लिपिंग का इस्तेमाल किया गया है.
सर्कल आकार पर वापस जाएं.
सर्कल की त्रिज्या के लिए प्रतिशत का इस्तेमाल करने पर, वैल्यू का हिसाब थोड़े ज़्यादा मुश्किल फ़ॉर्मूला से लगाया जाता है: sqrt(width^2 + height^2) / sqrt(2). इसे समझना ज़रूरी है, क्योंकि इससे आपको यह अनुमान लगाने में मदद मिलेगी कि अगर एलिमेंट के डाइमेंशन बराबर नहीं हैं, तो सर्कल का आकार कैसा होगा.
सभी सीएसएस यूनिट टाइप का इस्तेमाल, शेप फ़ंक्शन कोऑर्डिनेट में किया जा सकता है - px, em, rem, vw, vh वगैरह. अपनी ज़रूरत के हिसाब से, ज़रूरत के हिसाब से विकल्प चुना जा सकता है.
सर्कल के केंद्र के निर्देशांक के लिए साफ़ तौर पर वैल्यू सेट करके, सर्कल की पोज़िशन में बदलाव किया जा सकता है.
.element{
shape-outside: circle(50% at 0 0);
}
इससे सर्कल का सेंटर, निर्देशांक सिस्टम के ऑरिजिन पर सेट हो जाता है. कोऑर्डिनेट सिस्टम क्या है? यहां हम रेफ़रंस बॉक्स की सुविधा पेश कर रहे हैं.
सीएसएस शेप के लिए रेफ़रंस बॉक्स
रेफ़रंस बॉक्स, एलिमेंट के चारों ओर मौजूद एक वर्चुअल बॉक्स होता है. यह आकार को खींचने और उसकी पोज़िशन तय करने के लिए इस्तेमाल किए जाने वाले कोऑर्डिनेट सिस्टम को सेट करता है. निर्देशांक सिस्टम का शुरुआती बिंदु, सबसे ऊपर बाएं कोने में होता है. इसमें X-ऐक्सिस दाईं ओर होता है और Y-ऐक्सिस नीचे की ओर होता है.
याद रखें कि shape-outside उस फ़्लोट एरिया का आकार बदल देता है जिसके आस-पास कॉन्टेंट रैप हो जाएगा. फ़्लोट एरिया, margin प्रॉपर्टी से तय किए गए बॉक्स के बाहरी किनारों तक फैला होता है. इसे margin-box कहा जाता है. अगर किसी आकार के लिए साफ़ तौर पर कोई रेफ़रंस बॉक्स नहीं दिया गया है, तो यह डिफ़ॉल्ट रेफ़रंस बॉक्स होता है.
नीचे दिए गए दो सीएसएस एलान के नतीजे एक जैसे हैं:
.element{
shape-outside: circle(50% at 0 0);
/* identical to: */
shape-outside: circle(50% at 0 0) margin-box;
}
हमने अभी तक एलिमेंट पर मार्जिन सेट नहीं किया है. इस समय यह मानना सुरक्षित है कि निर्देशांक प्रणाली का मूल और वृत्त केंद्र तत्व के सामग्री क्षेत्र के ऊपरी बाएं कोने में है. मार्जिन सेट करने पर, यह बदल जाता है:
.element{
shape-outside: circle(50% at 0 0) margin-box;
margin: 100px;
}
निर्देशांक सिस्टम का ऑरिजिन अब एलिमेंट के कॉन्टेंट एरिया (100 पिक्सल ऊपर और 100 पिक्सल बाईं ओर) के बाहर है. सर्कल का सेंटर भी इसी तरह बाहर है. margin-box रेफ़रंस बॉक्स की मदद से बनाए गए निर्देशांक सिस्टम की बढ़ी हुई सतह के हिसाब से, सर्कल रेडियस का परिकलित मान भी बढ़ता है.
shape-outside एलान के साथ, किसी भी समय सिर्फ़ एक रेफ़रंस बॉक्स का इस्तेमाल किया जा सकता है. हर रेफ़रंस बॉक्स, आकार पर अलग-अलग और कभी-कभी थोड़े अलग तरीके से असर डालेगा. इस बारे में ज़्यादा जानने के लिए, एक और लेख पढ़ें. इसमें सीएसएस आकार के लिए रेफ़रंस बॉक्स को समझने में मदद मिलेगी.
ellipse() फ़ंक्शन
दीर्घवृत्त, दबाए गए सर्कल की तरह दिखते हैं. इन्हें ellipse(rx ry at cx cy) के तौर पर दिखाया जाता है. इसमें rx और ry, एक्स-ऐक्सिस और वाई-ऐक्सिस पर दीर्घवृत्त की त्रिज्याएं हैं. वहीं, cx और cy, दीर्घवृत्त के केंद्र के निर्देशांक हैं.
.element{
shape-outside: ellipse(150px 300px at 50% 50%);
width: 300px;
height: 600px;
}
प्रतिशत वैल्यू, निर्देशांक सिस्टम के डाइमेंशन से कैलकुलेट की जाएंगी. इसके लिए, आपको कोई गणित नहीं करना होगा. आप दीर्घवृत्त केंद्र के निर्देशांक छोड़ सकते हैं और निर्देशांक प्रणाली के केंद्र से उनका अनुमान लगाया जाएगा.
X और Y ऐक्सिस पर त्रिज्या को कीवर्ड की मदद से भी तय किया जा सकता है: farthest-side से, दीर्घवृत्त के बीच की दूरी के बराबर त्रिज्या मिलती है और यह दूरी, दीर्घवृत्त के सेंटर और रेफ़रंस बॉक्स की सबसे दूर वाली साइड के बीच की होती है. वहीं, closest-side का मतलब इसके ठीक उलट है - सेंटर और साइड के बीच की सबसे कम दूरी का इस्तेमाल करें.
.element{
shape-outside: ellipse(closest-side farthest-side at 50% 50%);
/* identical to: */
shape-outside: ellipse(150px 300px at 50% 50%);
width: 300px;
height: 600px;
}
यह तब काम आ सकता है, जब एलिमेंट के डाइमेंशन (या रेफ़रंस बॉक्स) में अचानक बदलाव हो सकता है, लेकिन आपको दीर्घवृत्त के आकार में बदलाव नहीं करना है.
circle() आकार फ़ंक्शन में त्रिज्या के लिए, farthest-side और closest-side कीवर्ड का इस्तेमाल भी किया जा सकता है.
polygon() फ़ंक्शन
अगर आपको सर्कल और दीर्घवृत्त के विकल्प सीमित लगते हैं, तो पॉलीगॉन शेप फ़ंक्शन की मदद से कई तरह के विकल्प मिलते हैं. फ़ॉर्मैट polygon(x1 y1, x2 y2, ...) है, जहां पॉलीगॉन के हर वर्टेक्स (पॉइंट) के लिए x y निर्देशांक के जोड़े तय किए जाते हैं. किसी पॉलीगॉन को तय करने के लिए, कम से कम तीन पेयर की ज़रूरत होती है.
.element{
shape-outside: polygon(0 0, 0 300px, 300px 600px);
width: 300px;
height: 600px;
}
निर्देशांक सिस्टम पर वर्टिकल रखे जाते हैं. रिस्पॉन्सिव पॉलीगॉन के लिए, कुछ या सभी निर्देशांकों के लिए प्रतिशत वैल्यू का इस्तेमाल किया जा सकता है.
.element{
/* polygon responsive to font-size*/
shape-outside: polygon(0 0, 0 100%, 100% 100%);
width: 20em;
height: 40em;
}
SVG से इंपोर्ट किया गया एक वैकल्पिक fill-rule पैरामीटर भी होता है. इससे ब्राउज़र को निर्देश मिलता है कि वह पाथ या बंद आकारों को खुद को इंटरसेक्ट करने वाले पाथ के मामले में पॉलीगॉन के “अंदरूनी” पर कैसे विचार करे. Joni Trythall ने SVG में fill-rule प्रॉपर्टी के काम करने का तरीका बहुत अच्छी तरह से बताया है. अगर कोई वैल्यू तय नहीं की गई है, तो fill-rule डिफ़ॉल्ट रूप से nonzero पर सेट हो जाता है.
.element{
shape-outside: polygon(0 0, 0 100%, 100% 100%);
/* identical to: */
shape-outside: polygon(nonzero, 0 0, 0 100%, 100% 100%);
}
inset() फ़ंक्शन
inset() शेप फ़ंक्शन की मदद से, आयताकार शेप बनाए जा सकते हैं. इन शेप में कॉन्टेंट को रैप किया जा सकता है. यह बात शायद आपको अटपटी लगे, क्योंकि सीएसएस शेप, वेब कॉन्टेंट को आसान बॉक्स से मुक्त करते हैं. ऐसा हो सकता है. मुझे inset() के लिए, इस्तेमाल का ऐसा उदाहरण अब तक नहीं मिला है जिसे फ़्लोट और मार्जिन या polygon() से पहले से हासिल नहीं किया जा सकता. हालांकि, inset(), polygon() की तुलना में आयताकार आकृतियों के लिए ज़्यादा आसानी से पढ़ा जा सकने वाला एक्सप्रेशन देता है.
इनसेट आकार फ़ंक्शन के लिए पूरा नोटेशन inset(top right bottom left border-radius) है. पोज़िशन के पहले चार आर्ग्युमेंट, एलिमेंट के किनारों से अंदर की ओर ऑफ़सेट होते हैं. आखिरी तर्क, आयताकार आकार का बॉर्डर रेडियस होता है. यह विकल्प ज़रूरी नहीं है, इसलिए इसे शामिल न करें. यह border-radius शॉर्टहैंड नोटेशन का इस्तेमाल करता है, जिसका इस्तेमाल पहले से ही सीएसएस में किया जा रहा है.
.element{
shape-outside: inset(100px 100px 100px 100px);
/* yields a rectangular shape which is 100px inset on all sides */
float: left;
}
संदर्भ-बॉक्स से आकार बनाना
अगर आपने shape-outside प्रॉपर्टी के लिए कोई शेप फ़ंक्शन नहीं बताया है, तो ब्राउज़र को एलिमेंट के रेफ़रंस बॉक्स से शेप बनाने की अनुमति दी जा सकती है. डिफ़ॉल्ट रेफ़रंस बॉक्स margin-box है. अब तक कुछ खास नहीं हुआ है, फ़्लोट पहले से ही इसी तरह काम करते हैं. हालांकि, इस तकनीक का इस्तेमाल करके, किसी एलिमेंट की ज्यामिति का फिर से इस्तेमाल किया जा सकता है. आइए, border-radius प्रॉपर्टी पर नज़र डालते हैं.
अगर इसका इस्तेमाल फ़्लोट किए गए एलिमेंट के कोनों को गोल करने के लिए किया जाता है, तो आपको क्लिपिंग इफ़ेक्ट मिलता है. हालांकि, फ़्लोट एरिया रेक्टैंगल के तौर पर ही रहता है. border-radius से बनाए गए कॉन्टूर के चारों ओर रैप करने के लिए, shape-outside: border-box जोड़ें.
.element{
border-radius: 50%;
shape-outside: border-box;
float: left;
}
बेशक, सभी रेफ़रंस बॉक्स का इस्तेमाल इस तरह किया जा सकता है. यहां, व्युत्पन्न आकृतियों के लिए एक और इस्तेमाल बताया गया है - ऑफ़सेट पुल-कोट.
सिर्फ़ फ़्लोट और मार्जिन प्रॉपर्टी का इस्तेमाल करके, ऑफ़सेट पुल-कोट इफ़ेक्ट पाया जा सकता है. हालांकि, इसके लिए आपको एचटीएमएल ट्री में कोट एलिमेंट को उस जगह पर रखना होगा जहां आपको उसे रेंडर करना है.
ज़्यादा सुविधाओं के साथ, ऑफ़सेट पुल-कोट का वही असर पाने का तरीका यहां बताया गया है:
.pull-quote{
shape-outside: content-box;
margin-top: 200px;
float: left;
}
हमने आकार के कोऑर्डिनेट सिस्टम के लिए, content-box रेफ़रंस बॉक्स को साफ़ तौर पर सेट किया है. इस मामले में, पुल-कोट में कॉन्टेंट की मात्रा उस आकार को तय करती है जिसके आस-पास बाहरी कॉन्टेंट रैप करेगा. margin-top प्रॉपर्टी का इस्तेमाल, यहां पुल-कोट की पोज़िशन (ऑफ़सेट) तय करने के लिए किया जाता है. भले ही, एचटीएमएल ट्री में इसकी पोज़िशन कुछ भी हो.
शेप का मार्जिन
आप ध्यान देंगे कि किसी आकार के चारों ओर कॉन्टेंट रैप करने से, वह एलिमेंट के साथ बहुत करीब से रगड़ सकता है. shape-margin प्रॉपर्टी की मदद से, आकार के चारों ओर स्पेस जोड़ा जा सकता है.
.element{
shape-outside: circle(40%);
shape-margin: 1em;
float: left;
}
इसका असर, सामान्य margin प्रॉपर्टी की तरह ही होता है. हालांकि, shape-margin सिर्फ़ shape-outside वैल्यू के आस-पास के स्पेस पर असर डालता है. यह आकार के चारों ओर स्पेस सिर्फ़ तब जोड़ेगा, जब निर्देशांक सिस्टम में इसके लिए जगह हो. इसलिए, ऊपर दिए गए उदाहरण में, सर्कल की त्रिज्या 50% के बजाय 40% पर सेट है. अगर त्रिज्या को 50% पर सेट किया गया होता, तो सर्कल ने निर्देशांक सिस्टम में सारा स्पेस ले लिया होता और shape-margin के असर के लिए कोई जगह नहीं बचती. याद रखें कि आकार, एलिमेंट के margin-box (एलिमेंट और उसके आस-पास का margin) तक ही सीमित होता है. अगर आकार बड़ा है और ओवरफ़्लो होता है, तो उसे margin-box तक काट दिया जाएगा और आपको एक आयताकार आकार मिलेगा.
यह समझना ज़रूरी है कि shape-margin सिर्फ़ एक पॉज़िटिव वैल्यू स्वीकार करता है. इसमें लंबी हैंड नोटेशन नहीं है. किसी सर्कल के लिए, shape-margin-top क्या होता है?
आकृतियों को ऐनिमेट करना
सीएसएस आकारों को सीएसएस की कई अन्य सुविधाओं के साथ मिक्स किया जा सकता है. जैसे, ट्रांज़िशन और ऐनिमेशन. हालांकि, मुझे इस बात का ध्यान रखना होगा कि पढ़ने के दौरान, टेक्स्ट का लेआउट बदलने से उपयोगकर्ताओं को बहुत परेशानी होती है. अगर आपको आकृतियों को ऐनिमेट करना है, तो इस अनुभव पर ध्यान दें.
circle() और ellipse() आकृतियों के लिए त्रिज्या और केंद्रों को ऐनिमेट किया जा सकता है, बशर्ते वे ऐसी वैल्यू में तय की गई हों जिन्हें ब्राउज़र इंटरपोलेट कर सकता है. circle(30%) से circle(50%) पर जाना मुमकिन है. हालांकि, circle(closest-side) से circle(farthest-side) के बीच एनिमेशन करने से ब्राउज़र पर असर पड़ेगा.
.element{
shape-outside: circle(30%);
transition: shape-outside 1s;
float: left;
}
.element:hover{
shape-outside: circle(50%);
}
polygon() आकारों को ऐनिमेट करते समय ज़्यादा दिलचस्प इफ़ेक्ट मिल सकते हैं. ध्यान रखें कि पॉलीगॉन में दो ऐनिमेशन स्थितियों के बीच बराबर संख्या में कोण होने चाहिए. अगर कोई वर्टिसेस जोड़ा या हटाया जाता है, तो ब्राउज़र इंटरपोलेशन नहीं कर सकता.
एक तरकीब यह है कि ज़रूरत के हिसाब से ज़्यादा से ज़्यादा वर्टिसेस जोड़ें और उन्हें ऐनिमेशन स्टेटस में एक साथ क्लस्टर में रखें, जहां आपको आकार के कम किनारों की ज़रूरत है.
.element{
/* four vertices (looks like rectangle) */
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: shape-outside 1s;
}
.element:hover{
/* four vertices, but second and third overlap (looks like triangle) */
shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}
कॉन्टेंट को किसी आकार में रैप करना
सीएसएस शेप स्पेसिफ़िकेशन के शुरुआती ड्राफ़्ट में एक shape-inside प्रॉपर्टी थी. इसकी मदद से, कॉन्टेंट को किसी आकार में रैप किया जा सकता था. कुछ समय के लिए, Chrome और Webkit में भी इसे लागू किया गया था. हालांकि, अपनी पसंद के हिसाब से चुने गए पाथ में कॉन्टेंट को रैप करने के लिए, ज़्यादा मेहनत और रिसर्च की ज़रूरत होती है. इससे सभी संभावित स्थितियों को कवर किया जा सकता है और गड़बड़ियों से बचा जा सकता है. इसलिए, shape-inside प्रॉपर्टी को सीएसएस शेप लेवल 2 में टाल दिया गया है और लागू करने की प्रोसेस को वापस ले लिया गया है.
हालांकि, थोड़ी मेहनत और समझौता करके, अब भी कॉन्टेंट को पसंद के मुताबिक आकार में रैप किया जा सकता है. इसका हल यह है कि shape-outside के साथ दो फ़्लोट किए गए एलिमेंट का इस्तेमाल करें. ये एलिमेंट, कंटेनर के दोनों ओर होने चाहिए. समझौता यह है कि आपको एक या दो ऐसे खाली एलिमेंट का इस्तेमाल करना होता है जिनका कोई मतलब नहीं होता. हालांकि, वे चीज़ों को अंदर की आकृति का एहसास दिलाने के लिए, अड्डों की तरह काम करते हैं.
<div>
<div class='left-shape'></div>
<div class='right-shape'></div>
Lorem ipsum...
</div>
कंटेनर में सबसे ऊपर मौजूद .left-shape और .right-shape स्ट्रुट एलिमेंट की पोज़िशन अहम है, क्योंकि कॉन्टेंट के दोनों ओर उन्हें फ़्लोट किया जाएगा.
.left-shape{
shape-outside: polygon(0 0, ...);
float: left;
width: 50%;
height: 100%;
}
.right-shape{
shape-outside: polygon(50% 0, ...);
float: right;
width: 50%;
height: 100%;
}
इस स्टाइल की वजह से, दो फ़्लोट किए गए स्ट्रट एलिमेंट के अंदर का पूरा स्पेस घेर लेते हैं. हालांकि, shape-outside प्रॉपर्टी बाकी कॉन्टेंट के लिए जगह खाली कर देती हैं.
अगर ब्राउज़र पर सीएसएस के आकार का इस्तेमाल नहीं किया जा सकता है, तो पूरा कॉन्टेंट नीचे धकेलने से खराब असर पड़ेगा. इसलिए, इस सुविधा को बेहतर तरीके से इस्तेमाल करना ज़रूरी है.
आकार के ऐनिमेशन के पिछले उदाहरणों में, आपको पता चलेगा कि टेक्स्ट को एक जगह से दूसरी जगह ले जाना परेशानी भरा हो सकता है. इस्तेमाल के सभी उदाहरणों के लिए ऐनिमेशन वाला आकार ज़रूरी नहीं है. हालांकि, सीएसएस शेप के साथ इंटरैक्ट करने वाली अन्य प्रॉपर्टी को ऐनिमेट किया जा सकता है, ताकि जहां ज़रूरी हो वहां इफ़ेक्ट जोड़ा जा सके.
CSS शेप के ऐलिस इन वंडरलैंड डेमो में, हमने कॉन्टेंट के सबसे ऊपर मौजूद मार्जिन को बदलने के लिए, स्क्रोल पोज़िशन का इस्तेमाल किया. टेक्स्ट को दो फ़्लोट किए गए एलिमेंट के बीच कंप्रेस किया जाता है. नीचे की ओर बढ़ने पर, इसे दो फ़्लोट किए गए एलिमेंट के shape-outside के हिसाब से फिर से लेआउट करना होगा. इससे ऐसा लगता है कि टेक्स्ट नीचे की ओर जा रहा है. इससे कहानी सुनाने का अनुभव बेहतर हो जाता है. नीतियों का करीब-करीब उल्लंघन करना ज़रूरी है? शायद. लेकिन यह काफ़ी अच्छा है.
ब्राउज़र, टेक्स्ट लेआउट को मूल रूप से करता है. इसलिए, JavaScript का इस्तेमाल करने के बजाय, टेक्स्ट का लेआउट बेहतर होता है. हालांकि, स्क्रोल करने पर margin-top बदलने से, रीलेआउट और पेंट इवेंट की संख्या बहुत ज़्यादा बढ़ जाती है. इससे परफ़ॉर्मेंस पर काफ़ी असर पड़ सकता है. सावधानी से इस्तेमाल करें! हालांकि, सीएसएस शेप को ऐनिमेट किए बिना इस्तेमाल करने पर, परफ़ॉर्मेंस पर कोई असर नहीं पड़ता.
प्रोग्रेसिव एन्हैंसमेंट
शुरुआत में यह मान लें कि ब्राउज़र में सीएसएस शेप की सुविधा काम नहीं करती. इसके बाद, जब आपको यह सुविधा मिल जाए, तो उस पर काम करें. Modernizr, सुविधा का पता लगाने का एक अच्छा तरीका है. साथ ही, 'नॉन-कोर डिटेक्ट' सेक्शन में सीएसएस शेप के लिए एक टेस्ट मौजूद है.
कुछ ब्राउज़र, @supports नियम की मदद से सीएसएस में सुविधा का पता लगाने की सुविधा देते हैं. इसके लिए, उन्हें बाहरी लाइब्रेरी की ज़रूरत नहीं होती. Google Chrome, सीएसएस शेप के साथ काम करता है. यह @supports नियम को समझता है. इसे बेहतर बनाने के लिए, इसका इस्तेमाल इस तरह किया जाता है:
.element{
/* styles for all browsers */
}
@supports (shape-outside: circle(50%)){
/* styles only for browsers which support CSS Shapes */
.element{
shape-outside: circle(50%);
}
}
लीआ वेरू ने CSS @supports नियम का इस्तेमाल करने के तरीके के बारे में ज़्यादा जानकारी दी है.
सीएसएस एक्सक्लूज़न से अलग करना
आज हम सीएसएस शेप के तौर पर जानते हैं, लेकिन शुरुआती दिनों में इन्हें सीएसएस एक्सक्लूज़न और शेप कहा जाता था. नाम में बदलाव करना मामूली बात लग सकती है, लेकिन यह असल में बहुत ज़रूरी है. सीएसएस एक्सक्लूज़न, अब एक अलग स्पेसिफ़िकेशन है. इसकी मदद से, कॉन्टेंट को मनमुताबिक पोज़िशन किए गए एलिमेंट के चारों ओर रैप किया जा सकता है. इसके लिए, फ़्लोट प्रॉपर्टी की ज़रूरत नहीं होती. किसी एलिमेंट को पूरी तरह से तय किए गए पोज़िशन में रखकर, उसके चारों ओर कॉन्टेंट रैप करने का उदाहरण लें. यह सीएसएस एक्सक्लूज़न के इस्तेमाल का उदाहरण है. सीएसएस आकार सिर्फ़ उस पाथ की जानकारी देते हैं जिसके आस-पास कॉन्टेंट रैप होगा.
इसलिए, आकार और एक्सक्लूज़न एक ही चीज़ नहीं हैं, लेकिन ये एक-दूसरे के साथ काम करते हैं. फ़िलहाल, सीएसएस के आकार की सुविधा ब्राउज़र में उपलब्ध है, जबकि आकार के इंटरैक्शन पर सीएसएस को बाहर रखने की सुविधा फ़िलहाल उपलब्ध नहीं है.
सीएसएस शेप का इस्तेमाल करने के लिए टूल
क्लासिक इमेज ऑथरिंग टूल में पाथ बनाए जा सकते हैं, लेकिन इनमें से कोई भी पाथ बनाते समय, सीएसएस शेप की वैल्यू के लिए ज़रूरी सिंटैक्स एक्सपोर्ट नहीं होता. भले ही, ऐसा किया जा सकता है, लेकिन इस तरह से काम करना ज़्यादा फ़ायदेमंद नहीं होगा.
सीएसएस के आकार का इस्तेमाल ब्राउज़र में किया जा सकता है, जहां वे पेज पर मौजूद दूसरे एलिमेंट के मुताबिक प्रतिक्रिया देते हैं. यह सुविधा, आकार में बदलाव करने पर, उसके आस-पास मौजूद कॉन्टेंट पर होने वाले असर को विज़ुअलाइज़ करने में काफ़ी मददगार होती है. इस वर्कफ़्लो में आपकी मदद करने के लिए, कुछ टूल उपलब्ध हैं:
Brackets: Brackets के लिए सीएसएस शेप एडिटर एक्सटेंशन, कोड एडिटर के लाइव झलक मोड का इस्तेमाल करता है. इससे शेप की वैल्यू में बदलाव करने के लिए, इंटरैक्टिव एडिटर को ओवरले किया जा सकता है.
Google Chrome: Google Chrome के लिए सीएसएस आकार एडिटर एक्सटेंशन, ब्राउज़र के डेवलपर टूल में आकार बनाने और उनमें बदलाव करने के लिए कंट्रोल जोड़ता है. यह चुने गए एलिमेंट के ऊपर, इंटरैक्टिव एडिटर डालता है.
Google Chrome के इंस्पेक्टर में, आकृतियों को हाइलाइट करने की सुविधा पहले से मौजूद है. shape-outside प्रॉपर्टी वाले किसी एलिमेंट पर कर्सर घुमाएं. ऐसा करने पर, एलिमेंट का आकार दिखने के लिए, वह चमकने लगेगा.
इमेज से आकार: अगर आपको इमेज जनरेट करनी हैं और ब्राउज़र से उनमें से आकार निकालने हैं, तो रेबेका हॉक ने Photoshop के लिए एक अच्छा ट्यूटोरियल लिखा है.
पॉलीफ़िल: Google Chrome, सीएसएस शेप की सुविधा देने वाला पहला मुख्य ब्राउज़र है. यह सुविधा, Apple के iOS 8 और Safari 8 पर जल्द ही उपलब्ध होगी. आने वाले समय में, दूसरे ब्राउज़र वेंडर इस सुविधा को अपना सकते हैं. तब तक, बुनियादी सहायता देने के लिए CSS Shapes polyfill उपलब्ध है.
नतीजा
वेब में जहां कॉन्टेंट ज़्यादातर सामान्य बॉक्स में फंसा होता है, वहां सीएसएस आकार बेहतरीन लेआउट बनाने का तरीका मुहैया कराते हैं. इससे वेब और प्रिंट डिज़ाइन के बीच फ़िडेलिटी के अंतर को कम किया जा सकता है. बेशक, आकारों का गलत इस्तेमाल किया जा सकता है और लोगों का ध्यान भटका सकता है. हालांकि, अगर आकार का इस्तेमाल सही तरीके से किया जाता है, तो इससे कॉन्टेंट को बेहतर तरीके से पेश किया जा सकता है. साथ ही, उपयोगकर्ता का ध्यान भी खींचा जा सकता है.
हम आपको दूसरे लोगों के काम का कलेक्शन दिखा रहे हैं. इसमें ज़्यादातर प्रिंट वाले काम हैं. इनमें, नॉन-रेक्टैंगल लेआउट के दिलचस्प इस्तेमाल के बारे में बताया गया है. हमें उम्मीद है कि इससे आपको सीएसएस आकार आज़माने और डिज़ाइन के नए आइडिया आज़माने की प्रेरणा मिलेगी.
इस लेख को पढ़ने और अहम जानकारी देने के लिए, पर्ल चेन, एलन स्टर्न्स, और ज़ोल्टन होर्वथ को बहुत-बहुत धन्यवाद.