Ideas on limiting content to single printed page?

Question

I have 5-6 text areas that users fill out in a template (a couple of columns, basically a newsletter format). I'm needing to limit their content to one printed page, but I'm having a hard time coming up with practical solutions. The printed format (margin, font size, etc.) will be the same for all users, as it's printed from a central source.

I've had a couple of ideas, but all of them seem rather unreliable and difficult to implement:

• Determine height of content using JavaScript and estimate the number of printed pages from that. The problem with this is that browser font sizes can vary, it's only a rough estimate (pixels to inches), etc.
• Limit the number of characters. This is problematic because there are various text fields, certain characters (like M) take up more space than others (like I), and line breaks obviously count for much more.

What ideas do you all have? I appreciate your help!

Answer 1

Measuring the content etc can be very tricky. Instead, read up on how to make a print stylesheet. CSS gives you some control over what and how text gets printed.

Edit:

I've never done restricted page printing the way you intend to, but I think by using a fixed font (each character takes up exactly the same amount of space), you could perhaps be able to pull it off. So, try print a page full of fixed font characters, then see how many characters you fit in x and y. Then use JavaScript to monitor (on the fly, using for instance jQuery) the input boxes on how many rows they've used up. You would then be able to limit the users from entering too much text/linefeeds (you will need to write all this code, since I doubt there's a solution out there for this). You will also need to take into account the spacing in between the text areas on the printed page. Does this makes sense?

Answer 2

You could format your printout using a monospaced font - this means every letter/number/etc on the font is the same width (e.g. Courier). Monospaced fonts were very popular in early computer days for similar reasons - it allowed developers to have control over what was being displayed on the screen.

With a fixed width for your columns, you can now determine exactly how many characters the user can add per line. The only challenge left is accounting for linebreaks, which you can do by searching for them with Javascript.

So, given these variables:

• # of characters per line in a given element (width of your column)
• # of lines per element (height of your content box)

You can now know exactly, ahead of time, whether your content will fit on a page.

You count the number of lines per input field, and a linebreak just forces you to start counting another line regardless of how many characters are in the current line.

This should give you exactly the amount of control you need.

As for the looks, as long as you're going for that "typewritten" feel it's not that hard to style it to look interesting ;) A quick web search yields some monospaced fonts that could help:

• http://www.sitepoint.com/blogs/2010/01/09/more-monospaced-type-goodness-ten-free-fonts/
• http://new.myfonts.com/fonts/bitstream/prestige-12-pitch/

Answer 3

Reduce Line Spacing when Page Overflow.

LineHeight = 12 'Default

MaxLines = 50

-Here you Count lines

if CountLines > MaxLines then LineSpace = lineSpace * MaxLines / CountLines

Most complex option is change Font Size until Fit.