Forum How do I...?

Access and modify height of rendered elements in JavaScript

dalvinio
The documents I create contain div elements that are rendered next to each other and must have the same height. It is not possible to give the div elements the same height in the HTML and CSS source because the contents of one of the two div elements are generated.

I am using JavaScript to read the height of the 'leading' div element and adjust the height of the other div element have the same value. Lazy as I am, I am using jQuery (version 1.10.2) as there are other manipulations I need to make to the DOM.
Although the JavaScript code works as expected when viewing the HTML content in a web browser it fails with Prince 9.0r2 and 9.0r3 with the following error message.
TypeError: value is not an object.

I have traced the error back to JavaScript statements that try to access the height property of the div elements mentioned above, for example when using something like:
$('div#mydiv').css('height');
$('div#mydiv').height();


In posts here, here and here there is mention of adding support for JavaScript access to the rendered document. I believe the lack thereof is what is causing my JavaScript code to fail.

The Roadmap mentions some interesting things that might help here:
  • Support the getComputedStyle method in the JavaScript DOM. (ref)
    Done 2013-11-10
  • Expose positions of formatted elements to the JavaScript DOM.

The first item leads me to believe that JavaScript access to the rendered document has been added and I'm just not approaching this correctly. However, the second item leads me to believe that my presumption is incorrect.

Should something like this be possible by now or is this still on the roadmap?
If it should be possible then I'm likely doing something wrong and any advice is greatly appreciated.
If it's still on the roadmap then I'd like to ask if this could get more attention for one of the next releases?
mikeday
This is a difficult issue, as Prince is a batch formatter and at the moment runs scripts before doing layout, so the final size and position of rendered elements is not available.

We have implemented the getComputedStyle function (but not released it yet), however this literally returns the computed style, while browsers actually return the used style for certain properties like width and height. Prince can't do this yet.

We are also experimenting with a box tracking API that allows you to access the size and position of formatted elements after layout is complete, however at this point it is too late to change the PDF, and you need to capture the information and generate a new document that makes use of it, in a two-pass procedure.

So we are getting there, gradually, but it is a big architectural change and it will be a while before it works seamlessly out of the box from jQuery.