Re: Large fixed-width text

From: Petr Jelinek <pjmodos(at)pjmodos(dot)net>
To: Bruce Momjian <bruce(at)momjian(dot)us>
Cc: PostgreSQL www <pgsql-www(at)postgresql(dot)org>
Subject: Re: Large fixed-width text
Date: 2009-09-27 09:24:14
Message-ID: 4ABF2F3E.3080203@pjmodos.net
Views: Raw Message | Whole Thread | Download mbox | Resend email
Thread:
Lists: pgsql-www

Bruce Momjian napsal(a):
> Petr Jelinek wrote:
>
>> Bruce Momjian wrote:
>>
>>> When reading our web-based server documentation in Ubuntu Firefox, I
>>> have always seen overly-large fixed-width text. In looking at our CSS
>>> files, specifically text.css, I see:
>>>
>>> #txtArchives pre {
>>> font-size:150%;
>>> }
>>> #txtArchives tt {
>>> font-size:150%;
>>> }
>>>
>>> This certainly looks wrong, and explains what I am seeing. Does anyone
>>> know why it is there?
>>>
>>> The actual code that is causing a problem in my browser is in
>>> geckofixes.css:
>>>
>>> #docContainer tt, #docContainer pre, #docContainer code {
>>> font-size:1.4em;
>>> }
>>>
>>>
>> I am not on www team but I bet it's because with 1em (100%) the text is
>> tiny in Firefox under Windows in those elements.
>>
>
> So why is that? Is this a known bug in Firefox? Is it documented? Can
> we apply the fix only to broken Firefox versions? The lack of comments
> in the CSS file makes this issue unclear to me.
>

It's known behavior, not a bug.
By default FF on Windows (not sure about other OSes, but on Jaunty my FF
does it too), Safari, Chrome all choose 13px font size for monospace and
16px for everything else (so maybe you changed default font size for
monospaced fonts in your FF?). And since we have 76% (docs) and 69%
(primary web) body font sizes, they get inherited and monospace text is
too small (76% of those default 13px) and obvious fix is to make it
larger and that's what we do. There are other ways to fix this. One is
specifying exact font family and not monospace generic font family, but
that changes font for people who have different default monospace font
from what we choose and also since we are not using the monospace
generic font family (see why below), people who don't have any of the
fonts we specify the won't have monospaced text at all in those elements.
There is also Firefox specific "fix" for this (very ugly):

font-family : monospace, "";

And remove all those font-size hacks. One more way to fix it in Firefox
(3.0+) is to use font-size-adjust : 0.58 for pre, tt, code. Other
browsers don't support this propery.
So the real problem is Safari (Webkit). It switches to smaller font size
once you specify monospace generic font family anywhere in the
font-family property and it does not support font-size-adjust.
Opera does it differently, it just uses internal default stylesheet to
make font-size smaller (0.81em IIRC) for those elements that are
monospaced by default (pre, tt, ...) so setting font-size : 1em is
enough there. IE seems to do something similar since it behaves the
same, so no problem in either of those two.

As you can see every browser does something different and finding
universal solution is not easy.

Anyway those #txtArchives pre and #txtArchives tt do not affect
documentation but they indeed seem to be plain wrong, they are actually
only used by Opera (and maybe Chrome , I don't have that browser) and
the text looks huge there. In FF and Safari they are overwritten by

#pgContainer code, #pgContainer pre, #pgContainer tt {
font-size: 1.2em;
}

in geckofixes.css (yes it loads for Safari too on my machine and it's a
good thing) and in IE they're overwritten by

* html #txtArchives pre { font-size: 100%; }

in iefixes.css.

--
Regards
Petr Jelinek (PJMODOS)

In response to

Responses

Browse pgsql-www by date

  From Date Subject
Next Message Robert Haas 2009-09-27 13:35:43 Re: email obscuring
Previous Message Dave Page 2009-09-27 08:29:14 Re: Large fixed-width text