I rule (.svg)

Mar 8, 2016

Here’s a neat little ruler in SVG for your enjoyment. It fills whatever size it’s parent allows it to fill. Unfortunately, I couldn’t get the JS to work when it’s loaded as an external file, so for now it has to be inline in the html or css.

<div style="height: 30px; width: 100%; position:fixed; top:0">
  <svg xmlns="" style="width:100%; height:100%;" version="1.1">
    <!-- Small tick marks at 5px intervals -->
    <pattern id="5px" width="5px" height="100%" x="0" y="0" patternUnits="userSpaceOnUse">
      <line stroke="#999" stroke-width="1px" x1="0" y1="0" x2="0" y2="50%"/>
    <!-- Larger tick marks at 50px intervals -->
    <pattern id="50px" width="50px" height="100%" x="0" y="0" patternUnits="userSpaceOnUse">
      <line stroke="#000" stroke-width="1px" x1="0" y1="0" x2="0" y2="60%"/>
    <!-- Full-height tick marks at 100px intervals -->
    <pattern id="100px" width="100px" height="100%" x="0" y="0" patternUnits="userSpaceOnUse">
      <line stroke="#000" stroke-width="1px" x1="0" y1="0" x2="0" y2="100%"/>
    <script type="text/javascript">
      // SVG does not (apparently) not have a way to access variables such as the current X/Y
      // position in texts. There's probably a really cool way it could be done with i. e. a
      // text matrix and some smart clipping/transforming, but for now we render the positions with
      // Javascript.
      function ticks() {
        if (document.readyState != "complete") {
          document.onreadystatechange = function () {

        window.onresize = function () {
        var svg         = document.getElementsByTagName("svg")[0];
        var width       = svg.getClientRects()[0].width;

        for (var i = 0; i < width; i += 100) {
          var tickMark = document.createElementNS("", "text");
          var textNode = document.createTextNode(i);

          tickMark.setAttribute("x", i + 4)
          tickMark.setAttribute("y", "100%");
          tickMark.setAttribute("width", "96px");
          tickMark.setAttribute("height", "100%");
          tickMark.setAttribute("fill", "#000000");

    <!== putting it all together -->
    <rect fill="url(#text-100)" x="0" y="0" height="100%" width="100%"/>
    <rect fill="url(#100px)" x="0" y="0" height="100%" width="100%"/>
    <rect fill="url(#50px)" x="0" y="0" height="100%" width="100%"/>
    <rect fill="url(#5px)" x="0" y="0" height="100%" width="100%"/>
    <line stroke="black" stroke-width="1px" x1="0" y1="0" x2="0" y2="10"/>

  <div style="right:10px; position:fixed; text-align:right; size:0.8em">Ruler by<br/><a href="">Matthias Winkelmann</a><br/> License: CC-0</div>
<!== putting it all together -->

Other Articles

Mark Felt-Tipped Feb 25, 2018

Building Tensorflow 1.5.0 on MacOS with CUDA GPU Jan 21, 2018

Contact Jan 1, 2018

iTunes crashes with MediaControlSender AVSystemController_GetAirPlayInfo Aug 18, 2017

Add iterm2 marks to long-running outputs Jun 1, 2017

Trump Documents Atbash Decoded May 23, 2017

Polkit? WTF is this again? Actually... May 23, 2017

osacompile: no such component "JavaScript" May 2, 2017

" glxQueryVersion failed" with a headless chrome on alpine Mar 17, 2017

lighthouse/chromium/alpine/docker image Mar 9, 2017

Don't know how to build task '# Mar 6, 2017

sfdp: Error: Graphviz not built with triangulation library Jan 7, 2017

link_directory must be a directory Jan 2, 2017

Deactivating the Z170N's internal bluetooth in Clover Jul 3, 2016

Autogenerate a Dash Docset with Object Graph and documentation Statistics on Rails Migrate Jun 13, 2016

Massdrop is the worst spammer I've seen since the 90ies May 23, 2016

Verifying NGINX configurations in ansible May 23, 2016

ANSIBLE-MODULE-PATH and more Apr 29, 2016

'' is not a git command Apr 23, 2016

I rule (.svg) Mar 8, 2016

React and Relay error scrapbook Mar 3, 2016

Get a Grid, at least vertically Feb 17, 2016

Uncaught TypeError: Iterator value meps is not an entry object Nov 14, 2015

Controlled Jekyll Republishing with git Commit Messages Nov 2, 2015