Make text direction RTL for languages like Arabic and Persian // add dir='auto' to all html body elements?

[itsmohmans]

⚬ PROBLEM:
In RTL-written languages like Arabic, the text content (video titles, comments, and video descriptions) has the default text direction set to LTR when YouTube's language is English or any other LTR language. This causes the Arabic text to be unreadable in most cases, especially when it's mixed with Latin characters.

⚬ SOLUTION:
The solution to this would be by setting the CSS style direction: rtl to the text elements mentioned above if they start with a character from an RTL-written language.

⚬ ALTERNATIVES:

⚬ RELEVANCE / SCOPE:
This feature is beneficial to all YT users whose main language's script is RTL (A full list here).

⚬ "SIDE EFFECTS":

⚬ CONTEXT:
//
Thank you!

SHORT Table	(Summary)
Problem
Solution
Alternatives
Scope
Side effects
Context

[ImprovedTube]

wonderful! welcome @itsmohmans & thank you

• Lets make a list of characteristics / scope (international sites), where this should equally apply beyond Youtube.com. All comments? Twitter, Reddit, Socialmedia, Discord, ... ?
• the decision algo. per text-element can be better / perfectionist as CPUs are fast.

[itsmohmans]

Lets make a list of characteristics / scope (international sites), where this should equally apply beyond Youtube.com. All comments? Twitter, Reddit, Socialmedia, Discord, ... ?

I see the same problem on Reddit, Discord, and Notion.

I came across this article which suggests settings the HTML attribute dir='auto' for the text elements, and it automatically sets the direction to either RTL or LTR based on the inner text.
From MDN docs:

It can have the following values:
...

• auto, which lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

So this is another option besides using the CSS property direction: rtl. Tested them both in the browser devtools and they work as expected. dir='auto' have a plus that it works both ways (LTR to RTL or RTL to LTR, depending on the text content).

[ImprovedTube]

(just clicked fork and wrote a (future) description https://github.com/code-for-charity/dir-auto-everywhere )
🤔

[itsmohmans]

That's great! Will it have a dedicated script for each site of the ones mentioned (YouTube, LinkedIn, Discord, GitHub, Notion.so), or will it be for more general use?

[ImprovedTube]

you could add some CSS to youtube with improvedTube at the ⋮ settings.

but you can also add CSS to every website with our dark-mode extension
https://chrome.google.com/webstore/detail/dark-mode/declgfomkjdohhjbcfemjklfebflhefl
(without using anything else. Switch off either the "power" - or select dark-theme: disabled. )
just click ⋮, global, and paste css to test it everywhere:
body * {direction: auto;}

(then you could walk your way down the top1million website http://s3-us-west-1.amazonaws.com/umbrella-static/top-1m.csv.zip)

( Maybe Bidi Algo will matter: i.e. body * {direction: auto; unicode-bidi: embed;} (options / documentation: https://drafts.csswg.org/css-writing-modes-3/#unicode-bidi, technical demo )

---

While existing solution target specific parts of sites only, which might avoid unwanted effects. Yet those internal names can change sometimes

for notion.so: https://github.com/obahareth/notion-rtl/blob/541aa4cd68b5d732f79232e1a842125dd8886c49/src/index.js#L11-L45 MIT code (free)

if (window !== top) {
  document.body.innerHTML += '<style type="text/css">.tk.TmwRj *{direction:rtl}</style>';
}

© from https://chrome.google.com/webstore/detail/hangouts-rtl-fixer/oohpklfcenaffjconedjebkaclkachmi

var sites = {
  "youtube.com": [
    "yt-formatted-string:not(.author-text)",
    ".entity-title",
    "#content-text",
    "a#video-title",
    "span#video-title",
    "h1.title",
    "#description-text",
    "#subtitle",
    ".gwt-Anchor",
    "span[debugid=\"linkTitleElement\"]",
    "a.gwt-InlineHyperlink",
    "textarea",
    "input.video-settings-title",
    ".comment-comment",
    ".comment-text-content",
    ".ytp-title-link"
  ],
  "github.com": [
    "td.comment-body p"
  ],
  "linkedin.com": [
    ".feed-shared-text-view span",
    ".feed-shared-main-content--comment span",
    ".ql-editor p"
  ]
};

© from https://chrome.google.com/webstore/detail/rtl-fixer/mkeclhaiiffmeeokkomoameekkpiiecf
...aannd funny: while this one works yet, it causes a bug with one particular post:

[itsmohmans]

Regarding the first solution

but you can also add CSS to every website with our dark-mode extension
https://chrome.google.com/webstore/detail/dark-mode/declgfomkjdohhjbcfemjklfebflhefl
(without using anything else. Switch off either the "power" - or select dark-theme: disabled. )
just click ⋮, global, and paste css to test it everywhere:
body * {direction: auto;}

(then you could walk your way down the top1million website http://s3-us-west-1.amazonaws.com/umbrella-static/top-1m.csv.zip)

( Maybe Bidi Algo will matter: i.e. body * {direction: auto; unicode-bidi: embed;} (options / documentation: https://drafts.csswg.org/css-writing-modes-3/#unicode-bidi, technical demo )

The CSS property direction cannot have auto as a value, so this is not going to work, I also tested it just to make sure.

I think using the HTML attribute dir=auto is better and easier to implement. I haven't taken a look at the second solution from your comment yet, but I'll check it out soon.