Question

i have a blue container that is the canvas for my text. what i’m trying to do is resize the font so that the entire text fills as much of the blue container as it can.

i have access to the height of the text content, which is both paragraphs and the line in between them. also, i have the height of the blue container, the height of each line, the number of lines and the number of words.

i tried using the height of the line, based on a default font size, with the amount of lines to determine how much i need to increase the font so it would fill the blue container. however, doing so also changes the amount of lines, ruining my chances for success while making my head swim.

what formula should i use so the font size fills the blue container?

here are my numbers:

Content height:  342.46
Content/Container Width:  400
Font Size:  11
Line Height:  11 * 1.2 //120% of the font size gives the line height
Number of Lines:  24
Number of Words:  2055

also, it’s possible for the text content to be long and to extend well past the container, so ideally a formula (or suggestions) for both an increase or reduction of the font size is what i’m trying to achieve.

alt text http://www.freeimagehosting.net/uploads/c1a4f77c5f.jpg

Answer 1

In TeX typesetting system this problem is usually solved using a simple bisection algorithm (presented f.e. by Knuth in The TeXbook), here in a pseudo-python:

def findsize:
    maxsize=100pt
    minsize=8pt
    epsilon=0.5pt
    while (maxsize-minsize>epsilon):
        triedsize=(maxsize+minsize)/2
        setfontsize(triedsize)
        if boxisoverfull():
            maxsize=triedsize
        else:
            minsize=triedsize
    return minsize

Note that you probably can’t do this without experimenting with every size, as every browser might typeset your text in different way, making different interword, interletter spacing; by having a minimum font size set by user (I’ve seen lots of webpages displaying improperly because of this one), by using ligatures (probably not now, but in future it is possible).

The problem here is that the webbrowser will probably redraw every try, so this might be slow. You can overcome this by making the box disappear (f.e. display:none) for the time of computation. I remember I did that once and it worked even in IE6.