Text Direction Selector

Create a sliding button to change text direction between RTL and LTR with improved behavior
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Text Direction Selector
// @name:ar      محدد اتجاه النص
// @name:fr      Sélecteur de direction du texte
// @namespace    http://tampermonkey.net/
// @version      1.9
// @description  Create a sliding button to change text direction between RTL and LTR with improved behavior
// @description:ar  أنشئ زرًا منزلقًا لتغيير اتجاه النص بين من اليمين لليسار (RTL) ومن اليسار لليمين (LTR)
// @description:fr  Crée un bouton coulissant pour changer la direction du texte entre RTL et LTR avec un comportement amélioré
// @author       Your Name
// @match        *://*/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    //# Define the elements to apply the direction
  /*const elements = `
        html, body, center, a, i, h1, h2, h3, h4, h5, h6, p, li, span, ul, td, tr, th, div, strong, button,
        path, svg, main, footer, nav, section, time, use, defs, symbol, table, br, header, form, select
    `;*/

    // Create a floating button
    var buttonContainer = document.createElement('div');
    buttonContainer.style.position = 'fixed';
    buttonContainer.style.bottom = '20px';
    buttonContainer.style.left = '-40px';
    buttonContainer.style.zIndex = '1000';
    buttonContainer.style.borderRadius = '50%';
    buttonContainer.style.width = '50px';
    buttonContainer.style.height = '50px';
    buttonContainer.style.backgroundColor = '#3498db';
    buttonContainer.style.display = 'flex';
    buttonContainer.style.alignItems = 'center';
    buttonContainer.style.justifyContent = 'center';
    buttonContainer.style.cursor = 'pointer';
    buttonContainer.style.color = 'white';
    buttonContainer.style.fontSize = '20px';
    buttonContainer.style.textAlign = 'center';
    buttonContainer.style.lineHeight = '50px';
    buttonContainer.style.opacity = '0.8';
    buttonContainer.style.transition = 'left 0.3s ease';
    buttonContainer.innerHTML = '⇔';
    document.body.appendChild(buttonContainer);

    // LTR and RTL buttons
    var ltrButton = document.createElement('div');
    ltrButton.innerText = 'LTR';
    ltrButton.style.padding = '10px';
    ltrButton.style.cursor = 'pointer';
    ltrButton.style.backgroundColor = '#2ecc71';
    ltrButton.style.color = 'white';
    ltrButton.style.borderRadius = '5px';
    ltrButton.style.marginBottom = '5px';
    ltrButton.style.textAlign = 'center';
    ltrButton.style.display = 'none';
    buttonContainer.insertBefore(ltrButton, buttonContainer.firstChild);

    var rtlButton = document.createElement('div');
    rtlButton.innerText = 'RTL';
    rtlButton.style.padding = '10px';
    rtlButton.style.cursor = 'pointer';
    rtlButton.style.backgroundColor = '#e74c3c';
    rtlButton.style.color = 'white';
    rtlButton.style.borderRadius = '5px';
    rtlButton.style.textAlign = 'center';
    rtlButton.style.display = 'none';
    buttonContainer.appendChild(rtlButton);

    // Toggle button position on click
    buttonContainer.addEventListener('click', function(event) {
        event.stopPropagation();
        if (buttonContainer.style.left === '-40px') {
            buttonContainer.style.left = '37px';
            rtlButton.style.display = 'block';
            ltrButton.style.display = 'block';
        } else {
            buttonContainer.style.left = '-40px';
            rtlButton.style.display = 'none';
            ltrButton.style.display = 'none';
        }
    });

    //# Function to set text direction on specified elements
  /*function setDirection(direction) {
        const styleElement = document.getElementById('direction-style') || document.createElement('style');
        styleElement.id = 'direction-style';
        styleElement.innerHTML = `${elements} { direction: ${direction}; text-align: ${direction === 'rtl' ? 'right' : 'left'}; }`;
        document.head.appendChild(styleElement);
    }*/

    //! Function to set text direction on the whole document
    function setDirection(direction) {
        document.documentElement.style.direction = direction;
        document.documentElement.style.textAlign = direction === 'rtl' ? 'right' : 'left';
    }

    // Apply RTL direction on click
    rtlButton.addEventListener('click', function() {
        setDirection('rtl');
    });

    // Apply LTR direction on click
    ltrButton.addEventListener('click', function() {
        setDirection('ltr');
    });

    // Hide options on outside click
    document.addEventListener('click', function(event) {
        if (!buttonContainer.contains(event.target)) {
            buttonContainer.style.left = '-40px';
            rtlButton.style.display = 'none';
            ltrButton.style.display = 'none';
        }
    });
})();