fix(preview): vertical-centre single-line labels via dominant-baseline#7
Merged
Conversation
SVG `<text>` defaults to `dominant-baseline="alphabetic"`, which places the glyph baseline (not the visual centre) on the y coordinate. The four preview renderers compensated with magic offsets (`+ 9`, `+ 5`, `+ 4`) eyeballed against `system-ui` metrics — when the renderer resolved `system-ui` to a different family (different ascender/descender ratio) those offsets visibly slipped, most obviously on the FGCA column header strip. Replace the magic offsets with explicit `dominant-baseline="central"`, which anchors the geometric centre of the em-box on the y coordinate regardless of font metrics: - `fgca-preview.ts` — column headers (Factors / Goals / Changes / Activities) for both FGCA and FGA, the visible bug. - `process-blueprint-preview.ts` — stage headers and aspect pills (same magic `+ 4`). - `goals-preview.ts` — goal node labels (same magic `+ 5`). Body text with the two-line wrap path in `fgca-preview.ts` (lines 319-320) and the multi-line activity layout in `activities-preview.ts` are left alone: their y coordinates are tuned to position two lines around the centre, and `dominant-baseline="central"` would re-anchor them in a way that breaks the second line. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
📊 Metrics Regression Report✅ All metrics within tolerance Summary
Detailsai-expense-approval.bpmn.yaml
feature-release.bpmn.yaml
large-cyclic-workflow.bpmn.yaml
order-fulfillment.bpmn.yaml
order-processing.bpmn.yaml
simple-approval.bpmn.yaml
simple-linear.bpmn.yaml
small-dense-approval.bpmn.yaml
xlarge-stress-test.bpmn.yaml
|
…ed sites) PR #7 round 1 converted four `text-anchor="middle"` headers/pills to `dominant-baseline="central"` but missed three left-anchored, single-line text sites in `process-blueprint-preview.ts` that share the same brittle magic-offset pattern (per orchestrator review on PR #7): - Legend column labels (`y/2 + 4` → `y/2` + `dominant-baseline="central"`). - Goal-row cell text (`y + 22` → `y + height/2` + `dominant-baseline="central"`). - Result-row cell text (same as goal-row). All three stay left-anchored — `dominant-baseline` is vertical-only and the absence of `text-anchor` (= default `start`) is intentional for the legend / goal / result columns. The `activities-preview` multi-row nodes and the `fgca` two-line wrap remain out of scope by orchestrator note. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
📊 Metrics Regression Report✅ All metrics within tolerance Summary
Detailsai-expense-approval.bpmn.yaml
feature-release.bpmn.yaml
large-cyclic-workflow.bpmn.yaml
order-fulfillment.bpmn.yaml
order-processing.bpmn.yaml
simple-approval.bpmn.yaml
simple-linear.bpmn.yaml
small-dense-approval.bpmn.yaml
xlarge-stress-test.bpmn.yaml
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Reported while previewing
examples/fgca/strategy-2026.fgca.transitrix.yaml— the FGCA column headers ("Factors (F)", "Goals (G)", "Changes (C)", "Activities (A)") sit visibly low inside their header pills.Root cause
SVG
<text>defaults todominant-baseline="alphabetic", which places the glyph baseline (not the visual centre) on theycoordinate. The four preview renderers compensated with magic offsets eyeballed againstsystem-uimetrics:y="PAD + HEADER_H - 9"y="… + s.height / 2 + 4"y="… + p.height / 2 + 4"y="y + n.height / 2 + 5"When the renderer resolved
system-uito a different family (different ascender / descender ratio) those offsets visibly slipped — exactly what the screenshot shows.Fix
Replace the magic offsets with explicit
dominant-baseline="central", which anchors the geometric centre of the em-box on theycoordinate regardless of font:Same change applied to the three other call sites listed above.
Out of scope
Body text with the two-line wrap path in
fgca-preview.ts(lines 319-320) and the multi-line activity layout inactivities-preview.tsare left alone: theirycoordinates are tuned to position two lines around the centre, anddominant-baseline="central"would re-anchor them in a way that breaks the second line. Those can be revisited if a visual misalignment is reported.Test plan
tsc --noEmitinextension— clean.npx vitest runinpackages/diagrams— 303 / 303 (unchanged; this PR only touches Studio SVG output).examples/fgca/strategy-2026.fgca.transitrix.yaml, confirm "Factors (F)" / "Goals (G)" / "Changes (C)" / "Activities (A)" header labels sit centred in the pill.examples/process-blueprint/order-fulfilment.process-blueprint.transitrix.yaml, confirm stage header names and aspect pill labels are centred..goals.transitrix.yamlfile, confirm goal node labels are centred.🤖 Generated with Claude Code