☰

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.

// ==UserScript==
// @name         Reading Ruler
// @namespace    https://old.reddit.com/r/SomebodyMakeThis/comments/9huwbw/smt_a_firefox_addon_that_adds_a_horizontal/
// @version      1.0.3
// @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.
// @author       /u/defproc
// @match        */*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // quick options
    const conf = {
        colour: "#55cc551c",
        lineColour: "#33aa3334", // colour of the bottom edge of the bar
        scale: 1.05, // how many times the text's line-height should the bar's height be
        shadow: 0.08, // opacity of the bar's shadow (0 to 1)
        key: "r", // toggle key
        keyCtrl: true, // toggle key requires ctrl?
        keyAlt: true, // toggle key requires alt?
        keyShift: false, // toggle key requires shift?
    };







    const bar = document.createElement("div");
    let visible = false;
    const styles = {
        left: 0,
        right: 0,
        height: "1em",
        backgroundColor: conf.colour,
        borderBottom: conf.lineColour ? `1px ${conf.lineColour} solid` : void 0,
        position: "fixed",
        transform: "translateY(-50%)",
        display: "none",
        pointerEvents: "none",
        transition: "120ms height",
        boxShadow: `0 1px 4px rgba(0, 0, 0, ${conf.shadow})`,
        zIndex: 9999999
    };
    Object.keys(styles).forEach(function(k){ bar.style[k] = styles[k] });
    document.body.addEventListener("mousemove", function(ev){
        bar.style.top = ev.clientY + "px";
        if(visible){
            const over = document.elementFromPoint(ev.clientX, ev.clientY);
            const size = window.getComputedStyle(over).getPropertyValue("line-height");
            const [m, num, unit] = (size && size.match(/([\d\.]+)([^\d]+)/)) || [];
            bar.style.height = m ? num * conf.scale + unit : "1em";
        }
    });
    const toggle = function(){
        visible = !visible;
        if(!bar.parentElement){
            document.body.appendChild(bar);
        }
        bar.style.display = visible ? "block" : "none";
    };
    window.addEventListener("keypress", function(ev){
        if(
            !(ev.ctrlKey ^ conf.keyCtrl) &&
            !(ev.altKey ^ conf.keyAlt) &&
            !(ev.shiftKey ^ conf.keyShift) &&
            ev.key.toLowerCase() == conf.key.toLowerCase()
        ){
            toggle();
            ev.preventDefault();
        }
    });

})();