☰

Text Direction Selector

Create a sliding button to change text direction between RTL and LTR with improved behavior

  1. // ==UserScript==
  2. // @name         Text Direction Selector
  3. // @name:ar      محدد اتجاه النص
  4. // @name:fr      Sélecteur de direction du texte
  5. // @namespace    http://tampermonkey.net/
  6. // @version      1.9
  7. // @description  Create a sliding button to change text direction between RTL and LTR with improved behavior
  8. // @description:ar  أنشئ زرًا منزلقًا لتغيير اتجاه النص بين من اليمين لليسار (RTL) ومن اليسار لليمين (LTR)
  9. // @description:fr  Crée un bouton coulissant pour changer la direction du texte entre RTL et LTR avec un comportement amélioré
  10. // @author       Your Name
  11. // @match        *://*/*
  12. // @grant        none
  13. // @license      MIT
  14. // ==/UserScript==
  15.  
  16. (function() {
  17.     'use strict';
  18.  
  19.     //# Define the elements to apply the direction
  20.   /*const elements = `
  21.         html, body, center, a, i, h1, h2, h3, h4, h5, h6, p, li, span, ul, td, tr, th, div, strong, button,
  22.         path, svg, main, footer, nav, section, time, use, defs, symbol, table, br, header, form, select
  23.     `;*/
  24.  
  25.     // Create a floating button
  26.     var buttonContainer = document.createElement('div');
  27.     buttonContainer.style.position = 'fixed';
  28.     buttonContainer.style.bottom = '20px';
  29.     buttonContainer.style.left = '-40px';
  30.     buttonContainer.style.zIndex = '1000';
  31.     buttonContainer.style.borderRadius = '50%';
  32.     buttonContainer.style.width = '50px';
  33.     buttonContainer.style.height = '50px';
  34.     buttonContainer.style.backgroundColor = '#3498db';
  35.     buttonContainer.style.display = 'flex';
  36.     buttonContainer.style.alignItems = 'center';
  37.     buttonContainer.style.justifyContent = 'center';
  38.     buttonContainer.style.cursor = 'pointer';
  39.     buttonContainer.style.color = 'white';
  40.     buttonContainer.style.fontSize = '20px';
  41.     buttonContainer.style.textAlign = 'center';
  42.     buttonContainer.style.lineHeight = '50px';
  43.     buttonContainer.style.opacity = '0.8';
  44.     buttonContainer.style.transition = 'left 0.3s ease';
  45.     buttonContainer.innerHTML = '⇔';
  46.     document.body.appendChild(buttonContainer);
  47.  
  48.     // LTR and RTL buttons
  49.     var ltrButton = document.createElement('div');
  50.     ltrButton.innerText = 'LTR';
  51.     ltrButton.style.padding = '10px';
  52.     ltrButton.style.cursor = 'pointer';
  53.     ltrButton.style.backgroundColor = '#2ecc71';
  54.     ltrButton.style.color = 'white';
  55.     ltrButton.style.borderRadius = '5px';
  56.     ltrButton.style.marginBottom = '5px';
  57.     ltrButton.style.textAlign = 'center';
  58.     ltrButton.style.display = 'none';
  59.     buttonContainer.insertBefore(ltrButton, buttonContainer.firstChild);
  60.  
  61.     var rtlButton = document.createElement('div');
  62.     rtlButton.innerText = 'RTL';
  63.     rtlButton.style.padding = '10px';
  64.     rtlButton.style.cursor = 'pointer';
  65.     rtlButton.style.backgroundColor = '#e74c3c';
  66.     rtlButton.style.color = 'white';
  67.     rtlButton.style.borderRadius = '5px';
  68.     rtlButton.style.textAlign = 'center';
  69.     rtlButton.style.display = 'none';
  70.     buttonContainer.appendChild(rtlButton);
  71.  
  72.     // Toggle button position on click
  73.     buttonContainer.addEventListener('click', function(event) {
  74.         event.stopPropagation();
  75.         if (buttonContainer.style.left === '-40px') {
  76.             buttonContainer.style.left = '37px';
  77.             rtlButton.style.display = 'block';
  78.             ltrButton.style.display = 'block';
  79.         } else {
  80.             buttonContainer.style.left = '-40px';
  81.             rtlButton.style.display = 'none';
  82.             ltrButton.style.display = 'none';
  83.         }
  84.     });
  85.  
  86.     //# Function to set text direction on specified elements
  87.   /*function setDirection(direction) {
  88.         const styleElement = document.getElementById('direction-style') || document.createElement('style');
  89.         styleElement.id = 'direction-style';
  90.         styleElement.innerHTML = `${elements} { direction: ${direction}; text-align: ${direction === 'rtl' ? 'right' : 'left'}; }`;
  91.         document.head.appendChild(styleElement);
  92.     }*/
  93.  
  94.     //! Function to set text direction on the whole document
  95.     function setDirection(direction) {
  96.         document.documentElement.style.direction = direction;
  97.         document.documentElement.style.textAlign = direction === 'rtl' ? 'right' : 'left';
  98.     }
  99.  
  100.     // Apply RTL direction on click
  101.     rtlButton.addEventListener('click', function() {
  102.         setDirection('rtl');
  103.     });
  104.  
  105.     // Apply LTR direction on click
  106.     ltrButton.addEventListener('click', function() {
  107.         setDirection('ltr');
  108.     });
  109.  
  110.     // Hide options on outside click
  111.     document.addEventListener('click', function(event) {
  112.         if (!buttonContainer.contains(event.target)) {
  113.             buttonContainer.style.left = '-40px';
  114.             rtlButton.style.display = 'none';
  115.             ltrButton.style.display = 'none';
  116.         }
  117.     });
  118. })();
  119.