🎦 👨🏾 📵 RTL स्टाइलिंग 101 - CSS RTL स्टाइलिंग के लिए एक विस्तृत गाइड 👩🏽‍🤝‍👨🏻 ◽️ ☹️

" RTL स्टाइलिंग 101 का अनुवाद - अहमद शदीद द्वारा सीएसएस में स्टाइल के लिए एक व्यापक गाइड "।

दुनिया भर में 292 मिलियन से अधिक लोग अरबी को अपनी मातृभाषा के रूप में बोलते हैं। मैं उनसे संबंधित हूं, इसलिए कभी-कभी मैं उन साइटों को विकसित करता हूं जो पाठ लिखने की दोनों दिशाओं का समर्थन करना चाहिए: बाएं से दाएं (LTR - बाएं से दाएं) और दाएं से बाएं (दाएं से बाएं)।

आरटीएल स्टाइलिंग का परिचय

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

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

<html dir="rtl">...</html>

जब डीआईआर मान बदल जाता है, तो सभी नेस्टेड तत्वों को स्वचालित रूप से अगला स्विच करना चाहिए: हेडिंग, पैराग्राफ, लिंक, इमेज और फॉर्म।

यह भी ध्यान देने योग्य है कि डीआईआर विशेषता को "ऑटो" पर सेट किया जा सकता है, जो स्वचालित रूप से अपनी सामग्री के विश्लेषण के आधार पर तत्व के लिए दिशा बदल देगा। HTML विनिर्देश के अनुसार:

लेखक इस मूल्य को केवल एक अंतिम उपाय के रूप में उपयोग करने का आग्रह करते हैं, जब पाठ की दिशा वास्तव में अज्ञात है और सर्वर साइड पर इसे प्रभावी ढंग से निर्धारित करने का कोई तरीका नहीं है।

HTML तत्व के लिए dir = rtl विशेषता सेट करने के अलावा, हम एक सीएसएस शैली के रूप में दिशा: rtl भी जोड़ सकते हैं।

 .element { direction: rtl; }

हालांकि, CSSWG (CSS वर्किंग ग्रुप) HTML रूट एलिमेंट के लिए बिल्कुल एक दिशा के रूप में दिशा को परिभाषित करने की सिफारिश करता है ताकि यह सुनिश्चित हो सके कि सीएसएस मौजूद है या नहीं, मार्कअप सही है।

अंकन की दिशा बदलने का उदाहरण

आइए बेहतर तरीके से यह समझने के लिए एक और विस्तृत उदाहरण देखें कि एलटीआर से आरटीएल तक अंकन दिशा कैसे बदलें।

 <article class="media"> <img class="media__photo" src="blueberry-cheesecake.jpg" alt=""> <div class="media__content"> <h2>Blueberry Cheesecake</h2> <p>...</p> <p><a href="#" class="link">View Recipe</a></p> </div> </article>

प्रारंभ में, मैंने एलटीआर मार्कअप में छवि को बाएं-औचित्य के लिए अच्छे पुराने फ्लोट का उपयोग किया और निश्चित रूप से, क्लियरफिक्स लागू किया।

 .media:after { content: ""; display: block; clear: both; } .media img { float: left; width: 200px; margin-right: 16px; }

फिर हम अरबी पाठ वाले तत्व के लिए dir = "rtl" जोड़ते हैं। निम्न परिणाम प्राप्त होता है:

छवि को छोड़कर सभी तत्व दाईं ओर संरेखित हैं। यह इसलिए हुआ क्योंकि छवि संपत्ति फ्लोट करने के लिए सेट की गई थी: बाएं और मार्जिन-दाएं: 16 पीएक्स। इसे ठीक करने के लिए, निम्नलिखित शैलियों को ओवरराइड करें

 .media[dir="rtl"] img { float: right; margin-right: 0; margin-left: 16px; }

एलटीआर लेआउट में अंग्रेजी और अरबी सामग्री

यदि कुछ पाठ में अंग्रेजी और अरबी शब्दों का मिश्रण है, और मार्कअप एलटीआर की दिशा में है तो क्या होगा? परिणाम अजीब है

ब्राउज़र सही ढंग से शीर्षक प्रदर्शित नहीं करेगा। अरबी बोलने वाले भ्रमित होंगे। इस शीर्षक के शब्द नीचे की छवि में दिखाए गए क्रम में होने चाहिए। बस सही पर शुरू हो रहा है।

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

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

जब तत्व के लिए dir = "rtl" विशेषता सेट की जाती है, तो शीर्षक सही हो जाता है। यही है, वाक्य व्याकरणिक रूप से सही दिखता है, और शब्द सही क्रम में व्यवस्थित होते हैं।

flexbox

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

मोज़िला डेवलपर नेटवर्क (MDN) के अनुसार, क्षैतिज-tb मान का अर्थ निम्न है:

सामग्री को क्षैतिज रूप से बाएं से दाएं, ऊपर से नीचे तक लंबवत रूप से स्थित किया जाता है। अगली क्षैतिज रेखा पिछले एक के नीचे है।

जब पृष्ठ दिशा RTL में बदल जाती है, तो flexbox उचित रूप से इसके तत्वों के प्रवाह को बढ़ाता है। यह बहुत बड़ा फायदा है! नीचे दी गई छवि दिखाती है कि फ्लेक्सबॉक्स अक्ष कैसे घूमता है, यह दिशा संपत्ति के मूल्य पर निर्भर करता है।

नीचे दिए गए उदाहरण में, मैंने तीन तत्व बनाए और उन्हें पृष्ठ दिशा बदलते समय अंतर दिखाने के लिए गिने।

 <div class="element"> <div class="item"^_^gt lt^_^/div> <div class="item"^_^gt lt^_^/div> <div class="item"^_^gt lt^_^/div> </div>

 .element { display: flex; flex-direction: row; /* Default value, added for clarity */ }

सीएसएस ग्रिड

फ्लेक्सबॉक्स की तरह, सीएसएस ग्रिड दस्तावेज़ के लेखन मोड पर निर्भर करता है, जो हमें फ्लेक्सबॉक्स का उपयोग करते समय समान लाभ देता है।

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

 <div class="element"> <div class="side">Side</div> <div class="main">Main</div> </div>

 .element { display: grid; grid-template-columns: 220px 1fr; grid-gap: 1rem; }

RTL दिशा में स्विच करते समय मुख्य गलतियाँ

गैर-अरबी डेवलपर्स सामान्य गलतियां करते हैं जो देशी वक्ताओं को तुरंत स्पष्ट करते हैं।

1. पत्र रिक्ति

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

हालाँकि, यदि आप उसी अक्षर को अरबी पाठ में जोड़ते हैं, तो यह बहुत ही अजीब लगेगा। निम्नलिखित वास्तविक जीवन के उदाहरण पर विचार करें।

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

2. पाठ पारदर्शिता

वेबसाइट डिजाइन में, पाठ को अक्सर पारभासी बनाया जाता है। उदाहरण के लिए, इसके माध्यमिक महत्व को चिह्नित करने के लिए। यह अंग्रेजी के लिए काम करता है। हालाँकि, यदि सामग्री अरबी में है, तो पाठ के अजीब तरीके के कारण एक समस्या उत्पन्न हो सकती है।

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

3. विभिन्न भाषाओं में शब्द आकार में अंतर

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

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

आपको आश्चर्य हो सकता है कि मैं विभिन्न भाषाओं में शब्दों के आकार में अंतर के बारे में क्यों बात कर रहा हूं, क्योंकि यह सामान्य और अपेक्षित है। निम्नलिखित वास्तविक दुनिया लिंक्डइन उदाहरण पर विचार करें।

"डन" बटन का अनुवाद अरबी में "تم" के रूप में किया जाता है, यही कारण है कि यह काफी छोटा हो जाता है और आम तौर पर अजीब लगता है। विशेष रूप से ऐसे मामलों के लिए, बटन के लिए न्यूनतम-चौड़ाई की संपत्ति निर्धारित करना बेहतर होगा। मैंने इसे डेवलपर पैनल के माध्यम से जोड़ा कि यह कैसे दिखना चाहिए:

यहाँ ट्विटर से एक बहुत ही समान उदाहरण है:

कृपया ध्यान दें कि लिंक्डइन और ट्विटर के साथ उपरोक्त समस्याओं को लेखन के समय (13 दिसंबर, 2019) खोजा गया था।

4. पाठ ट्रंकेशन

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

अंग्रेजी पाठ के लिए ट्रंकेशन गलत है। यह तत्व के अंत में होना चाहिए, शुरुआत में नहीं। इस समस्या को हल करने के लिए, आपको इस तत्व के लिए dir = "auto" विशेषता सेट करने की आवश्यकता है, और फिर ब्राउज़र स्वचालित रूप से सामग्री का विश्लेषण करेगा और यह तय करेगा कि आवेदन करने के लिए क्या dir मान है।

 <p dir="auto">أهلاً وسهلاً بكم في المقال الذي يتحدث عن تصميم صفحات الويب للغة العربية</p> <p dir="auto">Welcome to the article that explains how to design for RTL pages.</p>

5. खराब RTL फ़ॉन्ट चुनना

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

अरबी-भाषी दृष्टिकोण से, "تيريد" शब्द कई कारणों से पढ़ना मुश्किल है:

बहुत अच्छा फ़ॉन्ट नहीं
मोटापा पठनीयता को बाधित करता है
शब्द के डॉट्स बहुत छोटे हैं और अक्षरों के बहुत करीब हैं

मैंने कुछ उदाहरण दिए जो बहुत स्पष्ट हैं:

6. हिंदी और अरबी संख्याओं का मिश्रण

अरबी में, संख्याएँ लिखने के दो तरीके हैं:

हिंदी: ٢: ٢ ٢ ١ ٢ ٢ ٢ ٢
अरबी: 0 1 2 3 4 5 6 7 8 9

अंग्रेजी में प्रयुक्त अंक अरबी से विरासत में मिले हैं: "0, 1, 2, 3, 4, 5, 6, 7, 8, 9"। संख्या वाले पाठ को केवल दो विकल्पों में से एक से मेल खाना चाहिए: हिंदी या अरबी।

विकिपीडिया के अनुसार:
यूरोप और अमेरिका में संख्याओं को "अरबी" कहा जाता है, क्योंकि वे 10 वीं शताब्दी में उत्तरी अफ्रीका के अरबी भाषी लोगों द्वारा यूरोप में पेश किए गए थे।

निम्नलिखित उदाहरण में हिंदी और अरबी संख्याओं का मिश्रण है। यह दृष्टिकोण असंगत लगता है और इसके बजाय एक एकल शैली का उपयोग किया जाना चाहिए।

क्षण जो RTL के साथ काम नहीं कर सकते

1. लाइन ऊंचाई (लाइन-ऊंचाई)

आमतौर पर, RTL मार्कअप के लिए एक अलग फ़ॉन्ट सेट किया जाता है। इस मामले में, जांचें कि सामग्री एक या अधिक लाइनों पर कैसे दिखती है। निम्नलिखित उदाहरण में, अंग्रेजी की तुलना में अरबी पाठ के लिए लाइनों के बीच कम जगह है, भले ही उनके पास लाइन-ऊंचाई संपत्ति के लिए समान मूल्य हो।

इस पर विचार करना महत्वपूर्ण है और अरबी पाठ के लिए लाइन-ऊंचाई के लिए सही मान सेट करें।

उदाहरण के लिए, ट्विटर में फसली सामग्री वाला एक बटन है। सिर्फ गलत लाइन-हाइट वैल्यू की वजह से।

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

2. रेखांकित लिंक

अरबी शब्दों के साथ, सीएसएस से लिंक की मानक रूपरेखा खराब दिखती है। यह अरबी में शब्दों और अक्षरों को लिखने की ख़ासियत के कारण है और निम्नलिखित छवि में दिखाया गया है:

मैंने समस्या क्षेत्रों को एक लाल वृत्त के साथ चिह्नित किया। अक्षरों के बिंदुओं को रेखांकित करता है। यहाँ एक क्लोज़-अप है:

लाल रेखा के साथ चिह्नित अंक एक रेखांकन के साथ ओवरलैप करते हैं, जिससे पढ़ना मुश्किल हो जाता है। इसका समाधान सीएसएस के साथ अंडरलाइन को अनुकूलित करना है।

2.1। टाइपोग्राफी (पाठ-सजावट)

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

 .link-2 { text-decoration-color: rgba(21, 132, 196, 0.2); text-decoration-style: normal; text-underline-offset: 4px; text-decoration-thickness: 2px; }

2.2 छाया (बॉक्स-छाया)

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

 .link-3 { color: #000; text-decoration-color: rgba(21, 132, 196, 0.2); text-decoration-style: normal; text-underline-offset: 4px; text-decoration-thickness: 2px; box-shadow: inset 0 -5px 0 0 rgba(#1584c4, 0.2); } @supports (text-decoration-color: red){ .link-3 { box-shadow: none; } }

3. लाइन ब्रेक

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

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

4. संकेतन

अंग्रेजी में, संक्षिप्ताक्षर अक्सर उपयोग किए जाते हैं, उदाहरण के लिए, सप्ताह के दिनों के लिए। इस प्रकार, "शनिवार" "सत" बन जाता है।

अरबी में, यह सिद्धांत में संभव नहीं है, क्योंकि शब्द के अक्षरों को जुड़ा होना चाहिए।

द्विदिश चिह्न

LTR और RTL लेआउट के बीच स्विच करने पर सिमेट्रिक आइकन्स को फ़्लिप करने की ज़रूरत नहीं है। यहाँ कुछ उदाहरण हैं:

उसी समय, कुछ आइकन के लिए साइट के आरटीएल संस्करण में दिशा बदलना महत्वपूर्ण है ताकि उन्हें उपयोगकर्ता द्वारा सही ढंग से समझा जा सके।

फ्लिपिंग आइटम

कुछ घटकों पर काम करते समय, मुझे उन्हें जल्दी से फ्लिप करने का एक तरीका चाहिए। स्केच में, मैं घटक की प्रतिलिपि बनाता हूं और इसे उपयुक्त कमांड के साथ फ्लिप करता हूं। Adobe XD और Figma में समान कार्यक्षमता उपलब्ध है।

यह देखने के लिए कि मेरा क्या मतलब है, यहां एक एनीमेशन प्रदर्शित किया गया है जो मैं घटक को फ़्लिप करने के बाद करता हूं।

RTL के लिए डिज़ाइन सुविधाएँ

इस खंड में, मैं सबसे सामान्य घटकों की जांच करूँगा और दिखाऊंगा कि उन्हें आरटीएल मोड में कैसे दिखना चाहिए।

बटन आइकॉन

ऐसी परिस्थितियां होती हैं जब बटन में एक आइकन होता है जो अतिरिक्त कार्यों का एक मेनू खोलता है। इस स्थिति में, आइकन का स्थान RTL लेआउट में उलट होना चाहिए।

इनपुट फ़ील्ड

कुछ फॉर्म इनपुट फ़ील्ड्स को RTL मोड में भी संरेखित रहना चाहिए। उदाहरण के लिए, इनपुट फ़ील्ड ईमेल या फ़ोन नंबर।

रोटी के टुकड़े

ब्रेडक्रंब में वर्गों के बीच के तीर को भी घुमाया जाना चाहिए।

पृष्ठ का शीर्षक

पृष्ठ शीर्ष लेख घटक में प्रारंभ और अंत भाग होते हैं। दोनों को RTL में घुमाया जाना चाहिए

टेबल

टेबल्स को भी घुमाया जाना चाहिए।

बुकमार्क

यदि आइकन LTR मोड में बुकमार्क में नाम के बाईं ओर है, तो इस घटक को RTL में विस्तारित करने की आवश्यकता है।

कार्ड

क्षैतिज कार्ड के लिए, छवि और पाठ को RTL में स्वैप करना होगा

पॉप-अप सूचनाएं

जैसा कि आप उम्मीद कर सकते हैं, "बंद" और "चेतावनी" आइकन को स्वैप किया जाना चाहिए

सीएसएस बूलियन गुण

एमडीएन के अनुसार:
तार्किक गुण और मूल्य CSS एक ऐसा मॉड्यूल है जो तार्किक गुणों और मूल्यों का प्रतिनिधित्व करता है जो भौतिक दिशाओं और आयामों के बजाय तार्किक का उपयोग करके लेआउट को नियंत्रित करने की क्षमता प्रदान करता है।

एक सरल उदाहरण लेते हैं। मान लें कि हमें पाठ की एक पंक्ति को दाईं ओर संरेखित करने की आवश्यकता है। निम्नलिखित जोड़ें:

 .page-header { text-align: right; }

और RTL के लिए:

 [dir="rtl"] .nav-item { text-align: left; }

क्या होगा यदि पाठ-संरेखित संपत्ति के लिए केवल एक मान जोड़ने का कोई तरीका है, जो पृष्ठ की दिशा को देखते हुए संरेखण पक्ष को बदल देगा? CSS के तार्किक गुण बचाव में आते हैं!

 .page-header { text-align: end; }

इसका उपयोग करते समय, टेक्स्ट-संरेखित संपत्ति द्वारा निर्दिष्ट पक्ष पृष्ठ की दिशा पर आधारित होगा। डेमो

शुरू और अंत के बीच अंतर को देखना आसान बनाने के लिए, मैंने नीचे का चित्र तैयार किया। स्टार्ट वैल्यू LRT में लेफ्ट वैल्यू और RTL में राइट वैल्यू के बराबर है। अंत के साथ भी, बस विपरीत।

अब जब आपको यह पता लग गया है कि यह कैसे काम करता है, तो आइए CSS के तार्किक गुणों को लागू करने के लिए अतिरिक्त उदाहरण और तरीके देखें।

तार्किक पैडिंग

मान लीजिए हमारे पास दाईं ओर एक खोज आइकन वाला एक इनपुट फ़ील्ड है। हमें दोनों तरफ पैडिंग सेट करनी होगी। पाठ पर आइकन ओवरले करने से बचने के लिए दाईं ओर की गद्दी थोड़ी बड़ी होगी।

 .input--search { padding-inline-start: 1rem; padding-inline-end: 2.5rem; }

तार्किक मार्जिन

आइकन के दाईं ओर मार्जिन तार्किक होना चाहिए, इसलिए हम इसके लिए मार्जिन-इनलाइन-एंड का उपयोग करते हैं।

 .page-header__avatar { margin-inline-end: 1rem; }

तार्किक फ्रेम (सीमा)

अक्सर एक फ़्रेम सक्रिय नेविगेशन तत्व को इंगित करने के लिए उपयोग किया जाता है। ऊपर के उदाहरण में, प्रत्येक तत्व के बाईं ओर एक फ्रेम सेट किया गया है। तार्किक गुणों का उपयोग करके इसे कैसे लागू किया जाए?

 .nav__item { border-inline-start: 3px solid transparent; } .nav__item.is-active { border-color: #1e9ada; }

कोनों की तार्किक गोलाई (सीमा-त्रिज्या)

ऊपर की छवि में, नेविगेशन तत्व की पृष्ठभूमि केवल ऊपरी दाएं और बाएं कोनों के लिए गोल है। इसे तार्किक गुणों का उपयोग करके लागू किया जा सकता है:

 .nav__item { border-start-end-radius: 30px; border-end-end-radius: 30px; background-color: transparent; } .nav__item.is-active { background-color: #ecf6fb; }

धोखा पत्र तार्किक गुण

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

https://codepen.io/shadeed/pen/2981e62691e67452d9f282a5351d7c79

इसके अलावा, एड्रियन ने एक डेमो बनाया जो तार्किक और दिशात्मक गुणों के बीच अंतर को समझना आसान बनाता है।

ब्राउज़र का समर्थन

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

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

 .input--search { padding-left: 1rem; padding-right: 2.5rem; padding-inline-start: 1rem; padding-inline-end: 2.5rem; }

इसके अलावा, आप पोस्टसीएसएस लॉजिकल प्लगइन का उपयोग कर सकते हैं, जो प्रत्येक प्रयुक्त तार्किक संपत्ति के लिए एक कमबैक जोड़ता है।

सीएसएस नामकरण सम्मेलनों

सीएसएस वर्गों के नाम देने से बचें जो उनके तत्वों से जुड़े हैं। उन नामों का उपयोग करें जिन्हें पुन: प्रयोज्य घटकों में निकाला जा सकता है। निम्नलिखित उदाहरण पर विचार करें:

 <div class="c-section"> <p><a href="#" class="see-link">See more</a></p> </div> <div class="c-section"> <p><a href="#" class="see-link">Learn more</a></p> </div>

लिंक दोनों ब्लॉकों में समान हैं, लेकिन उनके नाम अलग हैं। दूसरे ब्लॉक में, सी-लिंक क्लास का कोई मतलब नहीं है। एक अच्छा नाम सी-लिंक हो सकता है। उपसर्ग c– को घटकों के लिए प्रतिस्थापित किया जाता है; मैंने इस विधि को ITCSS ढांचे से अपनाया है।

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

तत्वों के नाम जैसे .c-page-header__left और .c-page-header__right देने के बजाय, मैं उन्हें .c-page-header__start और .c-page-header__end कहता हूं। यह अधिक भविष्य-उन्मुख है और इसका मतलब यह नहीं है कि साइट केवल LTR या RTL मोड में बनाई गई है।

स्वचालन उपकरण

LTR और RTL मार्कअप के साथ काम करना आसान बनाने के लिए बढ़िया उपकरण हैं।

1. द्वि-ऐप-सास

अनस नाकवा की द्वि-ऐप-सास आपको शैलियों के एक संस्करण को लिखने की अनुमति देती है जो दो अलग-अलग शैलियों में संकलित होती है: एक एलआरटी के लिए और एक आरटीएल मार्कअप के लिए।

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

 .elem { display: flex; @include margin-left(10px); @include border-right(2px solid #000); }

परिणामस्वरूप सीएसएस कोड निम्नानुसार हो सकता है।

App-ltr.css फ़ाइल:

 .elem { display: flex; margin-left: 10px; border-right: 2px solid #000; }

App-rtl.css फ़ाइल:

 .elem { display: flex; margin-right: 10px; border-left: 2px solid #000; }

हालांकि, ध्यान दें कि गिटहब पर भंडार के लिए अंतिम प्रतिबद्ध चार साल पहले (नवंबर 2015) था।

2. आरटीएलसीएसएस

RTLCSS मोहम्मद जोनास द्वारा RTL में लीटर स्टाइलशीट परिवर्तित करने के लिए एक रूपरेखा है।

इस उपकरण के बीच अंतर यह है कि यह सीएसएस फ़ाइल के पहले से ही इकट्ठे संस्करण पर लागू होता है। उदाहरण के लिए, यदि आपके पास अपनी परियोजना में 50+ Sass घटक हैं, तो RTLCSS संकलित CSS फ़ाइल को पार्स करने और उसमें से RTL संस्करण बनाने के लिए उपयोगी है।

व्यावहारिक उदाहरण

साइट हेडर

मैंने विशेष रूप से यह दिखाने के लिए एक लेआउट बनाया कि मैं मार्कअप के आरटीएल संस्करण को लागू करने के लिए किस दृष्टिकोण का उपयोग कर रहा हूं।

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

 .header__main, .header__sub { display: flex; justify-content: space-between; }

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

अगला बिंदु लोगो और नेविगेशन के बीच विभाजन रेखा है। पहले मैंने सीमा-अधिकार का उपयोग करने के बारे में सोचा। यह काम करता है, लेकिन सही नहीं है। छद्म तत्व का उपयोग करना बेहतर है, क्योंकि यह पृष्ठ की दिशा के बाद प्रकट होगा।

 .c-brand:after { content: ""; display: inline-block; vertical-align: middle; width: 3px; height: 38px; border-radius: 5px; background: #e4e4e4; margin-inline-start: 1.25rem; }

यहां वर्तमान परिणाम है:

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

पहली नज़र में यह सरल लग सकता है, लेकिन वास्तव में इसे कई पैडिंग और मार्जिन गुणों को निर्दिष्ट करने की आवश्यकता होती है। यहाँ एक लेआउट यह प्रदर्शित करता है:

 .topics-heading { margin-inline-end: 1.5rem; } .topics-list { margin-inline-end: 1rem; } .c-topic { padding-inline-start: 0.5rem; } .c-topic:not(:last-child) { margin-inline-end: 10px; } .c-topic__counter { margin-inline-start: 1rem; }

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

अगला चरण "सभी देखें" लिंक है। अंत में तीर पर ध्यान दें। उसके पास निम्न व्यवहार होना चाहिए:

जब मँडरा, तीर का रंग बदलना चाहिए
जब मँडरा, एनीमेशन तीर पर लागू किया जाना चाहिए

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

 .c-link svg { margin-inline-start: 4px; transition: 0.15s ease-in; } .c-link:hover svg { margin-inline-start: 8px; }

हालाँकि, मार्जिन को एनिमेट करना प्रदर्शन को अच्छी तरह से प्रभावित नहीं करता है, फिर भी यह काम करता है। एक अन्य समाधान पृष्ठ की दिशा निर्धारित करना और इंगित करना है, इसके आधार पर ऑफसेट के लिए संबंधित दिशा

 .c-link:hover svg { transform: translateX(6px); } /* I'm using dir=rtl in the header for the purpose of clarity. It should be added to the root element. */ .c-header[dir="rtl"] .c-link svg { transform: scaleX(-1); } .c-header[dir="rtl"] .c-link:hover svg { transform: scaleX(-1) translateX(6px); }

ध्यान दें कि RTL पृष्ठ दिशा के लिए, मैंने क्षैतिज रूप से आइकन का विस्तार करने के लिए स्केलएक्स (-1) को जोड़ा। आप रोटेट (180deg) का भी उपयोग कर सकते हैं, लेकिन स्केलिंग विकल्प मुझे सरल लगता है।

इसके बाद सर्च फील्ड आता है। आवश्यकताएं इस प्रकार हैं:

खोज आइकन फ़ील्ड के अंत में दिखाई देना चाहिए।
खोज आइकन का स्थान गतिशील होना चाहिए

 .c-input--search { background-image: url("data:image/svg+xml..."); background-position: right 6px center; } .c-header[dir="rtl"] .c-input--search { /* We replace the original icon with a flipped one. */ background-image: url("data:image/svg+xml..."); background-position: right 6px center; }

इसके अलावा, जब उपयोगकर्ता इस क्षेत्र में पाठ टाइप करता है, तो पाठ को आइकन को ओवरलैप नहीं करना चाहिए। इससे बचने के लिए, मैदान के दोनों किनारों पर पैडिंग लगाएं।

परिणाम LTR और RTL मोड के लिए निम्न मार्कअप है:

अगला मोबाइल मेनू है। इसे नामित करने के लिए, मैं एक हैमबर्गर आइकन का उपयोग करूंगा। दिशा (LTR या RTL) के आधार पर आइकन का स्थान बदल जाएगा। वही विस्थापन एनीमेशन की दिशा के लिए जाता है।

आप CodePen पर डेमो देख सकते हैं

धन्यवाद

मेरी पत्नी खलौद को उनके निरंतर सहयोग और मैनुअल पढ़ने के लिए विशेष धन्यवाद । Adebiyi Adedotun Lukman और asime Vidas को उनकी अद्भुत प्रतिक्रिया के लिए भी धन्यवाद ।

RTL स्टाइलिंग 101 - CSS RTL स्टाइलिंग के लिए एक विस्तृत गाइड