feat(profile): show the banner as vectors so its text is sharp at any size - #80
Merged
Merged
Conversation
… size The profile README scales the banner to its column, about 900 CSS px, so the 3840 px WebP was resampled by the browser and its 12-15 px labels came out soft on every screen; more source pixels only mean a larger downscale. gen-banner.mjs now also writes profile/wickra-banner.svg: the same picture with every glyph converted to a path by resvg, so the browser rasterises it at the display's own resolution and no font has to be present on the viewer's machine. The rounded corners become a clip path. resvg writes the gradient of the wordmark's "ra" tspan as a copy with an empty id; the generator names it and stops if more than one such copy ever appears. The vector banner renders pixel-identical to the source SVG. The WebP stays as the raster copy, now 7680x3840 and lossless. The README, the cache-buster the indicator-count workflow bumps, and banner.yml's commit step follow the new file. BANNER_FONT_DIR lets a machine without DejaVu Sans Mono render the banner locally.
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
1 participant
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.
The profile README scales the banner to its column, about 900 CSS px, so the 3840 px WebP was resampled by the browser and its 12-15 px labels came out soft on every screen. A larger raster does not fix that: it only makes the downscale larger.
gen-banner.mjsnow also writesprofile/wickra-banner.svg, the same picture with every glyph converted to a path by resvg. The browser rasterises it at the display's own resolution, so the text is as sharp as the screen allows at every width and zoom, and no font has to be installed on the viewer's machine (an<img>SVG cannot load fonts, and live text would break the measured monospace layout). The rounded corners become a clip path. Font, sizes, layout and aspect ratio are unchanged.<tspan>as a copy with an empty id, referenced asurl(#), which renders the word black. The generator names it and stops if more than one such copy ever appears.?v=cache-buster thatindicator-count.ymlbumps, andbanner.yml's commit step follow the new file.BANNER_FONT_DIRlets a machine without DejaVu Sans Mono render the banner locally; CI keeps using the runner's copy and re-renders on merge.