/* Copyright (C) 2001 John Weir www.smokinggun.com This code is free for use. If possible include the copyright. */ function resizeBodyText() { // get window height //if (window.innerHeight) nH = window.innerHeight; //else nH = document.getElementById("bodyNode").offsetHeight; // get window width if (window.innerWidth) nW = window.innerWidth; else nW = document.getElementById("bodyNode").offsetWidth; // mod will be the value used to define the type size // use the greater of the dimensions //mod = (nW > nH) ? nW : nH; mod = nW; // 40 seems to work well, but adjust this value for yourself. mod = Math.round(mod/40); obj = document.getElementById("pagecon"); //limit how small the typeface can get if (mod < 9) mod = 9; obj.style.fontSize = mod+"px"; obj.style.lineHeight = (mod*1.3)+"px"; window.status = mod; windowOnload(); } windowOnload = window.onload; if (document.getElementById != null) { window.onload = resizeBodyText; window.onresize = resizeBodyText; }
Resize your browser window to adjust the text size.
Info  |  Source
Info

Updated: Now only the width is being used to detect height. The code for detecting height and using it is still in the code, but commented out.

This is a little example of using a fluid text size, rather than a fixed or static size. This is done by merely adjusting the type size of the document body, and using percentage based font sizes for the orange text.

There has been much talk of "liquid layout" for web design. Liquid implies a lack of structure, so I don't really like that word. But, I do like the potential it could bring to design. Perhaps calling it dynamic or scalable layout is better. I like the notion of zooming, with items retaining their porportions and relations to one another.

sg_swapNode source
	
	put source in here


Lorem ipsum dolor sit amet
consectetur adipscing elit, sed diam nonumy eiusmod tempor indidunt up labore et dolore magnaaliquam erat volupat.

Ut enim ad minimim veniami quis nostrud exercitation ullamcorpor suscipit laboris nisi ut aliquip ex ea commodo consequat. Duis autem vel eum irure dolor in reprehenderit in voluptate velit esse molestaie son consequat, vel illum dolore eu fugiat nulla pariatur.

Nam liber a tempor cum soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend. Temporem autem quinsud et aur office debit aut tum rerum necessit atib saepe eveniet ut er repudiand sint et molestia non aste recusand. Itaque earund rerum hic tenetury sapiente delectus au aut prefer endis dolorib asperiore repellat. Hanc ego cum tene sentntiam, quid est cur verear ne ad eam non possing accomodare nost ros quos tu paulo ante cum memorite it tum etia ergat.
HTML; echo $public_footer; ?>