fix(html): flatten diagrams to inline SVG, stop diagram overflow scrollbars - #58
Merged
Merged
Conversation
…llbars
Rasterizing a diagram to a PNG meant measuring a region of a live page and
clipping it, and that clip kept landing wrong: cut at the right and bottom,
then cut at the top and bottom, depending on scroll position, page reflow and
whether the browser honoured CaptureBeyondViewport.
For HTML, drop the snapshot entirely and use the mechanism the PDF path
already uses: let the browser draw the diagram, keep the rendered inline SVG,
strip the mermaid library. Nothing is measured or clipped, so no diagram can
come out cut, the result is resolution-independent, and the output is far
smaller. Note that Google Docs does not render inline SVG on import; -f docx
is the route for that, and the README now says so.
Diagram blocks inherited pre{overflow:auto}, so a diagram wider than its box
got a scroll region, which the browser paints into the printed PDF (and which
clips the diagram). Give pre.mermaid overflow:visible and cap diagram SVGs at
the container width, which also stops wide d2/plantuml diagrams running off
the page.
DOCX still needs a raster, so snapshotDiagram stays, but the diagram is now
pinned at the viewport origin, alone and scaled to fit, making the clip
(0,0,w,h) — the same rectangle under every screenshot coordinate convention,
wherever the page is scrolled.
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
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.
Follow-up to #56 and #57, which chased the same symptom twice: a diagram snapshot cut at the right and bottom, then cut at the top and bottom. Both were the same underlying bet — measure a region of a live page and clip a screenshot to it — losing to scroll position, page reflow and browsers that ignore
CaptureBeyondViewport.Changes
HTML
-flattenstops rasterizing.chrome.FlattenDiagrams(wasRasterize) now does what the PDF path does: the browser draws each diagram, the rendered inline SVG stays in the document, the mermaid library is stripped. Nothing is measured, clipped or snapshotted, so no diagram can come out cut; the result is resolution-independent and much smaller (a test doc went from 3.7 MB of PNG to 81 KB).Consequence, documented in the README: Google Docs does not render inline SVG on import, so
-f docx(PNG diagrams) is the route for that.Diagram blocks no longer produce a scrollbar in PDF.
pre.mermaidinheritedpre{overflow:auto}, so a diagram wider than its box got a scroll region — painted into the printed PDF and clipping the diagram. Now:The
svgrule also stops a wide d2/plantuml diagram running off the page. Verified with a 3000px-wide SVG in a 900px viewport: clipped at the box edge before, scaled to fit after.DOCX keeps a raster (Word needs one), but
snapshotDiagramnow pins the diagramposition:fixedat the viewport origin, alone, scaled to fit a viewport sized to it. The clip is(0,0,w,h)— the same rectangle under every screenshot coordinate convention, wherever the page is scrolled, honoured flag or not.Checks
Node 200Node 40-flattenhtml<svg>, no<script>, nodata:image/pngNew
TestFlattenDiagramsKeepsRenderedSVG;go test ./...green. README,-flattenflag help and package docs updated to match.