Suggestions

[amirhhashemi]

Hi Mahdi. I hope you are doing great. I saw your comment in Virgool and it immediately got my attention.

I have a few suggestions to improve the extension.

dir attribute

The way you currently change the direction of LTR elements is that you create a CSS class with direction: rtl property and then add it to every element that should be RTL. That might not work well in all websites.

1. Some websites have a strict CSP that prevents adding arbitrary CSS styles and it completely breaks the extension.
2. The class you add might override an already existing class.
3. Component libraries, Tailwindcss plugins and anything that supports RTL in addition to LTR, usually checks for the dir attribute to detect RTL elements and adjust its styles for RTL. By adding dir="rtl" you make sure that those elements look the way they are intended to.

Also W3C suggests to use the dir attribute over CSS direction propery whenever possible:

You should always use dedicated bidi markup to describe your content, where markup is available.

For HTML, the bidi markup is sufficient and no CSS bidi styling is needed. You should never apply CSS bidi styling to ordinary elements or attributes. This includes content delivered as XML using XHTML 1.x or polyglot markup.

You can of course do it in addition to the current method.

Other languages

Currently, the extension only supports Arabic but there are other RTL languages. This Regex from Lexical (the editor that is used in most Facebook products) covers a good number of them:

// https://github.com/facebook/lexical/blob/ede6500447068c86b18188597909b1b8b54da5ca/packages/lexical/src/LexicalConstants.ts#L94C5-L94C5

const RTL = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC';
const LTR =
  'A-Za-z\u00C0-\u00D6\u00D8-\u00F6' +
  '\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF\u200E\u2C00-\uFB1C' +
  '\uFE00-\uFE6F\uFEFD-\uFFFF';

export const RTL_REGEX = new RegExp('^[^' + LTR + ']*[' + RTL + ']');

Other elements

Currently the extension only updates the direction of p and span elements. I think it's a good idea to add these elements too:

• blockquote
• h1...h6

---

I'm busy at the time and inexperienced in writing chrome extensions, that's why I didn't make a PR myself.

[epicmet]

Hi Amir, I'm thrilled you looked into my extension, and thank you for your suggestions.

About the dir attribute, I wasn't aware of the strict CSP of some websites, but I chose to inject the style tag for two reasons. One, it's the way the DarkReader extension works and I figured "It must be best practice then". Two, managing the doing and undoing of the RTL action is much easier if we detect the target elements on the initial load and mark them by adding a class. This way by just injecting or removing the style tag we can undo the RTL action much faster than changing all the dir="rtl" attributes. I would look for better or alternative solutions for websites that do not let style tag injection.
Also, I prefix the classes with RTL_. At the moment, I think this should prevent overwriting other classes in 99% of the time. But you're right on this too.

About the language support. Yep currently only supports Arabic/Persian but the regex you provide would support many other languages. Thanks A lot.

And finally about the HTML tag support. The reason I haven't supported other HTML tags other than p, span (and in some cases div) is that there is a bug about detecting iframe tags (used in the Read text editors on some websites like Jira or Trello) I'm I was working on the core design of the extension to solve this issue and then I would be able to add support for the new tags with just some configurations. i.e. I didn't wanted to support more tags before I had a better code architecture.

You're comments made me so happy, thank you ❤️
I would look to apply your suggestions to the next version. Also, I would love it if you could contribute yourself, if you are inexperienced with extension development, I can gladly help you out!

[amirhhashemi]

The strict CSP problem is not that big of a deal. I know popular frontend frameworks that inject arbitrary styles to do animations for example. I just wanted to throw it out there.

About managing undoing/redoing, you are right. Removing a CSS class is much faster than removing an attribute from a lot of elements. But the question is how often users would want to enable/disable the extension and how costly it is to run querySelectorAll + a bunch of other simple computations. IMHO, the benefits of dir make it worth doing more research about it.

Focusing on the core design is probably the best move right now. I wish I had more time so I can help you. I've worked on similar stuff before (tiptap-text-direction) ,and I very much enjoy it.

[epicmet]

Yup, I will look into the CSP problem for sure.

Yeah, you're right, I was so caught up on performance that I wasn't taught how often users are going to do/undo the RTL action :)). I will look into using dir.

Thanks a lot Amir. If you ever find time to contribute to the project let me know. Besides this project though I'm genuinely interested in connecting with you more. I think we have some common interests that we can share.

[amirhhashemi]

Thanks a lot Amir. If you ever find time to contribute to the project let me know. Besides this project though I'm genuinely interested in connecting with you more. I think we have some common interests that we can share.

Sure, it would be my honor to work with you. I will probably come back with an Issue or PR someday :)
Here is my email just in case: ahhperso@gmail.com