Trello RTL Support Userscript

Trello-RTL-Support.user.js

// ==UserScript==
// @name         Trello RTL Support
// @version      0.1
// @author       Amm1rr
// @description  Adds RTL (Right-to-Left) support for Trello boards, optimizing layout for RTL languages like Persian, Arabic, and Hebrew
// @homepage     https://github.com/Amm1rr/
// @namespace    amm1rr
// @match        https://trello.com/b/*
// @namespace    [email protected]
// @grant        none
// @updateURL    https://gist.github.com/Amm1rr/62c5df57efae99d6e2464c80d230fea4/raw/4023c94fca9b10094772c6dbeb9f232d08db67b0/Trello-RTL-Support.user.js
// @license      MIT
// ==/UserScript==

(function () {
  const doms = "h1, h2, h3, p, a, span.checklist-item-details-text, textarea, input[type=text], ul, li";
  const rtlRegex = /[\u0600-\u06FF\u0590-\u05FF]/; // Combined Persian, Arabic, and Hebrew regex

  const rtlStyles = {
    direction: "rtl",
    "text-align": "right",
    padding: "0 14px 0 0", // For UL elements
    "unicode-bidi": "embed", // For A, H1, H2, H3 elements
  };

  const ltrStyles = {
    direction: "ltr",
    "text-align": "left",
    padding: "0 0 0 14px", // For UL elements
    "unicode-bidi": "", // For A, H1, H2, H3 elements
  };

  function updateStyle(target) {
    const tagName = target.tagName.toLowerCase();
    let value = tagName === "textarea" || target.matches("input[type=text]") ? target.value : target.innerText;

    const styles = rtlRegex.test(value) ? rtlStyles : ltrStyles;

    Object.entries(styles).forEach(([property, value]) => {
      if (tagName === "ul" && property !== "padding") return;
      if (!(tagName === "a" || /^h[1-3]$/.test(tagName)) && property === "unicode-bidi") return;
      target.style[property] = value;
    });
  }

  function updateAllElements() {
    document.querySelectorAll(doms).forEach(updateStyle);
  }

  // Initial update
  updateAllElements();

  // Update on DOM changes
  const observer = new MutationObserver(updateAllElements);
  observer.observe(document.body, { childList: true, subtree: true });

  // Update on user input
  document.body.addEventListener("input", (e) => updateStyle(e.target));
  document.body.addEventListener("blur", (e) => updateStyle(e.target));
  document.body.addEventListener("focus", (e) => updateStyle(e.target));

})();