सीएसएस और ब्राउज़र लेआउट के टूल का इस्तेमाल करके, वेब कॉन्टेंट के लिए शानदार विज़ुअलाइज़ेशन बनाए जा सकते हैं. सीएसएस फ़िल्टर, WebGL, HTML5 वीडियो, SVG, कैनवस जैसी वेब सुविधाओं और आने वाले समय में इस्तेमाल होने वाली टेक्नोलॉजी, जैसे कि सीएसएस रीजन, सीएसएस शेप, और सीएसएस कस्टम फ़िल्टर का इस्तेमाल करके, क्रिएटिव लैंडस्केप को काफ़ी बड़ा किया जा सकता है. Adobe का लेआउट और डिज़ाइन में दिलचस्पी रखने वाले कॉन्टेंट क्रिएटर्स के साथ काम करने का लंबा इतिहास रहा है. इसलिए, वह इस जानकारी को वेब पर लागू करने के लिए लगातार काम कर रहा है. साथ ही, वेब के कई स्टैंडर्ड को बेहतर बनाने में भी योगदान दे रहा है.
National Geographic की मदद से, हमने ‘फ़ॉरेस्ट जाइंट’ नाम की उनकी सुविधा के कॉन्टेंट का इस्तेमाल किया. इससे हमने एक प्रोटोटाइप बनाया, जिसमें दिखाया गया है कि इन सुविधाओं से रिच वेब लेआउट और रिस्पॉन्सिव तकनीक कैसे चालू की जा सकती हैं. इस लेख में बताया गया है कि हमने साइट की कुछ खास और दिलचस्प सुविधाओं को कैसे बनाया. इस बारे में खास जानकारी पाने के लिए, यह वीडियो देखें. इसमें क्रिश्चियन कैंटरेल, साइट की अलग-अलग सुविधाओं के बारे में बता रहे हैं.
लेआउट की बारीकियां
यह समझना मुश्किल हो सकता है कि बेहतर लेआउट और उसमें मौजूद सुविधाएं क्या हैं. इसलिए, हमने "एडिटर का ओवरले" बनाया है. इससे, ज़्यादा अहम सुविधाओं को हाइलाइट किया जा सकता है. एडिटर के मार्क चालू करने के लिए, लेख के सबसे नीचे मौजूद बार पर क्लिक करें.

लेआउट के हिसाब से अलग-अलग
आज के वेब में, लेआउट अक्सर हमारे कॉन्टेंट के हिसाब से तय होता है. इसमें टेक्स्ट को फ़िट करने के लिए, कंटेनर को वर्टिकल तौर पर बड़ा किया जाता है. जटिल लेआउट बनाते समय, कॉपी या अन्य कॉन्टेंट में किए गए बदलावों का पूरे लेआउट पर अनचाहा असर पड़ सकता है. इस वजह से, अचानक हुए बदलावों के आधार पर कॉन्टेंट को फिर से डिज़ाइन करना पड़ सकता है. क्षेत्रों की मदद से, हम अपने कॉन्टेंट को लेआउट से अलग कर सकते हैं. इसके लिए, किसी एलिमेंट को अपने कॉन्टेंट के तौर पर तय करें. इसके बाद, लेआउट के उन हिस्सों को तय करें जिनमें आपको वह कॉन्टेंट दिखाना है.
‘फ़ॉरेस्ट जाइंट’ के उदाहरण में, कहानी एक ही एलिमेंट में मौजूद है. इसके बाद, पूरे पेज पर हमारा लेआउट स्केफ़ोल्डिंग होता है, जिसमें फ़ोटो और टेक्स्ट एरिया शामिल होते हैं. सीएसएस की मदद से, हम उन एलिमेंट को तय करते हैं जिनमें कॉन्टेंट को फ़्लो करना है. जब कॉपी किसी एलिमेंट के आखिर तक पहुंच जाती है, तो वह DOM क्रम में अगले एलिमेंट पर चली जाती है. इससे, हम अपने कॉलम को ज़्यादा क्रिएटिव तरीके से इस्तेमाल कर सकते हैं. साथ ही, उन्हें ऑफ़सेट करके और डिज़ाइन के हिसाब से उनकी ऊंचाई में बदलाव करके, यह चिंता किए बिना कि टेक्स्ट एलिमेंट की ऊंचाई में फ़िट होगा या नहीं. इससे हमें अपने लेआउट में एलिमेंट जोड़ने में भी मदद मिलती है. जैसे, पूरी चौड़ाई वाली इमेज, जबकि कहानी उसमें चलती रहती है.
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
ऊपर दी गई सीएसएस में, हम "story" नाम का एक फ़्लो बना रहे हैं. नाम वाले इस फ़्लो का कॉन्टेंट, "storyContent" आईडी वाला एलिमेंट है. इसके बाद, यह क्लास के नाम "story" वाले सभी एलिमेंट में फ़्लो करता है. सीएसएस क्षेत्र, रिस्पॉन्सिव डिज़ाइन के लिए एक बेहतरीन टूल है. इसकी मदद से, बड़ी स्क्रीन पर रिच लेआउट के लिए कई कॉलम और ऑफ़सेट कॉलम जैसी सुविधाएं मिलती हैं. साथ ही, छोटी स्क्रीन पर एक कॉलम वाले लेआउट में बदलाव किया जा सकता है. क्षेत्रों के साथ, vw या vh जैसी रिस्पॉन्सिव यूनिट की मदद से भी अपने क्षेत्र का साइज़ सेट किया जा सकता है. इसका इस्तेमाल यह पक्का करने के लिए किया जा सकता है कि आपके लेआउट में कॉलम, व्यूपोर्ट की ऊंचाई से ज़्यादा न हों. साथ ही, आपको कॉन्टेंट के कट जाने की चिंता भी नहीं करनी पड़ेगी, क्योंकि यह रीजन चेन में अगले एलिमेंट में अपने-आप फ़्लो हो जाएगा.
ड्रॉप कैप
सीएसएस एक्सक्लूज़न की मदद से, टेक्स्ट को अनियमित आकार के आस-पास या अंदर रैप किया जा सकता है. इसका इस्तेमाल, ड्रॉप कैप जैसे डिज़ाइन के लिए किया जा सकता है. ड्रॉप कैप, डिज़ाइन का एक सामान्य तरीका है. इसमें किसी कहानी या चैप्टर के पहले अक्षर को बड़ा किया जाता है, ताकि बाकी टेक्स्ट उस अक्षर के कॉन्टूर के चारों ओर रैप हो सके. यह इफ़ेक्ट, इनलाइन कॉन्टेंट के फ़्लोट के चारों ओर रैप होने के तरीके से काफ़ी मिलता-जुलता है. हालांकि, एक्सक्लूज़न की मदद से, अब हमें रेक्टैंगल बॉक्स तक ही सीमित नहीं रहना पड़ेगा. किसी फ़्लोट पर shape-outside का इस्तेमाल करके, हम ऐसी ज्यामिति तय कर सकते हैं जिससे हमारे कॉन्टेंट को हमारे कैरेक्टर के आकार के हिसाब से कसकर लपेटा जा सके.
.drop-caps {
height: 100px;
width: 100px;
float: left;
shape-outside: ellipse(50%, 50%, 50%, 50%);
}
इससे एक दीर्घवृत्त बन जाएगा, जिससे कॉन्टेंट को गोलाकार आकार में रैप किया जा सकेगा. साथ ही, हम शेप के लिए रिलेटिव यूनिट का इस्तेमाल कर रहे हैं. इसलिए, एलिमेंट का साइज़ बदलने पर, शेप का साइज़ भी बदल जाएगा.

आकार
ड्रॉप कैप के साथ-साथ, एक्सक्लूज़न की मदद से, shape-inside का इस्तेमाल करके टेक्स्ट को शेप में रैप किया जा सकता है. हम इस सुविधा का इस्तेमाल पूरी साइट पर करते हैं. खास तौर पर, बड़ी इमेज के कैप्शन के साथ. हम टेक्स्ट को फ़्रेम करने के लिए, फ़ोटो के नेगेटिव स्पेस का इस्तेमाल करते हैं. इसकी मदद से, टेक्स्ट को अन्य इमेज और ग्राफ़िक के कॉन्टूर के हिसाब से रैप किया जा सकता है. इससे ऐसे लेआउट बनाए जा सकते हैं जो पहले वेब पर बहुत मुश्किल से बनाए जा सकते थे.
आकार तय करने के लिए रिलेटिव यूनिट का इस्तेमाल करके, आकार रिस्पॉन्सिव लेआउट के साथ भी काम कर सकते हैं. इस तरह, हम ऐसे आकार बना सकते हैं जो कंटेनर या व्यूपोर्ट के हिसाब से स्ट्रेच हो सकते हैं. साथ ही, आकार को पूरी तरह से बदलने या हटाने के लिए मीडिया क्वेरी का इस्तेमाल किया जा सकता है, क्योंकि यह सब सीएसएस में तय किया गया है. यहां साइट में इस्तेमाल किए जा रहे पॉलीगॉन आकार का एक उदाहरण दिया गया है. इसमें पॉइंट की वैल्यू भी दी गई हैं:
.shape {
shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}

बैलेंस किया गया टेक्स्ट
बैलेंस किया गया टेक्स्ट एक ऐसी सुविधा है जो लाइनों को रैप करते समय, शब्द के हिसाब से रैप करने के बजाय, एलिमेंट में मौजूद टेक्स्ट के पूरे ब्लॉक को देखती है. इससे, एक लाइन में एक या दो शब्द होने की समस्या से बचा जा सकता है. इसके लिए, टेक्स्ट की लाइनों को बांटकर, एलिमेंट में एक जैसी साइज़ की लाइनें बनाई जाती हैं. इस लेवल के कंट्रोल की मदद से, हम आसानी से टेक्स्ट के आकर्षक ब्लॉक बना सकते हैं. खास तौर पर, पुल कोट या सबटाइटल जैसे छोटे-छोटे कॉन्टेंट के लिए.
हम लेख में, यहां बैलेंस किए गए टेक्स्ट का इस्तेमाल कर रहे हैं. चूँकि यह सुविधा एक मानक है जिसे Adobe प्रस्तावित कर रहा है, हम समान परिणाम प्राप्त करने के लिए रैंडी एडमंड्स द्वारा निर्मित पॉलीफ़िल का उपयोग कर रहे हैं। यह सुविधा, रिस्पॉन्सिव केस में सबसे अच्छी तरह से दिखती है. ब्राउज़र का साइज़ बदलने पर, आपको पता चलेगा कि ब्लॉक टेक्स्ट को अडजस्ट करता रहता है, ताकि लाइनों की चौड़ाई एक जैसी रहे. बैलेंस किए गए टेक्स्ट के लिए पॉलीफ़िल का इस्तेमाल करना आसान है, क्योंकि यह एक jQuery प्लग इन है. हमें सिर्फ़ लेआउट में बदलाव होने पर, किसी सिलेक्टर पर ‘balanceText()’ लागू करना होता है. इससे हमें बैलेंस किया गया टेक्स्ट मिलता है, जो ऐसा दिखता है:
$('.balance').balanceText();

फ़िल्टर ट्रांज़िशन
ट्रांज़िशन, उपयोगकर्ता का ध्यान खींचने और अपनी साइट पर मौजूद चीज़ों की स्थिति के बारे में बताने का एक अहम तरीका है. हमने देखा है कि ओपैसिटी और हाल ही में 3D ट्रांसफ़ॉर्म का इस्तेमाल, बेहतर ट्रांज़िशन और ऐनिमेशन बनाने के लिए किया जा रहा है. ऐसा तब होता है, जब उपयोगकर्ता आपकी साइट के कुछ हिस्सों को स्क्रोल करते हैं या उनसे इंटरैक्ट करते हैं. अब हमारे पास ऐसे फ़िल्टर हैं जिनका इस्तेमाल इसी काम के लिए किया जा सकता है.
‘फ़ॉरेस्ट जाइंट’ में, हम फ़िल्टर का इस्तेमाल करके कुछ इमेज को धूसर रंग से रंग में बदलते हैं. इन फ़िल्टर को ओपैसिटी या अन्य फ़िल्टर के साथ जोड़ा जा सकता है, ताकि जटिल इमेजिंग इफ़ेक्ट और ट्रांज़िशन बनाए जा सकें. हम कस्टम फ़िल्टर की मदद से, ज़्यादा असरदार इफ़ेक्ट जोड़ सकते हैं.
कस्टम फ़िल्टर, GLSL का इस्तेमाल करके लिखे जाते हैं. यह वही शेडिंग भाषा है जो WebGL में इस्तेमाल की जाती है. इनकी मदद से, सीएसएस के ज़रिए DOM एलिमेंट पर ये शेडर लागू किए जा सकते हैं. इससे, ब्लेंडिंग के जटिल इफ़ेक्ट और 3D डिस्टॉर्शन की सुविधा चालू होती है. साइट पर सबसे नीचे, ‘प्रज़िडेंट ट्री को एक्सप्लोर करें’ पर क्लिक करने पर, आपको पेज ऊपर की ओर मुड़ता हुआ दिखेगा. इसके बाद, नीचे एक और सेक्शन दिखेगा. यह सिर्फ़ एक उदाहरण है, जिसमें दिखाया गया है कि कस्टम फ़िल्टर की मदद से, कॉन्टेंट के बीच बेहतर ट्रांज़िशन कैसे दिए जा सकते हैं. सीएसएस ट्रांज़िशन का इस्तेमाल करके ऐनिमेशन बनाया जा सकता है. हालांकि, अगर आपको ट्रांज़िशन की अनुमति से ज़्यादा बेहतर ऐनिमेशन या इंटरैक्शन का इस्तेमाल करना है, तो JavaScript की मदद से स्टाइल सेट करके अपने शेडर में वैल्यू पास की जा सकती हैं. इस बारे में यहां बताया गया है. इससे, आपको आसानी से कंट्रोल करने की सुविधा मिलती है. साथ ही, उपयोगकर्ता के इनपुट के तरीकों से शेडर में बदलाव करने की अनुमति भी मिलती है.
function applyCurl(value) {
$("#map").css("webkitFilter",
"custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
+ " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
+ " rotateY(0deg) rotateZ(0deg), curlPosition "
+ value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}
हमारा फ़िल्टर, असर लागू करने के लिए GPU पर कॉन्टेंट को टेक्सचर के तौर पर रेस्टर कर रहा है. इसलिए, हमें यह पक्का करना होता है कि प्रोसेस पूरी होने के बाद, उसे हटा दिया जाए. ऐसा न करने पर, हमारा कॉन्टेंट धुंधला दिख सकता है.
$("#map").css("webkitFilter", "none");
सीएसएस कस्टम फ़िल्टर, पेज रैपिंग जैसे दिलचस्प इफ़ेक्ट चालू करते हैं. इससे ऐसा लगता है कि किसी असल किताब में पेज को पलटा जा रहा है. इनकी मदद से, वेब डेवलपर GLSL नाम की भाषा में कॉम्प्लेक्स इफ़ेक्ट प्रोग्राम कर सकता है और उन्हें वेब कॉन्टेंट पर लागू कर सकता है. कस्टम फ़िल्टर, उन सभी पैरामीटर, और उन्हें इस्तेमाल करने के तरीके के बारे में ज़्यादा जानने के लिए, यह बेहतरीन ट्यूटोरियल देखें.

WebGL में टेक्स्चर को पहले से रेंडर करना
इस लेख की खास बात, ‘द प्रेज़िडेंट’ की पूरी इमेज थी. माना जाता है कि यह दुनिया का दूसरा सबसे बड़ा पेड़ है. इस इमेज को पेड़ की सैकड़ों फ़ोटो को जोड़कर बनाया गया है. हमने इस प्रोसेस को सिम्युलेट करने के लिए, इमेज को कई छोटी फ़ोटो में बांटा. ये फ़ोटो एक-दूसरे के ऊपर आकर पूरी इमेज बनाती हैं. यह काम, WebGL का इस्तेमाल करके किया गया था. खास तौर पर, Three.js लाइब्रेरी का इस्तेमाल करके, जो WebGL के आस-पास एक बेहतर लेवल का एपीआई रैपर है.

बहुत ज़्यादा टेक्सचर रेंडर करने पर, हर बार जब कोई नया टेक्सचर स्क्रीन पर ड्रॉ करने की कोशिश करता है, तो परफ़ॉर्मेंस से जुड़ी समस्याएं तुरंत आ सकती हैं. साथ ही, अतिरिक्त नेटवर्क अनुरोधों की भी बात नहीं की जा सकती. इसे कम करने के लिए, हमने अपने टेक्स्चर को ज़्यादा से ज़्यादा बड़ा बनाया और हर टाइल के लिए उन्हें ऑफ़सेट किया. इस तकनीक को अक्सर स्प्राइट मैपिंग कहा जाता है. यह गेम डेवलपमेंट में आम तौर पर इस्तेमाल की जाती है. इस वजह से, पूरे पेड़ के लिए तीन बड़े टेक्सचर बन गए. जब भी स्क्रीन पर कोई टेक्स्चर पहली बार दिखता है, तो परफ़ॉर्मेंस पर असर पड़ता है. इससे बचने के लिए, हम ऐनिमेशन शुरू होने से पहले हर टेक्स्चर के साथ 1 पिक्सल के स्क्वेयर रेंडर करते हैं. इससे परफ़ॉर्मेंस पर असर शुरुआत में ही पड़ जाता है. इससे, हम टेबलेट पर भी पेड़ की पूरी ऊंचाई को आसानी से ऐनिमेट कर सकते हैं.
टेक्सचर को ऑफ़सेट करने के लिए, हम उन यूवी में बदलाव कर रहे हैं जो टेक्सचर को ज्यामिति पर मैप करते हैं. Three.js में यह इस तरह दिखता है:
geometry.faceVertexUvs[0][0] = [
new THREE.Vector2(xOffset, yOffset + 1),
new THREE.Vector2(xOffset, yOffset),
new THREE.Vector2(xOffset + 1, yOffset),
new THREE.Vector2(xOffset + 1, yOffset + 1)
];
यहां देखा जा सकता है कि हम टेक्स्चर के x और y ऑफ़सेट के लिए वैरिएबल का इस्तेमाल कर रहे हैं. कस्टम GLSL शेडर मटीरियल की मदद से भी यही असर पाया जा सकता है. यह मटीरियल, ज्यामिति पर खींचे गए निर्देशांक को ऑफ़सेट करता है.
एक्सपेरिमेंट के तौर पर उपलब्ध सुविधाएं
इस डेमो में इस्तेमाल की गई कुछ सुविधाएं अभी एक्सपेरिमेंट के तौर पर उपलब्ध हैं. इसलिए, यह लेख Chrome Canary में ही पढ़ा जाना चाहिए. साथ ही, इस वेबसाइट पर जाकर, Chrome Canary के लिए बताए गए सभी फ़्लैग चालू करें.
Chrome Canary को इंस्टॉल और सही तरीके से कॉन्फ़िगर करने के बाद, डेमो देखें. (ध्यान दें कि यह पूरा प्रोजेक्ट ओपन सोर्स है और GitHub पर उपलब्ध है.)
नतीजा
हम यह भी एक्सप्लोर कर रहे हैं कि इन सुविधाओं का इस्तेमाल, मोबाइल ऐप्लिकेशन के संदर्भ में कैसे किया जा सकता है. जैसे, ई-बुक के तौर पर. इस प्रोटोटाइप को अभी काम करते हुए देखा जा सकता है. साथ ही, यह भी देखा जा सकता है कि हम टैबलेट पर इन सुविधाओं को दिखाने के लिए, अलग-अलग इंटरैक्शन और टच पैराडाइम का इस्तेमाल कैसे कर रहे हैं.
वेब ब्राउज़र के लेआउट में लगातार बदलाव हो रहे हैं. इसलिए, हम चाहते हैं कि लेआउट की क्वालिटी और प्रोडक्शन वैल्यू पहले जैसी ही बनी रहे. ऐसा इसलिए, क्योंकि हमने पिछले कुछ समय से, लेगसी रीडिंग कॉन्टेंट के साथ इसी तरह के लेआउट और प्रोडक्शन वैल्यू का इस्तेमाल किया है. सीएसएस क्षेत्र, एक्सक्लूज़न, बैलेंस किया गया टेक्स्ट, कस्टम फ़िल्टर, और वेबजीएल जैसी सुविधाओं की मदद से, कॉन्टेंट क्रिएटर्स को अब रीच और डिज़ाइन क्वालिटी में से किसी एक को चुनने की ज़रूरत नहीं होगी. 'फ़ॉरेस्ट जाइंट' इस बात का साफ़ संकेत है कि आने वाले समय में, वेब पर दोनों काम किए जा सकेंगे.