Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

43 lines (28 sloc) 1.681 kb

Using Baseliner


The bookmarklet can be found here and it allows you to run Baseliner on any webpage.

Super-short Example

<script src="baseliner.js"></script>
window.onload = function() {
    baseliner = new Baseliner(8);

This will add the Baseliner widget to your page:

Show Baseline

If you click on Show Baseline an 8px baseline grid overlay is displayed:

Hide Baseline

You can customize the size of the grid too:

16px Baseline

Configuration Options

Three configuration options are supported:

  • gridColor — an RBGA array ([255, 0, 0, 255] for red) or a color string (red, blue, green or grey/gray). If this option is not set, it defaults to a highly transparent red.
  • gridHeight — the height of the baseline grid. If it is not set, it defaults to 10 pixels.
  • gridOffset — the number of pixels to offset the grid vertically. If it is not set, it defaults to 0 pixels.

Some more examples

// a black grid, 20 pixels high
baseliner = new Baseliner({'gridColor': [0, 0, 0, 255], 'gridHeight': 20 });
// a red grid, 10 pixels high
baseliner = new Baseliner({'gridColor': 'red'});
// a black grid, 24 pixels high, offset by 10 pixels
baseliner = new Baseliner({'gridHeight': 24, 'gridOffset': 10});
Jump to Line
Something went wrong with that request. Please try again.