Re: A CSS equivalent of HTML's DOCTYPE trigger

On Tue, Jan 10, 2012 at 7:16 AM, Matthew Wilcox <elvendil@gmail.com> wrote:
> That sounds great.
>
> I'm having a problem right now with a poor font stack in CSS. There's a menu
> that with standard fonts is FAR too large and so the display breaks
> terribly. Once the right font is loaded it's ok. But I can't detect which is
> actually being used so I can't correct layout. x-height adjustments may not
> work on their own because the character widths are different for a given
> x-height, which would still result in unwanted wrapping.
>
> For reference: http://testing.pulse3k.com (please note this is a work in
> progress and will change quickly. Please note that this is also a private
> URL, please don't use this for anything other than checking font behaviour.)
>
> If you've got NoScript installed it'll block the @font-face font and you
> will see the main banner nav is terrible. Once allowed, it looks correct.

Note that being able to set font metrics per font would *not* help you
here.  Given the particular styles you're using, the problem is that
if a font is too wide it'll mess up your layout.  However, if it falls
back all the way to sans-serif, you have *no idea* what the width of
that font is, so you can't set an appropriate font-size.

There are two proper solutions to this.  One is to use some mechanism
that auto-scales the font-size to the available space.  This has been
proposed before, perhaps as a value for text-justify.  This way, wide
fonts would drop to a smaller font-size.  However, you'd have to set
explicit widths on the <a>s, which means that if the words end up with
different width proportions due to a different font, they'll end up at
slightly different font-sizes, which is unsightly.

The second is to use a better layout mechanism, so that your
white-space between the elements is more flexible.  You're currently
using inline-blocks with explicit padding set to enforce separation.
If you instead switched the <ul> to "display:table; width: 664px;"
(you use explicit widths for the body container and the header, so an
explicit width on the <ul> will work properly as well), the <li>s to
"display:table-cell; text-align: center;", and removed the padding on
the <a>s, you'd have a container that was forced to be single-line,
and which automatically spread the links out in a roughly appropriate
manner.  The spacing isn't quite exact, but it's pretty close.

Using Flexbox gets you basically the same solution, but the spacing
will spread out more evenly, and you don't need to set an explicit
width.  You just set the <ul> to "display:flexbox; flex-pack:
justify;" and the <li>s to "text-align: center; display: block;", and
again remove the padding from the <a>s.

~TJ

Received on Tuesday, 10 January 2012 16:15:48 UTC