W3C home > Mailing lists > Public > www-style@w3.org > January 2012

Re: A CSS equivalent of HTML's DOCTYPE trigger

From: Jon Rimmer <jon.rimmer@gmail.com>
Date: Tue, 10 Jan 2012 17:19:35 +0000
Message-ID: <CA+ZDCiCbAhkiEYxU07_RzZAG8WQFvnptZcNpZ+VQtXrUEgcTUA@mail.gmail.com>
To: "www-style@w3.org Style" <www-style@w3.org>
On 10 January 2012 16:14, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> 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

I played around with the example, and even removing padding completely
on the list items, I couldn't seem to get them all on one line with
the default font. The font sizes are just too different.

It wouldn't be a panacea, but what about extending font-size-adjust to
allow scaling by x-width, something like

a {
    font-size-adjust: 0.4 x-width;
Received on Tuesday, 10 January 2012 17:20:10 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:09 UTC