[thelist] Scaling text
Benjamin Hawkes-Lewis
bhawkeslewis at googlemail.com
Fri Dec 12 07:21:52 CST 2008
Martyn wrote:
> I am converting my website from fixed width 800px, it was all going well
> until I edited the Nav bar, I have formatted all the text in ems.
>
> I obviously I don't want the Nav bar to wrap down with smaller viewports
> and I have used Nowrap, but this just goes off screen.
Is it really true that you would want tiny text instead of wrapping
navigation on a very narrow viewport?
> Is there anyway to scale text to the viewport size as with images. I
> have created all the divs as 100% etc.
Basically no - not with pure CSS 2.1 anyhow.
You can't declare a font height that's a fixed proportion of the
viewport width. Font heights are essentially always expressed either
relative to some other (base) font height ( %, em, ex, or, more roughly,
keywords ) or relative to whatever the application is treating as a
pixel ( px ).
As the viewport is zoomed (in a simple zoom function), text and boxes
will zoom by the same proportion, no matter how their measurements are
specified.
As the base font size is changed, font heights specified in %, em, ex,
keywords, and (except in IE) px will change proportionally. Boxes sized
in em or ex will also change proportionally, but not boxes sized in % or px.
As the viewport is widened, %, em, ex, keywords, and px font heights
will all remain precisely the same, while boxes sized in % that are
ultimately relative to the viewport will expand. (The % length of boxes
is relative to containers and has no relationship to font height %.)
The picture can be complicated by UA correctives like minimum font sizes
(CSS 2.1 suggests 9px for starters) and Opera's fit-to-width
functionality. Note that for narrower viewports, minimum font size might
well be a factor for your navigation.
The CSS3 draft includes proposals for a calc() function and a vw length
unit that represents the viewport width:
http://www.w3.org/TR/css3-values/#lengths
http://www.w3.org/TR/css3-values/#calc
That would allow you to suggest a font height shrink as viewport width
increases - up to whatever the user's specified minimum font size is.
--
Benjamin Hawkes-Lewis
More information about the thelist
mailing list