Measurement tools, rulers and grids
[v1.4 fixes a bug with style-parsing in Chrome 18 and later version.]
Tape is a tool for pixel-perfect website development. It lets you put down guides that snap intelligently to the page content (and stick to it if it moves on scroll or resize), and helps you easily measure positions and sizes of elements. It knows about borders and padding, and will even snap to the baseline of text. There is on-screen help, the ability to display user-defined column and row grids, a built-in magnifying glass for pixel-perfect measurement, and all guides can be quickly toggled on and off with a single keystroke.
Unlike some extensions it will not interfere with any webpage you visit unless you click the Tape icon.
Click icon to activate. Read help, or press Space to dismiss it.
Mouse over document, observe that rules snap to useful positions
(including baselines!), and use keys as follows:
H – drop Horizontal rule here (or remove if there's one here already)
V – drop Vertical rule here (or remove if there's one here already)
S – toggle snapping on and off.
O – set origin to current position.
B – toggle baseline grid display.
C / R – set column or row grid
L or backquote – toggle loupe. (To refresh loupe image, press L twice.)
Space – toggle help
P – disable/enable pointer events on the page
Press ESC to toggle everything on and off. Press X to reset all guides on a page.
Please leave feedback or send me suggestions at email@example.com.