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...

Meenen

I had this exact same issue, it turns out (despite what people say), it doesn't seem to be possible. The best thing to do is the @media print{ /*hide what you don't need/clutter*/ } and add this where it is needed as a "print.css" file – Mcfarlane

a width of 8.5 inches and a height of 5.5 inches is landscape. are you sure you don't have those values reversed? – Chlorate

Print it using internet explore or other browser, I hope it will work – Leap

@Chlorate I have to edit my post. I forgot something – Meenen

@SamSwift Actually, I have to print the whole page since the HTML is already printable, and I have removed all the unnecessary parts. – Meenen

@AaronAlfonso, try switching your 8.5in with 5.5in, as Leroy said - a width of 8.5 inches and a height of 5.5 inches is landscape – Mcfarlane

So size: width height ? – Meenen

@AaronAlfonso, please see my [https://mcmap.net/q/1345307/-html-printing-dot-matrix/… – Mcfarlane

check out my answer. I managed it to fix it – Meenen

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.

Meenen

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? */;
    }
}

Mcfarlane

thanks! Gonna check it out. That dot seemed to be drunk. lol – Meenen

@AaronAlfonso, I cannot guarantee this will/will not work, It is just a starter idea – Mcfarlane

it's printed in Landscape... :/ – Meenen

Didn't think that it would, but it was worth a jolly good go! – Mcfarlane

Answer 3

This Problem may come based on the Browser setup or Paper size setup. Check your browser font setting and paper size in printing properties.

Direct