Issue with RTL Translation Display in Brave

Browser Support
,
1

Description of the issue:
The translation feature in Brave does not correctly handle RTL (right-to-left) languages such as Arabic. When translating pages from different languages such as English into Arabic, the output text is displayed in a left-to-right orientation instead of right-to-left. Moreover, there is a lack of proper Bi-Directional text support, which becomes particularly problematic when a page contains a mix of RTL and LTR languages.

Steps to Reproduce:

  1. Navigate to a website that contains English or any other LTR language such as (https://brave.com/about/)
  2. Use Brave’s built-in translation feature to translate the page into Arabic.
  3. Observe that the translated text appears in a left-to-right format instead of the correct right-to-left orientation, and the sentence order becomes incorrect if English text is embedded within Arabic content.

Actual Result (gifs and screenshots are welcome!):

1
11920×857 79.8 KB

2
21920×905 77.6 KB

Expected results:

  1. The translated text should be displayed in a right-to-left format for RTL languages. (Text Alignment).
  2. The translated page direction must appear from right-to-left for RTL languages. (CSS page direction)
  3. The browser must implement proper Bi-Directional text support to ensure that content with mixed language directions is rendered accurately.

Reproduces how often:
This issue occurs consistently.

Operating System and Brave Version:

  1. Affected operating systems: (Windows 10, Windows 11, Android, iOS)
  2. Brave Browser version currently in use: 1.75.175

Additional Information:
Microsoft Edge effectively handles RTL translations by correctly displaying text in its natural right-to-left format and supporting Bi-Directional content. Implementing a similar feature in Brave would significantly enhance the user experience for RTL language speakers.

2

Valuable information about RTL direction and layouts

3

Thank you for reaching out to us about this. I’ve forwarded some of our devs about this for review.

4

Thank you @Mattches and for the devs. We count on all of you.

5

@Mattches

I found a manual solution for the above problem. I used the Tampermonkey extension on the Brave browser and added the following code, which successfully forced the RTL direction of the Arabic text even after translation to improve the reading experience.

// ==UserScript==
// @name        Arabic RTL & Custom Font
// @namespace   http://tampermonkey.net/
// @version     1.1
// @description Force Arabic text to RTL and apply "IBM Plex Sans Arabic" font
// @match       *://*/*
// @grant       GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Add custom CSS to enforce RTL and apply font
    GM_addStyle(`
        * {
            font-family: "IBM Plex Sans Arabic", sans-serif !important;
        }
        
        [lang="ar"] *, [lang|="ar"] * {
            direction: rtl !important;
            text-align: right !important;
        }
        
        [lang]:not([lang="ar"]) *, [lang|="en"] *, [lang|="fr"] *, [lang|="de"] * {
            direction: ltr !important;
            text-align: left !important;
        }
    `);

    // Function to update direction when language changes (e.g., after translation)
    function applyRTL() {
        if (document.documentElement.lang.startsWith("ar") || document.body.lang.startsWith("ar")) {
            document.body.style.direction = "rtl";
            document.body.style.textAlign = "right";
            console.log("RTL mode activated");
        } else {
            document.body.style.direction = "ltr";
            document.body.style.textAlign = "left";
            console.log("LTR mode activated");
        }
    }

    // Observe language changes (for instant translation adjustments)
    const observer = new MutationObserver(applyRTL);
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["lang"] });

    // Apply RTL on page load
    applyRTL();
})();

How does the script work?
It detects all elements that contain [lang="ar"] or any language that starts with "ar" and forces them to RTL.
It monitors language changes on the page, ensuring the application remains effective even after translation.
It automatically applies the IBM Plex Sans Arabic font to all Arabic text. (This is optional as you prefer).

This solution is effective, but it should not be relied upon as a permanent fix. Proper language direction support should be built into the browser by default to ensure an optimal user experience. Not all users are technically proficient or capable of writing scripts. In fact, I’m not a programmer myself—I used ChatGPT to help me solve this issue.