Re: [media-queries] chicken-egg problem with font-based lengths

On Mon, Aug 20, 2012 at 10:26 AM, Simon Sapin <simon.sapin@kozea.fr> wrote:
> Le 20/08/2012 04:00, Giuseppe Bilotta a écrit :
>
>> While this surely greatly simplifies the implementation, it does
>> become bothersome in my case, because it means I cannot_reliably_
>> size the #content container when selecting a font different from the
>> user's default one. I guess I'll have to think about some different
>> approach to achieve a wrapping container.
>
> When you use the em unit (eg. for the width of a box) there are two
> possibilities:
>
> 1. All ancestors with a value for font-family use relative units (em, ex,
> %). The value of 1em is ultimately based on the user’s configured default,
> most commonly 16px.
> 2. At least one ancestors sets a font-family with an absolute unit (px,
> ...). 1em has a known absolute value.
>
> It’s easiest to make your stylesheet use 1 or 2 consistently across the
> whole document. With 1 you can use em in media queries and get consistent
> results. With 2, use px or another absolute unit in media queries, and you
> should also get consistent results.

I already use approach (2) throught the document, with a fixed font
size only set in the html {} element, and everything else based on
relative unites (em, ex, %). I try as hard as possible to avoid using
absolute units.

Your mail, combined with the previous reply from Tab Atkins led me to
go re-read the CSS documentation about the em units. I think part of
my confusion raises from my habit of thinking of 'em' in the
typographical sense, so that even maintaining the font _size_ but
changing the font _family_ can change the em width (for example, Times
New Roman 12pt has a different typographical em size from, say,
Computer Modern 12pt; yes, I have a strong TeX legacy).
However, in CSS the em unit _is_ the font size, so a 12pt font size
will set 1em to 12pt (or 16px), regardless of the font face used.

So, if I understand your suggestion correctly, I can set the font size
of the html element explicitly, provided that I then use fixed widths
in the media queries, manually computed from the fixed font size that
I select (e.g. if I set a font size of 12pt, then I should replace a
media query for 66em with a media query for 1056px, and the media
query will trigger correctly regardless of the actual font family that
gets selected.

Thank you very much for the reply, I'm going to look into this and
adjust my stylesheet accordingly.

-- 
Giuseppe "Oblomov" Bilotta

Received on Monday, 20 August 2012 09:33:08 UTC