इंटरनैशनलाइजेशन

वेब, दुनिया के हर व्यक्ति के लिए उपलब्ध है. इसके नाम में ही यह बात शामिल है! इसका मतलब है कि आपकी वेबसाइट, इंटरनेट का इस्तेमाल करने वाले किसी भी व्यक्ति के लिए उपलब्ध है. इससे कोई फ़र्क़ नहीं पड़ता कि वह कहां है, कौनसा डिवाइस इस्तेमाल कर रहा है या कौनसी भाषाएं बोलता है.

रिस्पॉन्सिव डिज़ाइन का मकसद, आपके कॉन्टेंट को सभी के लिए उपलब्ध कराना है. इसी सिद्धांत को इंसानी भाषाओं पर लागू करने से, अंतरराष्ट्रीय भाषाओं में उपलब्ध कराने की प्रक्रिया शुरू होती है. इसका मतलब है कि दुनिया भर के दर्शकों के लिए, अपने कॉन्टेंट और डिज़ाइन को तैयार करना.

लॉजिकल प्रॉपर्टी

अंग्रेज़ी को बाएं से दाएं और ऊपर से नीचे लिखा जाता है. हालांकि, सभी भाषाओं को इस तरह से नहीं लिखा जाता. अरबी और हिब्रू जैसी कुछ भाषाओं को दाईं से बाईं ओर पढ़ा जाता है. वहीं, जैपनीज़ के कुछ टाइपफ़ेस को हॉरिज़ॉन्टल के बजाय वर्टिकल तरीके से पढ़ा जाता है. इन राइटिंग मोड को ध्यान में रखते हुए, सीएसएस में लॉजिकल प्रॉपर्टी पेश की गई थीं.

अगर आपने सीएसएस लिखी है, तो हो सकता है कि आपने दिशा बताने वाले कीवर्ड, जैसे कि "बाएं", "दाएं", "ऊपर", और "नीचे" का इस्तेमाल किया हो. ये कीवर्ड, उपयोगकर्ता के डिवाइस के फ़िज़िकल लेआउट के बारे में बताते हैं.

दूसरी ओर, लॉजिकल प्रॉपर्टी, बॉक्स के किनारों को कॉन्टेंट के फ़्लो के हिसाब से दिखाती हैं. राइटिंग मोड बदलने पर, लॉजिकल प्रॉपर्टी का इस्तेमाल करके लिखी गई सीएसएस, उसके हिसाब से अपडेट हो जाएगी. हालांकि, दिशा बताने वाली प्रॉपर्टी के मामले में ऐसा नहीं होता.

दिशा के हिसाब से तय की गई प्रॉपर्टी 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 का मतलब "ऊपर" और block-end का मतलब "नीचे" होता है.

अगर सीएसएस में लॉजिकल प्रॉपर्टी का इस्तेमाल किया जाता है, तो अपने पेजों के अनुवाद के लिए एक ही स्टाइलशीट का इस्तेमाल किया जा सकता है. अगर आपके पेजों का अनुवाद ऐसी भाषाओं में किया गया है जो दाईं से बाईं ओर या नीचे से ऊपर की ओर लिखी जाती हैं, तो आपकी डिज़ाइन उसी के हिसाब से अडजस्ट हो जाएगी. आपको हर भाषा के लिए अलग-अलग डिज़ाइन बनाने की ज़रूरत नहीं है. लॉजिकल प्रॉपर्टी का इस्तेमाल करने पर, आपका डिज़ाइन हर राइटिंग मोड के हिसाब से काम करेगा. इसका मतलब है कि आपको हर भाषा के लिए अलग-अलग डिज़ाइन बनाने में समय नहीं लगाना पड़ेगा. साथ ही, आपका डिज़ाइन ज़्यादा लोगों तक पहुंच पाएगा.

ग्रिड और फ़्लेक्सबॉक्स जैसी आधुनिक सीएसएस लेआउट तकनीकें, डिफ़ॉल्ट रूप से लॉजिकल प्रॉपर्टी का इस्तेमाल करती हैं. अगर आप 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 के हिसाब से सोचने में मुश्किल हो. लेकिन यह फ़ायदेमंद है. लॉजिकल प्रॉपर्टी, पूरी तरह से रिस्पॉन्सिव लेआउट बनाने के लिए ज़रूरी होती हैं.

देखें कि आपको कितना समझ आया

अंतरराष्ट्रीयकरण के बारे में अपनी जानकारी को परखें.

इसके बाद, आपको पेज-लेवल के लेआउट के बारे में बताया जाएगा. इन्हें मैक्रो लेआउट भी कहा जाता है.