What I’m trying to do is insert hard-coded line breaks where ever the text wraps inside a div or td element (or any other element, I suppose). The point is to ensure that the text always wraps in the same place in print as it does on screen, which in turn will ensure that the container element is always the same height in print as it is on screen. It needs to work on non-monospaced type, so counting characters isn’t really an option.
I’ve done lots of googling on this and the only thing I’ve found that even acknowledges that wrapped text has multiple lines is the getClientRect() method. This method returns a collection of rectangles-- one for each line of text in the container element. This can be used to determine how many lines there are, and the dimensions of each, but I don’t think that really helps me, unfortunately.
So, does anyone know if what I’m trying to do is even possible?
You could wrap every single character in a <span> and then loop through these <span>s, checking the offsetTop value for each. If the value is higher than the previous one, you know you’re starting a new line. Then you know to add the line break before this character. Construct a new string, adding the characters and line breaks as you go along.
At the end you simply replace the content with the new string, using innerHTML or textContent (or createTextNode and appendChild if you want).
There are probably other ways but this one seems like the least hassle.
Thanks Raffles! After all the time I’ve spent on this, you came up with that idea way too fast!
I’m surprised that there isn’t a more efficient way to do this, but at this point I’m willing to go with whatever works.
The simplest way is to use a fixed width. If the width of the area is the same for both screen and print then the amount of content that will fit across it will be the same in both places. You need a fixed width for print anyway since A4 paper is not a variable width (and is slightly narrower than letter and so is the one you need to fit width wise for printing).
Alas, this is not the case. At least not in my experience. Try it yourself-- paste a few paragraphs of lorem ipsum into a fixed-width div and check the print preview. I think you’ll find that the text does not always wrap in the exact same place as it does in normal screen output. Maybe this is due to rounding errors in the translation from pixels into dots, or slight size differences between screen fonts and printer fonts, but whatever the cause, it means that a container element can potentially change height when printed unless the on-screen line breaks are enforced somehow.
In my testing, the print version of a container element always has slightly more space than the screen version, which means that if its height does change due to text wrapping, it will get shorter rather than taller. This may not be a big issue most of the time, but in my current project, the height of the container elements needs to be predictable.
After doing some additional testing, I should probably make an amendment to my last post to avoid misleading anyone. Apparently, the transition from screen to print does not always result in more text fitting on a line. I’ve found that by varying the font-family and/or unit of measure, I can create situations in which just the opposite occurs: the text wraps earlier rather than later, potentially causing the height of the container element to grow rather than shrink.