अरबी इंटरफ़ेस की RTL टेस्टिंग

RTL टेस्टिंग यह जाँचती है कि इंटरफ़ेस अरबी जैसी दाएँ-से-बाएँ लिखी जाने वाली लिपियों के लिए काम करता है: लेआउट वहाँ mirror होता है जहाँ होना चाहिए और वहाँ स्थिर रहता है जहाँ नहीं, मिला-जुला अरबी और अंग्रेज़ी टेक्स्ट सही क्रम में दिखता है, अरबी अक्षर जुड़ते हैं और साफ़ रेंडर होते हैं, और फ़ॉर्म, screen reader और कीबोर्ड focus mirrored लेआउट में ठीक व्यवहार करते हैं। यह लोकलाइज़ेशन टेस्टिंग का वह हिस्सा है जहाँ सबसे ज़्यादा दिखने वाले डिफ़ेक्ट रहते हैं — और जहाँ अरबी न पढ़ने वाली टीम भी उनमें से ज़्यादातर खोज सकती है।

यह गाइड वेब और मोबाइल इंटरफ़ेस के लिए एक व्यावहारिक प्रक्रिया है, जिसमें वह markup और CSS है जिसे टेस्टर को पहचानना चाहिए, एक चेकलिस्ट, ऑटोमेशन उदाहरण और बग टाइटल के रूप में लिखे डिफ़ेक्ट उदाहरण। व्यापक विषय — अनुवाद गुणवत्ता, कैलेंडर, संख्या और मुद्रा फ़ॉर्मेट, encoding — लोकलाइज़ेशन टेस्टिंग गाइड में हैं।

dir और lang से शुरू करें

हर RTL पेज के root element पर दो एट्रिब्यूट चाहिए: lang, जो भाषा घोषित करता है (ar या ar-SA), और dir="rtl", जो base direction सेट करता है। W3C की internationalization गाइडेंस है कि दिशा markup में dir एट्रिब्यूट से सेट करें, सिर्फ़ CSS की direction property से नहीं, क्योंकि दिशा कंटेंट के अर्थ का हिस्सा है और उसे तब भी बचे रहना चाहिए जब styles न हों, कंटेंट कॉपी हो, या assistive technology उसे पढ़े। यही HTML ईमेल और PDF बनाने वाले टेम्पलेट पर भी लागू होता है।

lang एट्रिब्यूट भाषा दर्ज करने से ज़्यादा करता है: यह screen reader को अरबी आवाज़ चुनने देता है, ब्राउज़र को उपयुक्त फ़ॉन्ट चुनने देता है, और लिपि-विशेष styling के लिए इस्तेमाल होने वाले :lang() selector को चलाता है। lang="en" और dir="rtl" वाला पेज डिफ़ेक्ट है, भले ही वह सही दिखे।

  • हर पेज का root element जाँचें, जिसमें error पेज, ईमेल, प्रिंट व्यू और PDF शामिल हैं।
  • Runtime पर भाषा बदलें और वापस करें: दिशा, फ़ॉन्ट और cached लेआउट सब बदलने चाहिए, कोई स्क्रीन आधी-mirrored न बचे।

क्या mirror होता है और क्या नहीं

Right-to-left लेआउट में पढ़ना दाईं ओर से शुरू होता है, इसलिए इंटरफ़ेस ऊर्ध्वाधर अक्ष पर mirror होता है। Apple की Human Interface Guidelines व्यावहारिक नियम देती हैं: उन कंट्रोल को flip करें जो एक वैल्यू से दूसरी तक प्रगति दिखाते हैं (slider, progress indicator), जो तय क्रम में आइटम के बीच नेविगेट करते हैं (back और next), और उन आइकन को जो टेक्स्ट या पढ़ने की दिशा या आगे-पीछे की गति दर्शाते हैं; जब क्रम का अर्थ हो तो इमेज का क्रम उलटें। फ़ोटो और आर्टवर्क, लोगो और check mark जैसे सार्वभौमिक चिह्न, घड़ी जैसी असली दुनिया की चीज़ें दिखाने वाले आइकन, असली भौतिक दिशा बताने वाले कंट्रोल, और फ़ोन या कार्ड नंबर जैसी एक संख्या के भीतर के अंक flip न करें।

मीडिया प्लेबैक कई प्लेटफ़ॉर्म पर जान-बूझकर अपवाद है: Material Design की bidirectionality गाइडेंस, जिसकी ओर Android का documentation इशारा करता है, playback कंट्रोल और मीडिया progress bar को left-to-right रखती है क्योंकि वे समय की दिशा नहीं, चल रहे मीडिया (टेप) की दिशा दर्शाते हैं। आपका प्रोडक्ट जो भी तय करे, उसे डिज़ाइन स्पेसिफ़िकेशन में लिखें और उसी के विरुद्ध टेस्ट करें, क्योंकि असली डिफ़ेक्ट स्क्रीनों के बीच असंगत व्यवहार है। Source code, terminal आउटपुट और गणितीय अभिव्यक्तियाँ भी left-to-right रहती हैं।

  • Mirror करें: पेज लेआउट, navigation drawer, टैब क्रम, breadcrumbs, back/forward तीर, stepper, carousel, progress bar, slider, सूचियों के chevron, टेबल कॉलम का क्रम, labels के सापेक्ष आइकन की जगह।
  • Mirror न करें: लोगो, check mark, घड़ियाँ और असली clockwise गति दिखाने वाले गोल refresh आइकन, फ़ोटो, मैप, फ़ोन और कार्ड नंबर, code blocks, और समय दर्शाने वाले अक्ष वाले चार्ट, जब तक डिज़ाइन कुछ और न कहे।
RTL में स्क्रीन mirror होती है: तीर, breadcrumbs, progress और chevron flip होते हैं, जबकि लोगो और असली चीज़ों के आइकन सिर्फ़ जगह बदलते हैं; मीडिया कंट्रोल एक लिखित फ़ैसले पर चलते हैं। वैचारिक मॉडल

Left-to-right: dir="ltr"

पढ़ना बाईं ओर से शुरू होता है।

Back तीर: flip होता है
Breadcrumbs: क्रम mirror होता है
Progress bar: पढ़ने की शुरुआत से भरता है
घड़ी का आइकन: label की दूसरी ओर जाता है, flip नहीं होतासूची का chevron: flip होता है
  • Back तीर और लोगो ऊपर बाईं ओर
  • Progress बाईं ओर से भरता है; chevron दाईं ओर इशारा करते हैं

अरबी right-to-left: dir="rtl"

इंटरफ़ेस ऊर्ध्वाधर अक्ष पर mirror होता है।

Back तीर: flip होता है
Breadcrumbs: क्रम mirror होता है
Progress bar: पढ़ने की शुरुआत से भरता है
घड़ी का आइकन: label की दूसरी ओर जाता है, flip नहीं होतासूची का chevron: flip होता है
  • Flip होते हैं: back तीर, breadcrumbs, progress bar, सूची के chevron, label के सापेक्ष आइकन की जगह
  • जगह बदलते हैं, flip नहीं होते: लोगो, check mark, घड़ी, फ़ोटो; फ़ोन नंबर के अंकों का क्रम वही रहता है

अरबी पेज पर मीडिया प्लेयरलिखित फ़ैसला

Material Design playback कंट्रोल और मीडिया progress bar को left-to-right रखता है।

वीडियो
मीडिया progress bar: बाईं ओर से भरता है
पिछलाPlayअगला
  • अपना फ़ैसला डिज़ाइन स्पेसिफ़िकेशन में लिखें और उसी के विरुद्ध टेस्ट करें
  • स्क्रीनों के बीच असंगत व्यवहार ही डिफ़ेक्ट है

योजनाबद्ध स्क्रीन: टेक्स्ट पट्टियों के रूप में है। पहली दो स्क्रीनों में गोला असली दुनिया की किसी चीज़, जैसे घड़ी, के आइकन की जगह है; मीडिया प्लेयर में यह Play बटन है।

CSS logical properties और प्लेटफ़ॉर्म लेआउट

ज़्यादातर mirroring डिफ़ेक्ट physical लेआउट कोड से आते हैं। margin-left, padding-right, left, right और text-align: left जैसी CSS properties दिशा चाहे जो हो, उसी तरफ़ रहती हैं; उनके logical समकक्ष — margin-inline-start, padding-inline-end, inset-inline-start, text-align: start — लेखन-दिशा के साथ चलते हैं। Flexbox और grid दिशा अपने-आप मानते हैं; absolute positioning, transforms, background positions और shadow offsets नहीं। दिशा वाले आइकन को स्पष्ट flip चाहिए, और सिर्फ़ दिशा वालों को।

मोबाइल प्लेटफ़ॉर्म पर यही अवधारणा दूसरे नामों से है। Android पर ऐप android:supportsRtl="true" घोषित करता है, लेआउट left और right की जगह start और end इस्तेमाल करते हैं, और सरल दिशा वाले drawables android:autoMirrored="true" सेट कर सकते हैं। iOS पर Auto Layout की leading और trailing constraints mirror होती हैं जबकि left और right constraints नहीं, और दिशा वाली इमेज को right-to-left लेआउट में flip होने के लिए चिह्नित करना होता है। टेस्टर को यह कोड लिखने की ज़रूरत नहीं, पर review या developer tools में physical properties पहचानना ज़्यादातर "यह एलिमेंट हिला ही नहीं" डिफ़ेक्ट समझा देता है।

/* Physical properties: do not mirror */
.card   { margin-left: 16px; text-align: left; }
.badge  { position: absolute; right: 8px; }

/* Logical properties: follow the writing direction */
.card   { margin-inline-start: 16px; text-align: start; }
.badge  { position: absolute; inset-inline-end: 8px; }
.list   { padding-inline-start: 24px; border-inline-end: 1px solid; }

/* Directional icons flip explicitly; logos, check marks and media icons do not */
[dir="rtl"] .icon-chevron-next { transform: scaleX(-1); }

/* Arabic text: no letter-spacing, room for diacritics */
:lang(ar) { letter-spacing: 0; line-height: 1.8; }

Bidirectional टेक्स्ट और Unicode Bidirectional Algorithm

अरबी वाक्यों में अक्सर left-to-right कंटेंट होता है: अंग्रेज़ी ब्रांड नाम, ऑर्डर नंबर, SKU, ईमेल पते, URL, फ़ोन नंबर और code। दिखने का क्रम Unicode Bidirectional Algorithm (UAX #9) तय करता है। व्यावहारिक स्तर पर अक्षर strong होते हैं (अरबी और लैटिन अक्षरों की दिशा होती है), weak (अंक और कुछ separators) या neutral (spaces और ज़्यादातर विराम-चिह्न)। अलग-अलग दिशा वाले हिस्सों के बीच और पैराग्राफ़ के किनारे के neutral अक्षर base direction ले लेते हैं — इसीलिए अंग्रेज़ी वाक्यांश के बाद का विराम-चिह्न ग़लत तरफ़ कूद जाता है। संख्याओं के लिए अतिरिक्त नियम हैं: अरबी अक्षरों के बाद आने वाले अंक bidi type Arabic Number (AN) माने जाते हैं (उनका रूप नहीं बदलता), और ऐसी संख्याओं के बीच का hyphen या space, या उनसे पहले का + चिह्न, right-to-left दिशा ले लेता है, इसलिए अंकों का हर समूह अलग run के रूप में रखा जाता है — इसीलिए hyphen वाला ऑर्डर नंबर या spaces वाला फ़ोन नंबर अरबी वाक्य के भीतर अपने हिस्सों के बदले क्रम में दिख सकता है।

सुधार है isolation। HTML में ज्ञात दिशा वाले embedded कंटेंट को अपने dir वाले एलिमेंट में लपेटें, जिस कंटेंट की दिशा पहले से पता न हो (यूज़र नाम, रिव्यू, search शब्द) उसके लिए <bdi> या dir="auto" इस्तेमाल करें, और free-text इनपुट फ़ील्ड पर dir="auto" लगाएँ। HTML के बाहर — plain-text notification, SMS या native strings में — Unicode isolate कंट्रोल (U+2066 LRI, U+2067 RLI, U+2068 FSI, जिन्हें U+2069 PDI बंद करता है) यही काम करते हैं। पुराने embedding कंट्रोल (U+202A–U+202E) सही इस्तेमाल करना कठिन है और वे अपने बाद के टेक्स्ट को भी प्रभावित कर सकते हैं।

  • एक bidi टेस्ट सेट बनाएँ: शुरुआत, बीच और अंत में अंग्रेज़ी ब्रांड वाले अरबी वाक्य; ऑर्डर नंबर, ईमेल, URL और फ़ोन नंबर के साथ; इकाई या प्रतिशत चिह्न के बाद आने वाली संख्याओं के साथ; कोष्ठक और उद्धरण-चिह्नों के साथ।
  • अदृश्य अक्षर जाँचें: जो string "सही दिखती" है उसमें किसी दूसरे सिस्टम से कॉपी हुए भटके direction marks हो सकते हैं; उन्हें देखने के लिए उसे code points में decode करें।
<!-- page: base direction and language on the root element -->
<html lang="ar" dir="rtl">

<!-- order number that must keep its order -->
<p>رقم الطلب: <bdi dir="ltr">2026-0042</bdi></p>

<!-- identifiers that must always read left-to-right -->
<p>للتواصل: <span dir="ltr">+966 50 123 4567</span></p>

<!-- user-generated text of unknown direction -->
<p dir="auto">{review.text}</p>

<!-- English phrase inside Arabic: direction and pronunciation -->
<p>جرّب أداة <bdi lang="en">Mutqan Tools!</bdi> مجاناً</p>

Without isolation, an RTL paragraph can display (example):
  2026-0042            as  0042-2026
  +966 50 123 4567     as  4567 123 50 966+
  Mutqan Tools!        as  !Mutqan Tools

आज़माएँ: Unicode डिकोडर आज़माएँ: Unicode एन्कोडर आज़माएँ: बहुभाषी टेस्ट डेटा जनरेटर

अरबी रेंडरिंग: shaping, फ़ॉन्ट, तश्कील और truncation

अरबी जुड़ी हुई लिपि है: ज़्यादातर अक्षर इस पर निर्भर अलग रूप लेते हैं कि वे अकेले हैं या पहले, बाद या दोनों अक्षरों से जुड़े हैं, और लाम-अलिफ़ (لا) जैसे कुछ जोड़े अनिवार्य ligature बनाते हैं। Shaping engine ये रूप चुनता है, और उसमें दख़ल देने वाली कोई भी चीज़ अलग-अलग अक्षर बना देती है। अरबी टेक्स्ट पर letter-spacing एक क्लासिक कारण है — engine के अनुसार वह या तो जोड़ तोड़ने वाले gap डालता है या अनदेखा हो जाता है — इसलिए सुरक्षित नियम है अरबी के लिए letter-spacing: 0। शब्द के भीतर कोई अक्षर डालना (zero-width non-joiner, masking अक्षर, soft hyphen), animation के लिए टेक्स्ट एक-एक अक्षर बनाना, या शब्द के एक हिस्से को अलग styling से highlight करना भी कुछ engines पर जोड़ तोड़ सकता है।

जनरेट किया आउटपुट वह जगह है जहाँ रेंडरिंग सबसे ज़्यादा फ़ेल होती है। अरबी shaping चरण के बिना PDF generator, chart libraries, canvas drawing और इमेज watermark आमतौर पर अरबी को उलटे क्रम में अलग-अलग अक्षरों के रूप में दिखाते हैं। फ़ॉन्ट भी मायने रखते हैं: अरबी fallback वाला लैटिन-प्रथम फ़ॉन्ट आकार और baseline मिला सकता है, और Apple की गाइडेंस बताती है कि all-caps लैटिन के बगल में अरबी बहुत छोटी दिख सकती है और उसे थोड़ा बड़ा आकार चाहिए हो सकता है। तश्कील (diacritics), जैसे उदाहरण शब्द مُتْقَن में, लाइन के ऊपर और नीचे फैलते हैं, इसलिए fixed line height और hidden overflow उन्हें काट देते हैं। टेक्स्ट truncate होने पर ellipsis टेक्स्ट के logical अंत पर होना चाहिए — अरबी में बाईं ओर — और ऐसा तभी होता है जब एलिमेंट की दिशा सही सेट हो।

  • असली जैसी अरबी इस्तेमाल करें: लंबे नाम, तश्कील वाले शब्द, लाम-अलिफ़, तत्वील (ـ) जिसे कुछ यूज़र टाइप करते हैं, अरबी-इंडिक अंक और अरबी विराम-चिह्न (، ؛ ؟)।
  • हेडिंग, बटन, badge, tooltip, चार्ट, PDF, ईमेल और push notification जाँचें — सिर्फ़ पेज का मुख्य भाग नहीं।

आज़माएँ: अरबी टेस्ट डेटा जनरेटर आज़माएँ: फ़ेक नाम जनरेटर आज़माएँ: स्ट्रिंग लेंथ काउंटर

RTL फ़ॉर्म

फ़ॉर्म RTL की हर कठिनाई को एक जगह जोड़ते हैं। Labels, required-field चिह्न, help टेक्स्ट और error मैसेज mirrored तरफ़ जाते हैं; अरबी के free-text फ़ील्ड कंटेंट की दिशा मानते हैं; और पहचानकर्ता रखने वाले फ़ील्ड हर locale में left-to-right रहते हैं: फ़ोन नंबर, ईमेल पते, URL, IBAN, कार्ड नंबर, राष्ट्रीय ID और residence नंबर, पोस्टल कोड और verification कोड। तय करें कि ये LTR फ़ील्ड RTL फ़ॉर्म के भीतर कैसे align होंगे और इसे एकरूप लागू करें। ख़ाली फ़ील्ड के भीतर दिखने वाला hint टेक्स्ट उसी दिशा में होना चाहिए जिसमें यूज़र टाइप करेगा, वरना टाइप शुरू होते ही टेक्स्ट दूसरी तरफ़ कूद जाता है।

Validation को यूज़र की भाषा बोलनी चाहिए: client-side और server-side मैसेज, हर नियम (required, format, length, range) के मैसेज, और पेमेंट widget जैसे third-party कंपोनेंट से बने मैसेज। न्यूमेरिक फ़ील्ड को अरबी-इंडिक अंकों पर फ़ैसला चाहिए — अरबी कीबोर्ड उन्हें बना सकता है — और प्रोडक्ट को या तो उन्हें स्वीकार करके normalise करना चाहिए या साफ़ अरबी मैसेज के साथ अस्वीकार। उदाहरण के लिए, सऊदी मोबाइल नंबर को local और international दोनों रूपों (जैसे 05XXXXXXXX और +9665XXXXXXXX) में आज़माएँ, और राष्ट्रीय ID, Iqama व फ़ोन फ़ील्ड में वही अंक अरबी कीबोर्ड से टाइप करके ("٠٥٠١٢٣٤٥٦٧") डालें; जो फ़ील्ड न उन्हें स्वीकार करे न अरबी में नियम समझाए, वह डिफ़ेक्ट है।

  • Date picker: कैलेंडर ग्रिड दाएँ-से-बाएँ चलता है, महीने के तीर mirrored होते हैं, और हिजरी या ग्रेगोरियन चयन प्रोडक्ट के नियम पर चलता है।
  • Checkbox, radio button और toggle अपने labels की दाईं ओर होते हैं; toggle की "on" दिशा डिज़ाइन फ़ैसले पर चलती है।
  • पते: जनरेट किए Saudi National Address–शैली डेटा से टेस्ट करें, जहाँ building number, street, district, city, postal code और additional number अरबी शब्दों और पश्चिमी अंकों को मिलाते हैं।

आज़माएँ: सऊदी एड्रेस टेस्ट डेटा आज़माएँ: अरबी टेस्ट डेटा जनरेटर आज़माएँ: स्पेशल कैरेक्टर डेटासेट जनरेटर

RTL इंटरफ़ेस में एक्सेसिबिलिटी

Screen reader lang पर निर्भर हैं। WCAG 2.2 का success criterion 3.1.1 Language of Page माँगता है कि पेज की भाषा प्रोग्राम से निर्धारित हो सके, और 3.1.2 Language of Parts दूसरी भाषा के अंशों और वाक्यांशों के लिए यही माँगता है, कुछ अपवादों के साथ जिनमें व्यक्तिवाचक नाम (proper names) और तकनीकी शब्द शामिल हैं। इसलिए अरबी टेक्स्ट के भीतर अंग्रेज़ी वाक्य को lang="en" चाहिए; अंग्रेज़ी ब्रांड नाम और शब्दों को भी इसी तरह चिह्नित करना अच्छी प्रैक्टिस है, भले ही यह criterion इसे अनिवार्य न करे, क्योंकि इसके बिना screen reader उन्हें अरबी उच्चारण नियमों से पढ़ता है। उन screen readers से टेस्ट करें जो आपके यूज़र्स के पास हैं (Windows पर NVDA या JAWS, Apple डिवाइस पर VoiceOver, Android पर TalkBack), अरबी आवाज़ इंस्टॉल करके।

Reading order और focus order DOM का पालन करते हैं। जब mirroring logical properties और dir से होती है, DOM क्रम अर्थपूर्ण रहता है और दृश्य क्रम उसके साथ mirror होता है। जब लेआउट row-reverse, order या absolute positioning से नक़ली बनाया जाता है, तो दृश्य क्रम और focus क्रम अलग हो जाते हैं, जो WCAG 1.3.2 Meaningful Sequence और 2.4.3 Focus Order से टकराता है। यह भी जाँचें कि tabs, sliders और carousels में क्षैतिज arrow-key का व्यवहार mirrored दृश्य दिशा से मेल खाता है, और आइकन बटनों के accessible names अनुवादित हैं।

RTL टेस्ट चेकलिस्ट

यह सूची हर लक्षित ब्राउज़र और डिवाइस वर्ग पर अरबी में हर स्क्रीन के लिए चलाएँ। जिन फ़ैसलों की यह माँग करती है (मीडिया कंट्रोल, LTR फ़ील्ड alignment, अंकों का व्यवहार) उन्हें डिज़ाइन स्पेसिफ़िकेशन में दर्ज करें ताकि हर टेस्टर एक ही नियम के विरुद्ध जाँचे। नीचे की सूची अंग्रेज़ी में है और पिछले सेक्शनों की जाँचों को छह समूहों में जोड़ती है: दिशा और भाषा, क्या mirror होता है और क्या नहीं, bidirectional टेक्स्ट, अरबी रेंडरिंग, फ़ॉर्म, और एक्सेसिबिलिटी।

RTL test checklist (ar, ar-SA)

Direction and language
[ ] <html lang="ar" dir="rtl"> on every page, email and PDF template
[ ] Switching language flips direction without a reload glitch or mixed state
Mirroring
[ ] Navigation, back/next arrows, breadcrumbs, steppers, sliders, progress bars mirror
[ ] Logos, check marks, clocks, photos, phone numbers, code do not mirror
[ ] Media playback controls follow the product's documented decision
Bidirectional text
[ ] Order numbers, SKUs, emails, URLs, phone numbers keep their order in Arabic sentences
[ ] Punctuation stays on the correct side of embedded English phrases
[ ] User content with unknown direction is shown with dir="auto" or <bdi>
Rendering
[ ] Arabic letters join (no letter-spacing, no characters inserted inside words)
[ ] Diacritics are not clipped; truncation ellipsis sits at the logical end
[ ] Arabic renders correctly in PDFs, emails, charts and canvas output
Forms
[ ] Labels, required markers, errors and hint text sit on the correct side
[ ] Phone, email, IBAN, ID and code fields are LTR; free-text fields follow content
[ ] Arabic-Indic digits are accepted or rejected with a clear Arabic message
Accessibility
[ ] Screen reader uses an Arabic voice; English phrases carry lang="en"
[ ] Focus order and reading order match the mirrored visual order

RTL जाँचों का ऑटोमेशन

ऑटोमेशन दिशा और लेआउट के रिग्रेशन अच्छी तरह पकड़ता है और भाषाई समस्याएँ कमज़ोर तरीके से। End-to-end smoke suite अंग्रेज़ी के साथ अरबी locale में भी चलाएँ; root का dir और lang assert करें; कुछ anchor एलिमेंट की जगह जाँचें (back link दाईं ओर होना चाहिए); assert करें कि embedded identifiers isolated हैं; और मुख्य स्क्रीन के लिए हर locale की screenshot तुलना जोड़ें, क्योंकि टेक्स्ट assertions DOM पढ़ते हैं और दृश्य reordering नहीं देख पाते। Stylesheets में physical CSS properties की खोज mirroring डिफ़ेक्ट को स्क्रीन तक पहुँचने से पहले पकड़ लेती है।

Android पर AR (XB) pseudo-locale debug बिल्ड को उलटे अंग्रेज़ी टेक्स्ट के साथ right-to-left कर देता है, और RTL layout direction force करने वाला developer option भाषा बदले बिना लेआउट पलट देता है। Xcode scheme के app-language विकल्पों में right-to-left pseudolanguage देता है।

// RTL smoke check (Playwright Test)
test("checkout is laid out right-to-left in Arabic", async ({ browser }) => {
  const page = await (await browser.newContext({ locale: "ar-SA" })).newPage();
  await page.goto("/ar/checkout");

  await expect(page.locator("html")).toHaveAttribute("dir", "rtl");
  await expect(page.locator("html")).toHaveAttribute("lang", /^ar/);

  // the back link sits in the right half of the viewport
  const box = await page.getByRole("link", { name: "رجوع" }).boundingBox();
  expect(box.x).toBeGreaterThan(page.viewportSize().width / 2);

  // the order id is isolated; text assertions cannot see visual reordering
  await expect(page.getByTestId("order-id")).toHaveAttribute("dir", "ltr");

  await expect(page).toHaveScreenshot("checkout-ar.png");
});

# Find physical CSS that will not mirror (review each hit)
grep -rnE "margin-(left|right)|padding-(left|right)|text-align: *(left|right)|float: *(left|right)|[^-](left|right): *[0-9]" src/

RTL डिफ़ेक्ट उदाहरण, बग टाइटल के रूप में

ये समझाने के लिए उदाहरण हैं, असली घटनाएँ नहीं। हर एक लक्षण, जगह और शर्त बताता है, जैसा बग रिपोर्ट गाइड में है।

  • अरबी ऑर्डर सारांश में ऑर्डर नंबर 2026-0042, 0042-2026 के रूप में दिखता है
  • अरबी प्रोफ़ाइल पेज पर फ़ोन नंबर के अंक-समूह उलटे क्रम में दिखते हैं
  • अरबी success मैसेज में विस्मयादिबोधक चिह्न अंग्रेज़ी ब्रांड नाम से पहले दिखता है
  • अरबी checkout हेडर का back तीर बाईं ओर इशारा करता है और अगले स्टेप पर ले जाता है
  • letter-spacing: 0.1em वाली section headings में अरबी अक्षर अलग-अलग दिखते हैं
  • इनवॉइस PDF अरबी ग्राहक का नाम उलटे क्रम में अलग-अलग अक्षरों के रूप में दिखाता है
  • कार्ड की fixed line height से अरबी प्रोडक्ट नामों की तश्कील कट जाती है
  • मोबाइल नंबर फ़ील्ड अरबी-इंडिक अंकों को सिर्फ़ अंग्रेज़ी error मैसेज के साथ अस्वीकार करता है
  • Screen reader अंग्रेज़ी ब्रांड नाम को अरबी नियमों से बोलता है — lang="en" गायब

अक्सर पूछे जाने वाले सवाल

RTL टेस्टिंग क्या है?

अरबी जैसी दाएँ-से-बाएँ लिपि में इंटरफ़ेस की टेस्टिंग: सही दिशा और भाषा एट्रिब्यूट, mirrored लेआउट, मिश्रित अरबी और अंग्रेज़ी टेक्स्ट का सही प्रदर्शन, साफ़ अरबी रेंडरिंग, और ऐसे फ़ॉर्म, focus order और screen-reader व्यवहार जो mirrored लेआउट में काम करें।

क्या अरबी में सब कुछ mirror होना चाहिए?

नहीं। लेआउट, नेविगेशन, दिशा वाले तीर, slider और progress indicator mirror होते हैं; लोगो, check mark, घड़ियाँ, फ़ोटो, फ़ोन नंबर और code नहीं। मीडिया playback कंट्रोल आमतौर पर left-to-right रखे जाते हैं। नियम डिज़ाइन स्पेसिफ़िकेशन में लिखें और उन्हीं के विरुद्ध टेस्ट करें।

अरबी टेक्स्ट के भीतर कोई नंबर या कोड उलटा क्यों दिखता है?

Unicode Bidirectional Algorithm में अरबी टेक्स्ट के बाद आने वाले अंक bidi type Arabic Number (AN) माने जाते हैं, और उनके बीच के hyphen और space (या उनसे पहले का + चिह्न) right-to-left दिशा ले लेते हैं; इसलिए अंकों का हर समूह अलग run बनता है और 2026-0042 जैसा ऑर्डर नंबर या spaces वाला फ़ोन नंबर अपने हिस्सों के बदले क्रम में दिख सकता है। वैल्यू को <bdi>, लपेटने वाले एलिमेंट पर dir="ltr", या Unicode isolate अक्षरों से अलग करें।

क्या अरबी जाने बिना RTL टेस्ट कर सकते हैं?

काफ़ी हद तक हाँ। दिशा बदलने वाले pseudo-locales, Android पर forced RTL लेआउट, Xcode की right-to-left pseudolanguage और जनरेट किया अरबी टेस्ट डेटा किसी भी टेस्टर को mirroring, bidi और रेंडरिंग डिफ़ेक्ट खोजने देते हैं। भाषा की गुणवत्ता के लिए अब भी अरबी जानने वाला चाहिए।

अरबी में कौन-से फ़ॉर्म फ़ील्ड left-to-right रहने चाहिए?

पहचानकर्ता रखने वाले फ़ील्ड: फ़ोन नंबर, ईमेल पते, URL, IBAN, कार्ड नंबर, राष्ट्रीय ID और residence नंबर, पोस्टल और verification कोड। Free-text फ़ील्ड कंटेंट के अनुसार चलने चाहिए, जैसे dir="auto" से।

संदर्भ

  • Unicode Standard Annex #9: Unicode Bidirectional AlgorithmUnicode Consortiumवह एल्गोरिदम जो मिश्रित right-to-left और left-to-right टेक्स्ट का डिस्प्ले क्रम तय करता है — ज़्यादातर bidirectional-text बग का स्रोत।
  • Structural markup and right-to-left text in HTMLW3Chtml और संरचनात्मक एलिमेंट पर dir एट्रिब्यूट से base direction कैसे सेट करें, और इसके लिए केवल CSS पर क्यों न निर्भर रहें।
  • Inline markup and bidirectional text in HTMLW3Cbidirectional एल्गोरिदम inline हिस्सों — अरबी टेक्स्ट के भीतर संख्याएँ, नाम, URL — को कैसे संभालता है, और उन्हें अलग करने वाला markup (bdi, dir)।
  • Arabic & Persian Layout RequirementsW3C · 2025अरबी लिपि की लेआउट और टाइपोग्राफ़ी आवश्यकताएँ — दिशा, joining, justification, अंक — जिन्हें सॉफ़्टवेयर को सपोर्ट करना चाहिए (W3C Draft Note)।
  • Right to left — Human Interface GuidelinesAppleright-to-left भाषाओं के लिए इंटरफ़ेस पलटने पर Apple की गाइडेंस: कौन-से एलिमेंट mirror होते हैं, कौन-से नहीं, और टेक्स्ट व संख्याएँ कैसे व्यवहार करती हैं।
  • Support different languages and culturesAndroid Developers (Google)Android ऐप का लोकलाइज़ेशन: locale resources, right-to-left भाषाओं के लिए layout mirroring और RTL-aware एट्रिब्यूट।
  • Web Content Accessibility Guidelines (WCAG) 2.2W3C · 2024W3C की Recommendation जो सुलभ वेब कंटेंट के लिए टेस्ट करने योग्य success criteria तय करती है — चार सिद्धांतों और तीन conformance स्तरों (A, AA, AAA) में व्यवस्थित।
  • Internationalization (i18n) ActivityW3Cबहुभाषी वेब कंटेंट बनाने और टेस्ट करने के लिए W3C के internationalization लेख, ट्यूटोरियल और जाँचें।

अभ्यास

अरबी checkout के RTL टेस्ट सेशन की समीक्षा करें

आपका काम

आप एक किराना delivery web shop (काल्पनिक) के अरबी इंटरफ़ेस (ar-SA) को release 5.0 से पहले टेस्ट कर रहे हैं। एक साथी टेस्टर ने checkout, order confirmation पेज, confirmation SMS और confirmation ईमेल पर पहला RTL सेशन चलाया और ग्यारह नोट्स (N1–N11) लिखे, यह तय किए बिना कि उनमें से कौन-से डिफ़ेक्ट हैं। नीचे के material में डिज़ाइन स्पेसिफ़िकेशन में दर्ज तीन RTL फ़ैसले (D1–D3), markup, मोबाइल नंबर के validation, SMS टेम्पलेट और CSS के सरल अंश, और नोट्स हैं। इंटरफ़ेस labels अंग्रेज़ी अनुवाद में हैं और हर दिखाई गई वैल्यू पश्चिमी अंकों में है, इसलिए अरबी पढ़े बिना भी आप यह अभ्यास कर सकते हैं।

गाइड के नियमों और चेकलिस्ट से नोट्स को डिफ़ेक्ट और अपेक्षित व्यवहार में बाँटें, हर फ़ैसले का कारण बताएँ, संभावित कारण और fix बताएँ, और बग टाइटल लिखें। काग़ज़ पर काम करें; दो steps में Regex टेस्टर मदद करता है। इसके लिए 20–30 मिनट रखें।

सामग्री
किराने की delivery वाली web shop (काल्पनिक) - अरबी इंटरफ़ेस (ar-SA), release 5.0
Scope: cart, checkout (delivery details, payment), order confirmation पेज,
confirmation SMS और confirmation ईमेल। Staging build 5.0.0-rc1।

डिज़ाइन स्पेसिफ़िकेशन में दर्ज RTL फ़ैसले
D1  मीडिया playback कंट्रोल और मीडिया progress bar left-to-right रहते हैं।
D2  मोबाइल नंबर, ईमेल, पोस्टल कोड और coupon फ़ील्ड left-to-right हैं।
D3  न्यूमेरिक फ़ील्ड अरबी-इंडिक अंक स्वीकार करके उन्हें 0-9 में बदलते हैं। हर
    validation मैसेज इंटरफ़ेस की भाषा में दिखता है।

Markup का अंश (सरल किया हुआ; यहाँ जिन labels और attributes की ज़रूरत नहीं,
वे हटाए गए हैं; {t.x} अनुवादित टेक्स्ट है, {order.x} जैसे हिस्से डेटा हैं)
Email template root: <html lang="en" dir="rtl">
Web page root: <html lang="ar" dir="rtl">
<a class="back" href="/cart"><i class="icon-chevron-back"></i>{t.backToCart}</a>
<div class="stepper"><ol>4 x <li></li></ol><span class="stepper-fill"></span></div>
<h2 class="section-title">{t.deliveryDetails}</h2>
<div class="field-row"><input name="district"><input name="street"></div>
<input name="mobile" dir="ltr" inputmode="tel">
<p class="product-name">{item.name}</p>
<p>{t.orderNumber}: {order.id}</p>
<p>{t.courierPhone}: <span dir="ltr">{courier.phone}</span></p>
<p class="promo">{t.promoStart} Express+ {t.promoEnd}</p>

मोबाइल नंबर का client-side validation
if (!/^05\d{8}$/.test(mobile.value)) showError(mobile, "Enter a valid mobile number");

Confirmation SMS टेम्पलेट (plain text; {t.x} वाले हिस्से अरबी में हैं)
{t.smsOrder} {order.id} {t.smsOnTheWay}. {t.smsCourier}: {courier.phone}

CSS का अंश
.card { padding-inline-start: 16px; }
.stepper { position: relative; }
.stepper-fill { position: absolute; left: 0; width: var(--done); }
[dir="rtl"] .icon-chevron-next { transform: scaleX(-1); }
.section-title { font-weight: 700; letter-spacing: 0.08em; }
.product-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.field-row { display: flex; gap: 12px; }
[dir="rtl"] .field-row { flex-direction: row-reverse; } /* to match the Arabic mock-up */

सेशन नोट्स - Windows पर Chrome, mobile viewport, कीबोर्ड और माउस;
N7 एक Android फ़ोन पर; N8 NVDA और अरबी आवाज़ के साथ भी।
इंटरफ़ेस labels अंग्रेज़ी अनुवाद में दिए गए हैं।

N1  Confirmation ईमेल: टेक्स्ट और लेआउट दाएँ से बाएँ पढ़े जाते हैं और सही
    दिखते हैं। उसका source ऊपर दिया email template root दिखाता है।
N2  Checkout stepper: पहला स्टेप, Cart, दाईं ओर है और स्टेप दाएँ से बाएँ
    पढ़े जाते हैं, लेकिन उनके नीचे progress fill बाएँ किनारे से बढ़ता है।
N3  "Back to cart" ऊपर दाईं ओर है। उसका chevron अंग्रेज़ी इंटरफ़ेस की तरह
    बाईं ओर इशारा करता है।
N4  लोगो और "Paid" badge का check mark बिल्कुल अंग्रेज़ी जैसे दिखते हैं।
    Confirmation पेज के "How delivery works" वीडियो का play बटन बाईं ओर है,
    और उसका progress bar बाएँ से दाएँ भरता है।
N5  Cart में लंबे प्रोडक्ट नाम लाइन के बाएँ सिरे पर "..." के साथ कटते हैं।
N6  Confirmation पेज: ऑर्डर 2026-0117 "Order number" label के बाद 0117-2026
    के रूप में दिखता है। उसी पेज पर courier का फ़ोन +966 55 987 6543 दिखता है।
N7  Confirmation SMS: ऑर्डर नंबर 0117-2026 और courier का फ़ोन
    6543 987 55 966+ दिखता है।
N8  Promo लाइन: subscription का नाम Express+, +Express के रूप में दिखता है।
    NVDA, Express को अरबी उच्चारण से पढ़ता है।
N9  "Delivery details" जैसी section headings: अरबी अक्षर नहीं जुड़ते। उन्हीं
    स्क्रीनों पर body टेक्स्ट सामान्य रूप से जुड़ता है।
N10 मोबाइल नंबर: टाइप करते समय अंक left to right चलते हैं। अरबी कीबोर्ड से
    (अरबी-इंडिक अंकों में) टाइप किया 0551234567 अंग्रेज़ी मैसेज "Enter a valid
    mobile number" के साथ अस्वीकार होता है; पश्चिमी अंकों में स्वीकार होता है।
N11 Delivery details: एक row में District बाईं ओर और Street दाईं ओर है।
    Tab, District से Street पर जाता है, यानी focus बाएँ से दाएँ चलता है।
चरण
  1. पहले D1–D3 और अंश पढ़ें। हर physical CSS property, isolation के बिना दिखाई गई हर वैल्यू, और हर lang और dir एट्रिब्यूट पर निशान लगाएँ। चाहें तो CSS का अंश Regex टेस्टर में गाइड के ऑटोमेशन सेक्शन वाले search pattern margin-(left|right)|padding-(left|right)|text-align: *(left|right)|float: *(left|right)|[^-](left|right): *[0-9] के साथ डालें और देखें कि वह क्या पकड़ता है।
  2. हर नोट के लिए तय करें: डिफ़ेक्ट या अपेक्षित व्यवहार। गाइड का वह नियम, या D1–D3 में से वह फ़ैसला, बताएँ जिससे बात तय होती है। एक नोट में दोनों हो सकते हैं।
  3. हर डिफ़ेक्ट के लिए अंशों में संभावित कारण बताएँ और markup, CSS या टेक्स्ट में fix लिखें।
  4. Regex टेस्टर में मोबाइल नंबर का pattern ^05\d{8}$ 0551234567 पर और अरबी-इंडिक अंकों वाले उसी नंबर ٠٥٥١٢٣٤٥٦٧ पर आज़माएँ, और नतीजा समझाएँ।
  5. हर डिफ़ेक्ट के लिए ऐसा बग टाइटल लिखें जो लक्षण, जगह और शर्त बताए, जैसे गाइड के आख़िर के उदाहरण।
  6. गाइड की चेकलिस्ट से तीन ऐसी जाँचें लिखें जो यह सेशन अभी तक कवर नहीं करता।
मॉडल उत्तर दिखाएँ
मॉडल उत्तर

फ़ैसले। डिफ़ेक्ट: N1, N2, N3, N6 का ऑर्डर नंबर, N7, N8 (दो डिफ़ेक्ट), N9, N10 (दो डिफ़ेक्ट) और N11। अपेक्षित व्यवहार: N4, N5, N6 का फ़ोन नंबर और N10 में left-to-right चलते अंक। ISTQB की भाषा में हर नोट दर्ज करता है कि क्या दिखा; जहाँ वह failure है, वहाँ अंशों में आप जो कारण दिखाते हैं वही defect है। Regex टेस्टर में गाइड का search pattern CSS अंश की ठीक एक लाइन पकड़ता है: .stepper-fill में left: 0, जो N2 का कारण है; .card पहले से logical property इस्तेमाल करता है और उसे बदलने की ज़रूरत नहीं। टेक्स्ट search सिर्फ़ physical properties पकड़ती है; वह आइकन का छूटा हुआ flip, अरबी पर letter-spacing या row-reverse से नक़ली बनाया क्रम नहीं देख सकती, इसीलिए स्क्रीनें फिर भी एक-एक करके जाँची जाती हैं।

N1 — डिफ़ेक्ट (दिशा और भाषा)। ईमेल सही दिखता है क्योंकि dir="rtl" सही है, लेकिन lang="en" ग़लत भाषा घोषित करता है: screen reader अरबी टेक्स्ट के लिए अंग्रेज़ी आवाज़ चुन सकता है, और अरबी के लिए फ़ॉन्ट का चुनाव और :lang(ar) नियम लागू नहीं होते। गाइड का नियम है कि lang="en" और dir="rtl" वाला पेज डिफ़ेक्ट है, भले ही वह सही दिखे, और ईमेल व PDF टेम्पलेट का root element भी हर पेज की तरह जाँचा जाता है। Fix: अरबी ईमेल टेम्पलेट में lang="ar" (या ar-SA)। Title: अरबी order confirmation ईमेल अपने root element पर lang="en" घोषित करता है।

N2 और N3 — डिफ़ेक्ट (mirroring)। Progress indicator mirror होते हैं, इसलिए अरबी में fill को दाईं ओर से बढ़ना चाहिए, जहाँ पहला स्टेप है। स्टेप document की दिशा के साथ mirror होते हैं; fill नहीं होता, क्योंकि .stepper-fill physical property left: 0 से रखा गया है। Fix: inset-inline-start: 0। Title: अरबी stepper में checkout का progress fill बाएँ किनारे से बढ़ता है। N3 में link सही जगह पर है, लेकिन back chevron दिशा वाला आइकन है और उसे flip होना चाहिए: right-to-left लेआउट में back दाईं ओर इशारा करता है। CSS सिर्फ़ .icon-chevron-next को flip करती है; .icon-chevron-back के लिए कोई नियम नहीं है। Fix: RTL में हर दिशा वाले आइकन को flip करें, सिर्फ़ एक class को नहीं। Title: अरबी checkout हेडर में "Back to cart" का chevron बाईं ओर (आगे की तरफ़) इशारा करता है।

N4 और N5 — अपेक्षित व्यवहार। लोगो और check mark जैसे सार्वभौमिक चिह्न कभी mirror नहीं होते, और D1 मीडिया playback कंट्रोल और मीडिया progress bar को left-to-right रखता है, जैसा Material Design की गाइडेंस करती है। N2 से तुलना करें: स्टेप्स का progress bar mirror होता है; मीडिया का progress bar D1 का पालन करता है। अगर कोई दूसरी स्क्रीन अपने वीडियो कंट्रोल mirror करे, तो वह असंगति डिफ़ेक्ट होगी। N5 में ellipsis की जगह टेक्स्ट का logical अंत है, जो अरबी में बाईं ओर है; .product-name को यह विरासत में मिले dir="rtl" से मिलता है। N4 या N5 को डिफ़ेक्ट बताना developers से चलता हुआ व्यवहार बिगाड़ने को कहना होगा।

N6 — ऑर्डर नंबर डिफ़ेक्ट है (bidirectional टेक्स्ट), फ़ोन नंबर नहीं। <p>{t.orderNumber}: {order.id}</p> में वैल्यू isolated नहीं है: अरबी अक्षरों के बाद आने वाले अंक bidi type Arabic Number (AN) माने जाते हैं, दोनों समूहों के बीच का hyphen right-to-left दिशा ले लेता है, और हर समूह अलग run के रूप में रखा जाता है, इसलिए 2026-0117, 0117-2026 के रूप में दिखता है। फ़ोन वाली लाइन सही है क्योंकि <span dir="ltr"> वैल्यू को isolate करता है। Fix: <bdi dir="ltr">{order.id}</bdi>, या फ़ोन की तरह dir="ltr" वाला span। Title: अरबी order confirmation पेज पर ऑर्डर नंबर 2026-0117, 0117-2026 के रूप में दिखता है। N7 — डिफ़ेक्ट, plain text में वही algorithm। SMS में HTML नहीं होता, इसलिए <bdi> और dir उपलब्ध नहीं: टेम्पलेट में हर वैल्यू से पहले U+2066 LRI और उसके बाद U+2069 PDI रखें। सुधारे गए टेम्पलेट को जाँचने के लिए उसे Unicode एन्कोडर से code points में बदलें और पक्का करें कि दोनों अक्षर हर वैल्यू को घेरते हैं, फिर लक्षित फ़ोनों पर आया SMS पढ़ें। Title: अरबी confirmation SMS ऑर्डर नंबर को 0117-2026 और courier का फ़ोन 6543 987 55 966+ दिखाता है।

N8 — दो डिफ़ेक्ट। + चिह्न की अपनी कोई दिशा नहीं होती; अंग्रेज़ी नाम और अरबी टेक्स्ट की सीमा पर वह पैराग्राफ़ की दिशा ले लेता है और नाम की दूसरी तरफ़ चला जाता है, इसलिए Express+, +Express के रूप में दिखता है। Fix: नाम को isolate करें, <bdi lang="en">Express+</bdi> (या dir="ltr" और lang="en" वाला span)। उच्चारण का कारण अलग है: lang="en" का न होना, जिससे screen reader अरबी उच्चारण नियमों पर रहता है। इसे रिपोर्ट करें, लेकिन WCAG 3.1.2 Language of Parts को fail न बताएँ: व्यक्तिवाचक नाम (proper names) उसके अपवादों में हैं, इसलिए ब्रांड नाम को चिह्नित करना अच्छी प्रैक्टिस है, अनिवार्य नहीं। Titles: अरबी promo लाइन में subscription नाम Express+, +Express के रूप में दिखता है; promo लाइन में screen reader Express+ को अरबी नियमों से बोलता है — lang="en" गायब।

N9 — डिफ़ेक्ट (अरबी रेंडरिंग)। अरबी जुड़ी हुई लिपि है और shaping engine अक्षरों को जोड़ता है; अरबी टेक्स्ट पर letter-spacing engine के अनुसार या तो जोड़ तोड़ देता है या अनदेखा हो जाता है। Body टेक्स्ट जुड़ता है, इसलिए कारण heading की style .section-title { letter-spacing: 0.08em; } है। Fix: अरबी के लिए कोई letter-spacing नहीं, जैसे :lang(ar) .section-title { letter-spacing: 0; }। Title: letter-spacing: 0.08em वाली checkout section headings में अरबी अक्षर अलग-अलग दिखते हैं।

N10 — left-to-right चलते अंक अपेक्षित हैं (D2); बाक़ी D3 के ख़िलाफ़ दो डिफ़ेक्ट हैं। Regex टेस्टर में ^05\d{8}$, 0551234567 से match होता है और ٠٥٥١٢٣٤٥٦٧ से नहीं: JavaScript में \d सिर्फ़ 0–9 अंकों से match होता है, u flag के साथ भी और उसके बिना भी। Fix: validate करने से पहले अरबी-इंडिक अंकों (U+0660–U+0669) को 0–9 में बदलें, और server-side validation को भी इसी तरह जाँचें। अंग्रेज़ी मैसेज का कारण अलग है: टेक्स्ट showError में hard-coded है, इसलिए हर अमान्य मोबाइल नंबर पर यही दिखता है, पश्चिमी अंकों में टाइप किए 0451234567 जैसे नंबर पर भी। Fix: मैसेज अरबी अनुवादों से लें। Titles: मोबाइल नंबर फ़ील्ड अरबी-इंडिक अंकों को बदलने के बजाय अस्वीकार करता है; अरबी checkout में मोबाइल नंबर का validation मैसेज अंग्रेज़ी में दिखता है।

N11 — डिफ़ेक्ट (एक्सेसिबिलिटी)। Focus order DOM का पालन करता है, जहाँ District पहले आता है। [dir="rtl"] .field-row { flex-direction: row-reverse; } District को बाईं ओर ले जाता है, इसलिए दृश्य क्रम (दाईं ओर से पढ़ने पर Street, फिर District) और focus क्रम (District, फिर Street) अलग हो जाते हैं, जो WCAG 1.3.2 Meaningful Sequence और 2.4.3 Focus Order से टकराता है। Fix: row-reverse नियम हटाएँ, क्योंकि flex row अपने-आप mirror होती है, और फ़ील्ड का क्रम CSS में नहीं, markup में तय करें। अगर Street सच में पहले आना चाहिए, जैसा अरबी mock-up दिखाता है, तो उसे DOM में पहले रखें; इससे अंग्रेज़ी फ़ॉर्म भी बदलता है, इसलिए क्रम डिज़ाइनर से पक्का करें। दोनों स्थितियों में तब focus दृश्य क्रम का पालन करता है। Title: अरबी delivery details फ़ॉर्म में Tab, District (बाएँ) से Street (दाएँ) पर जाता है।

अभी कवर नहीं हुआ — गाइड की चेकलिस्ट की इन लाइनों में से कोई तीन: runtime पर भाषा बदलना और वापस करना, बिना glitch या आधी-mirrored स्क्रीन के; हर पेज, ईमेल और PDF टेम्पलेट पर dir और lang, यहाँ error पेज और कोई भी इनवॉइस या रसीद PDF; PDF, चार्ट और canvas आउटपुट में अरबी रेंडरिंग; तश्कील का न कटना, जैसे fixed line height वाले प्रोडक्ट नामों में; labels, required चिह्न, error और hint टेक्स्ट का सही तरफ़ होना; D2 के बाक़ी left-to-right फ़ील्ड (ईमेल, पोस्टल कोड, coupon), और delivery notes जैसे free-text फ़ील्ड का अपने कंटेंट की दिशा मानना; embedded अंग्रेज़ी वाक्यांशों के सही तरफ़ विराम-चिह्न, और अरबी वाक्यों में ईमेल, URL और SKU का अपना क्रम बनाए रखना, जिसे गाइड के bidi टेस्ट सेट से आज़माना सबसे अच्छा है; और screen reader का reading order जो mirrored दृश्य क्रम से मेल खाए।

Fix के बाद उन्हीं स्क्रीनों पर और एक आए हुए SMS पर confirmation testing करें, और गाइड की automated जाँचों से रिग्रेशन से बचाव करें: पेज root और ईमेल टेम्पलेट में dir और lang assert करें, जाँचें कि back link viewport के दाएँ आधे हिस्से में है, assert करें कि ऑर्डर नंबर वाले एलिमेंट पर dir="ltr" है, confirmation पेज के हर locale के screenshots की तुलना करें, और code review में physical CSS की search चलाएँ। अपना जवाब मिलाते समय N4, N5 और N6 व N10 के अपेक्षित हिस्सों पर आपके फ़ैसले सबसे अहम हैं: वे दिखाते हैं कि आपने नियम लागू किए या अंग्रेज़ी से अलग दिखने वाली हर चीज़ को डिफ़ेक्ट मान लिया। आपके टाइटल की शब्दावली अलग हो सकती है; हर टाइटल लक्षण, जगह और शर्त बताए।

इस topic में आपकी प्रगति

QA रोडमैप का हिस्सा

इस गाइड में बताए गए टूल्स

लोकलाइज़ेशन टेस्टिंग के लिए अरबी नाम, पते, वाक्य, संख्याएँ (अरबी-हिंदसी अंक) और RTL edge case जनरेट करें।

टेस्ट डेटा

i18n और RTL/LTR मिश्रण जाँचने के लिए एक ही रिकॉर्ड कई भाषाओं (अंग्रेज़ी, अरबी, हिंदी और अन्य) में जनरेट करें।

टेस्ट डेटा

\uXXXX एस्केप, U+ कोड पॉइंट और न्यूमेरिक एंटिटी को पढ़ने योग्य टेक्स्ट में डिकोड करें।

एन्कोडिंग

टेक्स्ट को यूनिकोड एस्केप अनुक्रम (\u0041), कोड पॉइंट (U+0041) या HTML न्यूमेरिक एंटिटी में बदलें।

एन्कोडिंग

सऊदी National Address जैसा टेस्ट डेटा जनरेट करें: बिल्डिंग नंबर, स्ट्रीट, ज़िला, शहर, पोस्टल कोड और additional number।

टेस्ट डेटा

अंग्रेज़ी, अरबी और हिंदी में रैंडम पहले और अंतिम नाम जनरेट करें, लिंग और फ़ॉर्मेट विकल्पों के साथ।

टेस्ट डेटा

Mutqan Soft कैसे मदद कर सकता है

और गाइड

और गाइड
टेस्ट डेटा

लोकलाइज़ेशन टेस्टिंग

लोकलाइज़ेशन टेस्टिंग गाइड: i18n बनाम l10n, अनुवाद गुणवत्ता, plural रूप, pseudo-localization, हिजरी तारीख़, अंक, मुद्रा, Unicode और ऑटोमेशन।

16 मिनट पढ़ने का समय
टेस्ट डिज़ाइन

सुलभ फ़ॉर्म की टेस्टिंग

WCAG 2.2 के अनुसार वेब फ़ॉर्म की एक्सेसिबिलिटी कैसे टेस्ट करें: labels, required फ़ील्ड, grouping, errors, autocomplete, redundant entry और सुलभ लॉगिन।

14 मिनट पढ़ने का समय
टेस्ट डिज़ाइन

विज़ुअल एक्सेसिबिलिटी टेस्टिंग

WCAG 2.2 के अनुसार contrast, रंग का उपयोग, alt text, resize और reflow, text spacing, target size, motion और dark mode कैसे टेस्ट करें, checklists सहित।

11 मिनट पढ़ने का समय
टेस्ट डिज़ाइन

स्क्रीन रीडर टेस्टिंग

स्क्रीन रीडर टेस्टिंग: semantics, accessible names, headings और landmarks, ARIA नियम, live regions, NVDA/VoiceOver/TalkBack रूटीन और डिफ़ेक्ट।

14 मिनट पढ़ने का समय
टेस्ट डिज़ाइन

एक्सेसिबिलिटी टेस्टिंग

WCAG 2.2 के साथ एक्सेसिबिलिटी टेस्टिंग: POUR सिद्धांत, A/AA/AAA लेवल, WCAG-EM मूल्यांकन, मैनुअल बनाम ऑटोमेटेड, स्प्रिंट और CI में अभ्यास, आम डिफ़ेक्ट।

17 मिनट पढ़ने का समय
टेस्ट डिज़ाइन

मोबाइल ऐप टेस्ट सिनेरियो

दोबारा इस्तेमाल लायक मोबाइल टेस्ट सिनेरियो: इंस्टॉल और अपडेट, permissions, इंटरप्शन, नेटवर्क बदलाव, ऑफ़लाइन sync, resources, push notification और gestures।

11 मिनट पढ़ने का समय