- From: Jon Rimmer <jon.rimmer@gmail.com>
- Date: Tue, 10 Jan 2012 17:19:35 +0000
- 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