HTML Printing: DOT-MATRIX

Question

I'm printing an HTML receipt via javascript:window.print()

Printing it to an Inkjet Printer makes everything all good. However on DOT-MATRIX Printer, Epson LX-300+II everything is different. It doesn't fit right, the texts are not aligned. I tried saving it to PDF and printing the PDF from Adobe Reader, the orientation seemed to be all good.

I already set the page size and tried resizing the fonts, but still I can't print it correctly. The Receipt's size, by the way, is 8.5 x 5.5in.

I tried formulating the CSS, but failed to get the correct result. This is the CSS:

@media print {
  html, body {
    width: 8.5in;
    height: 5.5in;
    display: block;
    font-family: "Calibri";
    font-size: auto;
  }

  @page
   {
    size: 5.5in 8.5in;
  }

}

Also whenever I tried adding @page { size: 8.5in 5.5in.; size: Portrait; } the printed paper is on landscape.

How can I set things right?

EDIT: I tried

@page {
    size: 5.5in 8.5in;
}

but it's printing the page on Landscape...

Answer 1

Solved the Problem!

In my Printer(LX-300-II), I defined a Paper Size which width is 8.5in and 5.5in in height. There is also a change in CSS Code:

 @media print {
    html, body {
        display: block; 
        font-family: "Calibri";
        margin: 0;
    }

    @page {
      size: 21.59cm 13.97cm;
    }

    .logo {
      width: 30%;
    }

}

Since I have images in my Receipt, I made some width adjustments to fit it just right.

I hope this can help those people who is encountering this same problem.

Answer 2

You are using the size and height the wrong way around in @media print, try this:

@media print {
    html, body {
        width: 5.5in; /* was 8.5in */
        height: 8.5in; /* was 5.5in */
        display: block;
        font-family: "Calibri";
        /*font-size: auto; NOT A VALID PROPERTY */
    }

    @page {
        size: 5.5in 8.5in /* . Random dot? */;
    }
}