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.

• CSP manual: Print-size display and calibration (Japanese) — Official reference; checked 2026-09-06

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.

What the readability check is telling you to fix

• "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.

Loading the ruler into Clip Studio Paint and placing it

1. Export the PNG, then in Clip Studio Paint choose File menu > Import > Image. Regardless of the source file's own layer structure, this adds exactly one Image material layer per file to the canvas — load it into a canvas set to the same DPI you used when generating the ruler, and the tick spacing will line up.
2. With the Image material layer selected, switch to the Object sub tool (in the Operation tool group). Dragging a handle inside the layer's bounds moves it, dragging a handle outside the bounds scales it larger or smaller, and dragging the rotation controller rotates it.
3. To compare the ruler against a sketch underneath, lower the Opacity slider at the top of the Layer palette so the sketch shows through and you can line it up against the tick marks.
4. Once you are done, either turn off the layer's visibility in the Show/hide layer column of the Layer palette, or delete the layer outright. The ruler can stay an Image material layer indefinitely — there is no need to rasterize it unless you plan to draw on it directly.

How this relates to 100% display magnification and Print size

What this ruler guarantees is not that it will look true to size on screen — it is that the tick marks sit at the exact pixel positions implied by the DPI you specified. Clip Studio Paint's 100% display magnification maps one image pixel to one screen pixel exactly; depending on your monitor's pixel density, that can look smaller than the real object. To check a genuine physical size on screen, use View menu > Print size instead, which relies on the Display Resolution setting under Preferences > Canvas — the first time you use it, you line an on-screen ruler up against a physical one until the scale matches. That is the same idea as this tool's own "actual size" preview and its calibration step. The exported PNG's own accuracy has nothing to do with either display mode; it only depends on whether the canvas DPI you load it into matches the DPI you exported it at.

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

Rendering and readability checks run in your browser; images are not uploaded. Ruler settings, preview mode and screen calibration are saved to localStorage and restored next time. Settings included in a shared link can be read by anyone with the link, and opening it sends its URL to the hosting server.