CODEWITHSUNDEEP
htmlcssreactjsprintingmedia-queries
Jacobo
Jacobo

Reputation: 1391

CSS @media print with inches gives other sizes after printing

I'm making a project where I have to print a single div of my page. The problem is that the @page tag does not affect anything when I try to print the content. Also, I decided to simply put to the element the real world dimentions that I want to print, but the sizes of the printed content does not match the specified ones.

My css code is:

@media print {
    @page {
        width: 3.5in;
        height: 2in;
    }
    body * {
        visibility: hidden;
        border: 1px solid black;
    }
    #ticket, #ticket * {
        visibility: visible;
    }
    #ticket {
        position: absolute;
        left: 0;
        top: 0;
        background-color: #ff0000;
        border: 1px solid yellowgreen;
        width: 3.5in;
        height: 2in;
    }
}

I've tried things like @page { size: A3 } and a lot of stuff but It does not work. Basically I need to be able to print something with real world sizes, and when I click on print, the print configuration handle the stylesheet correctly, I don't know if that is possible or if there is a simple way to achieve this.

Thanks in advance

Upvotes: 2

Views: 2767

Answers (2)

Mark C
Mark C

Reputation: 41

I am not pretty sure what is your pointing in your post but I have a feeling that this might help.

Create a CSS stylesheet or simply add style tag in your HTML header.

    <style>
        @media print {
           @page {
                  size: 5.5in 8.5in ;
                  size: landscape;
                 }
             }
     </style>

By this, paper size and layout selection will be disabled in your window print. Hope this helps.

Upvotes: 1

mujtaba siddiqui
mujtaba siddiqui

Reputation: 31

THE @PAGE RULE The @page rule lets you specify various aspects of a page box. For example, you will want to specify the dimensions of your pages. The rule below specifies a default page size of 5.5 by 8.5 inches. If you intend to print a book, perhaps by a print-on-demand service, then finding out the sizes you can use is important.

@page { size: 5.5in 8.5in;} //try to apply height width like this

Upvotes: 2

Related Questions