On Sat, Apr 8, 2017 at 3:52 AM, Bruce Momjian <br...@momjian.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/>
