So I've got this, for example:

            <div class="example-contents">
              <div class="informaltable">
                <table class="interlinear-gloss">
                  <colgroup></colgroup>
                  <tr class="jbo">
                    <td>mi</td>
                    <td>nelci</td>
                    <td>loi</td>
                    <td>glare</td>
                    <td>cidja</td>
                    <td>.ije</td>
                    <td>do</td>
                    <td>nelci</td>
                    <td>to'ebo</td>
                    <td>ri</td>
                    <td>.ije</td>
                    <td>la</td>
                    <td>djein.</td>
                    <td>nelci</td>
                    <td>no'ebo</td>
                    <td>ra</td>
                  </tr>
                  <tr class="gloss">
                    <td>I</td>
                    <td>like</td>
                    <td>part-of-the-mass-of</td>
                    <td>hot-type-of</td>
                    <td>food.</td>
                    <td>And</td>
                    <td>you</td>
                    <td>like</td>
                    <td>the-opposite-of</td>
                    <td>the-last-mentioned.</td>
                    <td>And</td>
                    <td>Jane</td>
                    <td>likes</td>
                    <td>the-neutral-value-of</td>
                    <td>something-mentioned.</td>
                  </tr>
                  <tr class="para">
                    <td colspan="12321">
                      <p class="natlang">I like hot food, and you like cold food, and Jane likes lukewarm food.</p>
                    </td>
                  </tr>
                </table>
              </div>
            </div>

which is obviously way too big. And indeed, the output badly overflows:

http://snag.gy/FirUF.jpg

Obviously, we need to fix the input, and that's fine. I mean, unless someone can tell us how to use CSS to wrap table cells (easy) and insert cells with ellipses on the wrapped lines (!?), but I expect that's not feasible. That's how we fix this: we make a new tr with the second half of the td elements and the first td just contains ellipses.

The problem is that we have a lot of overflows like this. Hundreds, probably.

What we'd like is a way to easily *find* all of them.

I was hoping text-overflow would help us, but it isn't triggered by these at all.

Does anyone know of a tool, whether Prince itself or something else, that will help us find places where overflow has occurred?

Note that setting "overflow: hidden;" in the body{...} does work, but it doesn't help us find them obviously.

Is there actually any CSS overflow occurring here, eg. if the cells had a border, is the content ending up outside the border? Or by overflow do you mean all the words breaking?

body { border: 1px solid red; } most definitely shows things outside the border.

Ah, so the table is being squashed as narrow as it can be by breaking all the words, but the end result is still too wide to fit on the page. We don't have a way to detect this at the moment. The text-overflow property won't help, as the entire table is overflowing, and the text within the table is not overflowing, technically.

At the moment the only automated way of checking for situations like this is the experimental box tracking JavaScript API. Here is how you could do it:

Prince.trackBoxes = true;
Prince.addEventListener("complete", check, false);

function check()
{
    var tables = document.getElementsByTagName("table");

    for (var i = 0; i < tables.length; ++i)
    {
        var bs = tables[i].getPrinceBoxes();

        for (var j = 0; j < bs.length; ++j)
        {
            if (bs[j].w > 4*72)
            {
                console.log("table is too wide on page "+bs[j].pageNum);
            }
        }
    }
}

This code is going through all the table elements, getting the list of boxes generated by each element and checking the width of those boxes. If the width is greater than 4 inches (4*72 points) then it complains and gives the page number. It could return the ID of the table instead, or some other information.

I apologize for not trying to debug this myself, but I literally don't know javascript *at all*.

Here's how I'm running it:

prince -vvv --script=margin.js /home/rlpowell/lojban/dag-cll/coverage/build/prince_pdf/cll_processed_xhtml_prince.html /tmp/prince.pdf

and the output includes:

prince: margin.js:10: error: TypeError: value is not an object

Help?

Sorry, you will need to be running a recent alpha build to use the box tracking API.

Got it! Super helpful, thank you!