Squeeze me
The text lines above the image (and this very text) are not contained in images having percent values for width and / or height. Yet the text adapts to the window's width. Rezise your window and watch it happen (don't forget to make your window as 'narrow' as possible).
THIS is the extremely lightweight (main) script that does it (you can put it in the head or the body). You need another script for any given element (div, span, a-element etc.) containing text that you want to be scalable. For that element, put the following anywhere on your page (in this example, there's just one element having id="my_element"):
<script>
window.onresize = onload = function()
{/*first argument: the id of the element containing scalable text;
second argument: max font-size;
third argument (optional): min font-size; only use this if you always want your text to be bigger than approx. 11px for some element (in which case you put, for instance: 13).
If the values for max font-size and/or min font-size are too high / too low, the script will correct this. (Without correction, the text might be bigger or smaller than desired with the biggest/smallest windows. Setting the third argument to something lower than 11 will have no effect, see above). The numeric values represent pixels (approximately).*/
font_size('my_element', 160, 13);
}
</script>
Since we reference my_element, we should
have it somewhere on our page. It could look like this span element:
<span id="my_element" style="position: relative; text-align: center; background: darkred; color: white; ">Hello there</span>
If we want to add another scalable text block (a div having id="other_block", for instance), like this one:
<div id="other_block" style="position: relative; text-align: center; background: navy; color: white; ">Hello there again</div>
we should put something like this:
<script>
window.onresize = onload = function()
{
font_size('my_element', 160, 13);
font_size('other_block', 120);
}
</script>
etc. Note that not only divs, spans, a-elements etc. can be made scalable, but also the entire body section. For instance, if we would have <body id="the_body">, we could scale it by doing something like:
<script>
window.onresize = onload = function()
{
font_size('my_element', 160, 13);
font_size('other_block', 120);
font_size('the_body', 17);
}
</script>
IMPORTANT:
To prevent strange things from happening with some or all window-sizes, we should always use percentages for horizontal positioning and sizing (and left/right-padding and left/right-margin). So left:4%, not left:70px, width:4%, not width:70px etc.
FINAL:
I know there is a good jquery plugin that does approximately the same thing as the script used on this page. But that script is not made for scaling normal body text, is not as lightweight as this one and needs more time to load.
© Arie Molendijk, http://mesdomaines.nu
