CSS adding additional spacing between letters for part of a table header in a Netsuite advanced PDF Template - css

Question

I have a html table with table headings in a Netsuite advanced PDF Template. For some reason one of headings has the word with extra spacing in between the letters, so instead of printing
Delivery
Address
for the header it prints
D e l i v e r y
Address
The Address part does not get the extra spaces.
The code for the header is:
<table class="itemtable" style="width: 100%;"><!-- start items --><#list record.item as item><#if item_index==0>
<thead>
<tr>
<th colspan="3">Delivery Address</th>
I have looked at css properties like word-break, letter-spacing, etc.; but I can't find anything that seem appropriate to fix this.
Anybody know why this is happening? This does not happen in an html page with the same code, so not sure why this is happening in Netsuite.
The css is:
table {
font-size: 9pt;
table-layout: fixed;
}
th {
font-weight: bold;
font-size: 8pt;
vertical-align: middle;
padding: 5px 6px 3px;
background-color: #e3e3e3;
color: #333333;
}
td {
padding: 4px 6px;
}
td p { align:left }
b {
font-weight: bold;
color: #333333;
}
table.header td {
padding: 0;
font-size: 10pt;
}
table.footer td {
padding: 0;
font-size: 8pt;
}
table.itemtable th {
padding-bottom: 10px;
padding-top: 10px;
}
table.body td {
padding-top: 2px;
}
table.total {
page-break-inside: avoid;
}
tr.totalrow {
background-color: #e3e3e3;
line-height: 200%;
}
td.totalboxtop {
font-size: 12pt;
background-color: #e3e3e3;
}
td.addressheader {
font-size: 8pt;
padding-top: 6px;
padding-bottom: 2px;
}
td.address {
padding-top: 0;
}
td.totalboxmid {
font-size: 28pt;
padding-top: 20px;
background-color: #e3e3e3;
}
td.totalboxbot {
background-color: #e3e3e3;
font-weight: bold;
}
span.title {
font-size: 28pt;
}
span.number {
font-size: 16pt;
}
span.itemname {
font-weight: bold;
line-height: 150%;
}
hr {
width: 100%;
color: #d3d3d3;
background-color: #d3d3d3;
height: 1px;
}
.synb {
font-weight: bold;
}
.synh7 {
font-size: 10pt;
line-height: 120%;
}
.synh9 {
font-size: 8pt;
line-height: 120%;
}
tr.synbordertop td {
border-top: 1pt solid black;
}
span.syntitle {
font-size: 20pt;
}
span.synnumber {
font-size: 13pt;
}

Answer 1

EDIT:
Netsuite uses BFO with these PDFs. See the following regarding this specific issue: https://bfo.com/support/faq/#31
How can I stop the letters in my table from being stretched out?
By default the text in tables is justified. In order to prevent this
you need to set align="left". Remember that each element has a
<p> implicitly placed around the data, so the best way to achieve
this is to use a style sheet and add:
td p { align:left }
which will cause all the table data elements to align to the left.
I've had this same issue before. It seems to be an issue exclusively with Netsuite's rendering of the PDF.
Here's the code I implemented to fix it:
Netsuite/HTML
<th><p style="align: center;">Color</p></th>
CSS:
td {
text-align: left;
padding: 2px;
}
th {
padding: 2px;
}
Here's how it looks without the center align:
Here's how it looks with the center:
I'm sure it's not the most ideal situation, but this is the only way I was able to get it to work, I'm sure I tried many of the same things you did.
I used the information in this link for further reference:
"This article is relevant if you are working with NetSuite Advanced
PDF Templates, and you are encountering an unusual HTML table
cell alignment effect in the generated PDF."
http://blog.prolecto.com/2016/03/18/netsuite-advanced-pdf-templates-how-to-fix-table-cell-alignment-justification-anomaly/
Hope this helps, it's at least the solution I implemented whenever I ran into a similar issue.