Screen Ruler
On-screen pixel ruler with draggable guides and measurement pins for design work.
关于此工具
A transparent overlay ruler that lives at the edges of your browser window. The horizontal ruler sits at the top and the vertical ruler on the left, both showing pixel coordinates scaled by the device's pixel ratio for DPI-aware measurements. Drag either ruler to reposition it. Click anywhere on the page to drop a measurement pin that shows its exact X/Y coordinate distance from the ruler origin. Drag from either ruler to spawn infinite horizontal or vertical guide lines — the same workflow designers use in Figma or Photoshop — to align and measure elements on any page.
使用方法
- 1 Open the tool and the horizontal and vertical rulers appear automatically.
- 2 Drag from the horizontal ruler downward to create a horizontal guide line.
- 3 Drag from the vertical ruler rightward to create a vertical guide line.
- 4 Click anywhere on the canvas to drop a pin showing its pixel coordinates.
- 5 Drag any guide line to reposition it; drag it back to the ruler to delete it.
- 6 Double-click a ruler to reset it to its default edge position.
What this ruler measures, and where
This is a pixel measuring canvas — a bounded work area on the page, roughly 520 pixels tall, with a fine grid background and two rulers: a horizontal one along the top and a vertical one down the left. The rulers are tick-marked in pixels, with tall labelled ticks every 100 px, medium ticks every 50 px, and minor ticks every 10 px. Inside this area you can drop coordinate pins, pull out alignment guides, and read off distances exactly the way you would in a design app's ruler gutter. It measures within its own canvas rather than overlaying your whole browser window, so think of it as a precise on-screen graph paper for laying things out and checking spacing.
The three things you can do
- Drop a measurement pin. Click anywhere on the grid and a red pin appears with its coordinates beside it, such as
240,160. Those numbers are measured from the ruler origin — the corner where the two rulers meet — not from the top-left of the canvas, which matters once you've moved a ruler. Click a pin again to remove it. - Pull out a guide line. Drag downward from the horizontal ruler to spawn a horizontal guide; drag rightward from the vertical ruler to spawn a vertical one. Each guide carries a small label showing its pixel position, and you can have as many as you like. Drag a guide to reposition it, and drag it back onto its ruler to delete it.
- Reposition the rulers. Drag the ruler bar itself to slide the origin inward — handy for measuring a region that doesn't start at the edge. Double-click a ruler to snap it back to its default edge position, or use the Reset button.
A worked example: measuring a gap
Say you want the exact spacing between two points. Click the first point — a pin reads 120,90. Click the second — it reads 300,90. Because both share the same Y value, the horizontal gap is simply 300 − 120 = 180 px. To make that gap visible, drag two vertical guides from the left ruler and line them up with each pin; the guide labels confirm the positions, and the grid squares between them give a quick visual count (each major grid square is 100 px). This pin-then-subtract workflow is how you measure any distance the ruler doesn't give you directly.
About pixel density and the DPR readout
The control bar shows your display's device pixel ratio (DPR) — 1x on a standard monitor, often 2x or 3x on Retina and high-DPI screens. The tool reads window.devicePixelRatio and uses it to render the ruler canvas at full physical resolution, so the tick marks stay crisp instead of blurring on a high-DPI display. Important to understand: the numbers the ruler reports are CSS pixels, the same logical unit your CSS uses. On a 2× screen each CSS pixel is drawn with four physical pixels, but a measurement of "100 px" here corresponds to 100px in a stylesheet — which is exactly what you want when you're matching a design spec to code.
Where it helps
- Checking spacing and alignment. Drop guides to confirm that elements line up on a common edge or sit at consistent intervals.
- Reading off design dimensions. Translate a rough on-screen layout into the pixel values you'll write into CSS — widths, margins, gaps.
- Sketching grid-based layouts. The 10/50/100 px tick structure and the grid background make it easy to plan an 8-point or 10-point spacing system.
- Teaching coordinate geometry. The pins and guides make the X/Y plane concrete for explaining coordinates and distances.
An honest limit
This ruler lives inside the BoxTool page and measures within its own canvas area. It is not a system-wide screen overlay, so it can't be dragged across other applications or used to measure arbitrary pixels anywhere on your monitor. If you need to measure an element on a different website or a native app window, a browser-extension ruler or an operating-system screen-measurement utility is the right tool for that job. Within its own canvas, though, everything runs locally in your browser — there's nothing to upload, and the rulers, guides, and pins all redraw instantly as you work. Use the Clear Guides and Clear Pins buttons to reset the workspace without losing your ruler positions.