The latest articles on DEV Community by EzzEl-Din (@ezzeldin). https://dev.to/ezzeldin https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3910752%2Fa359fce6-4727-4773-aefd-6e430d0fdd3a.png https://dev.to/ezzeldin en EzzEl-Din Sun, 03 May 2026 18:13:37 +0000 https://dev.to/ezzeldin/mlt-chrome-extension-yslh-mshkl-lns-lrby-fy-lbrwzr-31ld https://dev.to/ezzeldin/mlt-chrome-extension-yslh-mshkl-lns-lrby-fy-lbrwzr-31ld <h2> المشكلة </h2> <p>لو بتكتب عربي وإنجليزي مع بعض في أي موقع، البراوزر بيتلخبط في الاتجاه:</p> <p>جملة زي "مرحبا API بتاعك كويس" — كلمة <code>API</code> بتتعكس وتتقرأ غلط بسبب الـ Unicode Bidi Algorithm.</p> <p>المشكلة دي مش في موقع معين — هي موجودة في كل المواقع. حتى Claude.ai وChatGPT نفسهم بيعانوا منها.</p> <h2> الحل </h2> <p>بدل ما نضبط <code>dir="rtl"</code> على الـ element بس، عملت <strong>BiDi parser حقيقي</strong> يقسّم النص:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>"مرحبا API tools بتاعك" ↓ tokenizer [arabic] [ltr: "API"] [ltr: "tools"] [arabic] ↓ renderer مرحبا &lt;bdi dir="ltr"&gt;API&lt;/bdi&gt; &lt;bdi dir="ltr"&gt;tools&lt;/bdi&gt; بتاعك </code></pre> </div> <p>كل كلمة إنجليزي بتتلف في <code>&lt;bdi dir="ltr"&gt;</code> — عنصر HTML مصمم خصيصاً لعزل اتجاه النص.</p> <h2> تحدي الـ Streaming </h2> <p>المواقع زي Claude.ai وChatGPT بترسم الرد حرف حرف، فالـ MutationObserver بيتفعّل مئات المرات في الثانية.</p> <p>الحل كان <strong>debounce 300ms</strong> — بنستنى الـ streaming يخلص وبعدين نصلح مرة واحدة.</p> <h2> النتيجة </h2> <ul> <li>يشتغل على أي موقع تلقائياً</li> <li>يصلح الـ inputs أثناء الكتابة</li> <li>يدعم المواقع الديناميكية (React, Vue, SPAs)</li> <li>خفيف — مفيش servers، مفيش tracking</li> </ul> <h2> الكود </h2> <p>المشروع open source بالكامل:</p> <p>👉 <a href="https://github.com/EzzEl-Din/arabic-rtl-fixer" rel="noopener noreferrer">https://github.com/EzzEl-Din/arabic-rtl-fixer</a></p> <p>لو عندك feedback أو لقيت bug على أي موقع، افتح issue على GitHub! 🙏</p> webdev chrome opensource arabic