Forum How do I...?

Layout from Box API to Html Dom

maxi
Hello,

We use Prince in work and I was exploring if it was possible to grab the layout information from the box tracking api and use it to just render the "document" to fixed elements into the dom.

I have been able to use the Java Wrapper to pipe data messages that contain the BoxInfo and I used kotlin to serialize each box to a class and now am using them as part of the below method to render each element to a fixed positioned html node:

    fun positionBox(box: PrinceBox): BoxPosition {
        val x = box.contentBox?.x ?: box.x
        val y = box.contentBox?.y ?: box.y
        val w = box.contentBox?.w ?: box.w
        val h = box.contentBox?.h ?: box.h

        val cssY = documentHeight - y

        return BoxPosition(
          x = x,
          y = cssY,
          w = w,
          h = h
        )
    }

*I chose the content boxes to position the elements because I thought this was the correct way to go so I don't have to bother accounting for the margin boxes etc, I got the content boxes from the nifty script - https://www.princexml.com/doc/cookbook/#how-and-where-is-my-box

example node

<p class="classname1 classname2" 
  style="position: fixed; 
  left: 190.4812938299705pt; 
  top: 37.82343749999998pt; 
  width: 94.92656250000002pt; 
  height: 0.0pt;"
>
  42 Enterprise Road
</p>


I thought the above approach would account for the positioning but it is off by a large degree and I am wondering what I am missing in order to position the elements correctly.

We have a process whereby we continuously render a document in development and I wanted to expose the exact layout so the frontend could do animations and transition states when the text changes - I am aware the SVG is missing in the attachment, but its fixable I am more concerned I can't get the positions correct.


  1. HTML-Positioning.png40.5 kB
    HTML Positions
  2. PDF-Positions.png82.9 kB
    PDF Positions

Edited by maxi

markbrown
Aside from the zero height, are you getting wrong numbers from the Box Tracking API or script? We can investigate that.

You might consider adding style attributes to the DOM in Prince then writing out the `innerHTML`, rather than trying to reconstruct a DOM from the box tree.