Question 249364 in Html Question posted in
Some basic documentation can be found here.

HTML page print does not fit inside Letter paper when printed

I’m dealing with a large project and part of it is printing HTML pages.

However, we are dealing with the issue of pages do not fit within the Letter size paper.

Please see the following simple code: As you see the dimensions of the Letter paper are clearly specified. The page shows correctly on the web browser and even on the Print Preview page, it shows correctly. However, after printing on a US Letter size paper the word "Test" is cut off a bit on top and left. Also, the black border does not show on print. Why does this happen?

See below:

<style>
/* Reset default margin and padding on body */

@page {
    margin: 0;
}

body {
    margin: 0;
    padding: 0;
}

/* Create a full-screen div */
.full-screen-div {
    width: 8.5in; /* 100% of the viewport width */
    height: 11in; /* 100% of the viewport height */
    Border: solid 5px
    }

.TR{
position:absolute;
margin-top:0;
margin-right:0;
font-size:24px;
}

</style>
<!DOCTYPE html>
<html lang="en">
<head>

    
    <title>Full-Screen Div</title>
</head>
<body>
    <div class="full-screen-div">
        <!-- Content goes here -->
        <span class='TR'>Test</span>
    </div>
</body>
</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I put my research here for the future viewer.

    I did a huge amount of research for 2 days looking all over the internet to find a solution.

    The bottom line is when trying to print an HTML page, the print function in the browser is not a reliable way to preserve the layout.

    I just saved the page as a PDF file on my computer and then the page was printed exactly as it should have.

    Another option is to buy 3rd party HTML to PDF software that integrates with the coding language(I am using a C# app) and then dynamically create your pdf.


  2. 0

    That span is absolutely positioned, it has the default position top: 0 and left: 0, but there is no parent/ancestor div that has position: relative, so body is by default regarded as the relative parent, NOT its direct parent full-screen-div.

    I suggest to add position: relative to the full-screen-div to make that one act as the position anchor for the absoute position of .TR and that way have more control over its placement.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search