Search code examples
html-to-pdfpdf-reactor

how to apply `text-indent`,`line-height` properties of textarea to resulting pdf document?

the pdfreactor server does not apply text-indent and line-height property of text area. How to fixed?

<textarea style="height: 79px;width: 767px; text-indent: 63px; background-size: 100% 16px; line-height: 16px; left: 33px;top: 593px;font-size: 11px;font-family: Arial;background-image: none;background-color: white;color: black;"> This is a comment This is a comment This is a comment This is a comment This is a comment This is a comment This is a commentThis is a commentThis is a comment This is a comment This is a comment This is a commentThis is a commentThis is a comment This is a commentThis is a comment This is a comment This is a comment This is a commentThis is a commentThis is a comment This is a comment This is a comment This is a comment This is a comment This is a comment This is a comment This is a comment This is a comment This is a comment This is a comment This is a comment This is a comment This is a comment This is a commentThis is a comment This is a comment This is a comment This is a comment 123456789123 </textarea>

the following images are the show how it renders in browser and pdf(after converted using pdfreactor)

1.0 enter image description here

above image(1.0) show how it shown in browser.

2.0 enter image description here

the above (2.0) image shows how it renders after converted to PDF using pdfreactor

those images clearly shows the text-indent and line-height property of text area not applyed when converting the above html snippet. Any solution to render those properties of textarea in pdfreactor?

Solution

  • This is a known issue with text areas. However, if interactivity of the form element in the PDF is not required, you could re-style the text areas as a normal HTML elements. This could be done like that:

    textarea {
    -ro-replacedelement: none;
    display: block;
    border: 1px solid black;
}

    Now the styles "line-height" and "text-indent" will work correctly.