आरटीएल समर्थन

1) सिद्धांत

1. आरटीएल पाठ का अनुवाद नहीं है, बल्कि सोच का प्रतिबिंब है। अक्ष, पठन क्रम, फ़ोकस क्रम, इशारों और नेविगेशन परिवर्तन.
2. बाएँ/दाएँ के बजाय तार्किक सीएसएस गुण। 'मार्जिन-इनलाइन-स्टार्ट', 'इनसेट-इनलाइन-एंड', 'बॉर्डर-स्टार्ट-स्टार्ट-त्रिज्या', आदि पर जाएँ.

3. विश्व स्तर पर दिशा चालू करें, स्थानीय रूप से एलटीआर टुकड़ों को अलग करें। संख्या, URL, कोड, ई-मेल और IBAN हमेशा बाएं से दाएं पढ़े जाते हैं।

4. दर्पण जो दिशा पर निर्भर करता है, अर्थ नहीं। "प्ले", "↗", "↙" और घड़ी/प्रक्रिया आइकन दर्पण नहीं हो सकते हैं।

5. टेस्ट छद्म-आरटीएल। बाहर निकलने से पहले 'dir = "rtl "/' दिशा: rtl 'and pseudo अनुवाद शामिल करें।

2) दिशा: 'dir' और बूलियन गुण

दस्तावेज ़/रूट पर विश्व स्तर पर:

html
<html lang="ar" dir="rtl"> … </html>

बूलियन गुण (बाएँ/दाएँ प्रतिस्थापन):

css
.card { padding-inline: 16px; margin-inline: 12px; }
.sidebar { inset-inline-start: 0; }
.button { border-start-start-radius: 12px; border-end-end-radius: 12px; }

दिशा चयनकर्ता:

css
:root:dir(rtl). breadcrumb { flex-direction: row-reverse; }
:root:dir(ltr). breadcrumb { flex-direction: row; }

उपयोक्ता सामग्री का स्थानीय स्वतः फोकस:

html
<p dir="auto">…</p>

3) बिडी और मिश्रित पाठ अलगाव

लैटिन/संख्याओं के साथ अरबी/हिब्रू का मिश्रण चरित्र क्रम को तोड़ ता है। BiDi अलगाव का उपयोग करें:

टैग्स: '' (दिशा को अलग करता है), ' (बल ओवरराइड)।

यूनिकोड टोकन:

'u u2066' LRI/' u u2067 'RLI - LTR/RTL अलगाव की शुरुआत,' w u2069 'PDI - अंत,
L200E 'LRM/' w u200F' RLM - शॉर्ट आवेषण के लिए सिंगल-बाइट टोकन।

खाता संख्या और मुद्रा के साथ उदाहरण वाक्यांश:

html
<span dir="rtl">
سحب <bdi dir="ltr">IBAN AE070331234567890123456</bdi> بمبلغ
<bdi dir="ltr">2,000. 00 UAH</bdi>
</span>

4) नेविगेशन, पदानुक्रम और लेआउट

ब्रेडक्रंब्स: दर्पण क्रम: " ""।

पैनल/मेनू: मुख्य नवबार - दाईं ओर; "बैक" बाईं ओर इंगित करता है (आरटीएल लाइन की शुरुआत के लिए)।

कार्ड/सूची: इनलाइन-स्टार्ट के लिए हेडर संरेखित करें; स्थिति प्रतीक - इनलाइन-एंड के लिए।

हिंडोला और स्वाइप्स: इनलाइन-स्टार्ट (आरटीएल में - दाईं ओर) की ओर स्क्रॉल करना। पृष्ठ संकेतक भी प्रतिबिंबित होते हैं।

Pagination: तीर "अगला" इनलाइन-स्टार्ट, "पिछला" - इनलाइन-एंड तक जाता है।

5) प्रतीक और चित्र

मिरर दिशात्मक प्रतीक: तीर, "आगे/पीछे", प्लेहेड, "विस्तार/पतन"।

दर्पण न करें: पाठ, रेखांकन, घंटे (यदि कोई वास्तविक समय तीर है), ब्रांड लोगो के प्रतीक।

तकनीकी रूप से:

css
.rtl-mirror { transform: scaleX(-1); transform-origin: center; }
html:dir(rtl). icon--arrow { transform: scaleX(-1); }

एसवीजी के लिए: 'ट्रांसफॉर्म-बॉक्स: व्यू-बॉक्स;' "तैरने" से बचने के लिए।

छवियों के अंदर पाठ से बचें → अलग परतों में स्थानीयकरण करें।

6) फॉर्म और इनपुट

सामग्री संरेखण: पाठ-संरेखित: प्रारंभ; 'पाठ क्षेत्र, संख्यात्मक/मात्रा/यूआरएल/ई-मेल - एलटीआर।

विशेषताएँ:

html
<input type="email" dir="ltr" inputmode="email" autocomplete="email">
<input type="number" dir="ltr" inputmode="numeric" pattern="[0-9]">
<input type="tel" dir="ltr" inputmode="tel" autocomplete="tel">

प्लेसहोल्डर/लेबल स्थानीयकृत हैं, लेकिन संख्या/कोड में कैरेट को बाएं से दाएं जाना चाहिए।

मास्क: कठोर रूप से "अवरोधन" कैरेट न करें; सम्मिलन और चयन का समर्थन करें।

सूची/रेडियो/चेकबॉक्स: नियंत्रण के दाईं ओर हस्ताक्षर, क्षेत्रों ≥ 44 × 44 px पर क्लिक करें।

min→max स्लाइडर्स: आरटीएल में, कम से कम दाहिने किनारे पर, बाईं ओर अधिकांश (या उलटा और एलटीआर संख्या के बिना एक पैमाने दिखाएं)।

7) संख्या, तिथि, मुद्राएँ

डिफ़ॉल्ट रूप से, अरबी स्थान अरबी-इंडो-गोले (٠١٢٣٤٥٦٧٨٩) का उपयोग करते हैं। समाधान - व्यापार नीति:

वित्तीय यूआई में, लैटिन संख्या (0-9) को अधिक बार इंटरऑपरेबिलिटी के लिए दिखाया जाता है, लेकिन प्रारूप (रिक्त स्थान/संकेत) स्थान है।

इस्तेमाल करें 'Intl। 'विथ टारगेट लोकेल:

js new Intl. NumberFormat('ar', { style:'currency', currency:'AED' }). format(2000);
new Intl. DateTimeFormat('he-IL', { dateStyle:'medium', timeStyle:'short' }). format(new Date());

सापेक्ष समय ('Intl। RelevTimeFormat '), दिशात्मक परिसीमन, और स्थानीय दिन/महीने संक्षिप्त।

8) टाइपोग्राफी और पढ़ ने की क्षम

अच्छे अरबी/हिब्रू अंगूर और लिगेचर (अरबी आकार देने) के साथ फोंट।

लाइन रिक्ति 1। 4–1. 6; संकीर्ण ट्रैकिंग से बचें।

अरबी के लिए, काशीदा (लंबे स्ट्रोक) को चौड़ाई में संरेखित करते समय अनुमति दी जाती है - ध्यान से चालू करें ('पाठ-औचित्य: अंतर-शब्द; '/इंजन समर्थन)।

अरबी रेखा के अंदर लैटिन इटैलिक को प्रतिबंधित करें (ऊर्ध्वाधर लय को खराब करता है)।

9) रेखांकन, तराजू और तालिकाएँ

X-axes दाएं से बाएं जाते हैं; किंवदंती इनलाइन-एंड के साथ संरेखित है।

तालिका स्तंभ: "प्राथमिक" स्तंभ (नाम/खेल) - सही; संख्या/मात्रा LTR रह सकती है और इनलाइन-एंड से गठबंधन किया जा सकता है।

"+/ −" संकेत और प्रतिशत - संख्या से पहले, एलटीआर अंक अलग-थलग हैं:

html
<bdi dir="ltr">+12. 5%</bdi>

10) A11y और स्क्रीन रीडर्स

सुनिश्चित करें कि 'लैंग = "" आर "/' लैंग = "वह" उजागर हुआ है: टीटीएस इंजन सही आवाज अभिनय का चयन करेगा।

ध्वनि गतिशील दिशा में सावधानीपूर्वक परिवर्तन - अनावश्यक रूप से टुकड़ों पर 'dir' स्विच न करें।

लाइव अपडेट ('आरिया-लाइव = "विनम्र") - दिशाओं को मिलाए बिना पाठ।

आइकन पाठ लेबल के बिना अर्थ व्यक्त नहीं करते हैं; 'आरिया-लेबल' का उपयोग करें।

11) iGaming की बारीकियां

11. 1 बेट कूपन (बेट्सलिप)

क्षेत्र क्रम: राशि → अनुपात → संभावित लाभ; सही हस्ताक्षर, एलटीआर नंबर/कारक।

गुणांक को धीरे से अपडेट करें; ऊपर/नीचे तीरों को प्रतिबिंबित करने की आवश्यकता नहीं है (मूल्य दिशा का अर्थ सार्वभौमिक है)।

11. 2 मैच/बाजार

इनलाइन-स्टार्ट (RTL में - दाईं ओर) के साथ लीग/घटनाओं की सूची संरेखित करें।

टाइमर और गिनती - टेबल अंकों के साथ LTR 'dir = "ltr" (' फॉन्ट-वेरिएंट-न्यूमेरिक: टैबुलर-nums; ').

11. 3 भुगतान/एसीसी

IBAN/BIC/फोन फ़ील्ड हमेशा LTR होते हैं।

बैंक नाम/पता - आरटीएल।

त्रुटियाँ/मान्यताएँ दाईं ओर मार्कर दिखाती हैं।

11. 4 टूर्नामेंट/लीडरबोर्ड

स्तंभ: स्थिति, उपनाम, चश्मा - दाईं ओर स्थिति; चश्मे को इनलाइन-एंड (एलटीआर अंक) से संरेखित करें।

12) विनिर्माण और परीक्षण

युवती में छद्म-आरटीएल:

css html. debug-rtl { direction: rtl; }

आरटीएल में स्वतः दर्पण प्रतीक (केवल दिशात्मक):

css html:dir(rtl). icon-dir { transform: scaleX(-1); }

ऑटोटेस्ट (विचारों का उदाहरण):

'dir = rtl' पर लेआउट स्नैपशॉट।
जाँचें कि क्या 'बाएँ/दाएँ' सीएसएस (लिंट) में अनुपस्थित है.
E2E: टैबिंग ऑर्डर, हिंडोला स्वाइप्स, स्लाइडर व्यवहार।
अरबी पाठ + LTR आवेषण (ई-मेल, योग) के साथ दृश्य परीक्षण।

13) डिजाइन प्रणाली टोकन (उदाहरण)

json
{
"direction": {
"supported": ["ltr", "rtl"],
"rtlLocales": ["ar", "he", "fa", "ur"]
},
"layout": {
"gap": { "sm": 8, "md": 12, "lg": 16 },
"useLogicalProps": true
},
"icons": {
"autoMirror": true,
"exclude": ["logo", "chart", "clock", "play"]
},
"forms": {
"numericDir": "ltr",
"minTap": 44
},
"a11y": { "contrastAA": true, "live": "polite" }
}

14) स्निपेट्स

अनुप्रयोग में दिशा बदलना (प्रतिक्रिया):

tsx import { useEffect } from "react";

export function useDirection(locale: string) {
useEffect(() => {
const lang = locale. split("-")[0];
const isRTL = ["ar", "he", "fa", "ur"].includes(lang);
const html = document. documentElement;
html. setAttribute("dir", isRTL? "rtl": "ltr");
html. setAttribute("lang", locale);
}, [locale]);
}

सूची/ब्रेडक्रंब सामंजस्य:

css
.breadcrumb { display:flex; gap:8px; }
html:dir(rtl). breadcrumb { flex-direction: row-reverse; }
.breadcrumb__sep { transform: scaleX(var(--dir,1)); }
html:dir(rtl). breadcrumb__sep { --dir: -1; }

एलटीआर टुकड़ों के रूप में संख्या और रकम:

html
<span>الربح المحتمل: <bdi dir="ltr">2,000. 00 UAH</bdi></span>

min→max आरटीएल के लिए स्लाइडर:

css html:dir(rtl) input[type="range"] { direction: rtl; }

15) एंटीपैटर्न

→ शैलियों में हार्ड 'बाएं/दाएं' आरटीएल को तोड़ ता है।

संख्या/IBAN/URL 'dir = "ltr" → "टूटा हुआ" caret और क्रम के बिना दर्ज करें.

मिररिंग लोगो/चार्ट/घंटे।

आइकन का एक ही सेट हमेशा दर्पण - अर्थ में अपवाद के बिना।

हिंडोला, पत्रक और पैगिनेशन उल्टे नहीं हैं।

BiDi अलगाव के बिना मिश्रित तार - "नृत्य" पात्र।

16) मेट्रिक्स

आरटीएल कवरेज: स्क्रीन का अनुपात जो एक आरटीएल समीक्षा से गुजरा है।

BiDi दोष/रिलीज़: मिश्रित पाठ बग की संख्या।

लीड टाइम (LTR बनाम RTL): 5-10% भिन्न नहीं होना चाहिए।

संख्या रूपों में इनपुट त्रुटि - गलत कैरेट/मास्क के साथ घटनाओं का प्रतिशत।

CLS/perf: 'dir' स्विच करने पर कोई लेआउट कूदता नहीं है।

17) क्यूए चेकलिस्ट

दिशा और लेआउट

RTL स्थानों के लिए ''; ': dir (rtl)' शैलियों को लागू किया जाता है।
'लेफ्ट/राइट' के बजाय बूलियन गुण।
नेविगेशन/bredkramby/carouls/pagination zerkalitsya सही ढंग से।

पाठ और BiDi

संख्या/मुद्राएँ/URL/ई-मेल - 'dir = "ltr" या' '।
मिश्रित तारों में कोई "उलटा" अक्षर नहीं।
'Intl के माध्यम से स्थानीयकृत तिथियां/मुद्राएँ। '.

प्रपत्र

सही लेबल; क्षेत्रों ≥ 44 × 44 px पर क्लिक करें।
फोन/IBAN/राशि - LTR कैरेट, सही मास्क।
स्लाइडर्स/चढ़ाव/उच्च उम्मीद के अनुसार व्यवहार करते हैं

प्रतीक/छवियाँ

केवल दिशात्मक प्रतिबिंबित हैं; अपवादों को पूरा किया जाता है।
स्थानीय संस्करणों के बिना तस्वीरों में कोई पाठ नहीं।

А11у/Performance

'लैंग' उजागर; एसआर सही ढंग से पढ़ ता है।
'dir' बदलते समय कोई अनावश्यक पुनर्वितरण नहीं।
कंट्रास्ट/फोकस रिंग एए के अनुरूप हैं।

18) डिजाइन प्रणाली में प्रलेखन

दिशा और BiDi अनुभाग: प्रतिबिंब नीति, प्रतीक के लिए अपवादों की सूची।

आरटीएल टोकन का एक सेट और एक शैली लिंटर ('बाएं/दाएं' निषेध)।

डू/डोंट गैलरी: हिंडोला, ब्रेडक्रैम्ब्स, नंबर फॉर्म, स्लाइडर्स, रेखांकन।

छद्म-आरटीएल स्क्रिप्ट और समीक्षा चेकलिस्ट।

संक्षिप्त सारांश

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

आरटीएल समर्थन

पाठ और BiDi

प्रपत्र

प्रतीक/छवियाँ

А11у/Performance

संक्षिप्त सारांश

हमसे संपर्क करें

त्वरित संपर्क

वीडियो जल्द ही अपडेट किया जाएगा

हम इस समय परियोजनाओं में बहुत व्यस्त हैं