Understanding the Issue:
When creating NetSuite PDFs, you may encounter a common problem where the text within table cells becomes stretched or uneven. This occurs due to the default justification behavior of NetSuite’s BFO (BFO Framework) rendering engine.
The Solution: Overriding Default Justification
To prevent text stretching and ensure a clean, consistent appearance, we need to override the default justification of table cell content. Here’s how:
Utilize the <p> Tag: NetSuite implicitly wraps table cell content in a <p> tag. This provides a convenient way to modify the text alignment.
Apply Inline CSS: Add the following inline CSS to the <p> tag within your table data cells (<td>):
HTML
<td p style=”text-align: left;”>
This code sets the text alignment within the <p> tag to left, effectively preventing the text from stretching and ensuring a more readable layout.
Additional Considerations:
Centering Headers: If you want to center the text in your table headers (<th>), use the following CSS:
CSS
th {
text-align: center;
padding: 2px;
}
Customization: You can further customize the appearance of your table cells by adjusting the padding and font-size properties within the CSS.
Example:
HTML
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td><p style=”text-align: left;”>Cell content 1</p></td>
<td><p style=”text-align: left;”>Cell content 2</p></td>
</tr>
</table>
By following these steps, you can effectively address the issue of stretched text in NetSuite PDFs and create tables with a more visually appealing and professional appearance.