Rulers, guides, bleed, and safe area

Summary

Rulers, Bleed / safe zone, and custom guides are on-screen placement aids in Options. All three are excluded from exports. Rulers and Bleed / safe zone are desktop-only in practice — their checkboxes work on mobile, but the overlays never render there. Custom guides do render on mobile.

Use it when

• Use Rulers to read exact inch positions along the artboard edges.
• Use Bleed / safe zone to see how much margin exists beyond the artboard edge (bleed) and how far in from the edge is safe from cutting (safe zone).
• Use guides to mark and align to specific positions you'll return to repeatedly.

Before you begin

Nothing to prepare — all three controls are in Options, available regardless of format or artboard content.

Steps

1. Open Options.
2. Select Rulers (desktop) to show inch-marked tick rulers along the artboard edges.
3. Select Bleed / safe zone (desktop) to overlay a red bleed line outside the artboard and a green safe-zone line inset from it.
4. To add a custom guide: enter a position in Guide at (in inches), then select Add vertical or Add horizontal.
5. Select Clear guides to remove all custom guides at once — this does not affect the grid, rulers, or bleed/safe-zone lines.

What changes

• Bleed is a red rectangle extending exactly 0.125 in beyond the artboard's edge on all sides — confirmed via its SVG geometry (a rect inset by −12 units on a 96-units-per-inch scale, i.e. 12⁄96 = 0.125 in outward).
• Safe zone is a green rectangle inset exactly 0.25 in inside the artboard's edge — confirmed the same way (a rect offset 24 units in, 24⁄96 = 0.25 in).
• Rulers show tick marks at exact 1-inch intervals (every 96 SVG units) with numeric inch labels, confirmed directly from the ruler overlay's line and text elements.
• A guide's position exactly matches what you typed — entering 2.5 and selecting Add vertical placed the guide at precisely 2.5 in from the artboard's left edge (240 of 720 SVG units); entering 5 and Add horizontal placed it at precisely 5 in from the top.
• Clear guides removes only the guides you added — the grid, ruler, and bleed/safe-zone overlays were confirmed unaffected (line counts for those overlays were unchanged after clearing).

Print note

All of these are on-screen references only. The panel's own text is explicit: Rulers and guides are on-screen references only — they are not included in exports. The same applies to bleed/safe-zone lines: Preview only; not included in exports. The bleed and safe-zone margins themselves (0.125 in / 0.25 in) are also placeholder values, not yet confirmed against real print specs — useful for judging proportions now, but not a guaranteed final measurement.

Warnings and limits

• Rulers and Bleed / safe zone are desktop-only in effect, not just in label. Their checkboxes can be toggled on mobile and the setting is retained, but the overlay itself is set to display: none at mobile widths — confirmed directly by reading the overlay elements' computed styles at 390 px wide. Don't expect to see either aid on a phone or narrow tablet, even with the checkbox checked.
• Custom guides, unlike rulers and bleed/safe zone, do render on mobile — confirmed the same way, with the guide overlay's computed display at block after adding a guide at 390 px wide.
• Guides are saved with your draft and device recovery, per the panel's own note — they persist across sessions on the same device/browser, unlike the purely session-local View toggle.

Desktop and mobile

Guide at, Add vertical, Add horizontal, and Clear guides work and render identically on desktop and mobile. Rulers (desktop) and Bleed / safe zone (desktop) are togglable everywhere but only visually render on desktop, as detailed above.

Troubleshooting

Related topics

• Grid and realistic preview
• Snap to grid
• Print PDF + Silhouette cut guide
• Production readiness

Verification note

Verified against Blotter Builder on 2026-07-20.

Source notes

Primary observations — all from the live application at https://blotterbuilder.tdl.fyi, 2026-07-20:

• Observed — enabling Bleed / safe zone added an SVG layer (class containing _bleedSafeLayer_) with two <rect> elements: one at x=-12, y=-12, width=744, height=744 (stroke #c45c5c, red) and one at x=24, y=24, width=672, height=672 (stroke #3a9a6a, green), on a viewBox="0 0 720 720" (96 units/in for a 7.5 in artboard) — exactly 0.125 in outward and 0.25 in inward respectively.
• Observed — enabling Rulers added an SVG layer (class containing _rulerLayer_) with tick <line> elements at x = 0, 96, 192, 288... (96-unit/1-inch spacing) and <text> labels "1" through "7".
• Observed — entering 2.5 in Guide at and selecting Add vertical added a guide line at x1=x2=240 (240⁄96 = 2.5 in exactly). Entering 5 and selecting Add horizontal added a line at y1=y2=480 (5 in exactly).
• Observed — selecting Clear guides reduced the guide overlay's line count to 0 while the grid overlay (58 lines) and ruler overlay (16 lines) were unaffected.
• Observed — at 390 × 844, the Rulers and Bleed / safe zone checkboxes were both present, unchecked by default, and not disabled — clicking them toggled checked normally. However, reading getComputedStyle on their respective overlay SVGs afterward showed display: "none" for both, even while checked.
• Observed — at 390 × 844, adding a guide via Guide at + Add vertical produced a guide overlay with display: "block" and a line at the expected position (x1="288" for an entered value of 3, 3 × 96 = 288).

Verification log