The "Save as PNG" diagrams have un-styled text that is hard to read
brittag opened this issue · 6 comments
In order for our team to easily grab portable images of our diagrams to share with compliance reviewers and other interested people, the "Save as PNG" button should generate PNGs that match the styling of the displayed diagrams.
Right now the "Save as PNG" images have the wrong styling for text - here's an example:
Compare to the site:
This isn't a big deal since we can also export images by taking a whole-page screenshot, but it'd be nice to fix eventually.
with a png conversation (vector->raster) it'd be hard if not impossible to always get the text rendered correctly... looks like the graph generated is svg in the DOM might be easier to offer an svg download too?
A big issue in rendering what we see in the browser as a PNG is that the styles need to be remapped in order to override the default styles. Save SVG as PNG has some options which include a selectorRemap callback function which can override styles during the export.
@dtwen Yes, good question! Here's a list of current use cases for this type of system diagram:
- View them on the web on https://diagrams.fr.cloud.gov/
- Embed a copy of them in a Word doc (the doc will be sent around and edited by multiple people in Word on Windows and OS X)
- Send a copy over email (as an attachment) to people who will download them locally and use the default viewer that Windows or OS X offers to view them in (including zooming in and out on the larger diagrams); they may also print them out for reference
Additional potential use cases:
- Embed a copy in documentation on the web (such as in https://cloud.gov/docs/)
PNG is nice since it works very reliably for embedding in Word docs and viewing locally on any operating system. SVG is also really helpful for embedding in docs on the web. If I could have anything, I'd like both as options!
Giving this a shot! I took a look at save-svg-as-png's selectorRemap callback function and compared it against the computed styles. It looks like the font-families and font-size, which is in rem, weren't getting picked up since they were inherited from outside of the svg, from the body DOM element. Going to open a PR with a few small changes to the CSS to try to target the right svg elements.
EDIT: PR #50
Merged @julianvmodesto's PR for this, thank you! Leaving this issue open for now since I'd also like to figure out how to avoid cutting off the text in some of the boxes.