Re: [pgsql-www] [HACKERS] Small issue in online devel documentation build

On Fri, Mar 24, 2017 at 07:01:46AM +0100, Fabien COELHO wrote:
>
> Hello Peter,
>
> >I think the fix belongs into the web site CSS, so there is nothing to
> >commit into PostgreSQL here.
>
> Indeed, the changes were only for the "remove nesting" solution.
>
> >I will close the commit fest entry, but I have added a section to the open
> >items list so we keep track of it. (https://wiki.postgresql.org/wiki/PostgreSQL_10_Open_Items#Documentation_tool_chain)
>
> I put forward that the quick workaround a colleague of mine suggested (aka
> something like code code { font-size: 100%; important! }) could also be
> applied to the web site CSS while waiting for a more definite answer which
> might take some pretty unknown time close to never?

Sorry I am just getting back to this.  Below I am going to cover only
the problem with the font size of nested <code> tags, and I am going to
confirm what most people already figured out.

The basic problem was already posted by Fabien, with an image example.
The cause of the fonts being too large on Chrome is an interaction of
Chrome's default font size for different blocks, the JavaScript that is
meant to fix such mismatches, and the new nested code blocks in the PG
10 docs.

First, the JavaScript:

        https://github.com/postgres/pgweb/blob/master/media/js/monospacefix.js

There is no git history for this file except for its initial checkin in
2011, but I am pretty sure I wrote it.  What it does is to create <pre>
and <p> blocks, find the font point size, and compute a ratio.  If the
ratio is not 1, <pre>, <tt>, and <code> blocks are adjusted in size to
match <p>.  The complex part is that the JavaScript conditionally
injects CSS into the web-page to accomplish this.

The reason the PG 10 docs look fine on Linux Firefox is because the font
points sizes match so no CSS is injected.  They don't match on Chrome,
so the CSS is injected.  When the CSS hits double-embedded code blocks,
<code> <code>, it makes the font too large because it double-adjusts.

The fix, as Fabien identified, is to conditionally inject additional CSS
to be _more_ specific than the first CSS and set the font-size to a
simple '1em' so the first CSS is not called twice.  I don't think
'important!' is necessary but it would be good to test this.

Attached is a patch that can be applied to pgweb which should fix all of
this.