إضافة لمتصفح Chrome تُصلح عرض النص العربي في أي موقع، بثلاث حالات تختار بينها بحسب الموقع:
| الحالة | ماذا تفعل | لمن |
|---|---|---|
| إيقاف | لا تلمس شيئاً | المواقع التي لا تحتاج شيئاً |
| نص فقط | تضبط dir="rtl" على عناصر النص التي تحوي حرفاً عربياً، فيمضي السطر من اليمين وتلتصق نقطة الختام بآخره الأيسر — ولا يُلمس تخطيط الموقع إطلاقاً |
المواقع الحديثة التي لم تُختبر في RTL، حيث قلب المستند يعبث بواجهاتها |
| اتجاه كامل | تفرض dir="rtl" على <html> و<body>، فينعكس التخطيط مع النص |
المواقع البسيطة، أو من يريد رؤية كيف سيبدو موقعه بالعربية |
نسخة معدَّلة ومُعاد بناؤها من إضافة rtl-toggle للأخ Aris Mag، برخصة MIT كما هي.
dir="rtl" ليست مجرّد «اقرأ من اليمين»، بل تغيير لمحور التخطيط: كل صف flex
ينعكس ترتيبه، وكل شبكة grid تبدأ من اليمين، وكل margin-left وleft و
text-align: left وtranslateX() تبقى فيزيائية فلا تنعكس. فالنتيجة على موقع لم
يُختبر بالعربية: نصف انقلاب — النص يقبل الاتجاه الجديد والواجهة حوله لا.
ولهذا وُجد الوضع النصي: لا يمسّ المستند، بل يصلح النص وحده.
| المشكلة | العلاج |
|---|---|
| سطر يجمع العربية والإنجليزية فأرقامه وأقواسه تقفز | اتجاه صريح rtl لعنصر النص في الوضع النصي، وعزل unicode-bidi: isolate يحصر الأثر فيه ولا يُعيد ترتيب ما حوله |
| نقطة الختام تقفز إلى أول السطر حين تكون آخر كلمة إنجليزية | مع القاعدة rtl تلتصق النقطة بآخر السطر الأيسر، ولو كان آخر ما فيه VS Code |
| علامة البند تنفصل عن النص في القائمة | البند المعلَّم يأخذ list-style-position: inside فتتبع العلامةُ جهةَ النصّ |
| جملة عربية أراد المصمّم توسيطها تُزاح إلى اليمين | لا تُفرض محاذاة إلا إذا فرض الموقع left صراحةً |
| كتلة شيفرة داخل صفحة عربية تتفكك حروفها | direction: ltr; unicode-bidi: isolate لـpre وcode وkbd وsamp وvar وأجزائها الملوّنة |
موقع يضبط dir على <body> لا <html> |
الوضع الكامل يضبط السمتين، ويحفظ قيمة الموقع ليستعيدها عند الإطفاء |
موقع يعيد كتابة dir بعد التحميل |
مراقب MutationObserver يعيد الفرض بهدوء |
| موقع أحادي الصفحة (SPA) يتنقّل دون إعادة تحميل | اعتراض pushState وreplaceState وpopstate وhashchange |
حاوية flex داخل نص عربي |
لا تُعلَّم أبداً في الوضع النصي، حمايةً من انعكاس أبنائها |
| موقع لا تريد أن تلمسه | استثنِ هذا الموقع من قائمة الزر الأيمن |
- نزّل المجلد كما هو.
- افتح
chrome://extensions/. - فعّل وضع المطوّر (Developer mode).
- اضغط Load unpacked واختر مجلد الإضافة.
- ثبّت الإضافة في الشريط (Pin).
- نقرة على الأيقونة تدوّر الحالات: إيقاف ← اتجاه كامل ← نص فقط ← إيقاف.
- نقرة بالزر الأيمن على الأيقونة تعطي القائمة مباشرة: الاتجاه الكامل، أو نص فقط، أو إيقاف، أو استثنِ هذا الموقع (وإلغاء الاستثناء).
- اختصار لوحة المفاتيح
Alt + Shift + R(قابل للتغيير منchrome://extensions/shortcuts). - كل موقع يتذكّر حالته بين الجلسات، والقيم القديمة (قبل تعدّد الحالات) تُقرأ كـ«اتجاه كامل» تلقائياً.
| الشارة | المعنى |
|---|---|
| RTL على خلفية صفراء | الوضع الكامل: المستند مقلوب الآن |
| نص على خلفية خضراء | الوضع النصي: النص عُرِّب والتخطيط سليم |
| RTL على خلفية رمادية | الموقع عربي أصلاً، والإضافة لم تغيّر شيئاً |
| بلا شارة | لا تدخّل |
| الملف | الدور |
|---|---|
manifest.json |
تعريف الإضافة (Manifest V3)، الأذونات، الاختصار، وحقن الملفات |
rtl-content.js |
منطق الحالات الثلاث: الحفظ والاستعادة، الفرض، تعليم النص، المراقبة، الاستثناء |
rtl.css |
طبقتا العرض: الكامل (data-rtl-toggle="on") والنصي (="soft")، وكلتاهما مقيَّدتان فلا تمسّان موقعاً لم تطلبه |
background.js |
النقر، الاختصار، قائمة الزر الأيمن، والشارة |
images/arabic-text-rtl.svg و-128/48/32.png |
الشعار ومقاساته |
test/selftest.mjs |
33 تحقّقاً على منطق الحالات داخل متصفح مُحاكى |
test/soft.html وtest/render.html |
صفحتا قياس لوضع «نص» وللوضع الكامل على بنية دردشة حقيقية |
legacy/ |
ملفات النسخة الأصلية كما كانت، للرجوع إليها |
لا يحتاج تشغيله إلى متصفح ولا إلى شبكة؛ يُحاكي DOM وchrome.storage وhistory،
ويتحقق من أن الوضع النصي لا يكتب dir على الجذر، ومن أنه يعلّم النص العربي
ويترك الإنجليزي، ومن أنه لا يعلّم حاويات flex، ومن تدوير الحالات والاستثناء:
node test/selftest.mjs rtl-content.js- صفحات
chrome://وإضافات المتصفح ومستندات PDF لا تقبل حقن سكربت. - الإضافة تعمل في الإطار الرئيسي فقط (
all_frames: false). - في الوضع النصي، عناوين الأزرار والقوائم تُعلَّم أيضاً إن حوت عربية — وهذا مقصود، لكنه لا يغيّر تخطيط الحاوية لأن الحاويات نفسها لا تُعلَّم.
- الوضع الكامل لا يعكس الخصائص الفيزيائية في تصميم الموقع (وهذا سبب وجود الوضع النصي).
- سمة التعليم الداخلية ما زالت بالبادئة
data-rtl-toggle-*(اسم المشروع الأصلي) لأنها عقد ثابت بينrtl.cssوrtl-content.jsوالاختبارات، وتغييرها لا يغيّر شيئاً في سلوك الإضافة.
MIT — راجع LICENSE، وهو ملف الرخصة الأصلي كما هو.
- الأصل: rtl-toggle — Aris Mag.
- هذه النسخة: إعادة بناء لمنطق الاتجاه، وإصلاح الوضع النصي، واستثناء المواقع، واختبار آلي، وهوية جديدة (الاسم والشعار).