Skip to content

Instantly share code, notes, and snippets.

@sandipchitale

sandipchitale/ruler.html

Last active June 6, 2020 08:05
Show Gist options
  • Save sandipchitale/fcf0409d4beadcfa028d7419c05dbb3a to your computer and use it in GitHub Desktop.
Save sandipchitale/fcf0409d4beadcfa028d7419c05dbb3a to your computer and use it in GitHub Desktop.
Download ZIP
Rule overlay
Raw
ruler.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ruler</title>
<style>
html,body {
width: 100vw;
height: 100vh;
overflow: auto;
}
body {
margin: 0;
padding: 0;
}
.rulerpane {
/* background-color: rgba(8, 16, 8, 0.2); */
background-color: transparent;
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 65365;
}
#coordinate {
cursor: crosshair;
}
p {
background-color: orange;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam. Urna et pharetra pharetra massa. Amet justo donec enim diam vulputate. Urna id volutpat lacus laoreet non. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Hendrerit gravida rutrum quisque non. Pellentesque elit eget gravida cum sociis natoque penatibus et. Nec feugiat in fermentum posuere urna nec tincidunt praesent semper. Tristique senectus et netus et malesuada fames ac turpis. Tempus quam pellentesque nec nam aliquam. Non pulvinar neque laoreet suspendisse interdum consectetur. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Et malesuada fames ac turpis egestas maecenas pharetra convallis. Bibendum neque egestas congue quisque.
</p>
<svg class="rulerpane">
<line id="toXZero" x1="0" y1="0" x2="0" y2="0" style="stroke: black; stroke-width: 1" stroke-dasharray="1,5"/>
<line id="toXMax" x1="0" y1="0" x2="0" y2="0" style="stroke: black; stroke-width: 1" stroke-dasharray="1,5"/>
<line id="toYZero" x1="0" y1="0" x2="0" y2="0" style="stroke: black; stroke-width: 1" stroke-dasharray="1,5"/>
<line id="toYMax" x1="0" y1="0" x2="0" y2="0" style="stroke: black; stroke-width: 1" stroke-dasharray="1,5"/>
<rect id="coordinateTag" x="500" y="500" width="120" height="20" rx="4" ry="4" fill="red"></rect>
<text id="coordinate" x="0" y="0" fill="white">x,y</text>
</svg>
<p>
Nulla pharetra diam sit amet nisl. A pellentesque sit amet porttitor eget dolor. Tellus rutrum tellus pellentesque eu tincidunt. Vel facilisis volutpat est velit egestas dui id ornare. Sem fringilla ut morbi tincidunt augue. Risus commodo viverra maecenas accumsan lacus vel. Ac felis donec et odio pellentesque diam. Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Sollicitudin aliquam ultrices sagittis orci. Consequat nisl vel pretium lectus quam id leo. Turpis cursus in hac habitasse platea.
</p>
<script>
(function() {
const toXZero = document.getElementById('toXZero');
const toXMax = document.getElementById('toXMax');
const toYZero = document.getElementById('toYZero');
const toYMax = document.getElementById('toYMax');
const coordinateTag = document.getElementById('coordinateTag');
const coordinate = document.getElementById('coordinate');
document.addEventListener('mousemove', (event) => {
const width = document.body.clientWidth;
const height = document.body.clientHeight;
toXZero.setAttribute('x1', event.clientX);
toXZero.setAttribute('y1', event.clientY);
toXZero.setAttribute('x2', 0);
toXZero.setAttribute('y2', event.clientY);
toXMax.setAttribute('x1', event.clientX);
toXMax.setAttribute('y1', event.clientY);
toXMax.setAttribute('x2', width);
toXMax.setAttribute('y2', event.clientY);
toYZero.setAttribute('x1', event.clientX);
toYZero.setAttribute('y1', event.clientY);
toYZero.setAttribute('x2', event.clientX);
toYZero.setAttribute('y2', 0);
toYMax.setAttribute('x1', event.clientX);
toYMax.setAttribute('y1', event.clientY);
toYMax.setAttribute('x2', event.clientX);
toYMax.setAttribute('y2', height);
coordinateTag.setAttribute('x', Math.min(Math.max((event.clientX - 60), 0), width - 120));
coordinateTag.setAttribute('y', Math.min(Math.max((event.clientY - 10), 0), height - 20));
coordinate.setAttribute('x', Math.min(Math.max((event.clientX - 60), 0), width - 120) + 60 - 40);
coordinate.setAttribute('y', Math.min(Math.max((event.clientY - 10), 0), height - 20) + 10 + 5);
coordinate.innerHTML = `${('' + event.clientX).padStart(4, ' ')}&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;${('' + event.clientY).padStart(4,' ')}`;
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment