Are measurements in CSS pixels or physical pixels?

The ruler displays CSS pixels by default. On HiDPI/Retina displays it reads window.devicePixelRatio and annotates measurements accordingly.

How do I remove a guide line?

Drag the guide line back onto the ruler strip, or click the guide line to select it and press Delete/Backspace.

Can I reposition the rulers?

Yes. Drag the ruler bar itself to move it away from the edge. Double-click the ruler to snap it back to its default edge position.

Do the rulers work on external sites?

The tool runs as a self-contained overlay within the boxtool.app page. For measuring external sites, browser extension rulers are more appropriate.

Developer 무료 회원가입 불필요

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.

이 도구에 대해

사용 방법

자주 묻는 질문