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

Hello all,

the main question: which values of font-based length (em, ex) are used
when evaluating length-based media queries that make use of them?
For example, say that I have a media query of the sort: @media
(min-width: 66em).

It is my understanding that the value of the root element font family
and size should be used, but this is not specific enough. Current
agents, as far as I can tell, use the value of _their_ default font
family and size, but what happens if a user changes the root element
font family and/or size?

For example, say that I have:

html {
font-family: 'something funny';
font-size: somefunkyvalue;
}

@media (min-width: 66em) {
  /* some rules */
}

Should the matching be done using the em of the 'something funny' font
at the somefunkyvalue size, or still the agent's default font
family/size? My opinion is that the user-selected one should be used,
in contrast to the agent's default. However, this poses an interesting
problem for situations in which @media queries themselves have rules
that specify the root element font family and size: which one should
be used in this case? I believe the appropriate way to handle this
would be to match media queries against the em value as defined
_outside_ of the media query itself.

For the record, these questions arise from practical issues that I've
had while trying to obtain some specific results. My situation is the
following: I have a main #container div that holds a number of inner
divs with dispay: inline-block; I want as many as possible of these
inner blocks to be placed side by side, with the outer container
wrapping them tightly. Since the number of inner divs that fit side by
side depends on the width of the viewport, the only way I've found to
achieve my intent with CSS only has been to set the #container div to
a fixed width that depends on the viewport width. The inner divs
themselves are sized in ems (specifically, with a max-width: 32em),
and I have a set of lines such as

@media (min-width: 66em) {
        #content {
                width: 66em;
        }
}

@media (min-width: 98em) {
        #content {
                width: 98em;
        }
}

@media (min-width: 131em) {
        #content {
                width: 131em;
        }
}

(and so on and so forth). Now the problem is that if I additionally
set a font (even just setting a font family different from the agent's
default suffices, as long as its em is different from that of the
default font), there are cases in which the 'em' calculation is
actually wrong, causing the #container to become larger than the
actual viewport, as its em size is based on the actual html font, but
the @media one is based on the default font.

Now,  I don't alter the root font fro _inside_ the media queries, so
in my case it's only important to signal how the inconsistency of em
values causes problems when the stylesheet declares root element fonts
with a different em, but I believe the specification should be _very_
clear about the behavior in all such cases.

--
Giuseppe "Oblomov" Bilotta

Received on Sunday, 19 August 2012 17:24:04 UTC