Dimensions of isolated element?

[wscullen]

I know this has no easy solution, but this is related to the issue about calculating heights of elements. This is not an easy problem to solve, but I was wondering if there would be an easier version of this problem to solve, given a known width of a single element and text content, could we calculate the height of that element in isolation, given a certain styling and font size. IE, could we render that element as react-pdf would, and get the final height of that rendered element? Since there is nothing depending on that value, it doesn't introduce the recursive problem with changing layouts based on derived heights. Instead we render the elements in isolation and then use those values in overall calculations later for the main document, for when to introduce page breaks, how much space we have on a page, etc. If we know the elements heights we can do more custom layout work.

Right now I do something similar just with the DOM, I create an element with the content and width and get the height of it. This gives a good approximation of the height of the content, but there is an error of +- 10 pt per element, due mostly to line break differences between HTML/CSS compared to react-pdf.

Given this, I'd like to have a similar function in react-pdf where I can pass the text content, the styling, and a fixed width, and have react-pdf render it and return the derived height of the element. Failing that, I'd like to know the algorithm used for line breaking for text content used by react-pdf to see if there is a close equivalent I could implement for the HTML/CSS height estimation I'm doing.

Let me know if I'm off base on this, thanks!