المشكلة
لو بتكتب عربي وإنجليزي مع بعض في أي موقع، البراوزر بيتلخبط في الاتجاه:
جملة زي "مرحبا 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! 🙏