Repository navigation
Draw image grams one image pixel per screen pixel, fitted to the page (#345) - #347
Merged
Merged
Conversation
A gram's image was drawn at one image pixel per CSS pixel, capped at 1200 CSS px whatever room the page had. On a display scaled to 125% or 150% a CSS pixel is 1.25-1.5 screen pixels, so a 357x366 snippet is drawn half as big again as the image, labels included; and a wide gram overflows any page narrower than the cap. The optional `image-sizing` config row chooses the strategy, so stakeholders can compare before one is made permanent: - legacy (default, unchanged behaviour) - native: one image pixel per CSS pixel, shrunk to fit the room - screen: one image pixel per screen pixel, shrunk to fit the room The fitting sizes refit on resize. demo/image-sizing.html shows a 1677x380 gram and a 357x366 snippet cut from it, before and after. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016EDJhgnsnPokKFevLu1a3X
Contributor
PR PreviewPreview deployment is ready! View Preview Last updated: 2026-10-02T13:22:48.411Z |
Under `native` and `screen` every image gram gets the expand button, the 357x366 snippet included, and expands as a landscape gram does. Legacy keeps the landscape-only gate, so verniers on existing pages are unchanged. The demo page now reports the window width beside the scale factor, since that is what decides how much of the page the legacy 1200 px gram fills. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016EDJhgnsnPokKFevLu1a3X
A gram whose table has no `image-sizing` row is now drawn one image pixel per screen pixel, shrunk only to fit the page's width, and gets the expand toggle whatever its shape. `legacy` remains as an explicit opt-out: debug-multiple.html pins its large gram to it so the 1200 px cap stays covered, and the demo page's "before" grams name it. The portrait-guard test (SC-005) now expects the toggle on the vernier, and the integration guide documents the row. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016EDJhgnsnPokKFevLu1a3X
IanMayo
changed the title
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.
Fixes #345.
Diagnosis
I couldn't reproduce the stretch at 1× device scaling. The likely cause is display scaling. On a Windows display set to 125% or 150%, one CSS pixel is 1.25–1.5 screen pixels, so a gram drawn at its natural CSS size shows half as big again as the image, axis labels included. The old rule also capped width at a fixed 1200 CSS px whatever room the page had. That cap is why the "before" gram fills a 125%-scaled 1920 screen (about 1536 CSS px wide) but leaves a gap on a wider one.
Change
screen). A gram is drawn at one image pixel per screen pixel (÷devicePixelRatio). It is shrunk, keeping its shape, only when that would not fit the page width, and it refits on resize.image-sizingrow. It overrides the default per gram:screen(default)native: one image px per CSS px, same fitlegacy: the old 1200 cap, with the expand button on landscape grams onlyPreview
demo/image-sizing.html(linked from the landing page) shows a 1677×380 gram and a 357×366 snippet cut from it. The first two grams are pinned tolegacy; the last two have no row, so they show the default. The page reports the display's scale factor, the window width and each gram's drawn size.Tests
fitImageSizeacross all sizings, using the issue's image sizes.image-sizing.spec.js: covers six things.nativefits a 1000px window.legacystays at 1200.legacy), and it expands and collapses.image-scaling.spec.jsstill covers the 1200 cap;debug-multiple.htmlpins its large gram tolegacyfor it.docs/HTML-Integration-Guide.md.🤖 Generated with Claude Code
https://claude.ai/code/session_016EDJhgnsnPokKFevLu1a3X