في نصوص HTML المتداخلة، اختر العزل عندما ينبغي لكل عبارة أن تحتفظ باتجاهها من دون التأثير في العبارات المجاورة. استخدم التضمين فقط عندما يكون التفاعل مع النص المحيط مقصودًا، والتجاوز عندما يتطلب التصميم صراحةً فرض ترتيب الأحرف.

يساعد هذا الدليل من يحرر صفحة HTML على Mac في اختيار الآلية المناسبة، والحفاظ على التسميات وعلامات الترقيم المتداخلة، والتحقق من النتيجة في متصفح سطح المكتب. تستخدم الأمثلة تسميات وأرقامًا وأشكالًا هندسية مختلقة.

أي آلية تناسب مهمة التخطيط؟

ابدأ بسؤالين: هل ينبغي للمتصفح تطبيق الترتيب ثنائي الاتجاه المعتاد داخل العبارة، وهل ينبغي لهذه العبارة التأثير في ترتيب النص المحيط؟ ينتج عن هذين القرارين المقارنة العملية التالية. يشرح مرجع unicode-bidi من MDN سلوكيات CSS الأساسية.

المتطلب الآلية أسلوب HTML المفضل
منح عبارة ذات اتجاه معروف حدًا مستقلًا العزل عنصر مضمن موجود مع dir="ltr" أو dir="rtl"
عزل عبارة اتجاهها غير معروف العزل مع تحديد الاتجاه تلقائيًا bdi، أو عنصر مضمن موجود مع dir="auto"
إنشاء نطاق اتجاهي يظل مؤثرًا في الترتيب المحيط التضمين حالة CSS متخصصة تستخدم unicode-bidi: embed
فرض تسلسل الأحرف مع عزل النتيجة التجاوز المعزول bdo مع dir="ltr" أو dir="rtl" صريح
فرض تسلسل الأحرف مع الإبقاء على التفاعل مع النص المحيط التجاوز غير المعزول حالة CSS متخصصة تستخدم unicode-bidi: bidi-override

في كتابة HTML المعتادة، ابدأ بالترميز الاتجاهي. توصي W3C بإحاطة كل عبارة معاكسة الاتجاه بإحكام، وبتمثيل العبارات المتداخلة بترميز متداخل. وهذا يجعل الحدود المقصودة ظاهرة في المستند. W3C: الترميز المضمن والنص ثنائي الاتجاه في HTML.

كيف ينبغي ترميز النص المعزول المتداخل؟

امنح كل عبارة كاملة حدًا اتجاهيًا مستقلًا. إذا كان عنصر مضمن موجود يحتوي على تلك العبارة بالضبط، فأضف dir إليه. وإلا، فأدرج عنصر span. أبقِ علامات الترقيم التابعة للعبارة داخل العنصر المحيط بها، وعلامات ترقيم الجملة المحيطة خارجها. وتصف W3C ذلك بأنه «إحاطة العبارة بإحكام». إرشادات W3C للترميز المضمن.

لتسمية شكل اصطناعية يُراد أن تسير من اليمين إلى اليسار وتتضمن معرّفًا يسير من اليسار إلى اليمين، يمكن أن تكون البنية بهذا المقتطف التوضيحي:

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

هناك ثلاثة نطاقات مقصودة: الجملة الخارجية، وتسلسل الأشكال، والمعرّف المتداخل. العدد تابع للجملة، لذلك يبقى خارج تسلسل الأشكال. إن تحديد العبارة الخارجية فقط يترك المعرّف الداخلي بلا حد صريح خاص به. ويتبع هذا التداخل بنية W3C الموصى بها للتغييرات الاتجاهية. إرشادات W3C للعبارات المتداخلة.

عندما يكون اتجاه التسمية المدرجة غير معروف، يوفّر bdi العزل ويستخدم افتراضيًا الكشف التلقائي عن الاتجاه. أما span العادي من دون dir فلا يوفّر هذا السلوك الافتراضي نفسه. تنص WHATWG على أن bdi يستخدم افتراضيًا auto بدلًا من وراثة الاتجاه بالطريقة المعتادة. معيار HTML: عنصر bdi.

تحديد الاتجاه تلقائيًا هو استدلال يعتمد على أول حرف قوي الاتجاه، مع استثناءات محددة للعناصر الاتجاهية المتداخلة. وهو لا يفهم المعنى المقصود للتسمية. لذلك فإن التسمية التي تبدأ بـ A1 تعطي إشارة من اليسار إلى اليمين، حتى لو أوحى محتواها اللاحق بعرض مختلف. استخدم اتجاهًا صريحًا عندما يكون المتطلب معروفًا لديك. MDN: السمة العامة dir.

تتطلب التسمية التي تقتصر على الأشكال والأرقام عناية خاصة: فهي لا تحتوي على حرف قوي الاتجاه. في الأمثلة المضمنة المعتادة هنا، تعود خوارزمية HTML إلى اليسار نحو اليمين عندما لا يعثر تحديد الاتجاه تلقائيًا على حرف مؤهل. حدّد dir="rtl" إذا كان ينبغي أن يكون لهذا التسلسل الاصطناعي أساس من اليمين إلى اليسار. معيار HTML: السمة dir.

متى يكون التضمين والتجاوز مناسبيْن؟

ينشئ التضمين مستوى اتجاهيًا آخر مع الإبقاء على ترتيب الأحرف المعتاد داخله. ويؤثر حده أيضًا اتجاهيًا في النص المحيط. أما العزل فيمنح المحتوى نطاقًا خاصًا به، مع جعل التسلسل محايدًا تجاه ما يحيط به. ويميّز معيار W3C صراحةً بين هذه التأثيرات الداخلية والخارجية. أنماط الكتابة في CSS المستوى 3: التضمينات والتجاوزات.

اختر التضمين فقط عندما يكون هذا التأثير الاتجاهي الخارجي جزءًا من النتيجة المقصودة. وبالنسبة إلى تسمية متداخلة مستقلة يتبعها عدد منفصل، يكون العزل عادةً الخيار المناسب. لا يشكل تعمّق مستوى التداخل وحده سببًا لاختيار embed؛ إذ يمكن أن تحتوي المقاطع المعزولة نفسها على مقاطع اتجاهية أخرى.

يغيّر التجاوز القاعدة الداخلية. فهو يفرض تسلسل النص المباشر بالاتجاه المحدد، بدلًا من السماح للخوارزمية المعتادة بتحديد مقاطعه الاتجاهية. ويضيف isolate-override حد عزل حول هذا الترتيب المفروض. هذان سلوكان مختلفان، وليسا إعدادين أقوى لتصحيح عبارة عادية. MDN: قيم unicode-bidi.

لعرض مقصود لترتيب الأحرف، استخدم bdo مع dir="ltr" أو dir="rtl". يفرض معيار HTML اتجاهًا صريحًا ويحظر auto على هذا العنصر. وتستخدم قواعد العرض فيه unicode-bidi: isolate-override، لذا يشمل سلوك bdo الحالي في HTML العزل. معيار HTML: عنصر bdo، معيار HTML: عرض النص ثنائي الاتجاه.

هذا التمييز مهم للتسميات اللاتينية: الأساس من اليمين إلى اليسار لا يعني «اعكس كل حرف لاتيني». يمكن للتجاوز فرض ذلك التسلسل. وحتى عندها، تحتفظ المحارف المفردة باتجاهها؛ فـ bdo لا يرسم أشكال الحروف معكوسة. MDN: عنصر bdo.

جرّب صفحة مقارنة كاملة على Mac

لا تحتاج الصفحة المستقلة التالية إلا إلى متصفح ومحرر نصوص عادي. يقارن الصفان الأولان بين المعالجة الاتجاهية المعتادة والترتيب المفروض. وتوضح الصفوف المتبقية خيارات التداخل والحدود. أُدرج صف التضمين في CSS لعرض الآلية؛ واجعل صف العزل في HTML نقطة البداية لتسمية مستقلة معتادة.

في TextEdit، اختر File > New، ثم Format > Make Plain Text. ألصق الشيفرة كاملة أدناه. اختر File > Save، وسمِّ الملف bidi-demo.html، واختر Use .html إذا طُلب منك ذلك. هذه هي الخطوات التي توثقها Apple لإنشاء ملف HTML. افتح الملف المحفوظ في متصفح سطح المكتب. Apple: العمل مع مستندات HTML في TextEdit على Mac.

<!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>

افحص الصفين الأولين قبل إجراء أي تغيير. ينبغي أن يحافظ المقطع الاتجاهي العادي على ABC بترتيب الأحرف من اليسار إلى اليمين. وينبغي أن يعرض التجاوز CBA عند القراءة من الحافة اليسرى. هذا توقّع مستنتج من الآليات الموثقة، وليس قياسًا معلنًا من متصفح. MDN: سلوك bdo.

بعد ذلك، قارن صفّي العزل والتضمين المتداخلين. أبقِ الكلمات والعدد كما هما بينما تفحص تسلسل الأشكال وعلامات الترقيم عند حدوده. تختلف الآلية حتى لو بدا مثال معين متطابقًا: فليس مضمونًا أن ينتج العزل والتضمين نتائج مرئية مختلفة لكل سلسلة. ويتعلق الفرق الموثق بكيفية مشاركة النطاق في حل ثنائي الاتجاه للنص المحيط. W3C: أنماط الكتابة في CSS المستوى 3.

لاختبار الحدود على نحو مفيد، انقل النقطتين إلى داخل النطاق الاتجاهي الخارجي، ثم احفظ الملف وأعد تحميله. بعد ذلك أعدهما إلى الخارج. أنت تغيّر العبارة التي تملك علامة الترقيم، لذا قيّم النتيجة وفقًا للملكية المقصودة. وأخيرًا، ضيّق نافذة المتصفح للتحقق من الحدود نفسها عند التفاف الجملة.

تحدد الخلفية والإطار المنقّط المقطع الذي يجري اختباره. وهما أداتا فحص، ولا يحددان الاتجاه أو العزل.

كيف تشخّص نتيجة ما زالت تبدو خاطئة؟

ابدأ بأصغر عبارة متأثرة، ثم انتقل إلى الخارج. فتغيير عدة خصائص اتجاهية دفعة واحدة يصعّب تحديد الحد الذي تسبب في النتيجة.

  1. تحقق من العنصر المحيط. هل يحتوي التسمية كاملةً، ولا يحتوي إلا عليها؟ ينبغي أن تبقى علامات ترقيم الجملة والأعداد المنفصلة خارجه، إلا إذا كانت تابعة للتسمية.
  2. تحقق من العبارات المتداخلة. قد يحتاج المعرّف ذو الاتجاه المستقل داخل عبارة أخرى إلى عنصر dir خاص به.
  3. تحقق من الاتجاه التلقائي. إذا كان الاتجاه الأساسي المقصود معروفًا، فاستبدل auto بذلك الاتجاه الصريح. وهذا مفيد خصوصًا للأشكال والأرقام الاصطناعية.
  4. تحقق من التجاوزات. إذا كان تسلسل الأحرف مفروضًا على نحو غير متوقع، فافحص bdo وتصريحات CSS unicode-bidi.
  5. تحقق من تتابع CSS. يمكن لقاعدة من المؤلف أن تستبدل التنسيق الاتجاهي للمتصفح. أزل قواعد bidi التجريبية وأعد اختبار ترميز HTML.

تتبع الفحوصان الأولان إرشادات W3C للإحاطة والتداخل. ويتبع فحص الاتجاه التلقائي توثيق dir من MDN؛ أما الفحوص الأخيرة فتتبع قواعد العرض في HTML.

ميّز أيضًا بين الترتيب والمحاذاة. يضع text-align: right المحتوى المضمن بمحاذاة الحافة اليمنى للكتلة؛ لكنه لا ينشئ عبارة معزولة. أما text-align: start فيتبع اتجاه الكتلة، لذا قد يؤدي تغيير الاتجاه الأساسي أيضًا إلى تغيير الحافة التي يستخدمها. شخّص مشكلة ترتيب الأحرف بمعزل عن موضع السطر. MDN: text-align.

في ما يتعلق بالتوافق، توثق WHATWG أن bdi وbdo مدعومان في جميع محركات المتصفحات الحالية. وهذا لا يثبت دعمهما في كل متصفح قديم أو عارض مضمّن. عند التحقق من بيئة عرض أخرى، اختبر البيئة المستهدفة نفسها واحتفظ بترميز HTML الاتجاهي: توصي MDN به بدلًا من العزل المعتمد على CSS فقط، لأن التنسيق قد يُتجاهل. معيار HTML: دلالات مستوى النص، MDN: ملاحظات استخدام bdi.

اختم بقرار صريح لكل عبارة متداخلة: اتجاهها الأساسي، وحدّها، وما إذا كان ينبغي أن يظل ترتيب الأحرف الداخلي معتادًا. ابدأ بالعزل للتسمية المستقلة. وأبقِ التضمين أو التجاوز فقط عندما يتطلب التخطيط سلوكه الموثق المحدد.

المصادر