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

On Sat, Apr 8, 2017 at 3:52 AM, Bruce Momjian <bruce(at)momjian(dot)us> wrote:

> 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.
>

There's more history in the pgweb-old repository. You can see that this
incarnation of the file actually came from Thom Brown:

https://git.postgresql.org/gitweb/?p=pgweb-old.git;a=commitdiff;h=c67090da83079be8f268564adb63e3f0d3379f29

Your was probably the version even before that one.

> 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.
>
>
Is there any chance we can find a way to do this witha ctual CSS selectors
and not use javascript? I realize there might not be, but have we explored
the option properly on the way the site layout looks now and with
reasonably modern browsers?

--
Magnus Hagander
Me: https://www.hagander.net/ <http://www.hagander.net/>
Work: https://www.redpill-linpro.com/ <http://www.redpill-linpro.com/>