Line Height Overlay Bookmarklet

LineHeightOverlay.js

// Line Height Bookmarklet
// javascript:(function(lineHeight) %7B%0A  if (window.guide) %7B%0A    document.body.removeChild(window.guide)%3B%0A    window.guide %3D null%3B%0A  %7D else %7B%0A    window.guide %3D document.createElement("div")%3B%0A    guide.style.id %3D "grid_overlay"%3B%0A    guide.style.position %3D "absolute"%3B%0A    guide.style.left %3D "0"%3B%0A    guide.style.top %3D "-1px"%3B%0A    guide.style.width %3D "100%25"%3B%0A    guide.style.height %3D (document.body.clientHeight > document.documentElement.clientHeight) %3F document.body.clientHeight %2B "px" %3A "100%25"%3B%0A    guide.style.pointerEvents %3D "none"%3B%0A    guide.style.userSelect %3D "none"%3B%0A    guide.style.background %3D "linear-gradient(rgba(0%2C 119%2C 179%2C 0.2) 1px%2C transparent 1px) left top %2F " %2B lineHeight %2B " " %2B lineHeight%3B%0A    document.body.appendChild(guide)%0A  %7D%0A%7D)("27px")%3B%0A

(function(lineHeight) {
  if (window.guide) {
    document.body.removeChild(window.guide);
    window.guide = null;
  } else {
    window.guide = document.createElement("div");
    guide.style.id = "grid_overlay";
    guide.style.position = "absolute";
    guide.style.left = "0";
    guide.style.top = "-1px";
    guide.style.width = "100%";
    guide.style.height = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight + "px" : "100%";
    guide.style.pointerEvents = "none";
    guide.style.userSelect = "none";
    guide.style.background = "linear-gradient(rgba(0, 119, 179, 0.2) 1px, transparent 1px) left top / " + lineHeight + " " + lineHeight;
    document.body.appendChild(guide)
  }
})("27px");