Introduction

Styling a Visualforce page rendered as a PDF is very different from styling a normal HTML page. PDF rendering uses a server-side engine that supports only a limited set of CSS features and ignores most client-side behavior.

Because PDFs are used for official documents such as invoices, quotations, and reports, correct styling is critical. Understanding the limitations and recommended techniques helps developers avoid layout issues and create reliable, print-ready documents.

How PDF Styling Differs from Normal Visualforce Pages

PDF styling behaves differently compared to browser-based pages.

● JavaScript is not supported
● CSS support is limited
● Page layout is fixed
● Browser-specific styles are ignored
● Responsive design does not apply

Recommended Styling Approach

To achieve consistent results, a simplified styling approach should be followed.

● Use inline CSS
● Prefer table-based layouts
● Define fixed widths and heights
● Avoid complex positioning
● Keep styles minimal

Using Inline CSS

Inline CSS is the most reliable way to style PDF pages.

Example:

<apex:page renderAs="pdf">
    <div style="font-size:14px; font-weight:bold;">
        Invoice Summary
    </div>
</apex:page>

● Ensures styles are applied correctly
● Avoids dependency on external files
● Improves layout consistency

Using Tables for Layout

Tables are strongly recommended for PDF layout control.

Example:

<table width="100%" border="1" style="border-collapse:collapse;">
    <tr>
        <td style="padding:8px;">Item</td>
        <td style="padding:8px;">Price</td>
    </tr>
</table>

● Tables provide stable alignment
● Columns remain fixed
● Content does not break unexpectedly

Font Styling and Text Formatting

Font styling should be kept simple.

● Use standard fonts
● Define font size explicitly
● Use bold for emphasis
● Avoid custom font files

Example properties commonly used:

● font-size
● font-weight
● text-align

Page Size and Orientation

Page layout can be controlled using CSS rules.

● A4 and Letter sizes are commonly used
● Orientation can be portrait or landscape
● Margins should be defined explicitly

Example Concept

@page {
    size: A4;
    margin: 20mm;
}

Controlling Margins and Spacing

Proper spacing improves readability and print quality.

● Define page margins
● Use padding inside table cells
● Avoid excessive white space
● Keep spacing consistent

Using Images in PDF Styling

Images can be included but must be handled carefully.

● Use static resources where possible
● Fix image dimensions
● Use absolute URLs if required
● Avoid high-resolution images

Header and Footer Styling

Headers and footers are commonly used in PDF documents.

● Company name and logo in header
● Page numbers in footer
● Consistent styling across pages

Headers and footers should be simple and lightweight.

Unsupported CSS Features

Some CSS features do not work in PDF rendering.

● CSS animations
● Flexbox and Grid
● Float-based layouts
● Media queries
● JavaScript-based styling

Avoid relying on these features.

Common Styling Issues

Developers often face these issues when styling PDFs:

● Misaligned content
● Broken layouts
● Missing styles
● Unexpected page breaks

These issues usually occur due to unsupported CSS.

Best Practices for Styling PDF Pages

Follow these best practices to avoid layout problems:

● Keep design simple
● Use tables for structure
● Use inline CSS only
● Test with real data
● Avoid unnecessary styling

Real-World Scenario

In real Salesforce implementations:

● Invoices use table-based layouts
● Logos are placed in headers
● Totals are aligned using fixed columns
● PDFs print consistently across devices

Conclusion

Styling PDF pages in Visualforce requires a disciplined and simplified approach. By understanding the limitations of PDF rendering and using inline CSS with table-based layouts, developers can create clean, professional, and reliable PDF documents. Following best practices ensures consistent output and avoids common styling issues in Salesforce PDF generation.

VF Page Beginner to Advance

Styling PDF Pages in VF Page