Here is an example of how to detect text overflow using the new JavaScript box tracking API.

The script runs after layout has finished and checks specified divs to see if any text boxes fall outside the parent box and logs their IDs.

1. overflow.html‎ 1.6 kB

Interesting. Would it be possible to change the styling of the parent box - i.e. give it a red border?

It is possible, but takes a bit of work. Currently the script runs after layout has finished, so changing the style won't affect the PDF, which has already been generated.

You can output some CSS from the JavaScript and apply that to the document again as a two-pass solution, which takes a bit of help from whichever program is calling Prince.

In the future we hope to make this process easier, perhaps by providing a way to reconvert the document directly from JavaScript (or ultimately supporting reflow!)

Thanks, Mike. I will try something else, I think. Instead of changing the styling, I will make a server side call, store this reference and display in the user interface somehow.

We tried above html with javascript but it not work. The getPrinceBoxes length return 1, so that didn't print.

Please advice

The script may require some alterations as boxes can be nested now, check the children property of the first box.

Here's a demo with Mike's script slightly rewritten to use box.children - now it works again. Hope this helps someone

Announcement: repos for tests/utils

1. 3603.htm‎ 1.6 kB ‎
   Updated demo

Note that the for loop over box.children should start from 0.

You are quite right. The first child box might of course also overflow

Announcement: repos for tests/utils

1. 3603.htm‎ 1.6 kB