Responsive images in pgweb docs

"Jonathan S. Katz" <[email protected]> Sun, 31 Mar 2019 10:23:46 -0400

Newsgroups	gmane.comp.db.postgresql.devel.documentation
Message-ID	<[email protected]>

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

0001-Modify-SVGs-to-not-have-view-boxes-that-can-scale-ba.patch (text/plain, 2.1 KB)

From b4f94ee3b62d4eeec45cfa4fbba5375810d8ae59 Mon Sep 17 00:00:00 2001
From: "Jonathan S. Katz" <[email protected]>
Date: Sun, 31 Mar 2019 10:16:26 -0400
Subject: [PATCH] Modify SVGs to not have view boxes that can scale based on
 viewing container.

This allows for responsive image viewing, particularly on the web.
---
 doc/src/sgml/images/gin.svg        | 3 +--
 doc/src/sgml/images/pagelayout.svg | 8 ++++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/doc/src/sgml/images/gin.svg b/doc/src/sgml/images/gin.svg
index eacb5c8c16..493f0ffa76 100644
--- a/doc/src/sgml/images/gin.svg
+++ b/doc/src/sgml/images/gin.svg
@@ -4,8 +4,7 @@
 <!-- Generated by graphviz version 2.40.1 (20161225.0304)
  -->
 <!-- Title: gin Pages: 1 -->
-<svg width="836pt" height="432pt"
- viewBox="0.00 0.00 836.00 432.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg viewBox="0.00 0.00 836.00 432.00" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 428)">
 <title>gin</title>
 <polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-428 832,-428 832,4 -4,4"/>
diff --git a/doc/src/sgml/images/pagelayout.svg b/doc/src/sgml/images/pagelayout.svg
index 6b819a553e..95711c541f 100644
--- a/doc/src/sgml/images/pagelayout.svg
+++ b/doc/src/sgml/images/pagelayout.svg
@@ -1,8 +1,8 @@
 <?xml version='1.0' encoding='UTF-8' standalone='no'?>
-<svg 
+<svg
     xmlns='http://www.w3.org/2000/svg'
-    width='610'
-    height='210'
+    viewBox="0.00 0.00 610.00 210.00"
+    preserveAspectRatio="xMinYMin meet"
     shape-rendering='geometricPrecision'
     version='1.0'>
   <defs>
@@ -37,4 +37,4 @@
     <text x='324' y='166' font-family='Courier' font-size='15' stroke='none' fill='#000000' ><![CDATA[Item]]></text>
     <text x='509' y='166' font-family='Courier' font-size='15' stroke='none' fill='#000000' ><![CDATA[Special]]></text>
   </g>
-</svg>
\ No newline at end of file
+</svg>
-- 
2.14.3 (Apple Git-98)

IMG_8936.jpg (image/jpeg, 68.9 KB) - not displayed

signature.asc (application/pgp-signature, 833 B)