المشكلة

لو بتكتب عربي وإنجليزي مع بعض في أي موقع، البراوزر بيتلخبط في الاتجاه:

جملة زي "مرحبا API بتاعك كويس" — كلمة API بتتعكس وتتقرأ غلط بسبب الـ Unicode Bidi Algorithm.

المشكلة دي مش في موقع معين — هي موجودة في كل المواقع. حتى Claude.ai وChatGPT نفسهم بيعانوا منها.

الحل

بدل ما نضبط dir="rtl" على الـ element بس، عملت BiDi parser حقيقي يقسّم النص:

"مرحبا API tools بتاعك"
       ↓ tokenizer
[arabic] [ltr: "API"] [ltr: "tools"] [arabic]
       ↓ renderer
مرحبا <bdi dir="ltr">API</bdi> <bdi dir="ltr">tools</bdi> بتاعك

كل كلمة إنجليزي بتتلف في <bdi dir="ltr"> — عنصر HTML مصمم خصيصاً لعزل اتجاه النص.

تحدي الـ Streaming

المواقع زي Claude.ai وChatGPT بترسم الرد حرف حرف، فالـ MutationObserver بيتفعّل مئات المرات في الثانية.

الحل كان debounce 300ms — بنستنى الـ streaming يخلص وبعدين نصلح مرة واحدة.

النتيجة

• يشتغل على أي موقع تلقائياً
• يصلح الـ inputs أثناء الكتابة
• يدعم المواقع الديناميكية (React, Vue, SPAs)
• خفيف — مفيش servers، مفيش tracking

الكود

المشروع open source بالكامل:

👉 https://github.com/EzzEl-Din/arabic-rtl-fixer

لو عندك feedback أو لقيت bug على أي موقع، افتح issue على GitHub! 🙏