Îñţérñåţîöñåļîžåţîöñ

रविवार, 11 सितंबर, 2011

आपको लगता है कि आपकी सेवाएं दुनिया भर के उपयोगकर्ताओं तक पहुंचनी चाहिए. इसके लिए, यह ज़रूरी है कि आपकी वेबसाइट पर अलग-अलग भाषाओं के उपयोगकर्ताओं के लिए कॉन्टेंट मौजूद हो. क्या आपको लगता है कि सिर्फ़ कॉन्टेंट का अनुवाद पाने से यह काम हो सकता है? अगर आपको ऐसा लगता है, तो शायद आप गलत हैं. Google की वेबमास्टर टीम, अक्सर ऐसी साइटें बनाती है जिनका अनुवाद 40 से ज़्यादा भाषाओं में किया जाता है. हम जानते हैं कि साइट के पेजों को दूसरी भाषाओं और देशों/इलाकों के हिसाब से लॉन्च करते समय किन बातों पर ध्यान देना ज़रूरी होता है. यहां हमने कुछ ऐसी ही बातों पर चर्चा की है.

(आपको ऐसा लग सकता है कि आपकी साइट पर इन समस्याओं का कोई असर नहीं होता है, क्योंकि आपका कॉन्टेंट सिर्फ़ अंग्रेज़ी भाषा में पब्लिश होता है. हालांकि, ऐसा हो सकता है कि अंग्रेज़ी के अलावा दूसरी भाषा समझने वाले लोग, Google Translate जैसे टूल का इस्तेमाल करके, अपनी भाषा में कॉन्टेंट देखते हों. इस तरह के ट्रैफ़िक की जानकारी को Analytics के डैशबोर्ड में देखा जा सकता है. इससे, यह पता चलता है कि आपकी वेबसाइट पर आने वाले कितने लोग, टूल का इस्तेमाल करके वेबसाइट को अपनी भाषा में देखते हैं.)

ज़्यादा भाषाएं != ज़्यादा एचटीएमएल टेंप्लेट

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

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

हर सवाल का जवाब मिलना संभव नहीं है?

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

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

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

दूसरे पहलू पर ध्यान दें

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

     <p>
      ابةتث
      <img src="foo.jpg" alt=" جحخد" />
      < ذرزسش!
     </p>

हमारे हर दिन के इस्तेमाल में हमने पाया कि बाईडायरेक्शनल एचटीएमएल के लिए, इन एडिटर का इस्तेमाल किया जा सकता है: Dreamweaver, IntelliJ IDEA, JEditX, और खास तौर पर Coda.

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

अब आरटीएल भाषाओं के लिए, हम आपको स्टाइलिंग से जुड़ी कुछ ऐसी गड़बड़ियों के बारे में बताते हैं जिन्हें आपको ठीक करना होता है. जैसे, दाईं ओर फ़्लोट किए जाने वाले एलिमेंट को बाईं ओर फ़्लोट करना होता है. इसी तरह, बाईं फ़्लोट किए जाने वाले एलिमेंट को दाईं ओर फ़्लोट करना होता है. एलिमेंट के एक तरफ़ लागू की गई अतिरिक्त पैडिंग (जगह) या मार्जिन को हटाकर, उसके दूसरी तरफ़ लागू करना होता है. इसके अलावा, टेक्स्ट के अलाइन होने से जुड़े एट्रिब्यूट को उलटना होता है.

आम तौर पर, हम यहां दिए गए तरीके का इस्तेमाल करते हैं. हम html[dir=rtl] सीएसएस सिलेक्टर के बजाय, बॉडी टैग पर क्लास का इस्तेमाल करते हैं, क्योंकि यह तरीका ब्राउज़र के पुराने वर्शन के साथ काम करता है:

एलिमेंट:

    <body class="rtl">
      <h1>
        <a href="https://www.blogger.com/">
          <img alt="Google" src="https://www.google.com/images/logos/google_logo.png" />
        </a> Heading
      </h1>

बाईं से दाईं (डिफ़ॉल्ट) स्टाइलिंग:

    h1 {
      height: 55px;
      line-height: 2.05;
      margin: 0 0 25px;
      overflow: hidden;
    }
    h1 img {
      float: left;
      margin: 0 43px 0 0;
      position: relative;
    }

दाईं से बाईं स्टाइलिंग:

    body.rtl {
      direction: rtl;
    }
    body.rtl h1 img {
      float: right;
      margin: 0 0 0 43px;
    }

(अंग्रेज़ी और अरबी में इसे काम करते हुए देखें.)

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

<h2>‫עוד ב- <span dir="ltr">Google</span>‬</h2>

ऐसे मामलों में, जहां आपके पास दिशा वाले एट्रिब्यूट से जोड़ने के लिए एचटीएमएल एलिमेंट न हो, वहां इस विकल्प का इस्तेमाल करके, दिशा को सेट किया जा सकता है. इन मामलों में, शीर्षक के एलिमेंट या मैसेज के दिखने के लिए, JavaScript से जनरेट किए गए सोर्स कोड शामिल हैं. यहां ‫ और ‬‬, दाएं से बाएं एम्बेड करने के लिए यूनिकोड कंट्रोल वर्ण हैं:

<title>&#x202B;‫הפוך את Google לדף הבית שלך‬&#x202C;</title>

JavaScript कोड में इसके इस्तेमाल का उदाहरण:

var ffError = '\u202B' +'כדי להגדיר את Google כדף הבית שלך ב\x2DFirefox, לחץ על הקישור \x22הפוך את Google לדף הבית שלי\x22, וגרור אותו אל סמל ה\x22בית\x22 בדפדפן שלך.'+ '\u202C';

(ज़्यादा जानकारी के लिए, अरबी, हिब्रू, और अन्य दाईं से बाईं ओर लिखी जाने वाली स्क्रिप्ट के लिए एचटीएमएल तैयार करना और दाईं से बाईं ओर स्क्रिप्ट लिखना नाम के W3C के लेख देखें.)

एडिटर और ब्राउज़र को हर भाषा समझ नहीं आती...

अगर आपने पहले कभी लैटिन के अलावा किसी वर्ण सेट (सिरिलिक, ग्रीक, और कई एशियन और इंडिक) पर काम नहीं किया है, तो हो सकता है कि आपका एडिटर और ब्राउज़र कॉन्टेंट को सही तरीके से न दिखाए.

यह पक्का करें कि आपके एडिटर और ब्राउज़र पर कोड में बदलने का तरीका, UTF-8 (सुझाया गया) पर सेट हो. साथ ही, अपने एचटीएमएल टेंप्लेट में <span> एलिमेंट और html एलिमेंट के lang एट्रिब्यूट को जोड़ने के बारे में सोचें, ताकि ब्राउज़र को पता हो कि आपके पेज को रेंडर करते समय क्या उम्मीद की जा सकती है. साथ ही, ऐसा करने से यह भी पक्का होता है कि सभी यूनिकोड वर्ण सही तरीके से दिखें, ताकि é (é) जैसी एचटीएमएल वाली इकाई का इस्तेमाल करने की ज़रूरत न हो. ऐसा करने से, कई अहम बाइट की बचत होती है! अगर आपको समस्या आ रही है, तो W3C के कैरेक्टर एन्कोडिंग के बारे में बताने वाले ट्यूटोरियल को देखें. इसमें समस्याओं के बारे में पूरी जानकारी दी गई है.

नाम रखने के बारे में जानकारी

आखिर में, यह जानना ज़रूरी है कि भाषा के कई वर्शन वाला पेज बनाते समय, उनके नाम कैसे रखे जाएं. नाम रखने के लिए, ISO 639-1 भाषा कोड जैसे मानक का इस्तेमाल किया जा सकता है. इसकी मदद से, एक ही दस्तावेज़ के कई भाषा वाले वर्शन एक साथ मैनेज हो सकते हैं.

हमेशा से इस्तेमाल होते आ रहे मानक की मदद से, लोग आपकी साइट के स्ट्रक्चर को समझ सकते हैं. साथ ही, साइट को डेवलप करने वाले सभी वेबमास्टर के लिए, साइट का रखरखाव करना आसान होता है. इसके अलावा, साइट के अन्य एसेट (लोगो की इमेज, पीडीएफ़ दस्तावेज़) के लिए, भाषा का कोड इस्तेमाल करना चाहिए, ताकि फ़ाइलों को तुरंत पहचाना जा सके.

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

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

Google वेबमास्टर टीम से कैथरिन कलेन की पोस्ट