HTML Printing: DOT-MATRIX

html css printing dot-matrix

24,284

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

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

24,284

Author by

Aaron Alfonso

Updated on November 03, 2020

Comments

Aaron Alfonso over 3 years
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...
- Can O' Spam almost 9 years
  
  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
- Leroy almost 9 years
  
  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?
- Muhammad almost 9 years
  
  Print it using internet explore or other browser, I hope it will work
- Aaron Alfonso almost 9 years
  
  @Leroy I have to edit my post. I forgot something
- Aaron Alfonso almost 9 years
  
  @SamSwift Actually, I have to print the whole page since the HTML is already printable, and I have removed all the unnecessary parts.
- Can O' Spam almost 9 years
  
  @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
- Aaron Alfonso almost 9 years
  
  So size: width height ?
- Can O' Spam almost 9 years
  
  @AaronAlfonso, please see my [stackoverflow.com/questions/32142743/html-printing-dot-matr‌ix/…
- Aaron Alfonso almost 9 years
  
  check out my answer. I managed it to fix it
Aaron Alfonso almost 9 years

thanks! Gonna check it out. That dot seemed to be drunk. lol
Can O' Spam almost 9 years

@AaronAlfonso, I cannot guarantee this will/will not work, It is just a starter idea
Aaron Alfonso almost 9 years

it's printed in Landscape... :/
Can O' Spam almost 9 years

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