नेस्टेड HTML टेक्स्ट के लिए isolation चुनें, जब हर वाक्यांश को अपने पड़ोसी वाक्यांशों को प्रभावित किए बिना अपनी दिशा बनाए रखनी हो। Embedding का उपयोग तभी करें, जब आसपास के टेक्स्ट के साथ परस्पर प्रभाव जानबूझकर हो, और override का उपयोग तब करें, जब डिज़ाइन में अक्षरों का क्रम स्पष्ट रूप से मजबूर करना हो।

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

लेआउट के काम के लिए कौन-सा तरीका उपयुक्त है?

दो सवालों से शुरुआत करें: क्या ब्राउज़र को वाक्यांश के भीतर सामान्य द्विदिश क्रम लागू करना चाहिए, और क्या उस वाक्यांश को आसपास के टेक्स्ट के क्रम को प्रभावित करना चाहिए? इन फैसलों से यह व्यावहारिक तुलना बनती है। MDN का unicode-bidi संदर्भ अंतर्निहित CSS व्यवहारों का वर्णन करता है।

आवश्यकता तरीका पसंदीदा HTML तरीका
ज्ञात दिशा वाले वाक्यांश को अपनी सीमा देना Isolation मौजूदा inline element पर dir="ltr" या dir="rtl"
अज्ञात दिशा वाले वाक्यांश को अलग रखना स्वचालित दिशा के साथ isolation bdi, या मौजूदा inline element पर dir="auto"
ऐसा directional scope बनाना जो आसपास के क्रम को प्रभावित करे Embedding unicode-bidi: embed का उपयोग करने वाला विशेष CSS मामला
नतीजे को अलग रखते हुए अक्षरों का क्रम मजबूर करना Isolated override स्पष्ट dir="ltr" या dir="rtl" के साथ bdo
आसपास के टेक्स्ट के साथ परस्पर प्रभाव बनाए रखते हुए अक्षरों का क्रम मजबूर करना Non-isolated override unicode-bidi: bidi-override का उपयोग करने वाला विशेष CSS मामला

सामान्य HTML लेखन के लिए, दिशात्मक मार्कअप से शुरुआत करें। W3C हर विपरीत-दिशा वाले वाक्यांश को सटीक रूप से लपेटने और नेस्टेड वाक्यांशों को नेस्टेड मार्कअप से व्यक्त करने की सलाह देता है। इससे दस्तावेज़ में इच्छित सीमाएँ साफ़ दिखाई देती हैं। W3C: HTML में inline markup और द्विदिश टेक्स्ट।

नेस्टेड isolated टेक्स्ट को मार्कअप में कैसे दर्शाएँ?

हर पूरे वाक्यांश को अपनी दिशात्मक सीमा दें। यदि किसी मौजूदा inline element में पहले से ठीक वही वाक्यांश है, तो वहाँ dir जोड़ें। अन्यथा, span जोड़ें। वाक्यांश का हिस्सा बनने वाले विराम-चिह्नों को उसके wrapper के भीतर रखें; आसपास के वाक्य के विराम-चिह्न बाहर रखें। W3C इसे वाक्यांश को “सटीक रूप से लपेटना” कहता है। W3C का inline markup मार्गदर्शन।

दाएँ से बाएँ चलने के लिए बने किसी काल्पनिक आकृति-लेबल में बाएँ से दाएँ चलने वाला पहचानकर्ता हो, तो उसका ढाँचा इस उदाहरणात्मक अंश जैसा हो सकता है:

<p dir="ltr">
  Tile <span dir="rtl">● <span dir="ltr">A1 + B2</span> ■</span>: 12 items.
</p>

इसमें जानबूझकर तीन scopes हैं: बाहरी वाक्य, आकृतियों का क्रम और नेस्टेड पहचानकर्ता। गिनती वाक्य का हिस्सा है, इसलिए वह आकृतियों के क्रम के बाहर रहती है। केवल बाहरी वाक्यांश को चिह्नित करने पर भीतरी पहचानकर्ता की अपनी स्पष्ट सीमा नहीं बनेगी। यह nesting दिशात्मक बदलावों के लिए W3C की सुझाई गई संरचना का पालन करती है। W3C का नेस्टेड वाक्यांशों पर मार्गदर्शन।

जब डाले गए लेबल की दिशा अज्ञात हो, तो bdi isolation देता है और स्वचालित दिशा पहचान पर डिफ़ॉल्ट करता है। बिना dir वाला साधारण span यही डिफ़ॉल्ट नहीं देता। WHATWG के अनुसार, bdi सामान्य तरीके से दिशा inherit करने के बजाय auto पर डिफ़ॉल्ट करता है। HTML Standard: bdi element।

स्वचालित दिशा, पहले मज़बूत दिशात्मक वर्ण पर आधारित एक heuristic है, जिसमें नेस्टेड दिशात्मक elements के लिए कुछ निर्दिष्ट अपवाद हैं। यह लेबल का आशय नहीं समझता। इसलिए A1 से शुरू होने वाला लेबल बाएँ से दाएँ दिशा का संकेत देता है, भले ही बाद की सामग्री किसी दूसरी प्रस्तुति का सुझाव दे। आवश्यकता पहले से ज्ञात हो, तो स्पष्ट दिशा का उपयोग करें। MDN: dir global attribute।

केवल आकृतियों और अंकों वाले लेबल पर विशेष ध्यान चाहिए: उसमें कोई मज़बूत दिशात्मक अक्षर नहीं होता। यहाँ दिए गए सामान्य inline उदाहरणों में, जब स्वचालित दिशा को कोई योग्य वर्ण नहीं मिलता, तो HTML algorithm बाएँ से दाएँ को डिफ़ॉल्ट मानता है। यदि इस काल्पनिक क्रम का आधार दाएँ से बाएँ होना चाहिए, तो dir="rtl" निर्दिष्ट करें। HTML Standard: dir attribute।

Embedding और overrides कब उपयुक्त हैं?

Embedding एक और दिशात्मक स्तर बनाता है, जबकि उसके भीतर अक्षरों का सामान्य क्रम बनाए रखता है। इसकी सीमा आसपास के टेक्स्ट पर भी दिशात्मक प्रभाव डालती है। Isolation सामग्री को अपना scope देता है और साथ ही उस क्रम को आसपास के टेक्स्ट के प्रति तटस्थ रखता है। W3C का specification इन आंतरिक और बाहरी प्रभावों में स्पष्ट अंतर करता है। CSS Writing Modes Level 3: Embeddings and Overrides।

Embedding तभी चुनें, जब बाहरी दिशात्मक प्रभाव इच्छित नतीजे का हिस्सा हो। अलग गिनती के बाद आने वाले स्वतंत्र नेस्टेड लेबल के लिए आम तौर पर isolation उपयुक्त है। केवल nesting का एक और स्तर होना embed चुनने का कारण नहीं है: isolated spans के भीतर भी और दिशात्मक spans हो सकते हैं।

Override आंतरिक नियम बदलता है। यह सामान्य algorithm को दिशात्मक समूहों का क्रम तय करने देने के बजाय, तुरंत भीतर के टेक्स्ट को निर्दिष्ट दिशा में क्रमबद्ध करता है। isolate-override इस मजबूर क्रम के चारों ओर isolation सीमा जोड़ता है। ये अलग-अलग व्यवहार हैं, किसी सामान्य वाक्यांश को ठीक करने के लिए अधिक शक्तिशाली सेटिंग नहीं। MDN: unicode-bidi मान।

अक्षरों का क्रम जानबूझकर दिखाने के लिए, bdo के साथ dir="ltr" या dir="rtl" का उपयोग करें। HTML Standard के अनुसार स्पष्ट दिशा देना आवश्यक है और इस element पर auto की अनुमति नहीं है। इसके rendering नियम unicode-bidi: isolate-override का उपयोग करते हैं, इसलिए HTML के मौजूदा bdo व्यवहार में isolation शामिल है। HTML Standard: bdo element, HTML Standard: द्विदिश टेक्स्ट rendering।

लैटिन लेबल के लिए यह अंतर मायने रखता है: दाएँ से बाएँ आधार का अर्थ यह नहीं कि “हर लैटिन अक्षर उलट दें।” Override उस क्रम को मजबूर कर सकता है। फिर भी, हर glyph की दिशा वही रहती है; bdo अक्षरों की आकृति को उल्टा नहीं बनाता। MDN: bdo element।

अपने Mac पर पूरी तुलना वाला पेज आज़माएँ

नीचे दिए गए standalone पेज के लिए केवल ब्राउज़र और साधारण टेक्स्ट एडिटर चाहिए। इसकी पहली दो पंक्तियाँ सामान्य दिशात्मक व्यवहार की तुलना मजबूर क्रम से करती हैं। बाकी पंक्तियाँ nesting और सीमाओं के विकल्प दिखाती हैं। CSS embedding वाली पंक्ति तरीका दिखाने के लिए शामिल है; किसी सामान्य स्वतंत्र लेबल के लिए HTML isolation पंक्ति से शुरुआत करें।

TextEdit में File > New चुनें, फिर Format > Make Plain Text चुनें। नीचे दिया पूरा कोड paste करें। File > Save चुनें, फ़ाइल का नाम bidi-demo.html रखें और पूछे जाने पर Use .html चुनें। HTML फ़ाइल बनाने के लिए Apple के दस्तावेज़ में यही चरण दिए गए हैं। सेव की गई फ़ाइल अपने डेस्कटॉप ब्राउज़र में खोलें। Apple: Mac पर TextEdit में HTML दस्तावेज़ों के साथ काम करना।

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bidi boundary comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 44rem;
      margin: 2rem auto;
      padding: 0 1rem;
      line-height: 1.7;
    }
    .sample {
      border: 1px solid #777;
      padding: 0.75rem;
    }
    .scope {
      background: #eeeeee;
      outline: 1px dotted #555;
    }
    .embedding {
      direction: rtl;
      unicode-bidi: embed;
    }
  </style>
</head>
<body>
  <h1>Bidi boundary comparison</h1>

  <h2>Ordinary right-to-left base</h2>
  <p class="sample">Before <span class="scope" dir="rtl">ABC</span> after.</p>

  <h2>Forced right-to-left sequence</h2>
  <p class="sample">Before <bdo class="scope" dir="rtl">ABC</bdo> after.</p>

  <h2>Nested isolation</h2>
  <p class="sample">Tile <span class="scope" dir="rtl">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Embedding comparison</h2>
  <p class="sample">Tile <span class="scope embedding">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Automatic isolated direction</h2>
  <p class="sample">Tile <bdi class="scope">A1 (12)</bdi>: 12 items.</p>
</body>
</html>

कुछ भी बदलने से पहले पहली दो पंक्तियाँ देखें। सामान्य दिशात्मक span में ABC अक्षर बाएँ से दाएँ क्रम में रहने चाहिए। बाएँ किनारे से पढ़ने पर override में CBA दिखना चाहिए। यह दस्तावेज़ित तरीकों से निकली अपेक्षा है, ब्राउज़र में किए गए किसी माप की रिपोर्ट नहीं। MDN: bdo का व्यवहार।

इसके बाद, नेस्टेड isolation और embedding वाली पंक्तियों की तुलना करें। आकृतियों के क्रम और उसकी सीमा पर विराम-चिह्नों को देखते हुए शब्दों और गिनती को अपरिवर्तित रखें। दोनों तरीकों में अंतर है, भले ही कोई खास उदाहरण देखने में एक जैसा लगे: हर स्ट्रिंग में isolation और embedding के अलग-अलग दिखने की गारंटी नहीं है। इनका दस्तावेज़ित अंतर इस बात से जुड़ा है कि scope आसपास के bidi resolution में कैसे भाग लेता है। W3C: CSS Writing Modes Level 3।

सीमा जाँचने के लिए, colon को बाहरी दिशात्मक span के भीतर ले जाएँ, सेव करें और फिर से लोड करें। फिर उसे वापस बाहर रखें। इससे यह बदलता है कि विराम-चिह्न किस वाक्यांश का हिस्सा है, इसलिए नतीजे को उसी इच्छित संबंध के आधार पर परखें। अंत में, ब्राउज़र विंडो की चौड़ाई घटाकर देखें कि वाक्य की पंक्ति टूटने पर भी वही सीमाएँ कैसे दिखती हैं।

पृष्ठभूमि और बिंदीदार रूपरेखा जाँचे जा रहे span की पहचान करते हैं। वे निरीक्षण में मदद करते हैं। वे दिशा या isolation नहीं देते।

नतीजा अब भी गलत दिखे, तो कैसे जाँच करें?

सबसे छोटे प्रभावित वाक्यांश से शुरू करके बाहर की ओर जाँचें। एक साथ कई दिशात्मक गुण बदलने से यह पहचानना मुश्किल हो जाता है कि नतीजे के लिए कौन-सी सीमा ज़िम्मेदार थी।

  1. Wrapper जाँचें। क्या उसमें पूरा लेबल है, और केवल वही लेबल है? वाक्य के अलग विराम-चिह्न और गिनतियाँ बाहर रहनी चाहिए, जब तक कि वे लेबल का हिस्सा न हों।
  2. नेस्टेड वाक्यांश जाँचें। किसी दूसरे वाक्यांश के भीतर स्वतंत्र दिशा वाले पहचानकर्ता को अपना dir wrapper चाहिए हो सकता है।
  3. स्वचालित दिशा जाँचें। यदि आधार दिशा ज्ञात है, तो auto की जगह वह स्पष्ट दिशा रखें। यह खास तौर पर काल्पनिक आकृतियों और अंकों के लिए उपयोगी है।
  4. Overrides जाँचें। यदि अक्षरों का क्रम अप्रत्याशित रूप से मजबूर हो रहा है, तो bdo और CSS की unicode-bidi घोषणाएँ देखें।
  5. CSS cascade जाँचें। कोई author rule ब्राउज़र की दिशात्मक styling को बदल सकता है। प्रयोग के लिए जोड़ी गई bidi rules हटाएँ और HTML markup को फिर जाँचें।

पहली दो जाँचें W3C के wrapping और nesting मार्गदर्शन पर आधारित हैं। स्वचालित दिशा की जाँच MDN के dir दस्तावेज़ का पालन करती है; आखिरी जाँचें HTML rendering rules पर आधारित हैं।

क्रम और alignment में भी फर्क करें। text-align: right inline सामग्री को block के दाएँ किनारे पर रखता है; यह वाक्यांश को अलग नहीं करता। text-align: start block की दिशा के अनुसार चलता है, इसलिए आधार दिशा बदलने पर इस्तेमाल होने वाला किनारा भी बदल सकता है। अक्षरों के क्रम की समस्या और पंक्ति की स्थिति को अलग-अलग जाँचें। MDN: text-align।

संगतता के बारे में, WHATWG बताता है कि bdi और bdo सभी मौजूदा ब्राउज़र इंजनों में समर्थित हैं। इससे हर पुराने ब्राउज़र या एम्बेडेड व्यूअर में समर्थन साबित नहीं होता। किसी दूसरे rendering परिवेश की जाँच करते समय उसी वास्तविक लक्ष्य पर परीक्षण करें और दिशात्मक HTML markup बनाए रखें: MDN केवल CSS से isolation करने के बजाय इसकी सलाह देता है, क्योंकि styling को अनदेखा किया जा सकता है। HTML Standard: टेक्स्ट-स्तर के अर्थ, MDN: bdi के उपयोग संबंधी नोट।

अंत में, हर नेस्टेड वाक्यांश के लिए एक स्पष्ट फैसला करें: उसकी आधार दिशा, उसकी सीमा और क्या उसके भीतर अक्षरों का क्रम सामान्य रहना चाहिए। स्वतंत्र लेबल के लिए isolation से शुरुआत करें। Embedding या override तभी रखें, जब लेआउट के लिए उसका विशिष्ट दस्तावेज़ित व्यवहार आवश्यक हो।

स्रोत