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

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

  1. Add viewBox attribute to storage page layout SVG image

  2. Better scaling of images in HTML output