Reputation: 147
I'm creating a PDF with a large table on it. In this table, there's a cell that can be filled in with HTML. If it is, the HTML must be interpreted as HTML and not be shown as regular text. However, when I do so, the layout/style gets scrambled and some pictures don't get shown. (In the example I give, the bullet dashes are replaced by 9's.)
I program in C# and am using iText7 to create the PDF.
In my project, I have the following HTML Code that I want to show. The reason the HTML code looks like this is because it's RTF converted to HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="generator" content="SautinSoft.RtfToHtml.dll">
<title>Untitled document</title>
<style type="text/css">
.st1{font-family:Arial;font-size:12pt;color:#000000;}
.list-marker1 li:before {
content: "\F02D\9";
width: 30px;
font-family: Symbol;
font-size: 11pt;
}
.st2{font-family:Calibri;font-size:11pt;color:#000000;}
</style>
</head>
<body>
<div>
<p style="margin:0pt 0pt 0pt 0pt;"><span class="st1"> </span></p>
<ul style="list-style-type:none; list-style-image:none; list-style- position:outside; margin-left:0px; padding-left:0px; text-indent:0px; margin-top:0px; margin-bottom:0px;" class="list-marker1">
<li value="1" style="margin-left:36pt;text-indent:-18pt;"><span class="st2">Dishwasher soap container consumption is adjusted</span></li></ul>
<ul style="list-style-type:none; list-style-image:none; list-style-position:outside; margin-left:0px; padding-left:0px; text-indent:0px; margin-top:0px; margin-bottom:0px;" class="list-marker1">
<li value="2" style="margin-left:36pt;text-indent:-18pt;"><span class="st2">Power UP ballast water treatmant unit, adjusted what necessary. GPS signal error still pending</span></li></ul>
<ul style="list-style-type:none; list-style-image:none; list-style-position:outside; margin-left:0px; padding-left:0px; text-indent:0px; margin-top:0px; margin-bottom:0px;" class="list-marker1">
<li value="3" style="margin-left:36pt;text-indent:-18pt;"><span class="st2">Installed new insect killer in galley</span></li></ul>
<ul style="list-style-type:none; list-style-image:none; list-style-position:outside; margin-left:0px; padding-left:0px; text-indent:0px; margin-top:0px; margin-bottom:0px;" class="list-marker1">
<li value="4" style="margin-left:36pt;text-indent:-18pt;"><span class="st2">Adjust securing and highest ladder position after its tilted to low trunnion position</span></li></ul>
<ul style="list-style-type:none; list-style-image:none; list-style-position:outside; margin-left:0px; padding-left:0px; text-indent:0px; margin-top:0px; margin-bottom:0px;" class="list-marker1">
<li value="5" style="margin-left:36pt;text-indent:-18pt;"><span class="st2">SW spooling device test is done and no isses </span></li></ul>
<ul style="list-style-type:none; list-style-image:none; list-style-position:outside; margin-left:0px; padding-left:0px; text-indent:0px; margin-top:0px; margin-bottom:0px;" class="list-marker1">
<li value="6" style="margin-left:36pt;text-indent:-18pt;"><span class="st2">Sewage unit dosage pump; make permanent installation + drawing update</span></li></ul>
<ul style="list-style-type:none; list-style-image:none; list-style-position:outside; margin-left:0px; padding-left:0px; text-indent:0px; margin-top:0px; margin-bottom:0px;" class="list-marker1">
<li value="7" style="margin-left:36pt;text-indent:-18pt;"><span class="st2">Intervention on DN203: installed tracker box on ICT request</span></li></ul>
<ul style="list-style-type:none; list-style-image:none; list-style-position:outside; margin-left:0px; padding-left:0px; text-indent:0px; margin-top:0px; margin-bottom:0px;" class="list-marker1">
<li value="8" style="margin-left:36pt;text-indent:-18pt;"><span class="st2">Installed tracker box on ICT request </span></li></ul>
<ul style="list-style-type:none; list-style-image:none; list-style-position:outside; margin-left:0px; padding-left:0px; text-indent:0px; margin-top:0px; margin-bottom:0px;" class="list-marker1">
<li value="9" style="margin-left:36pt;text-indent:-18pt;"><span class="st2">Regular greasing emotors according ship specific grease list</span></li></ul>
<ul style="list-style-type:none; list-style-image:none; list-style-position:outside; margin-left:0px; padding-left:0px; text-indent:0px; margin-top:0px; margin-bottom:0px;" class="list-marker1">
<li value="10" style="margin-left:36pt;text-indent:-18pt;"><span class="st2">Regular maintenance of portable tools</span></li></ul>
<ul style="list-style-type:none; list-style-image:none; list-style-position:outside; margin-left:0px; padding-left:0px; text-indent:0px; margin-top:0px; margin-bottom:0px;" class="list-marker1">
<li value="11" style="margin-left:36pt;text-indent:-18pt;"><span class="st2">Intervention on DN203 due to problem with SB M/E</span></li></ul>
<p style="margin:0pt 0pt 0pt 0pt;"><span class="st2"> </span></p>
<p style="margin:0pt 0pt 0pt 0pt;"><span class="st1"> </span></p>
</div>
</body>
</html>
When I save this file as a HTML file and open it in a browser, you get the following result (which is correct): Correct result (website)
However, when I add it to the PDF cell, I get the following result: Bad result (PDF)
As you can see, the dashes used for bulleting have turned into 9's.
The code I use to add the HTML code to the PDF File is the following:
private void AddCellToTable(table table, string HTMLContent) {
Cell newCell = new Cell();
foreach (var element in HtmlConverter.ConvertToElements(HTMLContent))
{
var test = (IBlockElement)element;
newCell.Add(test);
}
table.AddCell(newCell);
}
This code is similar to the code suggested by https://itextpdf.com/en/resources/books/itext-7-converting-html-pdf-pdfhtml/chapter-1-hello-html-pdf (They use java instead of C#).
I would like to show bullets as dashes, instead of these 9's. Any help or suggestions would be very much appreciated.
Thank you in advance.
Upvotes: 3
Views: 1649
Reputation: 2458
Firstly, the problem isn't related to layout (table/cell/etc processing) - it's only about fonts and how iText processes them.
Secondly, the problem is that PDF's standard Symbol font, which is used by iText, differs from the one used by browsers.
Thirdly, iText doesn't processes "\F02D\9"
(and "\9" part in particular) correctly.
What can you do to improve the resultant pdf? Don't use the standard PDF's Symbol font - use your own Symbol font instead.
How to do it?
Let me introduce you the FontProvider
class.
FontProvider
is responsible to handle the fonts which may be used while processing an html file. Its instance could be passed as a parameter ofConverterProperties
, otherwise it'd be created by iText. By default iText adds toFontProvider
all standard pdf fonts (FontProvider#addStandardPdfFonts
) and some free sans fonts (DefaultFontProvider#SHIPPED_FONT_NAMES
).
You want to use your own Symbol font: that means that you should prevent iText from considering standard Symbol font during convertion. To do so, please create a DefaultFontProvider
instance with the first constructor's argument passed as false
.
(!) In 99% of the cases you want some other standard fonts to be considerd during convertion. So please add them manually as follows:
provider.addFont(StandardFonts.TIMES_ROMAN);
// some other fonts to be added
Now add your own Symbol
font to this FontProvider
instance the same way as I did it for the Times above:
provider.addFont("C:\\Windows\\Fonts\\symbol.ttf", PdfEncodings.IDENTITY_H);
It's important to use IDENTITY_H
there, because in the Symbol font "-" has "F02D" as its unicode value.
After all these changes, I've managed to get the following file:
Now comes the second problem: iText doesn't process "\9" by default correctly. As for this one, I don't know any straight-forward solution. Probably, removing it from your html is the best one.
Upvotes: 3