Activity

1. github-actions

   assigned

   Brendonovich

   on Jul 14, 2026
2. NXR8 commented on Jul 16, 2026

   

   NXR8

   on Jul 16, 2026

   More actions

   RTL OpenCode — Arabic RTL Support System

   A system that adds Right-to-Left (RTL) text support to the OpenCode Desktop app while keeping code blocks LTR.

   ---

   How It Works

   1. Arabic Detection

   var AR = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF]/;

   Checks for any Arabic character within the first 30 characters of the text:

   • Arabic found → RTL
   • No Arabic → LTR

   Solves mixed-language cases:

   "This is a long English sentence... مع عربي في النهاية"  → LTR (Arabic after 48 chars)
   "Hello مرحبا"                                              → RTL (Arabic within first 30)
   

   2. Prompt Input

   Uses only 3 characters instead of 30 — switches to RTL instantly when the user types the first Arabic character.

   3. List Containers (<ol>, <ul>)

   These are skipped — they inherit direction from their parent (the Arabic paragraph). Individual <li> elements get direction based on their own content.

   4. Locking Code & Links LTR

   When an element is RTL, all code and anchor elements inside are forced LTR:

   code, span.line, .inline-code, a  ←  display:inline-block + dir:ltr

   5. MutationObserver for Streaming

   Monitors DOM changes with:

   • childList: new elements during streaming
   • subtree: all nesting levels
   • characterData: inline text changes

   Re-attaches the input event listener on the prompt input when React re-renders it.

   ---

   Console Snippet

   /* Paste this in Console after typing "allow pasting" */
   
   var s=document.createElement('style');
   s.textContent='p,li,ol,ul,blockquote,h1,h2,h3,h4,h5,h6,table,th,td,[data-slot="text-part-body"],[data-slot="user-message-text"],[data-component="prompt-input"]{text-align:start}'+
   '[data-component="markdown-code"],[data-component="markdown-code"] pre,[data-component="markdown-code"] code,[data-component="markdown-code"] span.line{direction:ltr!important;text-align:left!important}'+
   '[dir="rtl"] ol,[dir="rtl"] ul{padding-inline-start:32px}'+
   '[dir="rtl"] li>ol,[dir="rtl"] li>ul{padding-inline-start:1rem}';
   document.head.appendChild(s);
   
   var AR=/[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF]/;
   var SEL='p,li,ol,ul,blockquote,h1,h2,h3,h4,h5,h6,table,th,td,[data-slot="text-part-body"],[data-slot="user-message-text"]';
   
   function isText(n){return n.matches&&n.matches(SEL)}
   function setDir(el){
     if(!el||el.getAttribute('dr'))return;
     if(el.closest('pre')||el.tagName==='CODE')return;
     var t=(el.textContent||'').trim();
     if(!t){el.setAttribute('dir','ltr');el.setAttribute('dr','1');return}
     el.setAttribute('dir',AR.test(t.substring(0,30))?'rtl':'ltr');el.setAttribute('dr','1');
     if(el.getAttribute('dir')==='rtl')el.querySelectorAll('code,span.line,.inline-code,a,[dir="ltr"]').forEach(function(e){
       if(!e.closest('pre')){e.style.display='inline-block';e.setAttribute('dir','ltr');e.style.textAlign='left'}
     })
   }
   function attInp(el){
     if(!el||el.getAttribute('di'))return;
     el.addEventListener('input',function(){
       var t=(this.textContent||'').trim();
       if(!t)return;
       this.setAttribute('dir',AR.test(t.substring(0,3))?'rtl':'ltr')
     });
     el.setAttribute('di','1')
   }
   function scan(n){
     if(n.nodeType!==1)return;
     if(isText(n))setDir(n);
     if(n.matches&&n.matches('[data-component="prompt-input"],div[contenteditable="true"][role="textbox"]'))attInp(n);
     var f=n.querySelectorAll(SEL+',[data-component="prompt-input"],div[contenteditable="true"][role="textbox"]');
     for(var i=0;i<f.length;i++){
       if(isText(f[i]))setDir(f[i]);
       if(f[i].matches&&f[i].matches('[data-component="prompt-input"],div[contenteditable="true"][role="textbox"]'))attInp(f[i])
     }
   }
   document.querySelectorAll(SEL).forEach(setDir);
   attInp(document.querySelector('[data-component="prompt-input"],div[contenteditable="true"][role="textbox"]'));
   
   new MutationObserver(function(m){
     for(var i=0;i<m.length;i++)
       for(var j=0;j<m[i].addedNodes.length;j++)scan(m[i].addedNodes[j]);
   }).observe(document.getElementById('root')||document.body,{childList:true,subtree:true,characterData:true});

   ---

   Testing

   1. Open DevTools (F12 or Ctrl+Shift+I)
   2. Type allow pasting in the Console
   3. Paste the snippet above
   4. Verify:
      • Arabic text → right-aligned
      • English text → left-aligned
      • Lists → numbers/bullets on the right for Arabic
      • Code blocks → always LTR, left-aligned
      • Streaming responses → applied automatically
3. razavioo commented on Jul 29, 2026

   

   razavioo

   on Jul 29, 2026

   More actions

   Community plugin available: opencode-rtl

   For those looking for RTL support, we've built an OpenCode plugin that automatically applies Unicode bidi isolation (RLI/LRI/PDI) to the AI's responses and system prompts.

   npm install opencode-rtl

   // opencode.json
   {
     "plugin": [
       ["opencode-rtl", { "language": "auto" }]
     ]
   }

   What it fixes today:

   • Injects RTL system prompts so the AI responds in your language
   • Protects inline code (console.log()) and markdown blocks from getting scrambled by wrapping them in LTR isolates
   • Works out-of-the-box for Arabic, Persian, Hebrew, Urdu, etc.
   • Fixes character ordering and mixed-direction (BiDi) text issues

   Current limitations:

   • Right-alignment: The plugin fixes the ordering of words and code (which fixes a lot of the unreadable output), but the text is still left-aligned. Full right-alignment requires native support in the renderer (like CSS dir="rtl" as discussed in this issue, or native alignment in the CLI TUI).
   • Streaming: It formats the text after the response completes. (We are proposing a streaming hook to fix this).

   Repo: https://github.com/razavioo/opencode-rtl
4. razavioo commented on Sep 27, 2026

   

   razavioo

   on Sep 27, 2026

   More actions

   تا زمانی که پشتیبانی بومی RTL به OpenCode اضافه بشه، میتونید از پلاگین opencode-rtl استفاده کنید.

   این پلاگین تنظیمات اختصاصی RTL رو فراهم میکنه:

   // opencode.jsonc (OpenCode 2)
   {
     "plugins": [{
       "package": "opencode-rtl",
       "options": {
         "language": "auto",           // تشخیص خودکار زبان
         "isolateUserMessages": "auto", // ایزولهسازی پیام کاربر
         "isolateAssistantText": "auto",// ایزولهسازی پاسخ مدل
         "isolateToolOutput": "off",    // خروجی ابزارها
         "digitMode": "preserve",      // حفظ اعداد لاتین یا تبدیل به فارسی
         "forceDirection": "auto",     // تشخیص خودکار جهت
         "systemGuidance": true        // راهنمای سیستمی برای مدل
       }
     }]
   }

   ۱۰ زبان RTL پشتیبانی میشه: عربی، فارسی، عبری، اردو، پشتو، سندی، ییدیش، دیوهی، اویغوری، کردی.
5. neriousy commented on Oct 1, 2026

   

   neriousy

   on Oct 1, 2026

   Member

   More actions

   Closing as a duplicate of #16875, which tracks RTL (Persian/Arabic) support in the TUI. Please add your details there. In the meantime, the community opencode-rtl plugin mentioned there may help.

   به‌عنوان تکراریِ #16875 بسته شد؛ لطفاً جزئیات را آنجا اضافه کنید.
6. neriousy

   closed this as a duplicateof RTL language support (Persian/Arabic) - characters appear reversed and disconnected #16875 on Oct 1, 2026