Actual Size Screen Ruler Maker

What this tool does

Set a canvas size, DPI, unit, and the shape and length of the ruler, and it draws a ruler with tick marks and numeric labels. There are four shapes — band, L-shape, cross, and line — and the L-shape and cross draw both a horizontal and a vertical ruler from a single set of inputs, with independent lengths for each direction. Before you export, a readability check tells you, with the actual pixel numbers behind it, whether ticks will merge together or labels will overlap the next tick. You can export a PNG with a transparent background and a JSON file that records the settings, and you can save a full set of output, shape, and tick settings as a named placement set to recall later.

Where it fits in your workflow

• Laying the ruler over your artwork to check panel or text sizes in real millimeters
• Placing a ruler next to your artwork for goods or packaging deliverables to confirm the actual printed size
• Judging true size by the numbers instead of by eye, on monitors with mismatched display scaling

How to use it

1. Under "Output", enter the same canvas size and DPI as the artwork you want to overlay the ruler on, and pick a unit (mm or inch).
2. Under "Shape & placement", choose the ruler shape and orientation, its position, length, and zero point.
3. Under "Ticks", set the major step, minor divisions, ruler thickness, and tick line width and color.
4. Check the readability check panel, and if a warning appears, adjust the major step, minor divisions, or thickness.
5. If you need real-world size, switch the preview to "Actual size" and complete the actual-size (1:1) display calibration to confirm it against a physical ruler.
6. Export the PNG and load it into a Clip Studio Paint canvas set to the same DPI.

What each setting means

DPI

Pixels per inch. Tick spacing is derived from this value, so it must match the DPI of the Clip Studio Paint canvas you load the ruler into, or the measurements will not line up.

Ruler shape

Band draws a filled tick band, L-shape and cross draw two rulers (horizontal and vertical), and line draws a single baseline. Orientation has no effect for L-shape and cross — instead you set the horizontal and vertical lengths separately.

Placement set

Saves the full output, shape, and tick configuration under a name so you can recall it from a row of chips later. Up to 12 sets can be stored; saving under an existing name overwrites it.

Zero point

Where the zero tick sits, measured from the left (or top) edge of the ruler. Placed inside the ruler, ticks extend both ways from it; placed outside the ruler's range, no origin marker is drawn at all.

Major step / minor divisions

The major step is the spacing (with a unit) between ticks that carry a numeric label; minor divisions is how many parts each major step is split into. With a 10mm major step and 10 minor divisions, you get a minor tick every 1mm.

Ruler thickness

The thickness of the band in pixels. The label font size is derived from this value, and labels are dropped automatically once the band gets too thin to fit them.

Transparent background

Exports everything but the ruler as transparent, so you can lay it over existing artwork.

Reading the results and bringing them into Clip Studio Paint

• "Minor ticks will merge together" in the readability check means the gap between tick lines has dropped under 1px. Exporting at that setting will print the ticks as a solid smear — reduce the minor divisions or use a thinner tick line width.
• "Numeric labels overlap the next tick" means the label's required width is larger than the major step. Increase the major step, or lower the thickness so the labels shrink.
• The PNG exports at exactly the canvas size you specified. Loading it into a Clip Studio Paint canvas with the same DPI keeps the mm/inch tick spacing accurate; if the DPI is different the measurements will drift, and the safest fix is to regenerate the ruler at the correct DPI.

How the numbers are calculated

Pixels per unit is DPI ÷ 25.4 for millimeters, or simply DPI for inches. The major step in pixels is that value multiplied by the major step setting, and the minor step is the major step divided by the number of minor divisions. The readability check measures the actual gap between minor ticks (the step minus the line width): under 1px is flagged as needing a fix, under 2.5px as worth checking. The width a label needs is estimated from the longest label's character count times the font size times 0.6, plus margin on both sides. The label font size is 26% of the ruler thickness, clamped between 12 and 32px; the label band is 1.4 times that, and once the label band would take up more than half the total thickness, labels are omitted rather than drawn. Tick line widths follow a fixed ratio — the zero tick is drawn at twice the base width, major ticks at the base width, and minor ticks at 0.6 times the base width — and the zero tick alone spans the full thickness of the band and carries a filled triangle marker.

Accuracy and what this tool does not cover

The tick marks in the exported PNG are exact for the DPI you specified. The only ways they can drift are loading the file into a canvas with a different DPI, or resizing the image on import. The on-screen "Actual size" preview, on the other hand, depends on your display calibration. Without it, the preview falls back to an approximation based on CSS 96dpi, which will not match a physical ruler on many monitors. Changing your browser or OS display scaling will also throw off a saved calibration.

• This is an image-based overlay, not one of Clip Studio Paint's built-in ruler tools (perspective rulers, parallel-line rulers, and so on) — it does not participate in snapping.
• Tick labels are numbers only; there is no support for unit symbols, custom text, curved rulers, or angle scales.

How your data is handled

Every calculation, the drawing itself, and the readability check all run in your browser — the numbers you enter and the image you export are never uploaded anywhere. Your ruler settings, the preview display mode, and your screen calibration are saved to your browser's localStorage and restored automatically the next time you open the page.

Frequently asked questions