लगता है हेडलाइन में कुछ गड़बड़ है? अरबी जैसी भाषाओं के लिए समर्थन जोड़ते समय यह वेब डेवलपर्स की समस्याओं में से एक है। इस लेख में, हम उन समस्याओं के बारे में बात करेंगे जिनका हमने सामना किया और समाधान जो हम Spotify डेस्कटॉप क्लाइंट और वेब प्लेयर में अरबी भाषा का समर्थन करने के लिए आए थे।

Spotify स्थानीयकरण महत्वपूर्ण है। हमारा मिशन "मानव रचनात्मकता की क्षमता को प्राप्त करना है, लाखों संगीतकारों को अपनी कला के साथ जीवन जीने का अवसर प्रदान करना है, और अरबों प्रशंसक इसका आनंद ले सकते हैं और इससे प्रेरित हो सकते हैं।" इस मिशन को प्राप्त करने के लिए, यह महत्वपूर्ण है कि विभिन्न देशों के उपयोगकर्ता अपनी भाषाओं में प्रभावी ढंग से संवाद कर सकें। हमने हाल ही में उत्तरी अफ्रीका और पश्चिम एशिया के क्षेत्रों में Spotify लॉन्च किया है। इन क्षेत्रों में से एक भाषा अरबी है। अंग्रेजी के विपरीत, अरबी को दाएं से बाएं पढ़ा जाता है। यह उन वेबसाइटों को प्रभावित करता है जो अरबी का समर्थन करना चाहते हैं।

सामग्री की तालिका

• दर्पण छवि लेआउट
  
• RTL प्रारूप में अंग्रेजी
  
• अरबी अक्षर
  
• गुणवत्ता मानकों
  
• उपयोगी सूत्र

लेख में हम निम्नलिखित संक्षिप्ताक्षरों का उपयोग करेंगे:

LTR (बाएँ से दाएँ): वह पाठ जो बाएँ से दाएँ पढ़ा जाता है, जैसे अंग्रेज़ी या स्पेनिश।
RTL (दाएँ से बाएँ): वह पाठ जो दाईं से बाईं ओर पढ़ा जाता है, जैसे अरबी।

दर्पण छवि लेआउट

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

डीआईआर विशेषता कैसे काम करती है

ब्राउज़र में तत्व में पाठ की दिशा dir विशेषता द्वारा बताई गई है। किसी पृष्ठ की वैश्विक दिशा निर्धारित करने के लिए, आपको संपूर्ण पृष्ठ के लिए dir विशेषता को सेट करना होगा।

गुण मान:

• ltr - बाएं से दाएं लिखने के लिए उपयोग किया जाता है (उदाहरण के लिए, अंग्रेजी, स्वीडिश)। यह डिफ़ॉल्ट मान है।
  
• rtl - राइट से लेफ्ट में लिखने के लिए उपयोग किया जाता है (उदाहरण के लिए, अरबी, हिब्रू, फ़ारसी)।
  
• ऑटो - गतिशील सामग्री के लिए उपयोग किया जाता है। ब्राउज़र स्वयं दिशा चुनता है। तत्वों को संसाधित करने और दिशा निर्धारित करने के लिए, यूनिकोड बिडायरेक्शनल एल्गोरिथम का उपयोग किया जाता है । अधिक जानकारी के लिए, "आरटीएल प्रारूप में अंग्रेजी" देखें।

सीएसएस

सीएसएस फ्लेक्सबॉक्स और सीएसएस ग्रिड तत्व की दिशा निर्धारित करने के लिए dir विशेषता को देखते हैं। उदाहरण के लिए, flex-start स्वचालित रूप से आरटीएल पर स्विच करता है जब dir विशेषता "rtl" आरटीएल "rtl" सेट होती है।

लेकिन फ्लेक्सबॉक्स या ग्रिड का उपयोग करने वाली dir विशेषता आरटीएल पर पूरे उपयोगकर्ता इंटरफ़ेस को प्रतिबिंबित करने के लिए पर्याप्त नहीं हो सकती है। LTR और RTL दोनों का समर्थन करने वाली वेबसाइट को विकसित करने के लिए बहुत सारे असममित सीएसएस गुण हैं। उदाहरण के लिए, margin-left: 20px और text-align: right इन आरटीएल बदल जाएगा और margin-right: 20px और text-align: left ।

इस काम को स्वचालित करने के लिए कई उपकरण हैं। हमने पोस्टसीएसएस-आरटीएल को चुना, जो बिल्ड चरण के दौरान "उल्टे" गुणों के साथ आरटीएल नियम बनाता है।

 .foo { margin-left: 15px; text-align: right; color: rebeccapurple; } 

सीएसएस इनपुट

 [dir] .foo { color: rebeccapurple; } [dir="ltr"] .foo { margin-left: 15px; text-align: right; } [dir="rtl"] .foo { margin-right: 15px; text-align: left; } 

सीएसएस उत्पादन

माउस

एक दिशा या प्रगति से संबंधित प्रतीक और तत्वों को RTL में परिवर्तित किया जाना चाहिए। उदाहरण के लिए, पीछे और आगे के नेविगेशन बटन को स्वैप करने की आवश्यकता है।


पीछे बटन LTR में


RTL में बैक बटन (अंग्रेजी पाठ अरबी के बजाय प्रयोग किया जाता है)

सभी दिशात्मक एनिमेशन भी फ़्लिप होने चाहिए। उदाहरण के लिए, हिंडोला को दूसरे तरीके से स्लाइड करना चाहिए।

अपवाद

शुरू में, हमने यह माना कि सब कुछ मिरर किया जाएगा। लेकिन बहुत जल्दी कुछ अपवादों को देखा। उदाहरण के लिए, मीडिया प्लेबैक बटन और प्रगति बार को मिररिंग की आवश्यकता नहीं होती है, क्योंकि वे टेप की दिशा से संबंधित होते हैं। अरबी बोलने वाले उपयोगकर्ता प्लेबैक नियंत्रण और प्रगति पट्टी को LTR के समान दिखने की उम्मीद करते हैं।


एलटीआर में प्लेबैक सूचक

RTL प्रारूप में अंग्रेजी

अक्सर, LTR और RTL टेक्स्ट को एक ही पेज पर मिलाया जाता है। Spotify में दुनिया भर के संगीतकारों द्वारा 40 मिलियन से अधिक गाने और 3 बिलियन से अधिक प्लेलिस्ट हैं। सामग्री दुनिया भर के उपयोगकर्ताओं के लिए कई भाषाओं में प्रस्तुत की गई है। इसलिए, Spotify ग्राहक अक्सर LTR और RTL सामग्री को मिलाते हैं।

(नमस्ते (विश्व: विराम चिह्न और कोष्ठक की समस्या)

पहली समस्याओं में से एक हमने इस तरह देखा:


पक्षाघात की समस्या

ऐसा इसलिए होता है क्योंकि ब्राउज़र हमारे तत्व की dir विशेषता के मूल्य के आधार पर पाठ की मूल दिशा निर्धारित करता है। विराम चिह्न जैसे ( ) . ! ( ) . ! और बाकी को यूनिकोड में दिशा द्वारा वर्णित नहीं किया गया है। उन्हें पाठ की मूल दिशा विरासत में मिलती है।

द्विदिश यूनिकोड बिडायरेक्शनल अल्गोरिथम प्रत्येक वर्ण को दायें से बायें एक स्ट्रिंग में देखता है। एक उदाहरण के रूप में, पृष्ठ पर "Hello (World)" लाइन लें।

• एल्गोरिथ्म सही करने के लिए लाइन पार्स करना शुरू कर देता है। वह एक अप्रत्यक्ष चरित्र देखता है ) , इसलिए वह पाठ की मूल दिशा को देखता है और देखता है कि पाठ दाईं से बाईं ओर जाता है। एल्गोरिथ्म लाइन की शुरुआत के लिए स्थानांतरित करने का फैसला करता है ) ।
  
  

    "हैलो (विश्व)" -> "(हैलो (विश्व")) 

• एल्गोरिथ्म एलटीआर दिशा के साथ d देखता है। इसे स्थानांतरित करने की आवश्यकता नहीं है। यही बात अन्य अंग्रेजी अक्षरों पर लागू होती है (
  
• एल्गोरिथ्म देखता है ( दिशा के बिना। यह बाएं से दाएं तक प्रचलित मूल दिशा (पिछली W द्वारा दी गई) को याद करता है। एल्गोरिथ्म को स्थानांतरित नहीं करने का निर्णय लेता है ( वही "Hello” में अंतरिक्ष और सभी पात्रों के लिए जाता है।

यहां यूनिकोड बिडायरेक्शनल एल्गोरिथम कैसे काम करता है, इसके बारे में और जानें।

नतीजतन, हमें स्ट्रिंग मिलती है "(Hello (World" । हमने सभी गतिशील सामग्री में dir विशेषता के लिए auto मूल्य निर्दिष्ट करके इस समस्या को हल किया, उदाहरण के लिए, कलाकारों, एल्बम और गीत के नाम में। यह सामग्री को अलग करता है और पहले के अनुसार आधार दिशा निर्धारित करता है। एक दृढ़ता से टाइप की गई दिशा चरित्र। इस मामले में, अप्रत्यक्ष वर्ण हमेशा आसपास के पात्रों से दिशा प्राप्त करेंगे, पृष्ठ नहीं। इसलिए, आपको स्ट्रिंग "Hello (World)" मिलेगा। उचित संरेखण सुनिश्चित करने के लिए, केवल एम्बेडेड के लिए विशेषता का उपयोग करें। इनलाइन तत्व, अन्यथा आपको text-align संपत्ति को तत्वों में जोड़ना होगा।

... एलो वर्ल्ड: ट्रंकेशन समस्या

मिश्रित सामग्री भी एक समस्या है यदि आप ट्रंकेशन को जोड़ना चाहते हैं जो तत्व को फिट नहीं करता है।


LTR UI: अरबी पाठ गलत पक्ष से काट दिया गया


RTL UI: अंग्रेज़ी पाठ गलत साइड से छोटा किया गया

ट्रंकेशन गलत पक्ष पर होता है, क्योंकि ब्राउज़र पाठ की दिशा को dir विशेषता से सेट करता है। एक समस्या के लिए समस्या को हल किया जाता है "auto" विशेषता के साथ एक तत्व के लिए छोटा पाठ।


LTR UI: अरबी पाठ दाईं ओर छोटा है


RTL UI: अंग्रेजी पाठ दाईं ओर छोटा है

अरबी अक्षर

बहुभाषी यूआई विकसित करते समय, यह सुनिश्चित करना महत्वपूर्ण है कि इंटरफ़ेस सभी वर्णमालाओं के लिए सही ढंग से काम करता है। यहाँ, संक्षेप में, अरबी जोड़ते समय आपको क्या जाँचना होगा।

चरित्र रिक्ति

अरबी लेखन संयुक्ताक्षर है। अधिकांश, यदि नहीं, तो एक शब्द में वर्ण एक दूसरे से संबंधित हैं। इस कारण से, अरबी में इंटरसिमबोल स्पेसिंग का उपयोग नहीं किया जाना चाहिए। वह प्राकृतिक संयुक्ताक्षर को तोड़ते हुए प्रतीकों को तोड़ता है।

फ़ॉन्ट आकार

आमतौर पर, अरबी पात्रों में अंग्रेजी वर्णों की तुलना में अधिक जटिल ग्लिफ़ होते हैं। अधिक लाइनें और बारीकियां हैं जो एक ही स्थान में फिट होनी चाहिए। इस वजह से, समान फ़ॉन्ट आकार वाले अरबी अक्षर अंग्रेजी की तुलना में कम सुपाठ्य हैं। पात्र बहुत छोटे हैं। हमने अरबी में न्यूनतम फ़ॉन्ट आकार 11 से 12px तक बढ़ाने का फैसला किया। हमने यह भी सुनिश्चित किया है कि फ़ॉन्ट अरबी ग्लिफ़ को जटिल नहीं करता है। एक अच्छा विकल्प Google Noto होगा , जो कि एरियल से अधिक सुपाठ्य है, ब्राउज़र में अरबी के लिए डिफ़ॉल्ट बैकअप फ़ॉन्ट।

खड़ी फसल

कुछ अरबी पत्र अंग्रेजी की तुलना में अधिक हैं। इससे पात्रों को लंबवत रूप से काट दिया जा सकता है। अरबी के लिए, आपको लाइन रिक्ति (लाइन-ऊंचाई) बढ़ाने की आवश्यकता हो सकती है।


खड़ी फसल

अपरकेस अक्षर

अरबी में कोई बड़े अक्षर नहीं हैं, इसलिए पृष्ठ पर बड़े अक्षरों में कुछ उजागर करने का कोई मतलब नहीं है।

अरब का अल्पविराम

कई भाषाएं, एक अल्पविराम के रूप में उपयोग करती हैं। अरबी में, एक और सीमांकक: im।

हमारे कोड में कोड array.join(', ') अक्सर सामना किया array.join(', ') । उपयोगकर्ता की भाषा सेटिंग के आधार पर, विभिन्न सीमांकक का समर्थन करने के लिए, हमने getSeparator() विधि जोड़ी।

अरबी अंक

अरबी में, दो नंबर सिस्टम

• पश्चिमी अरबी अंक: 0 1 2 3 4 5 6 7 8 9
  
• पूर्वी अरबी अंक: ٩ ٣ ٩ ٩ ٩ ٩ ٩ ٩ ٩ ٩

एक प्रणाली का चयन करें और इसे पूरे एप्लिकेशन में लगातार उपयोग करें। हमने पश्चिमी अरबी अंकों को चुना।

पारदर्शी पाठ का रंग

अरबी में ग्लिफ़ ओवरलैप हो सकता है। पाठ का पारदर्शी रंग काम नहीं करता है, क्योंकि अतिव्यापी भागों को अपेक्षित पारदर्शिता नहीं मिलती है। समाधान एक पूरी तरह से अपारदर्शी रंग और पाठ तत्व के लिए अस्पष्टता है।


पारदर्शिता का मुद्दा

गुणवत्ता मानकों

यहाँ अरबी भाषा को प्राप्त करने के लिए हमने कुछ चीजें की हैं:

• टीम टेस्ट सत्र
  
• अरबी बोलने वाले कर्मचारियों के साथ बीटा टेस्ट
  
• परीक्षण यूआई और बाहरी एजेंसियों द्वारा अनुवाद।

अरबी यूआई की गुणवत्ता सुनिश्चित करने के लिए, कुछ उपकरणों की आवश्यकता थी।

हमने गिटहब बॉट बनाने का फैसला किया। वह संभावित अनुरोधों से मेल खाने वाले पूल अनुरोधों पर टिप्पणियां पोस्ट करता है। टिप्पणी कुछ भी लागू नहीं करती है: यह जांचने के निर्देश के संदर्भ में अरबी भाषा को कैसे प्रभावित करेगा, यह जांचने के लिए एक अनुस्मारक है। पैडिंग, कैरेक्टर स्पेसिंग, कन्वर्सेशन आदि के अनुरूप परिवर्तित लाइनों पर बॉट कमेंट करते हैं। CSS कोड PostCSS-RTL द्वारा परिवर्तित किया जाता है, इसलिए आमतौर पर केवल अरबी में बदलाव को देखते हैं और सुनिश्चित करते हैं कि यह अच्छा लग रहा है। CSS संपत्तियों को JS के माध्यम से सेट किया जा सकता है, और PostCSS-RTL JS को रूपांतरित नहीं करता है। बॉट जेएस फाइलों की जांच करता है और उन पर टिप्पणी करता है, भले ही संबंधित गुण वहां पाए जाते हों।


टोब-बॉट द्वारा टिप्पणी

उपयोगी सूत्र

1. सामग्री डिजाइन - द्विदिश
2. अंतर्राष्ट्रीयकरण विधियाँ: HTML और CSS संलेखन
3. HTML संलेखन: दाएं से बाएं लेखन
4. अरबी और फारसी भाषाओं का तुलनात्मक विश्लेषण
5. ECMAScript अंतर्राष्ट्रीयकरण एपीआई