Seven blog-SVG text nodes are drawn on top of a foreground graphic or past the edge of their card — invisible where they overlap

[hotlong]

Found while correcting the ground statistic in the #166 contrast harness (PR #188). Recording, not fixing — none of these is in that card's scope.

What the corrected harness sees that the old one could not

Every contrast sweep this repo has run so far (#140, #167, #166) sampled the ground under a text node as the median of nine samples across its glyph box. A median is a statement about the typical pixel under a string. It is structurally incapable of reporting a string that is mostly on its intended ground and locally on something else — which is exactly what a glyph colliding with a foreground graphic, or a line overflowing the card it was meant to sit inside, looks like.

Scoring the worst ground pixel under the node's own glyph ink instead (same Chromium text{visibility:hidden} raster method, plus a second raster with text visible so the difference gives an ink mask matched to that node's own fill, at raster scales 1x / 0.667x / 2x) surfaces seven nodes in six files below 3:1 that the median reports as comfortably passing — in one case at 12.28:1.

The seven

File	class	size	fill	worst ground	ratio	ratio the median reports	what is actually there
conversational-app-iteration/cover-en.svg	.label	18px w740	#173a36	#163b35	1.01	12.28	the leading C of Change plan is drawn on the dark node marker
conversational-app-iteration/cover-en.svg	.tiny	15px	#60746e	#5f7773	1.04	4.93	the dark node marker sits on top of workflows
conversational-app-iteration/cover.svg	.tiny	15px	#60746e	#5f7773	1.04	4.93	same node, Simplified sibling
metadata-not-code-generation/cover-en.svg	.soft2	16px	#b7d6ce	#e6e3d5	1.21	7.90	the line runs off the dark card; and audit lands on the cream ground
ai-wrote-your-app-dare-to-merge/review-loop-en.svg	.s	12.5px	#a9c4ba	#899a97	1.58	5.90	the line runs off the right edge of its dark card; the final y lands outside
vibe-coding-technical-debt-2026/debt-curve-en.svg	(none)	14px	#173a36	#993a1e	1.76	12.39	the debt curve passes through erupts
self-hosted-ai-app-platform/self-hosted-runtime-en.svg	(none)	16px	#93c5fd	#2563eb	2.87	8.95	the final s of governed tools grazes the blue divider

The first five are visible losses of text at native size — rendered and looked at, not inferred from the numbers. The last two are a stroke and a rule grazing one or two glyph edges; they are real but cosmetic, and worth triaging separately from the first five.

Why this is a different card from #183 and #181

• 217 small-text nodes across 44 blog SVGs clear 3:1 but miss WCAG AA 4.5:1 — the house secondary greys sit just under the floor #183 is 217 nodes on flat grounds sitting between 3:1 and 4.5:1 — a palette question about the house secondary greys. Nothing there is invisible; everything there passes 3:1.
• The accent-gold ? on enterprise-ontology-race-open-vs-closed/cover{,-en}.svg reads at 1.79:1 — but the mechanical darkening rule cannot be applied to it #181 is the accent-gold ?, a single fill that is too light for its (flat) ground.
• This is geometry, not palette. No fill value fixes it: the remedy is to move the text, move the graphic, shorten the string, or clip the card — a per-composition authoring call. Recolouring .tiny would not stop the marker from covering workflows.

Suggested handling

Not a mechanical sweep. Each of the first five wants a look at the composition and a one-line geometry change in that file. The last two are arguably fine as authored.

Worth doing at the same time: whatever the repo's next ground-sampling check is, it should score the worst ground under the ink rather than the median, or this class stays invisible. That is the change PR #188 makes to the #166 harness.

Unassigned; recording only.

Generated by Claude Code

[hotlong]

Taking it now. This is the highest-priority open card in this repo, and it jumps the queue.

The seat rendered four of the six files at native size and looked, before claiming. Every visible loss the card describes is there:

• conversational-app-iteration/cover-en.svg — the label reads 「hange plan」. The leading C is behind the dark node marker. In the same composition the caption line reads "objects, fields, views, workflows, permissions, automation, Agent tools" with workflows struck through by the bottom marker.
• metadata-not-code-generation/cover-en.svg — "One business model drives UI, API, automation, Agents, and audit" — and audit has walked off the dark card onto the cream ground and is effectively gone.
• ai-wrote-your-app-dare-to-merge/review-loop-en.svg — box 3's last line runs past the card's right edge; the final y of structurally lands outside.
• vibe-coding-technical-debt-2026/debt-curve-en.svg — the red curve passes straight through erup**ts**.

These are on the live site. The maintainer's standing instruction is that a visual defect is work, not a note — and a word a reader cannot read is the strongest form of that.

裁决 (seat rulings)

1. Fix the five visible losses. Leave the two grazing cases alone. The self-hosted-runtime-en.svg divider grazing the final s of governed tools (2.87) and the debt-curve case, if it turns out to be a stroke edge rather than a covered glyph, are cosmetic and arguably as authored — report them with a render and let the seat decide, but do not spend geometry changes on them. The bar for "fix" is: a reader cannot read a word.
2. Geometry, not palette. No fill value is an acceptable repair here. Move the text, move the graphic, shorten the string, or widen the card — whichever the composition wants. If you find yourself changing a colour, you have the wrong fix.
3. Do not change any wording to make it fit, with one exception: if a string genuinely overflows because it is too long for a card that cannot grow, say so and propose the shorter wording in the report rather than shipping it. Text in these diagrams is content, and content changes are a different card.
4. Locale siblings move together. conversational-app-iteration/cover.svg carries the same defect as its -en twin; whatever you do to one, do to the other, and check every touched file for a sibling. The card names one pair — sweep for the rest.
5. The corrected harness is the acceptance instrument, and it is now the house method. PR Blog SVGs: raise six muted-grey text classes to the WCAG AA floor for their rendered size #188 (c2b3171) put worst-ground-under-the-ink across raster scales into the 19 muted-grey text nodes in blog SVGs sit below WCAG 3:1 on light grounds — a palette decision, not a cascade bug #166 harness. Re-run it over the whole corpus before and after: the seven must leave the sub-3:1 population, and nothing else may move. Same node-by-node comparison Blog SVGs: raise six muted-grey text classes to the WCAG AA floor for their rendered size #188 ran — colour drift, position drift, font size/weight drift all zero on every node you did not intend to touch. A geometry card can move a glyph box by accident far more easily than a palette card can, so this check matters more here, not less.
6. Render every touched file at native size and look at it, before and after. Assertions do not see a covered glyph — that is the entire reason this card exists. Say in the report what you actually saw, per file.

PM 机制假设 (state them back if wrong)

• Six files, seven nodes, five worth fixing. If your sweep with the corrected harness finds more than seven, that is a finding, not a scope expansion — report it and fix only what this card names unless the extras are the same composition.
• main is at c2b3171. Blog SVGs: raise six muted-grey text classes to the WCAG AA floor for their rendered size #188 landed the harness change; ci(content-lint): resolve topic hub slugs instead of exempting them #182/Let the .mono class reach the text nodes it wraps #186/Point generated zh-Hant body links at the Traditional locale #187/content-lint: derive all four frontmatter term sets from the taxonomy #190 landed before it. None of the six files is touched by anything in flight.

Verification

• Five gates through bash /home/user/objectstack/scripts/pm/os-verify-lock.sh -c '<command>', exits captured before any pipe, each verdict quoted with git rev-parse --short HEAD, git status --porcelain empty.
• The before/after harness sweep, with the drift counts.
• Native-size renders of every touched file, before and after, described.

Claim: PM loop round 4 (wave 6)
Session: session_01FeA1nwBz1ohH65dvffUGKr
Branch: claude/issue-193-svg-text-over-graphics
Worktree: www.objectos.ai-issue-193
Domain: repo:www.objectos.ai (single-lane execution seat; self-triaged → promoted from finding)
File surface: the SVGs in the six named directories, plus their locale siblings. Nothing under src/, scripts/ or any .mdx.
Container & model: M, mode:subagent, model: opus
Clause-②: no
Serial constraints cleared: #166 landed as c2b3171 and released the SVG lane. #144's patch round owns scripts/gen-zh-hant.mjs, src/lib/zhconvert.ts, src/lib/terms.ts and the Traditional corpus; #159's owns content/blog/**/index.ja.mdx and src/components/ArticleList.astro. Neither touches an SVG. #181 and #183 are held behind this — both are palette cards over the same corpus and would collide.

Environment ruling carried forward: REST and gh are unreachable from this container (403). GitHub MCP is the sanctioned channel here, overriding the REST-only instruction in .claude/agents/os-dev.md for this repo.

---

Generated by Claude Code

[hotlong]

dev claim — starting work on #193.

Session: session_01FeA1nwBz1ohH65dvffUGKr (os-dev, dispatched by the PM seat)
Branch: claude/issue-193-svg-text-over-graphics (pushed empty as the write-route probe — 200, route is live)
Worktree: /home/user/www.objectos.ai-issue-193, branched from c2b3171
Assignee: unchanged (hotlong), per the dispatch.

File surface I intend to touch: only SVGs under content/blog/ in the six named directories plus any locale siblings the sweep turns up:

• conversational-app-iteration/cover-en.svg, conversational-app-iteration/cover.svg
• metadata-not-code-generation/cover-en.svg (+ sibling if present)
• ai-wrote-your-app-dare-to-merge/review-loop-en.svg (+ sibling if present)
• vibe-coding-technical-debt-2026/debt-curve-en.svg (+ sibling if present)
• self-hosted-ai-app-platform/self-hosted-runtime-en.svg — read only, per ruling 1 (report with a render, do not spend geometry on it)

Nothing under src/, scripts/, or any .mdx. No content/docs/releases/.

One mechanism note up front: PR #188 changed 5 files / 6 lines — the corrected harness is not committed to the repo. I am rebuilding it from the method section of #188's body (Chromium at native viewBox size, second raster with text{visibility:hidden} injected as an SVG style element on the root, per-pixel ink mask matched to the node's own fill, worst ground under the ink at raster scales 1x / 0.667x / 2x, old median recorded alongside) and running it from the scratchpad, not from the repo tree. If my rebuilt harness does not reproduce the card's seven nodes with the card's ratios, that is the first thing I will report rather than proceeding.

Approach: geometry only (ruling 2), no wording changes (ruling 3), locale siblings in lockstep (ruling 4), before/after full-corpus node-by-node drift comparison (ruling 5), and native-size renders of every touched file looked at both ways (ruling 6).

---

Generated by Claude Code

---

Generated by Claude Code

[hotlong]

os-dev-report

{
  "issue": 193,
  "status": "done",
  "branch": "claude/issue-193-svg-text-over-graphics",
  "pr": "https://github.com/objectstack-ai/www.objectos.ai/pull/199",
  "premise_still_valid": true,
  "summary": "All five visible losses repaired with geometry only; the two grazing cases left as authored per ruling 1 and reported with renders. (1-3) conversational-app-iteration/cover-en.svg + cover.svg: the right-hand label re-anchors from middle@632 to start@608, an 18px gap from the node marker mirroring the 19px Audit has, so the clearance no longer depends on the platform-resolved face; the footnote drops from y=346 to y=398 and the card grows 388->424 to give it a band of its own below Confirm. Both applied to the Simplified sibling in lockstep (its label cleared by only 6px before). (4) metadata-not-code-generation/cover-en.svg: the 468.38px caption breaks onto two lines in a 360px inner width; the card cannot grow (+108px needed, blocked by the arrow at x=640 and the 86px margin), and no wording changed. (5) ai-wrote-your-app-dare-to-merge/review-loop-en.svg: box 3's line overflowed by 4.7px and no three-line re-flow exists (measured: every split keeping the quoted phrase whole leaves a line >=184.7px vs the ~177px the box tolerates), so all four cards grow 120->140 for a fourth line; growing the rects moved no text, only the caption following the return path. Zero colour, font-size, font-weight or wording changes anywhere in the corpus.",
  "tests": "All at 4cfecea, tree clean (git status --porcelain empty). FIVE GATES via bash /home/user/objectstack/scripts/pm/os-verify-lock.sh -c '<cmd>', each exit captured BEFORE any pipe (output redirected to a file first, so tail cannot launder a red gate into a green $?) - install EXIT=0 'Lockfile is up to date, resolution step is skipped'; check EXIT=0 'Result (135 files): 0 errors, 0 warnings, 0 hints'; content:lint --published EXIT=0 'content lint passed (335 files, 44 glossary terms checked)'; build EXIT=0 '[build] 867 page(s) built in 64.21s / Complete!'; seo:smoke EXIT=0 'SEO smoke test passed (866 HTML pages checked)'. HARNESS: rebuilt from #188's method (worst ground under the node's own ink at raster scales 1x/0.667x/2x, median recorded alongside) and VALIDATED against this card before use - it reproduces all seven nodes at the card's own ratios and worst-ground hexes (1.01 #163b35, 1.04 #5f7773 x2, 1.21 #e6e3d5, 1.76 #993a1e, 2.87 #2563eb). Mechanism note: a plain full-vs-ground difference cannot find this class, because the worst case is text drawn over a graphic of its OWN colour where the difference is exactly zero; the ink mask is built by re-rendering every text node in a unique sentinel fill. My first attempt used exact sentinel matching and reported ink:0 on two of the seven - Chromium's rasteriser shifts emitted colours by ~1 (sentinel 51,0,0 landed as 50,0,0), so matching is quantised to a 51-step lattice with tolerance 6 and restricted to each node's own layout box. CORPUS SWEEP 106 files, before -> after: 2007 -> 2009 nodes; sub-3:1 by worst ground 9 -> 4; colour drift 0, font-size drift 0, font-weight drift 0, position drift 5 (all intended and enumerated in the PR), regressions 0. The four remaining sub-3:1 are all deliberate: the two grazing cases below plus #181's two accent-gold '?' at 1.79 on a flat ground. The five that left: 1.01->12.28, 1.04->4.93, 1.04->4.93, and the two re-flowed lines at 7.90 and 5.90 - in every case the new worst-ground reading equals what the old median metric reported before the fix, which is the cleanest confirmation the whole glyph run now sits on its intended ground. The drift comparator keys on CONTENT, not document index: my first pass keyed on index, and inserting a line renumbered every node after it so those nodes stopped being compared at all - review-loop appeared to move 6 nodes when it moves 1. RENDERS: every touched file rendered at native size and looked at, before and after - before I saw literally 'hange plan' with the C swallowed by the marker and 'workflows' struck through; 'and audit' pale mint on cream and gone; the final y of 'structurally' hanging off the card. After: all read in full, compositions intact. Each edit was confirmed on disk by grepping for the injected text AND for the absence of the replaced text, not by the editor's exit code. Also served dist and opened /en/blog/conversational-app-iteration/ in Chromium: cover renders correctly in page context, 0 failed requests.",
  "open_questions": [
    {
      "question": "debt-curve-en.svg (1.76:1) - ruling 1 reserved this for the seat if it turned out to be a stroke edge rather than a covered glyph. Rendered at 8x and looked at: it is a stroke edge. The red curve crosses only the descender of the p, and the curve's 10px endpoint dot sits behind the BOTTOM of t and s; every letterform in 'erupts' is complete above the crossing and the word reads normally. Left as authored. Fix or leave?",
      "options": ["A leave as authored - a reader can read the word, which is the stated bar", "B nudge the label's baseline up ~8px so the curve passes wholly below it", "C move the curve's endpoint dot, which is the only filled shape actually behind a glyph"],
      "recommendation": "A, because it meets ruling 1's bar exactly. If the seat wants it clean anyway, B is the cheaper of the two: one y value, and the band above the label is empty up to the chart's top gridline."
    },
    {
      "question": "self-hosted-runtime-en.svg (2.87:1) - same reservation. Rendered at 8x: the blue divider crosses THE SECOND o OF 'tools', not the final s as the card records; 'governed tools' is fully readable and the line stays legible where it spans the panel boundary. Left as authored. Fix or leave?",
      "options": ["A leave as authored", "B shift the divider ~6px so it falls in the word gap rather than through a glyph"],
      "recommendation": "A. Noting the correction to the card's record either way: it is the o of tools, not the final s."
    }
  ],
  "out_of_scope_findings": [
    "filed as #200: two blog-SVG lines sit under 3px from their card edge (1.75px in why-custom-systems-die/cover-en.svg, 2.80px in review-loop-en.svg - the card NEXT TO the one this issue had to give a fourth line) and nothing in the repo measures glyph-box clearance. Contrast scoring is structurally blind to a line that stops 2px inside its card, and the declared font stack resolves to a different face on every platform, so CI's line lengths are not the reader's. Labelled finding, unassigned, no pm:queue. Corpus-wide: 2 nodes under 6px, 6 under 10px - a short list, not a sweep.",
    "NOT filed, already recorded as #180: 98 text nodes across 35 files declare a fill= presentation attribute that the house bare text{fill:...} rule defeats, so 20 distinct declared colours never render. I measured this independently before searching and got 98/98 with the same worked example #180 already uses (the ai-wrote-your-app-dare-to-merge diff lines, where + green and - red both compute to the same dark green). Recording the corroboration rather than filing a duplicate. Relevant here because debt-curve-en.svg's amber label is one of them - its fill=#9a6212 is dead and it renders dark green, which is why its worst-ground fill reads #173a36 in both the card's table and my sweep."
  ]
}

---

Generated by Claude Code

---

Generated by Claude Code