I have created a Visualforce page with a controller, to effectively print an EmailMessage record. If I just include the HTMLBody, the spacing is perfect but as soon as I tried to add some properties to the top of the page (i.e To Address, From Address, Subject) it creates a page gap. Weirdly the VF page shows it correct, it's only when printing where issues start to arise with spacing. From doing some testing, I have found that it must be a problem with some of the HTMLBody inputs from some emails as those generated through SFDC work fine, however emails from outlook seem to display different. Any suggestions?

<apex:page controller="EmailMessageController">
        /* Style adjustments for print media */
        @media print {
            body * {
                visibility: hidden; /* Hide everything in the body when printing... */
            #printableArea, #printableArea * {
                visibility: visible; /* ...except for the #printableArea element */
            #printButton, #buttonContainer {
                display: none; /* Hide print button and its container when printing */
            #printableArea {
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;

            /* @page directive for print layout */
            @page {
                size: auto;
                margin: 5mm;  /* Margin on every side of the page */

        /* General style for the page */
        #buttonContainer {
            text-align: left; /* Align the print button to the left */
            margin-bottom: 10px; /* Spacing between button and content */
        #printButton {
            padding: 5px 10px; /* Sizing for print button */

    <!-- Add script to disable right-click, intercept Ctrl+P, and automatically invoke print dialog -->
        document.addEventListener("DOMContentLoaded", function() {
            if (!{!ISNULL(email)}) { // Checks if email is not null
                window.print(); // Automatically invoke print dialog

        document.addEventListener("contextmenu", function(e){
            e.preventDefault(); // Disable right-click menu on the entire document
            alert("Right-click is disabled. Please use the 'Print' button in the upper left corner.");
        }, false);

        document.addEventListener("keydown", function(e){
            // Intercept Ctrl+P and Command+P (for MacOS)
            if ((e.ctrlKey || e.metaKey) && e.keyCode == 80) {
                alert("Keyboard Shortcut for printing is disabled. Please use the 'Print' button in the upper left corner.");
        }, false);

    <!-- Container for the print button -->
    <div id="buttonContainer">
        <button id="printButton" onclick="window.print();">Print</button>

    <!-- Printable area -->
    <div id="printableArea">
        <!-- Email details -->
            <strong>From:</strong> {!email.FromAddress}<br/>
            <strong>Sent Date:</strong> {!email.MessageDate}<br/>
            <strong>To:</strong> {!email.ToAddress}<br/>
            <strong>CC:</strong> {!email.CcAddress}<br/>
            <strong>Subject:</strong> {!email.Subject}<br/><br/>
        <!-- HTMLBody of the EmailMessage -->
        <apex:outputText escape="false" value="{!email.HTMLBody}" rendered="{!email != null}"/>
    <!-- The rest of your page goes here -->
    <apex:outputText value="No Email Message found or you did not provide an emailMessageId." rendered="{!email == null}"/>


You must log in to answer this question.

Browse other questions tagged .