Responsive images in pgweb docs
Jonathan S. Katz <jkatz@postgresql.org>
From: "Jonathan S. Katz" <jkatz@postgresql.org>
To: Pg Docs <pgsql-docs@lists.postgresql.org>
Date: 2019-03-31T14:23:46Z
Lists: pgsql-docs
Attachments
- 0001-Modify-SVGs-to-not-have-view-boxes-that-can-scale-ba.patch (text/plain) patch 0001
- IMG_8936.jpg (image/jpeg)
Hi, First, many thanks on all the hard work for getting images into the documentation, this is certainly a great new feature for ours users. When testing the rendering of the images on the pgweb docs, I discovered that they are not responsive (see attached) and in its current state, basically makes any page that loads an image significantly more challenging to read on mobile. I've devised a solution to the problem, which will take work both on the pgweb front as well as the SVG image generation. The pgweb side is relatively simple: wherever we see ".figure" we can tack on ".col-xl-8.col-lg-10.col-md-12" (Bootstrap grid codes) which provides some readable images. However, that in itself will not make the images responsive. It appears that the width/height are at present hardcoded onto the SVG, for example in doc/src/sgml/images/gin.svg you find: <svg width="836pt" height="432pt" viewBox="0.00 0.00 836.00 432.00" ... In order to make the SVG responsive, we can change the top line to be: <svg viewBox="0.00 0.00 836.00 432.00" preserveAspectRatio="xMinYMin meet" ... and this fixes it. If/when the change is accepted, I can push the change to the pgweb code that allows for the responsiveness. I can fairly easy come up with a patch to do this for the current SVGs (attached). I tested against the PDF build and it looks fine. Based on the earlier discussions, I'm wondering how we would want to proceed for future images, as I know the goal is to limit the amount of manual editing once an image is generated. Thanks, Jonathan
Commits
-
Add viewBox attribute to storage page layout SVG image
- 29046c44f360 12.0 landed
-
Better scaling of images in HTML output
- e446cde16d67 12.0 landed