[SOLVED] <textarea> tag is not rendered properly using CSS with IronPDF

<textarea> tag is not rendered properly using CSS with IronPDF

I am attempting to convert an HTML form to a fillable PDF with IronPDF (IronPdf 2024.8.1.3) in Python (3.12.6). The HTML renders appropriately in Chrome. Tags other than the <textarea> tag render appropriately in the PDF (verifying use of the CSS). IronPDF is not using the defined textarea style to override the default rendering with Helvetica and auto-sizing of the font when the amount of text exceeds the textarea size. I have specified a font-size (12) and set the overflow-y to scroll in the style. In the PDF, the font auto-sizing produces very small text and no scrolling. The PDF can be edited manually in Adobe Acrobat Pro to change the font size from Auto to a fixed size. This works, but it is not a practical solution.

This exercise has been attempted with the style defined internally within the HTML using the <style> tag. I have also tried an inline style within the <textarea> tag. The final attempts, as reflected in the code below, used a link to an external CSS file within the HTML, with and without setting the RenderingOptions.CustomCssUrl to point to the CSS file.

All of the attempted options work in Chrome but do not work for the rendered PDF. I do have an open incident with Iron Software.

HTML in Chrome

Rendered PDF in Chrome

Questions:

Is there something that I have missed that would allow the CSS style to override the default settings for the <textarea> tag?
Is there a post-processing option that would allow me to iterate over all <textarea> (Tx) fields in the rendered PDF and manually set the font size not to auto size?

# render HTML as PDF with IronPDF
import ironpdf
ironpdf.License.LicenseKey = "license key goes here"
html = """<!DOCTYPE html>
<html lang="en">
<head>
<title>Large Text Area Test</title>
<link rel="stylesheet" type="text/css" href="/Users/username/styles/test2.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<form name="testform">
<br><input type="checkbox" name="mycheckbox">
<label for="mycheckbox">Check the box.</label><br>
<br>Enter some text:
<br><textarea id="largetextarea" name="largetextarea" rows="20" cols="80">
Here is some text between textarea tags.
</textarea>
<br>
</form>
</body>
</hmtl>
"""
renderer = ironpdf.ChromePdfRenderer()
renderer.RenderingOptions.CreatePdfFormsFromHtml = True
renderer.RenderingOptions.CustomCssUrl = '/Users/username/styles/test2.css'
pdf = renderer.RenderHtmlAsPdf(html)
pdf.SaveAs('largetextareacss.pdf')

/* 
test2.css - Style sheet settings for PDF creation from HTML
*/
h1 {
  color: blue;
  font-family: cambria;
  font-size: 16pt;
  margin-top: 2em;
}
p {
  color: red;
  font-family: cambria;
  font-size: 12pt;
  margin-left: 1em;
}
body {
  color: black;
  font-family: cambria;
  font-size: 12pt;
}
textarea {
  color: blue;
  font-family: cambria;
  font-size: 12pt;
  overflow-y: scroll;
}

Solution

PyMuPDF provides a means to change the <textarea> default autosize behavior and set the font size to 12. This is a post-processing step that operates on the IronPDF-rendered PDF file. In the code below, the filename is FieldTest.pdf. The code opens the original PDF and iterates over all pages and all widgets (form fields) in each page before saving the updated PDF file.

# set textarea font to 12 pt instead of autosize
# Use PyMuPDF (fitz)
import fitz

indir = './'
outdir = './'
fname = 'FieldTest.pdf'

pdf = fitz.open(indir + fname)
print(fname)
for page in pdf:
    widgets = page.widgets()
    for widget in widgets:
        if widget.field_type_string == 'Text':
            widget.text_fontsize=12.0
            widget.update()
        
pdf.save(outdir + fname.split('.')[0] + '_muformat.pdf')
pdf.close()