1

I have a bit of a strange question. My apologies if this has already been asked and answered...I think part of my problem is that I don't really know what exactly I should be searching for since I don't even remotely know what the right approach is!

I have a website that has HTML pages containing product reviews. Each review has about 15 standard text fields, such as Strengths, Weaknesses, Summary, etc. Each of these text fields is generally approximately the same number of words from one review to the next, but they do vary in length by +/- 20% or so. Right now, when I print them, some of them take one page and some of them take two pages.

I'm trying to come up with a decent way to print each of these product reviews such that each one always fits on one sheet of paper. I'm OK with making some assumptions, such as assuming a certain paper size and orientation. What I'm imagining is that each of my review's text fields (Strengths, for example) will have a certain "box" on the printed page that it can occupy and I'll have some code that programmatically resizes the font or adjusts the vertical line spacing (or perhaps just truncates the text and adds "..." at the end) until it fits into the "box".

I'm just looking for some pointers on what the most sensible approaches might be for this sort of thing. For example, here are some of the random thoughts that come to my mind:

1) Is there anything that can be done with CSS in a print style sheet to do this kind of dynamic resizing and/or truncating automatically?

2) I'm up for having a button on each page that says "Print" that when clicked generates a new page with completely different markup that is optimized for what I'm trying to do. All of the data in these pages is stored in a database, so this would be an acceptable solution. If I do end up opting for this option, would it be most sensible to try to lay this out using HTML tables, divs, or something else?

4) I'm wondering if I can do the programmatic resizing using JavaScript. Is there some kind of function or library that is used for this sort of thing (calculating how much space a block of text needs)? If so, is this a fairly reliable way of achieving what I'm shooting for?

5) Is it better to do what I'm trying to do on the server side somehow? I'm using PHP, of that helps.

6) If all else fails, is there a way to programmatically generate PDF pages server side that I can layout per my one-page requirement? Is there a good PHP library out there for that sort of thing?

Thanks in advance for any suggestions and pointers! As you can tell, I'm pretty lost on what path I should start down!

user3208212
  • 29
  • 2
  • Check out: http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container If you had a div that was set to a fixed width/height set in inches you could estimate a page size. – Jonathan Kuhn Dec 03 '14 at 18:31

2 Answers2

1

Without using CSS3 you could:

1) Store the original font sizes in variables using javascript

2) Get the Document Height through Javascript

var body = document.body,
html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                   html.clientHeight, html.scrollHeight, html.offsetHeight );

3) Check to make sure your height is small enough to be printed on one page

4) If not start loop where you:

a) decrease each font-size by 1

b) Check height again

c) if good, then do window.print()

d) If still too much height continue in loop

5) Set all your font-sizes back to the original values.

Hope this helps.

:) David

David P
  • 2,027
  • 3
  • 15
  • 27
0

css3 intruduces the vw and vh units which should suit your needs.

Downside is support is ie9+ only

andrew
  • 9,313
  • 7
  • 30
  • 61