[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