Issue:

We are printing HTML in a pdf document that might contain horizontally larger HTML table elements.
The requirement is to fit such tables into the document (A4: portrait) no matter its width.
The expectation would be, even if the table is wider it has to be scaled down or shrink to fit on the page without scaling down the other contents on the page and the scaled-down table should not get pushed to a new page.


So, in short;
‘Scale-down/shrink HTML tables to fit horizontally, on an A4 Page’

There is no mechanism to automatically scale down a single table, you can apply shrink-to-fit to an entire page but not a single element.

You might be able to use a two-pass JavaScript process to measure the overflow in the first pass and apply suitable CSS to shrink the table in the second pass.

thanks for the replay.

Can u pls post some links to try the "two-pass JavaScript process " you mentioned here ?

Here's a description:

https://www.princexml.com/doc/cookbook/#the-multi-pass-solution

In the example provided, the layout process is run two times; the ToC and index are generated after the first pass.

Hi Mike,

I have applied the multi-pass logic to resolve the same. Here, we are measuring the overflowing tables in the first pass and re-applying a "transform: scale(<scale-factor>)" value during the second pass. It is scaling down the tables that are overflowing. But we have a problem here.

When we have vertically large tables, that span across multiple pages, Created PDF leaves some empty spaces under each table.

Why does it behave like this? what is the solution here to remove the empty white spaces?

Html file: prince.html
PDF before multi-pass solution: before-multi-pass.pdf
PDF after multi-pass solution: after-multi-pass-fix.pdf

styles that we applied to the table during the 2nd pass as follows,

    transform: scale(0.494565);
    transform-origin: left top;

1. after-multi-pass-fix.pdf‎ 136.6 kB
2. before-multi-pass.pdf‎ 60.8 kB
3. prince.html‎ 6.8 kB

Edited 20 Jul 2023 by karthik_krishna

Could you post a minimized example with embedded CSS code?

attached is the html with embedded CSS.

1. prince.html‎ 8.7 kB

It seems that the whitespace you are seeing, both inside and outside the table cells, are due to setting heights explictly. This creates an overconstrained layout. I attach a pdf where all 'height' declarations have been removed and the table algorithm does the layout. The output looks more sensible to me. If you need extra space within a table cell, using borders or padding may be better than setting heights.

I also understand this is the second pass, so there may be reasons for using height that I don't immediately see.

1. noheight.html‎ 8.7 kB
2. noheight.pdf‎ 35.0 kB

Edited 28 Jul 2023 by howcome

Our tables are sometimes 2000px in width and contain data that cannot fit into an A4 sheet. in this case, we need to scale down the tables without affecting the aspect ratio (so that it looks similar to what it looks like on a larger plain).

removing the height or width doesn't work for us. The data attached here is a dummy table by removing all confidential content from us, that's why there are many white spaces.

Note that 'transform' does not affect layout, as you can see in this example.

1. transform.html‎ 0.2 kB

is there any other solution to the problem - ?

Does the latest version of Prince support CSS Zoom API -?

https://developer.mozilla.org/en-US/docs/Web/CSS/zoom

Prince does not support the 'zoom' property, no. (Generally, browsers don't, either)

However, you can achieve the same effect (on a document level) by setting the page size. E.g., if your regular page size is:

@page { size: a4 }

You can emulate zoom out by setting:

@page { size: a3 }

Edited 27 Aug 2023 by howcome

this seems not a valid use case for us.

Meanwhile, I was trying a different solution.

while reading element.clientHeight it gives 'no value'.
But while reading

window.getComputedStyle (element, null ).getPropertyValue('height');

it gives a result.

question is, why does prince does't support reading ClientHeight But window.getComputedStyle - ?

Edited 30 Aug 2023 by karthik_krishna

Prince does not support the clientWidth/Height and related properties; you can use the box tracking API for this which is available after document conversion has finished.

Do u have any plans to support Zoom API ?

No, you can use CSS transform: scale() for this.