I am feeding HTML code stored in a string variable into iText7's pdfHTML plugin; how can I get my CSS to work correctly with it?
Here's the details: I have an HTML file that serves as a template for the document I want to create in my .NET application. At creation time, the entire HTML file is read into a string variable using a StreamReader, then various placeholders within the template are replaced with specific values using the Replace method. These values come from a database query. Once the replacements are done, the finished string object is sent to the HtmlConverter.ConvertToPdf method to create the file.
I'm using ConverterProperites.SetBaseUri to set the location of my template file, so that iText7 will be able to follow the links in my HTML to images and linked CSS files, like so:
string destination = System.IO.Path.Combine(HttpContext.Current.Server.MapPath("~/pdf_repo/", "myFile.pdf");
ConverterProperties properties = new ConverterProperties();
properties.SetBaseUri(HttpContext.Current.Server.MapPath("~/templates/"));
HtmlConverter.ConvertToPdf(htmlString, new FileStream(destination, FileMode.Create), properties);
However, the resulting PDF only shows the CSS being selectively applied. Text that should be shown in bold is shown in bold, and the images appear, but the font face is in serif when it should be sans-serif (preferably Verdana), and text alignments are all wrong. Table cells in my template are styled to have a vertical-align of middle, but instead they align at the top.
My CSS is correct; the template displays as it should in a browser. Why isn't it working here?
Edit: Here are some examples to show what I'm talking about. First, a sample of my HTML template when viewed in a browser. This is how the resulting PDF is supposed to look, with the placeholders, contained in {}, replaced by actual text.
But when iText7 renders the template as a PDF, it only gets some things right:
"Requested By", "Date" and "Territory" are displaying in bold as they should be, and the logo is being added, but the logo size and font-face are wrong, and the alignment of logo and header text is completely off.
Here's the HTML behind this section of the form, along with the header code so you can see how the CSS is being linked:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../styles/styles.css" rel="stylesheet" />
</head>
<body>
<div id="container">
<div class="page">
<table>
<tr>
<td>
<h2>New Account Application</h2>
</td>
<td>
<img src="../img/hc_logo.png" style="float: right;" />
</td>
</tr>
</table>
<br />
<table class="boldOdd borderBottom">
<tr>
<td>
Requested by:
</td>
<td>
{requesterName}
</td>
<td>
Date:
</td>
<td>
{requestDate}
</td>
</tr>
<tr>
<td>
Territory:
</td>
<td>
{territoryNumber}
</td>
<td></td>
<td></td>
</tr>
</table>
The CSS meanwhile looks like this. Again, this is just a sample:
body {
font-family: sans-serif;
}
#container {
max-width: 810px;
width: 100%;
margin: auto;
padding: 0;
}
EDIT 2: I was previously using iText.pdfHTML v3.0. After rolling back to v2.1 I was able to at least get the text on my PDF to appear in sans-serif font, though my CSS font-family declaration is still being ignored. The misalignment of the image on the example I posted earlier -- and it turned out it was the image that was misaligned, not the text -- turned out to be my fault. I had a "float: right" on the img that was causing the issue.
That just leaves the question of why my font-family CSS rule is being ignored.
