☰

Reading Ruler

A userscript that adds a horizontal translucent bar that follows the cursor. A reading aid for pages with wiiiiiiide paragraphs. Ctrl+Shift+R to toggle by default.

  1. // ==UserScript==
  2. // @name         Reading Ruler
  3. // @namespace    https://old.reddit.com/r/SomebodyMakeThis/comments/9huwbw/smt_a_firefox_addon_that_adds_a_horizontal/
  4. // @version      1.0.3
  5. // @description  A userscript that adds a horizontal translucent bar that follows the cursor. A reading aid for pages with wiiiiiiide paragraphs. Ctrl+Shift+R to toggle by default.
  6. // @author       /u/defproc
  7. // @match        */*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // quick options
  15.     const conf = {
  16.         colour: "#55cc551c",
  17.         lineColour: "#33aa3334", // colour of the bottom edge of the bar
  18.         scale: 1.05, // how many times the text's line-height should the bar's height be
  19.         shadow: 0.08, // opacity of the bar's shadow (0 to 1)
  20.         key: "r", // toggle key
  21.         keyCtrl: true, // toggle key requires ctrl?
  22.         keyAlt: true, // toggle key requires alt?
  23.         keyShift: false, // toggle key requires shift?
  24.     };
  25.  
  26.  
  27.  
  28.  
  29.  
  30.  
  31.  
  32.     const bar = document.createElement("div");
  33.     let visible = false;
  34.     const styles = {
  35.         left: 0,
  36.         right: 0,
  37.         height: "1em",
  38.         backgroundColor: conf.colour,
  39.         borderBottom: conf.lineColour ? `1px ${conf.lineColour} solid` : void 0,
  40.         position: "fixed",
  41.         transform: "translateY(-50%)",
  42.         display: "none",
  43.         pointerEvents: "none",
  44.         transition: "120ms height",
  45.         boxShadow: `0 1px 4px rgba(0, 0, 0, ${conf.shadow})`,
  46.         zIndex: 9999999
  47.     };
  48.     Object.keys(styles).forEach(function(k){ bar.style[k] = styles[k] });
  49.     document.body.addEventListener("mousemove", function(ev){
  50.         bar.style.top = ev.clientY + "px";
  51.         if(visible){
  52.             const over = document.elementFromPoint(ev.clientX, ev.clientY);
  53.             const size = window.getComputedStyle(over).getPropertyValue("line-height");
  54.             const [m, num, unit] = (size && size.match(/([\d\.]+)([^\d]+)/)) || [];
  55.             bar.style.height = m ? num * conf.scale + unit : "1em";
  56.         }
  57.     });
  58.     const toggle = function(){
  59.         visible = !visible;
  60.         if(!bar.parentElement){
  61.             document.body.appendChild(bar);
  62.         }
  63.         bar.style.display = visible ? "block" : "none";
  64.     };
  65.     window.addEventListener("keypress", function(ev){
  66.         if(
  67.             !(ev.ctrlKey ^ conf.keyCtrl) &&
  68.             !(ev.altKey ^ conf.keyAlt) &&
  69.             !(ev.shiftKey ^ conf.keyShift) &&
  70.             ev.key.toLowerCase() == conf.key.toLowerCase()
  71.         ){
  72.             toggle();
  73.             ev.preventDefault();
  74.         }
  75.     });
  76.  
  77. })();