वर्ल्ड वाइड वेब दुनिया में हर किसी के लिए उपलब्ध है—इसका नाम ही तो है! इसका मतलब है कि आपकी वेबसाइट हर उस व्यक्ति के लिए उपलब्ध है जिसके पास इंटरनेट का ऐक्सेस है. इस बात से कोई फ़र्क़ नहीं पड़ता कि वे कहां हैं, कौनसा डिवाइस इस्तेमाल कर रहे हैं या कौनसी भाषा बोलते हैं.
रिस्पॉन्सिव डिज़ाइन का मकसद है कि आपका कॉन्टेंट सभी के लिए उपलब्ध हो. इंसानी भाषाओं पर इसी विचार को लागू करना, अंतरराष्ट्रीय दर्शकों की पसंद को ध्यान में रखकर बनाया गया है. अपने कॉन्टेंट और डिज़ाइन को अंतरराष्ट्रीय दर्शकों के लिए तैयार किया जा रहा है.
लॉजिकल प्रॉपर्टी
अंग्रेज़ी में बाईं से दाईं ओर और ऊपर से नीचे की ओर लिखा जाता है. लेकिन सभी भाषाएं इस तरह नहीं लिखी जातीं. अरबी और हिब्रू जैसी कुछ भाषाएं दाएं से बाएं पढ़ी जाती हैं और कुछ जापानी टाइपफ़ेस हॉरिज़ॉन्टल के बजाय वर्टिकल तरीके से पढ़ते हैं. लिखने के इन तरीकों को शामिल करने के लिए, सीएसएस में लॉजिकल प्रॉपर्टी की शुरुआत की गई थी.
अगर आपने सीएसएस लिखा है, तो हो सकता है कि आपने "left", "right", "top", और "bottom" जैसे दिशा-निर्देश वाले कीवर्ड इस्तेमाल किए हों. ये कीवर्ड उपयोगकर्ता के डिवाइस के फ़िज़िकल लेआउट को दिखाते हैं.
वहीं दूसरी ओर, लॉजिकल प्रॉपर्टी बॉक्स के किनारों का हवाला देती हैं, क्योंकि वे कॉन्टेंट के फ़्लो से जुड़ी होती हैं. अगर राइटिंग मोड बदलता है, तो लॉजिकल प्रॉपर्टी के साथ लिखा गया सीएसएस उसके हिसाब से अपडेट हो जाएगा. हालांकि, निर्देश देने वाली प्रॉपर्टी के मामले में ऐसा नहीं होता.
दिशा वाली प्रॉपर्टी margin-left हमेशा कॉन्टेंट बॉक्स की बाईं ओर मौजूद मार्जिन को दिखाती है. वहीं लॉजिकल प्रॉपर्टी margin-inline-start, बाईं से दाईं ओर लिखी गई भाषा में कॉन्टेंट बॉक्स की बाईं ओर मौजूद मार्जिन
और दाईं से बाईं ओर लिखी गई कॉन्टेंट बॉक्स
की दाईं ओर मौजूद मार्जिन को दिखाती है.
अपने डिज़ाइन को लिखने के अलग-अलग मोड के हिसाब से ढालने के लिए, दिशाओं वाला प्रॉपर्टी इस्तेमाल करने से बचें. इसके बजाय, लॉजिकल प्रॉपर्टी का इस्तेमाल करें.
.byline {
text-align: right;
}
.byline {
text-align: end;
}
जब सीएसएस की कोई खास डायरेक्शनल वैल्यू होती है, जैसे कि left या right,
तो उससे जुड़ी लॉजिकल प्रॉपर्टी होती है. जहां पहले हमारे पास margin-left थे, अब हमारे पास भी margin-inline-start हैं.
अंग्रेज़ी जैसी भाषा में जहां टेक्स्ट बाईं से दाईं ओर जाता है,
inline-start का मतलब "बाएं" और inline-end का मतलब "दाएं" है.
इसी तरह, अंग्रेज़ी जैसी भाषा में, जहां टेक्स्ट ऊपर से नीचे की ओर लिखा जाता है,
block-start का मतलब "top" और block-end "सबसे नीचे" होता है.
अगर आपकी सीएसएस में लॉजिकल प्रॉपर्टी का इस्तेमाल किया जाता है, तो अपने पेजों का अनुवाद करने के लिए भी उसी स्टाइलशीट का इस्तेमाल किया जा सकता है. भले ही आपके पेजों का दाईं से बाईं ओर लिखी गई भाषाओं में या नीचे से ऊपर लिखी गई भाषाओं में अनुवाद किया गया हो, आपका डिज़ाइन उसके हिसाब से अडजस्ट हो जाएगा. आपको हर भाषा के लिए अलग-अलग डिज़ाइन बनाने की ज़रूरत नहीं है. लॉजिकल प्रॉपर्टी का इस्तेमाल करने से आपका डिज़ाइन, लिखने के हर मोड का जवाब देगा. इसका मतलब है कि आपका डिज़ाइन ज़्यादा लोगों तक पहुंच सकता है और आपको हर भाषा के लिए अलग-अलग डिज़ाइन बनाने में समय नहीं लगाना पड़ेगा.
ग्रिड और flexbox जैसी आधुनिक सीएसएस लेआउट तकनीक, डिफ़ॉल्ट रूप से लॉजिकल प्रॉपर्टी का इस्तेमाल करती हैं.
अगर आपको left और top के बजाय, inline-start और block-start के बारे में सोचना है,
तो आपको इन आधुनिक तकनीकों को समझने में ज़्यादा आसानी होगी.
कोई सामान्य पैटर्न लें, जैसे कि कुछ टेक्स्ट के बगल में मौजूद आइकॉन या फ़ॉर्म फ़ील्ड के आगे मौजूद लेबल. "लेबल के दाईं ओर मार्जिन होना चाहिए", यह सोचने के बजाय "लेबल के इनलाइन ऐक्सिस के आखिर में मार्जिन होना चाहिए".
label {
margin-right: 0.5em;
}
label {
margin-inline-end: 0.5em;
}
अगर उस पेज का अनुवाद दाईं से बाईं ओर लिखी जाने वाली भाषा में किया जाता है,
तो शैलियों को अपडेट करने की ज़रूरत नहीं है.
अगर आपको अपने पेजों को दाईं से बाईं ओर लिखी जाने वाली भाषा में देखना पसंद है, तो html एलिमेंट पर dir एट्रिब्यूट का इस्तेमाल करें.
ltr वैल्यू का मतलब है, "बाएं से दाएं." "rtl" वैल्यू का मतलब है "दाएं से बाएं".
अगर आपको दस्तावेज़ के निर्देशों (ब्लॉक ऐक्सिस) और लिखने के मोड (इनलाइन ऐक्सिस) के अलग-अलग क्रम के साथ प्रयोग करना है, तो यहां एक इंटरैक्टिव डेमोंस्ट्रेशन दिया गया है.
पेज की भाषा पहचानें
बेहतर होगा कि आप html एलिमेंट पर lang एट्रिब्यूट का इस्तेमाल करके, अपने पेज की भाषा की पहचान करें.
<html lang="en">
यह उदाहरण अंग्रेज़ी वाले एक पेज का है. आप और भी सटीक जानकारी दे सकते हैं. यहां बताया गया है कि किसी पेज में अमेरिकन इंग्लिश का इस्तेमाल किया जा रहा है या नहीं:
<html lang="en-us">
अपने दस्तावेज़ की भाषा का एलान करना, सर्च इंजन के लिए काम का है. यह स्क्रीन रीडर और वॉइस असिस्टेंट जैसी सहायक टेक्नोलॉजी के लिए भी उपयोगी है. भाषा का मेटाडेटा उपलब्ध कराने से, इस तरह के स्पीच सिंथेसाइज़र, कॉन्टेंट को सही तरीके से बोलने में मदद करते हैं.
lang एट्रिब्यूट सिर्फ़ html के साथ-साथ, किसी भी एचटीएमएल एलिमेंट के साथ इस्तेमाल किया जा सकता है. अगर आप अपने वेब पेज में भाषाएँ बदलते हैं, तो उस बदलाव की जानकारी दें.
इस मामले में, एक शब्द जर्मन में है:
<p>I felt some <span lang="de">schadenfreude</span>.</p>
लिंक किए गए दस्तावेज़ की भाषा की पहचान करना
hreflang नाम का एक और एट्रिब्यूट होता है, जिसका इस्तेमाल लिंक में किया जा सकता है.
hreflang, भाषा के वही कोड नोटेशन लेता है जो lang एट्रिब्यूट में दिया गया है. साथ ही, यह लिंक किए गए दस्तावेज़ की भाषा के बारे में बताता है.
अगर आपके पूरे पेज का अनुवाद जर्मन में उपलब्ध है, तो उसे इस तरह से लिंक करें:
<a href="/path/to/german/version" hreflang="de">German version</a>
अगर जर्मन वर्शन के लिंक के बारे में जानकारी देने के लिए, जर्मन भाषा में टेक्स्ट का इस्तेमाल किया जा रहा है, तो hreflang और lang, दोनों का इस्तेमाल करें.
यहां, टेक्स्ट "Deutsche Version" को जर्मन भाषा में मार्क अप किया गया है और डेस्टिनेशन लिंक को भी जर्मन भाषा में होने के तौर पर मार्क किया गया है:
<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>
link एलिमेंट के लिए, hreflang एट्रिब्यूट का इस्तेमाल भी किया जा सकता है. यह आपके दस्तावेज़ के head में होता है:
<link href="/path/to/german/version" rel="alternate" hreflang="de">
हालांकि, lang एट्रिब्यूट किसी भी एलिमेंट के साथ काम करता है, जबकि hreflang को सिर्फ़ a और link एलिमेंट पर लागू किया जा सकता है.
अपनी साइट को इस तरह डिज़ाइन करें कि वह दुनिया भर के दर्शकों तक पहुंच सके
ऐसी वेबसाइटें डिज़ाइन करते समय इन बातों पर ध्यान दें जिनका अनुवाद अन्य भाषाओं में किया जाएगा और लिखने के मोड तय किए जाएंगे:
- आम तौर पर, जर्मन जैसी कुछ भाषाओं के लिए लंबे शब्द इस्तेमाल होते हैं. आपके इंटरफ़ेस को इन शब्दों के हिसाब से ढलना चाहिए, इसलिए संकरे कॉलम डिज़ाइन करने से बचें. हाइफ़न डालने के लिए, सीएसएस का इस्तेमाल भी किया जा सकता है.
- पक्का करें कि आपके
line-heightकी वैल्यू में उच्चारण और दूसरे विशेषक चिह्नों जैसे वर्ण शामिल हो सकते हैं. अंग्रेज़ी में ठीक से दिखने वाली टेक्स्ट की लाइनें, किसी दूसरी भाषा में ओवरलैप हो सकती हैं. - अगर वेब फ़ॉन्ट का इस्तेमाल किया जा रहा है, तो पक्का करें कि उसमें वर्णों की ऐसी रेंज हो जो उन भाषाओं के हिसाब से हो जिनका अनुवाद आपको करना है.
- ऐसी इमेज न बनाएं जिनमें टेक्स्ट हो. अगर ऐसा किया जाता है, तो आपको हर भाषा के लिए अलग-अलग इमेज बनानी होंगी. इसके बजाय, टेक्स्ट और इमेज को अलग करें और इमेज पर टेक्स्ट को ओवरले करने के लिए सीएसएस का इस्तेमाल करें.
कॉन्टेंट को दुनिया भर के दर्शकों तक पहुंचाने के लिए बनाएं
lang और hreflang जैसे एट्रिब्यूट आपके एचटीएमएल को अंतरराष्ट्रीय बनाने के लिए ज़्यादा काम का बनाते हैं.
इसी तरह, लॉजिकल प्रॉपर्टी आपकी सीएसएस को ज़्यादा अपनाने लायक बनाती हैं.
अगर आप top, bottom, left, और right के बारे में सोचते हैं, तो
इसके बजाय block start, block end, inline start, और inline end के बारे में सोचना शुरू करना मुश्किल हो सकता है.
लेकिन यह सही है. सही मायनों में रिस्पॉन्सिव लेआउट बनाने के लिए, लॉजिकल प्रॉपर्टी अहम भूमिका निभाती हैं.
आपने जो सीखा है उसकी जांच करें
वीडियो को अंतरराष्ट्रीय दर्शकों के मुताबिक बनाने के बारे में अपनी जानकारी को परखें.
अंग्रेज़ी में कहें, तो बॉक्स की फ़िज़िकल right साइड, किस तरफ़ होती है?
block-starttop हैblock-endbottom हैinline-startleft हैinline-endआपको अपने एचटीएमएल में कौनसा एट्रिब्यूट जोड़ना चाहिए, ताकि वह अंतरराष्ट्रीय फ़ॉर्मैट में बेहतर तरीके से काम कर सके?
englishlanglanguagei18nइसके बाद, आप पेज-लेवल के लेआउट तक पहुंचने का तरीका जानेंगे. इन्हें मैक्रो लेआउट भी कहा जाता है.