दाएं से बाएं। RTL के तहत साइट इंटरफ़ेस कैसे चालू करें

हमने हाल ही में 2 जीआईएस के ऑनलाइन संस्करण का अरबी में अनुवाद किया था, और पिछले लेख में मैंने इसके लिए आवश्यक सिद्धांत के बारे में बात की थी - एक मिश्रित फ़ोकस टेक्स्ट को किस नियम से और अपने आप को कैसे नियंत्रित किया जाए, इसके लिए dir="rtl" क्या है।

यह अभ्यास शुरू करने का समय है - पूरे इंटरफ़ेस को दाईं से बाईं ओर न्यूनतम प्रयास के साथ चालू करने के लिए ताकि एक वास्तविक अरब को भी पकड़ महसूस न हो।

इस अनुच्छेद में, मैं आपको बताऊंगा कि सीएसएस असेंबली के साथ क्या करना है और जेएस में विघटित करने के लिए क्या जल्दी से प्रोटोटाइप करना है, अनुवाद और स्थानीयकरण सुविधाओं के बारे में थोड़ा सा, सीएसएस की तार्किक गुणों की याद दिलाता है और सीएसएसएल-इन-जेएस में आरटीएल के विषय।

बहती हुई शैलियाँ

जब मैंने टैग के लिए dir = "rtl" विशेषता को लागू किया, तो तत्वों के केवल अंतर्निहित क्रम में परिवर्तन हुआ - उदाहरण के लिए, तालिका कोशिकाओं या फ्लेक्स तत्वों का क्रम। शैलियों में स्पष्ट रूप से निर्दिष्ट मूल्यों के साथ कुछ नहीं हुआ।

नीचे दाईं ओर स्थित कुछ अधिसूचना की शैलियों को लें:

 .tooltip { position: 'absolute'; bottom: 10px; right: 10px; } 

dir="rtl" आरटीएल dir="rtl" इन शैलियों को किसी भी तरह से प्रभावित नहीं करेगा - आरटीएल संस्करण में टूलटिप भी दाईं ओर होगा, हालांकि यह बाईं तरफ होने की उम्मीद है।

क्या करें? आपको right: 10px बदलने की आवश्यकता है right: 10px left: 10px । और इसलिए सभी अन्य शैलियों के साथ। पूर्ण स्थिति, मार्जिन / पैडिंग, पाठ संरेखण - सब कुछ अरबी संस्करण के लिए विपरीत दिशा में मुड़ने की आवश्यकता है।

त्वरित प्रोटोटाइप

शुरू करने के लिए, आप बिना किसी हिचकिचाहट के, बाएं से दाएं की सभी घटनाओं को बदल सकते हैं और शॉर्टहैंड मूल्यों के साथ थोड़ा जादू कर सकते हैं:

• बाएं: 0 → दाएं: 0
• पैडिंग-लेफ्ट: 4 पीएक्स → पेडिंग-राइट: 4 पीएक्स
• मार्जिन: 0 16px 0 0 → मार्जिन: 0 0 0 16px

Postcss-rtl प्लगइन इसके लिए उपयुक्त है। सुविधाजनक - आपको इसे सभी पोस्ट-प्रोजेक्ट-प्लगइन्स की सूची में छोड़ने की आवश्यकता है। यह सभी निर्देशित नियमों को प्रतिबिंबित लोगों के साथ बदल देता है और इसे [dir="rtl"] में लपेटता है। उदाहरण के लिए:

 /* input */ .foo { color: red; margin-left: 16px; } /* output */ [dir] .foo { color: red; } [dir="ltr"] .foo { margin-left: 16px; } [dir="rtl"] .foo { margin-right: 16px; } 

उसके बाद, आपको केवल dir="rtl" सेट करने की आवश्यकता है और केवल आवश्यक नियम स्वचालित रूप से लागू होते हैं। सब कुछ काम करता है और ऐसा लगता है कि लगभग सब कुछ उत्पादन के लिए तैयार है, लेकिन यह समाधान केवल एक त्वरित प्रोटोटाइप के लिए उपयुक्त है:

• प्रत्येक नियम की विशिष्टता बढ़ जाती है । यह जरूरी एक समस्या नहीं होगी, लेकिन मैं इससे बचना चाहूंगा;
• इस तरह के जोड़तोड़ बग को जन्म देते हैं । उदाहरण के लिए, गुणों का क्रम टूट सकता है;
• सीएसएस फ़ाइल का आकार काफी बढ़ रहा है । [dir] प्रत्येक चयनकर्ता [dir] जोड़ा जाता है, प्रत्येक निर्देशित संपत्ति को डुप्लिकेट किया जाता है। हमारे मामले में, एक परियोजना पर आकार 21% बढ़ा, दूसरे पर - 35% से:

क्या कोई बेहतर विकल्प है?

एलटीआर और आरटीएल के लिए अलग से शैलियों को इकट्ठा करना आवश्यक है। तब चयनकर्ताओं को छूना जरूरी नहीं होगा और सीएसएस का आकार शायद ही बदलेगा।

इसके लिए, मैंने चुना:

1. आरटीएलसीएसएस - यह पुस्तकालय पोस्टक्स-आरटीएल के हुड के नीचे है।
2. webpack-rtl-plugin ExtractTextPlugin के माध्यम से निर्मित शैलियों के लिए एक टर्नकी समाधान है। हुड के तहत एक ही RTLCSS।

और उन्होंने RTL और LTR को अलग-अलग फाइलों में शुरू किया - styles.css और styles.rtl.css । अलग-अलग फ़ाइलों में कोडांतरण का एकमात्र माइनस यह है कि आप पहले वांछित फ़ाइल को डाउनलोड किए बिना फ्लाई पर डीआईआर को प्रतिस्थापित नहीं कर सकते।

RTLCSS आपको विशिष्ट नियमों के प्रसंस्करण को नियंत्रित करने के लिए निर्देशों का उपयोग करने की अनुमति देता है, उदाहरण के लिए:

 .foo { /*rtl:ignore*/ right: 0; } .bar { font-size:16px/*rtl:14px*/; } 

और क्या उपाय हैं?

सभी मौजूदा समाधान RTLCSS से लगभग अलग नहीं हैं।

• ट्विटर से सीएसएस-फ्लिप ;
• विकिमीडिया से cssjanus ;
• हां, और postcss-rtl onlyDirection पैरामीटर का समर्थन करता है, जिसके साथ आप केवल एक दिशा के लिए शैलियों को इकट्ठा कर सकते हैं, लेकिन आकार अभी भी बढ़ता है - उदाहरण के लिए, मोबाइल 2GIS के लिए यह 35% (24.5 kB / 29 kB) के बजाय 18% है।

निर्देशों की आवश्यकता कब होती है?

जब शैलियों को अभिविन्यास पर निर्भर नहीं होना चाहिए

उदाहरण के लिए, हवा की दिशा को इंगित करने वाले तीर के रोटेशन का कोण:

 .arrow._nw { /*rtl:ignore*/ transform: rotate(135deg); } 

या फ़ोन नंबर के लिए एक फीका - नंबर हमेशा बाएं से दाएं लिखे जाते हैं, जिसका अर्थ है कि ग्रेडिएंट हमेशा दाईं ओर होना चाहिए:

आइकन को कब केंद्रित करना है

यह पिछले पैराग्राफ का एक विशेष मामला है। यदि हम एसिमेट्रिक आइकन को इंडेंटेशन / पोजिशनिंग के माध्यम से केन्द्रित करते हैं, तो हम इसके ब्लॉक को साइड में शिफ्ट करते हैं, और यदि यह ऑफसेट को दर्शाता है, तो आइकन दूसरी तरफ "जाएगा":

ऐसी स्थितियों में svg में आइकन को केंद्र में रखना बेहतर है:

जब आपको संपूर्ण विजेट को अलग करने की आवश्यकता होती है जो RTL का जवाब नहीं देना चाहिए

हमारे मामले में, यह एक नक्शा है। ब्लॉक डायरेक्शंस में असेंबल करते समय हम इसकी सभी शैलियों को लपेटते हैं: /*rtl:begin:ignore*/ ... /*rtl:end:ignore*/ ।

क्या कोई और भी बेहतर विकल्प है?

नियमों को उलटने वाला हल ठीक काम करता है, लेकिन सवाल उठता है - क्या यह बैसाखी है? दिशा पर शैलियों की निर्भरता आधुनिक वेब के लिए एक प्राकृतिक कार्य है, और इसकी प्रासंगिकता हर साल बढ़ रही है। यह आधुनिक मानकों और दृष्टिकोणों में परिलक्षित होना चाहिए था। और पाया!

तार्किक गुण

विभिन्न झुकावों के लिए लेआउट को अनुकूलित करने के लिए, सीएसएस में तार्किक गुणों के लिए एक मानक है। यह न केवल बाएं से दाएं और बाएं से बाएं, बल्कि ऊपर से नीचे तक की दिशाओं की चिंता करता है, लेकिन हम इस पर विचार नहीं करेंगे।

हम पहले से ही फ्लेक्स और ग्रिड में कुछ इसी तरह का उपयोग करते हैं - उदाहरण के लिए, flex-start , flex-end , grid-row-start , grid-column-end लेफ्ट / राइट से अनटाइड grid-column-end ।

left , right , top और bottom की अवधारणाओं के बजाय bottom inline-start , inline-end , block-start और block-end का उपयोग करने का प्रस्ताव है। width और height बजाय - inline-size और block-size । और एबीसी शॉर्टकोड के बजाय - तार्किक एडीसीबी (तार्किक शॉर्टकोड वामावर्त)। इसके अलावा, मौजूदा शॉर्ट्स बाँधने के लिए, नए युग्मित संस्करण दिखाई देते हैं - padding-block , margin-inline , border-color-inline , आदि।

• left: 0 → inset-inline-start: 0
• padding-left: 4px → padding-inline-start: 4px
• margin: 0 16px 0 0 → margin: logical 0 0 0 16px
• padding-top: 8px; padding-bottom: 16px → padding-block: 8px 16px
• margin-left: 4px; margin-right: 8px → margin-inline: 4px 8px
• text-align: right → text-align: end

और स्थिति के लिए लंबे समय से प्रतीक्षित आशुलिपि प्रकट होती है:

• left: 4px; right: 8px → inset-inline: 4px 8px
• top: 8px; bottom: 16px → inset-block: 8px 16px
• top: 0; right: 2px; bottom: 2px; left: 0 → inset: logical 0 0 2px 2px

यह झंडे के बिना और फ्लैग-आधारित वेबकिट ब्राउज़र में फ़ायरफ़ॉक्स में पहले से ही उपलब्ध है।

पेशेवरों - समाधान मूल है, यह विधानसभा / प्लगइन्स के बिना काम करेगा, यदि आवश्यक ब्राउज़र समर्थित हैं। निर्देशों की कोई आवश्यकता नहीं है - inline-start बजाय केवल left लिखें, जब आप भौतिक "बाएं" का अर्थ करते हैं।

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

कैसे कनेक्ट करें?

सबसे आसान तरीका है पोस्ट-तार्किक । dir पैरामीटर के बिना, यह दोनों दिशाओं के लिए उसी तरह से शैलियों को इकट्ठा करता है जैसे कि पोस्टस्कॉर्स-आरटीएल, दिए गए dir पैरामीटर के साथ, केवल निर्दिष्ट दिशा के लिए:

 .banner { color: #222222; inset: logical 0 5px 10px; padding-inline: 20px 40px; resize: block; transition: color 200ms; } /* becomes */ .banner { color: #222222; top: 0; left: 5px; bottom: 10px; right: 5px; &:dir(ltr) { padding-left: 20px; padding-right: 40px; } &:dir(rtl) { padding-right: 20px; padding-left: 40px; } resize: vertical; transition: color 200ms; } /* or, when used with { dir: 'ltr' } */ .banner { color: #222222; top: 0; left: 5px; bottom: 10px; right: 5px; padding-left: 20px; padding-right: 40px; resize: vertical; transition: color 200ms; } 

बाएं के बजाय ऑफसेट-इन-स्टार्ट लिखना शुरू करने के लिए एक टीम को कैसे मनाएं?

कोई रास्ता नहीं। लेकिन हमने इसे सरल बनाने के लिए अपनी परियोजना पर फैसला किया - लिखना start: 0 ऑफ offset-inline-start: 0 ऑफ offset-inline-start: 0 start: 0 बजाय, जैसे ही सभी को इसकी आदत हो जाएगी, मैं एक वैध प्रविष्टि लागू करना शुरू कर दूंगा :)

RTL + CSS-in-JS = in <3

सीएसएस-इन-जेएस को पहले से इकट्ठा करने की आवश्यकता नहीं है। इसका मतलब यह है कि रनटाइम में घटकों की दिशा निर्धारित करना संभव है और यह चुनना है कि कौन से चालू करना है और कौन सा नहीं। उपयोगी है अगर आपको कुछ विजेट सम्मिलित करने की आवश्यकता है जो आरटीएल का समर्थन नहीं करता है।

सामान्य तौर पर, कार्य { paddingInlineStart: '4px' } (या { paddingLeft: '4px' } वस्तुओं को चालू करना है, यदि { paddingLeft: '4px' } वस्तुओं में तार्किक गुणों पर स्विच करना संभव नहीं था) / { paddingRight: '4px' } :

1. बीड़ी-सीएसएस-जेएस या आरटीएल-सीएसएस-जेएस के साथ आर्गिंग । वे एक फ़ंक्शन प्रदान करते हैं जो स्टाइल ऑब्जेक्ट लेता है और वांछित अभिविन्यास में बदल जाता है।
2. ???
3. लाभ!

प्रतिक्रिया उदाहरण

एक शैली में प्रत्येक स्टाइल घटक को लपेटें जो शैलियों को स्वीकार करता है:

 export default withStyles(styles)(Button); 

वह संदर्भ से घटक की दिशा लेता है और अंतिम शैलियों का चयन करता है:

 function withStyles(styles) { const { ltrStyles, rtlStyles } = bidi(styles); return function WithStyles(WrappedComponent) { ... render() { return <WrappedComponent {...this.props} styles={this.context.dir === 'rtl' ? rtlStyles : ltrStyles} />; }; }; ... }; } 

और प्रदाता संदर्भ पर ध्यान केंद्रित करता है:

 <DirectionProvider dir="rtl"> ... <Button /> ... 

Airbnb एक समान दृष्टिकोण का उपयोग करता है: https://github.com/airbnb/react-with-styles-interface-aphrodite#built-in-rtl-support , यदि एफ़्रोडाइट पहले से ही परियोजना पर उपयोग किया जाता है, तो आप इस तैयार समाधान का उपयोग कर सकते हैं।

JSS के लिए, यह अभी भी सरल है - आपको बस jss-rtl को सक्षम करने की आवश्यकता है:

 jss.use(rtl()); 

स्टाइल घटकों

 const Button = styled.button` background: #222; margin-left: 12px; `; 

क्या होगा अगर हम टेम्पलेट स्ट्रिंग्स के साथ काम करते हैं, और वस्तुओं के साथ नहीं? सब कुछ जटिल है, लेकिन एक समाधान है - संपत्ति का नाम props में निर्दिष्ट दिशा से गणना करें:

 const marginStart = props => props.theme.dir === "rtl" ? "margin-left" : "margin-right"; const Button = styled.button` background: #222; ${marginStart}: 12px; `; 

लेकिन लाइनों से ऑब्जेक्ट्स पर स्विच करना आसान लगता है, स्टाइल-कंपोनेंट्स संस्करण 3.3.0 के बाद से ऐसा करने में सक्षम हैं ।

अनुवाद और स्थानीयकरण की विशेषताएं

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

हम असली अरब दिखाते हैं, और ...

यह पता चला है कि हर अरबी बोलने वाला नहीं जानता कि ट्विटर क्या है। यह अंग्रेजी के लगभग सभी शब्दों पर लागू होता है। ऐसे मामले के लिए, एक अरबी लिप्यंतरण है: "تويتر"।

यह पता चला है कि अरबी में अल्पविराम हैं, और इस तथ्य को कि हम कोड में हर जगह "," के माध्यम से अवगत कराया गया था, अरबी में, हमें "،" के माध्यम से अवगत कराया जाना चाहिए।

यह पता चला है कि कुछ मुस्लिम देशों में आधिकारिक कैलेंडर इस्लामी है। यह चंद्र है और सामान्य अनुवाद सूत्र अपरिहार्य है।

यह पता चला है कि दुबई में कोई नकारात्मक तापमान नहीं है और +40 पूर्वानुमान में प्लस चिह्न का कोई मतलब नहीं है।

सिर्फ उठाया नहीं और शैलियों को प्रतिबिंबित किया

यदि हम ब्लॉक तत्व पर dir="auto" करते हैं और इसकी सामग्री LTR हो जाती है, तो पाठ कंटेनर के बाईं ओर से हरा देगा, भले ही वह RTL के आसपास हो। यह केवल text-align: right को स्पष्ट रूप से सेट करके ठीक किया जा सकता है text-align: right । आप इसे अरबी संस्करण में पूरे पृष्ठ पर भी लागू कर सकते हैं - इस संपत्ति का मूल्य विरासत में मिला है।

प्रतीक भी स्वचालित रूप से दर्पण नहीं करते हैं। और इसके बिना, दिशात्मक आइकन, जैसे कि गैलरी में तीर, गलत दिशा में देख सकते हैं। कल्पना कीजिए कि यह एकमात्र मामला है जिसमें सीमा के माध्यम से किए गए तीर खुद को सही ठहराते हैं!

एक साधारण परिवर्तन आइकन को प्रतिबिंबित करने में मदद करेगा:

 [dir="rtl"] .my-icon { transform: scaleX(-1); } 

सच है, यह मदद नहीं करेगा अगर आइकन में अक्षर या संख्याएं हों। फिर आपको दो अलग-अलग आइकन बनाने होंगे और उन्हें सशर्त रूप से पेस्ट करना होगा:

और फिर भी, यह पता चला है कि सभी इंटरफ़ेस तत्वों को प्रतिबिंबित करने की आवश्यकता नहीं है। उदाहरण के लिए, हमारे मामले में, हमने चेकबॉक्स को सामान्य छोड़ने का फैसला किया:

मुझे पता नहीं है कि पूरे इंटरफ़ेस से ऐसे तत्वों का चयन कैसे किया जाए। केवल एक देशी वक्ता ही यहां मदद कर सकता है, जो कहेगा कि उससे क्या परिचित है और क्या नहीं।

उपयोगकर्ता इनपुट

यहां तक ​​कि अगर हम अपने एप्लिकेशन के सभी डेटा को पूरी तरह से नियंत्रित करते हैं, तो यह उपयोगकर्ता इनपुट हो सकता है। उदाहरण के लिए, फ़ाइल का नाम। आप .js फ़ाइल को .png के रूप में भी शामिल कर सकते हैं और बाहर दे सकते हैं - इस तरह की भेद्यता टेलीग्राम में थी :

cool_picture * U + 202E * gnp.js → cool_picture sj.png

ऐसे मामलों में, यह स्ट्रिंग से अनुचित utf वर्णों को फ़िल्टर करने के लायक है।

फ़्लिपिंग स्क्रिप्ट

वाक्य-विन्यास RTL जावास्क्रिप्ट में थोड़ा बदल जाता है। इस तरह दिखने वाला लूप:

 for (let i = 0; i < arr.length; i++) { 

अब आपको इस तरह लिखने की आवश्यकता है:

 for (++i; length.arr > i; let 0 = i) { 

एक चुटकुला।

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

शीघ्र बुद्धि

कुछ स्थितियों में, सिस्टम के कुछ घटक में RTL समर्थन को लागू करना मुश्किल है। फिर आपको बाहर से आरटीएल के लिए इस घटक को अनुकूलित करने की कोशिश करने की आवश्यकता है, लेकिन एलटीआर को अंदर छोड़ दें।

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

आप transform: scaleX(-1) का उपयोग करके स्लाइडर को फ्लिप कर सकते हैं transform: scaleX(-1) । फिर आपको स्लाइडर के केंद्र के सापेक्ष माउस (क्लिक और ड्रग्स) के साथ काम को उल्टा करना होगा। बुरा विकल्प।

एक अन्य विकल्प है - अक्ष को दूसरी दिशा में घुमाने के लिए, केवल स्लाइडर से मूल्यों के हस्तांतरण और प्राप्ति को बदलते हुए। यदि यह एक रैखिक पैमाना है, तो मानों के सेट के बजाय [१०, १०००, १०००] हम सेट [एन -१०००, एन -१००, एन -१०] को स्थानांतरित करेंगे, और हैंडलर में हम इसे वापस बदल देंगे। सेट [10, 100, 1000] के बजाय, लघुगणकीय पैमाने के लिए, हम [1/1000, 1/100, 1/10/10) पास करते हैं:

 function flipSliderValues(values, scale, isRtl) { if (!isRtl) { return values; } if (scale === 'log') { // [A, B] --> [1/B, 1/A] return values.map(x => 1 / x).reverse(); } // [A, B] --> [MAX-B, MAX-A] return values.map(x => Number.MAX_SAFE_INTEGER - x).reverse(); }; 

यह कैसे स्लाइडर RTL का समर्थन करने के लिए शुरू किया, हालांकि वह खुद इसके बारे में नहीं जानता है।

कहानियों का संग्रह

कुछ IE9 के तहत टाइपसेटिंग के विपरीत, आपको RTL के तहत टाइपिंग को सत्यापित करने के लिए एक अलग ब्राउज़र चलाने की आवश्यकता नहीं है। तुम भी टाइप और LTR और RTL के लेआउट को एक साथ एक विंडो में देख सकते हैं। उदाहरण के लिए, आप स्टोरीबुक में एक डेकोरेटर बना सकते हैं, जो कहानी के दो संस्करणों को एक साथ प्रस्तुत करता है:

स्क्रीनशॉट से पता चलता है कि अलगाव text-overflow: ellipsis बिना text-overflow: ellipsis व्यवहार नहीं करता है जैसा कि हम चाहेंगे - इसे तुरंत ठीक करना बेहतर है।

लेआउट के दौरान तुरंत RTL का समर्थन करना बहुत आसान है क्योंकि बाद में पूरी परियोजना का परीक्षण करना संभव है।

अनसुलझी समस्याएं

सिद्धांत का ज्ञान बिल्कुल सभी समस्याओं को हल करने में मदद नहीं करता है। मैं एक उदाहरण दूंगा।

एक संकेत जो आपके लिखते ही पाठ की दिशा में प्रकट होता है। जब हम बहुभाषी इनपुट के बारे में बात करते हैं, तो हम पहले से नहीं जान सकते कि यह संकेत किस दिशा में दिखाया जाए:

आपको डिज़ाइन चरण में ऐसी समस्याओं से बचने की कोशिश करने की आवश्यकता है और कभी-कभी ऐसे समाधानों को छोड़ दें जो LTR के लिए स्पष्ट हैं और RTL में लागू नहीं हैं। इस स्थिति में, संकेतों को नेविगेट करते समय, आप पूरे पाठ को प्रतिस्थापित कर सकते हैं (उदाहरण के लिए, यांडेक्स या Google करता है)।

निष्कर्ष

RTL सिर्फ "सब कुछ बारी" नहीं है

भाषा की ख़ासियत को ध्यान में रखना आवश्यक है, आपको कुछ फ्लिप करने की आवश्यकता नहीं है, आपको कुछ और अनुकूलित करने की आवश्यकता है। तर्क में कहीं न कहीं "सही" / "बाएं" को छोड़ना आवश्यक है।

भाषा को जाने बिना कुछ करना बहुत मुश्किल है

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

अंतिम नुस्खा

एक सूची में उन सभी चीजों का वर्णन करना मुश्किल है जो दो लेखों में चर्चा की गई थीं। कोई वॉकथ्रू नहीं होगा, लेकिन यहां मुख्य बात यह है:

• एक देशी वक्ता खोजने के लिए सुनिश्चित करें और उसे जितनी जल्दी हो सके प्रोटोटाइप दिखाएं;
• विभिन्न फ़ाइलों में LTR और RTL के लिए शैलियों को इकट्ठा करें। इसके लिए, rtlcss और webpack-rtl-plugin उपयुक्त हैं;
• उन सभी चीज़ों के लिए अपवाद जोड़ें जिन्हें चालू करने की आवश्यकता नहीं है और यह स्पष्ट रूप से प्रतिबिंबित करता है कि जो स्वयं को चालू नहीं करता था;
• <bdi> और dir="auto" का उपयोग करके सभी मनमानी सामग्री को अलग करें;
• स्पष्ट रूप से पूरे पृष्ठ पर text-align ;
• जब आप शुरू और अंत का मतलब जेएस कोड में left / right बचें।

सबसे छोटे विवरणों पर सबसे अधिक समय बिताने के लिए तैयार रहें।

पहले से तैयार होना मुश्किल नहीं है

और उन लोगों के लिए कुछ सुझाव जो अभी तक साइट को RTL के अनुकूल नहीं बनाने जा रहे हैं, लेकिन एक स्ट्रॉ रखना चाहते हैं:

• अन्य उद्देश्यों के लिए direction संपत्ति का उपयोग न करें;
• बस मामले में, फिर भी सभी मनमानी सामग्री को अलग कर दें (और वास्तव में, यहां तक ​​कि अंग्रेजी इंटरफ़ेस में भी, उपयोगकर्ता अरबी में कुछ लिख सकते हैं और सब कुछ तोड़ सकते हैं);
• यदि संभव हो तो, तार्किक सीएसएस गुणों का उपयोग करें;
• न केवल विभिन्न ब्राउज़रों में लेआउट की जांच करें, बल्कि कभी-कभी आरटीएल में भी, कम से कम जिज्ञासा के लिए। स्टोरीबुक जैसे टूल का उपयोग करके आरटीएल के तहत लेआउट को बेहतर ढंग से नियंत्रित करना
• हार्डकोड भाषा निर्माणों की अनुमति न दें (उदाहरण के लिए, कॉमा द्वारा अलग किए गए तारों का संघनन), यदि संभव हो तो, विराम चिह्नों सहित सब कुछ कॉन्फ़िगर करें। यह न केवल RTL के लिए उपयोगी है - उदाहरण के लिए, ग्रीक में प्रश्न चिह्न "है?"।

इन नियमों में परेशानी नहीं होनी चाहिए। लेकिन अगर अचानक आरटीएल संस्करण लॉन्च करने की इच्छा आती है, तो यह जितना सस्ता हो सकता है, उससे कहीं अधिक सस्ता होगा।