कस्टम पाथ के आस-पास कॉन्टेंट रैप करना
लंबे समय से, वेब डिज़ाइनर को रेक्टैंगल के दायरे में ही काम करना पड़ता था. वेब पर मौजूद ज़्यादातर कॉन्टेंट अब भी सामान्य बॉक्स में फंसा हुआ है, क्योंकि ज़्यादातर क्रिएटिव, बिना रेक्टैंगल वाले लेआउट में काम नहीं करते. हालांकि, सीएसएस आकार की सुविधा के लॉन्च होने के बाद, यह बदलने वाला है. यह सुविधा, 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 या mask-image में से किसी एक का इस्तेमाल किया जा सकता है. 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;
}
fill-rule पैरामीटर ज़रूरी नहीं है. इसे SVG से इंपोर्ट किया जाता है. यह ब्राउज़र को यह तय करने में मदद करता है कि आपस में इंटरसेक्शन करने वाले पाथ या बंद आकार के मामले में, पॉलीगॉन के “अंदर” की जगह को कैसे तय किया जाए. 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 के समाधान से बेहतर होती है. हालांकि, स्क्रोल करने पर मार्जिन-टॉप बदलने से, रीलेआउट और पेंट इवेंट की संख्या बहुत ज़्यादा बढ़ जाती है. इससे परफ़ॉर्मेंस पर काफ़ी असर पड़ सकता है. सावधानी से इस्तेमाल करें! हालांकि, सीएसएस शेप को ऐनिमेट किए बिना इस्तेमाल करने पर, परफ़ॉर्मेंस पर कोई असर नहीं पड़ता.
प्रोग्रेसिव एन्हैंसमेंट
शुरुआत में यह मान लें कि ब्राउज़र में सीएसएस शेप की सुविधा काम नहीं करती. इसके बाद, जब आपको यह सुविधा मिल जाए, तो उस पर काम करें. 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 उपलब्ध है.
नतीजा
वेब पर कॉन्टेंट ज़्यादातर छोटे बॉक्स में होता है. ऐसे में, सीएसएस शेप की मदद से बेहतर लेआउट बनाया जा सकता है. इससे वेब और प्रिंट डिज़ाइन के बीच फ़िडेलिटी गैप को कम किया जा सकता है. बेशक, आकृतियों का गलत इस्तेमाल किया जा सकता है और लोगों का ध्यान भटका सकता है. हालांकि, अगर आकार का इस्तेमाल सही तरीके से किया जाता है, तो इससे कॉन्टेंट को बेहतर तरीके से पेश किया जा सकता है. साथ ही, उपयोगकर्ता का ध्यान भी खींचा जा सकता है.
हम आपको दूसरे लोगों के काम का कलेक्शन दिखा रहे हैं. इसमें ज़्यादातर प्रिंट वाले काम हैं. इनमें, नॉन-रेक्टैंगल लेआउट के दिलचस्प इस्तेमाल के बारे में बताया गया है. हमें उम्मीद है कि इससे आपको सीएसएस आकार आज़माने और डिज़ाइन के नए आइडिया आज़माने की प्रेरणा मिलेगी.
इस लेख की समीक्षा करने और अहम जानकारी देने के लिए, पर्ल चेन, एलन स्टर्न्स, और ज़ोल्टन होर्वथ का बहुत-बहुत धन्यवाद.