Winnovative HTML to PDF and CSS writing-mode: tb-rl

2.1k Views Asked by At

If I include the css style 'writing-mode: tb-rl', which is used for writing vertical text, in the html stream that is to be converted to pdf, I get a repeat of the first 30 pages, up to the number of pages that should have rendered, which is always counted correctly.

SO for example in a 70 page pdf, it will show 70 pages but will repeat the first 30, between 30 and 59, and then show the first 10 again for 60 onwards.

If I remove the vertical text, i.e the style writing-mode: tb-rl, everything returns to normal. The vertical text when displayed is rendered correctly on page 21.

This happens in our code that uses the pdf library, and also in the example provided by Winnovative.

Has anyone dealt with this before? I would love a fix or work around as Winnovative are slow to respond to anything. Thanks

2

There are 2 best solutions below

0
On BEST ANSWER

I never did find a direct work around to this issue.

Winnovative HTML2PDF is inconsistent in all version (tried up to 7) when the output includes vertical text in a multi-page document.

I would guess that this is something to do with page flowing/measuring calculations.

One alternative which we tested to work (but we did not use for other reasons) was to switch to evo pdf - a Winnovative sister product and their recommended solution to several internet explorer based issues apparent in the Winnovative HTML2PDF solution.

Our solution in the end was to use the existing Winnovative library to convert the pages with vertical text into non paged images (full height), and then embed the image in the PDF.

0
On

Winnovative HTML to PDF converter rendering is compatible with WebKit rendering. The supported way to rotate text is using CSS -webkit-transform property. For example, you can rotate a whole div 5 degrees clockwise using the following code:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 200px;
    height: 100px;
    background-color: yellow;
    /* Rotate div */
    -webkit-transform: rotate(5deg); 
}
</style>
</head>
<body>

<div>Hello</div>

</body>
</html>