Photoshop-like Ruler Using JavaScript And SVG – Rulez.js

Rulez.js is a dependency-free JavaScript library to generate Photoshop-like rulers with ticks and guides using SVG.

Fully responsive, easy to customize and supports both horizontal & vertical rulers.

How to use it:

Load the core JavaScript and CSS files in the document.

<script src="./src/js/rulez.js"></script>
<link rel="stylesheet" href="./src/css/rulez-black.css" />

Create empty SVG elements for the rulers.

<svg id="svgH" xmlns="http://www.w3.org/2000/svg"></svg>
<svg id="svgV" xmlns="http://www.w3.org/2000/svg"></svg>

Generate horizontal & vertical rulers.

var rulezH = new Rulez({
    element: document.getElementById('svgH'),
    layout: 'horizontal'
});
var rulezV = new Rulez({
    element: document.getElementById('svgV'),
    layout: 'vertical'
});

Render the rulers on the web page.

rulezH.render();
rulezV.render();

Set the alignment of the rulers.

var rulezH = new Rulez({
    element: document.getElementById('svgH'),
    layout: 'horizontal',
    alignment: 'bottom',
});
var rulezV = new Rulez({
    element: document.getElementById('svgV'),
    layout: 'vertical',
    alignment: 'right'
});

Set the width/height of the ruler. Default: auto.

var rulezH = new Rulez({
    element: document.getElementById('svgH'),
    layout: 'horizontal',
    width: null,
    height: null
});

Set the unit you’d like to use: ’em’, ‘ex’, ‘px’, ‘pt’, ‘pc’, ‘cm’, ‘mm’, ‘in’ and ”(user units) .

var rulezH = new Rulez({
    element: document.getElementById('svgH'),
    layout: 'horizontal',
    units: 'pt'
});

Customize divisions.

var rulezH = new Rulez({
    element: document.getElementById('svgH'),
    layout: 'horizontal',
    divisionDefaults: {
      strokeWidth: 1,
      type: 'rect',
      className: 'rulez-rect',
      renderer: null
    },
    divisions: [
      {
        pixelGap: 5,
        lineLength: 5
      },
      {
        pixelGap: 25,
        lineLength: 10
      },
      {
        pixelGap: 50,
        lineLength: 15
      },
      {
        pixelGap: 100,
        lineLength: 20
      }
  ],
});

Customize the ruler text.

var rulezH = new Rulez({
    element: document.getElementById('svgH'),
    layout: 'horizontal',
    texts: [
      {
        pixelGap: 100
      }
    ]
});

Customize the guide.

var rulezH = new Rulez({
    element: document.getElementById('svgH'),
    layout: 'horizontal',
    guideDefaults: {
      strokeWidth: 1,
      getSize: function() {
        return 5000;
      }
    },
    guides: [],
    guideSnapInterval: 10
});