Design call: 9-slice vs corner + edge plates for the frame #155

New issue

Closed

opened 2026-09-16 20:50:54 +00:00 by peterswimm · 1 comment

peterswimm commented

2026-09-16 20:50:54 +00:00

Owner

@ville — a design call, now backed by a measurement rather than by my prose.

A frame plate stretched far from its native ratio distorts. Its thickness is filled geometry, so a non-uniform scale scales bar weight anisotropically — being vector does not help, that is exactly what is being scaled.

Both panels are 860×190 (4.5:1), magnified 3× on the top-left corner. Left: the vertical bar is roughly 4× the weight of the horizontal, and the hand-drawn wobble is pulled into coarse teeth. Right: 9-slice — corners rigid, edges repeated at native scale. Equal weight, wobble intact on both.

Two ways to fix it, and they are not equivalent

fit: slice — shipped in #149. 9-slice via -webkit-mask-box-image-*. Works on Blink and WebKit; Firefox has no mask-border and degrades cleanly to the stretch mask. Needs a second, intrinsically-sized plate export and two knobs on the plate (slice: 12% picks which art is the corner, slice_width: 20px picks how thick it draws).

Corner + edge plates — how a screenprinter actually builds a border. Fully portable, no engine support at all. Still the better answer where corner and edge artwork must differ — 9-slice re-uses one drawing's own corners and cannot express that.

The question

Is the SPELWork frame a drawing whose corners are meant to repeat (9-slice is enough), or does it want distinct corner and edge plates?

Worth noting: you shipped two line plates alongside the rectangle in #147, which reads like the second answer was already the direction. If so, fit: slice is a useful stopgap rather than the destination, and the plates to draw are 4 corners + 4 edges.

Nothing is blocked either way — fit: slice is live and the frame no longer distorts. This is about whether to invest in the plates.

@ville — a design call, now backed by a measurement rather than by my prose. A frame plate stretched far from its native ratio **distorts**. Its thickness is *filled geometry*, so a non-uniform scale scales bar weight anisotropically — being vector does not help, that is exactly what is being scaled. ![fit: stretch vs 9-slice at 3x magnification](https://git.toilville.dev/Toilville/toilville-design/raw/commit/206a4e5/scratchpad/press-review/04-fit.png) Both panels are 860×190 (4.5:1), magnified 3× on the top-left corner. **Left:** the vertical bar is roughly **4× the weight** of the horizontal, and the hand-drawn wobble is pulled into coarse teeth. **Right:** 9-slice — corners rigid, edges repeated at native scale. Equal weight, wobble intact on both. ## Two ways to fix it, and they are not equivalent **`fit: slice` — shipped in #149.** 9-slice via `-webkit-mask-box-image-*`. Works on Blink and WebKit; Firefox has no `mask-border` and degrades cleanly to the stretch mask. Needs a second, intrinsically-sized plate export and two knobs on the plate (`slice: 12%` picks *which* art is the corner, `slice_width: 20px` picks how thick it *draws*). **Corner + edge plates — how a screenprinter actually builds a border.** Fully portable, no engine support at all. **Still the better answer where corner and edge artwork must _differ_** — 9-slice re-uses one drawing's own corners and cannot express that. ## The question Is the SPELWork frame a drawing whose corners are meant to repeat (9-slice is enough), or does it want **distinct corner and edge plates**? Worth noting: you shipped **two line plates alongside the rectangle** in #147, which reads like the second answer was already the direction. If so, `fit: slice` is a useful stopgap rather than the destination, and the plates to draw are 4 corners + 4 edges. Nothing is blocked either way — `fit: slice` is live and the frame no longer distorts. This is about whether to invest in the plates.

peterswimm referenced this issue

2026-09-16 20:51:18 +00:00

Design call: should an anchored rule preserve proportion or weight? #156

peterswimm referenced this issue

2026-09-16 23:16:23 +00:00

Confirm the press vocabulary (press · pulls · plate · pigment · registration · substrate) #151