Hi,

I have an application where it's necessary to determine the actual layout height of a table not the height specified in the css. For example, the content of a row may cause layout to increase the height of that row pushing the overall table to be larger. I need to compare the actual layout height of the table with that specified on the css. Other forum posts seem to indicated that this capability is coming, presumably via getComputedStyle(). Is this available yet?

Thanks.

You can check the actual layout height of elements using the JavaScript box tracking API, however this is only available after document conversion has finished, so any changes will require converting the document again with a second pass.

Thanks. How do I use this API to get the actual height of the table. From another forum post I found code like this:

var tables = document.getElementsByTagName("table");
    for (var i = 0; i < tables.length; ++i)
    {
        var bs = tables[i].getPrinceBoxes();
       console.log('table box page  = ' + bs[0].pageNum);
    }

When I call 'JSON.stringify(bs[0]),' I get nothing and 'bs[0].height' is undefined. Is there any documentation regarding the box tracking API?

Thanks again

The box tracking API is only available after layout has finished, so it must be called from the oncomplete event:

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

function checkPages() {
    // this will be called by the oncomplete event
}

Yep, I realize layout must be finished. So I guess the answer to documentation for the box tracking API is "no".

N/m.. what able to enumerate the properties on the box object. Thanks for your help.

I'm trying to find any documentation for the box tracking API. Can someone give me a hint?

It is not publicly documented yet except here on the forum. You can access the boxes using the code given in this thread, and they have basic properties giving their page number, position, and size.

In case it helps someone else:

function toCoordinates(box) {
	var obj = {
		pageNum: box.pageNum,
		x: box.x,
		y: box.y,
		w: box.w,
		h: box.h
		// element: box.element,
		// children: box.children
	};
	return obj;
}

function getCoordinates(items) {
	var coordinates = [];
	for (var i = 0; i < items.length; ++i) {

		var item = items[i];
		var boxes = item.getPrinceBoxes();

		for (var j = 0; j < boxes.length; ++j) {
			var box = boxes[j];
			var coors = toCoordinates(box);
			coordinates.push(coors);
		}
	}
	return coordinates;
}

Prince.trackBoxes = true;
Prince.addEventListener('complete', function () {
	var items = document.getElementsByTagName('p');
	var coordinates = getCoordinates(items);

	// return box coordinates to callee process via `stderr`
	Log.data('coordinates', JSON.stringify(coordinates));
}, false);