0

I have 1 html, that should be printed as Bill on A4 and as Cash Receipt on A6.

Is there any way, to change the font or look over css, if the user is choosing a different paper size A4 or A6 from browser Print Preview ?

something like @media screen and (max-width: 600px)

Note : Similar desired example but for screen size : https://t.ly/W5zp

(but. howto get the selected papersize from Print Preview)

Hansjörg Hofer
  • 409
  • 1
  • 5
  • 18
  • How many millimeters/centimeters are each paper size? Are mm/cm legal CSS units? (clue: [MDN: length](https://developer.mozilla.org/en-US/docs/Web/CSS/length)) – Rene van der Lende May 24 '23 at 13:00
  • maybe, there is no solution, if this old post is still true !?https://stackoverflow.com/questions/4236711/how-to-find-out-the-dimensionality-of-print-paper-in-javascript – Hansjörg Hofer May 25 '23 at 06:34

1 Answers1

-1

Program to print the Student Registration Form using the print() method

In this program, we create a student registration form and then print it using window,print() method.

function printFun()  
{  
window.print();  
}  
  
.formstyle  
{  
width: 400px;  
height: 400px;  
margin: 20px auto;  
border: 3px solid skyblue;  
border-radius: 5px;  
padding: 20px;  
text-align: center;  
background-color: lightgreen;  
}  
h1 {  
    text-align: center;  
    padding: 23px;  
    background-color: skyblue;  
    color: white;  
    }  
      
      
*{  
margin: 0;  
padding: 0;  
}  
<body bgcolor = "lightgrey">  
<h1> Program to print the Student Registration Form using JavaScript print() method </h1>  
  
  
<div class = "formstyle"  
  
<form name = "form1">  
<fieldset>  
<br>  
<legend> Student Registration Form: </legend>  
<label> First name </label>  
<input type = "text" name = "fname" size = "30" /> <br>  
<br>  
  
<label> Last name </label>  
<input type = "text" name = "lname" size = "30" /> <br>  
<br>  
  
<label> Father name </label>  
<input type = "text" name = "f_name" size = "30" /> <br>  
<br>  
  
<label> Mother name </label>  
<input type = "text" name = "m_name" size = "30" /> <br>  
<br>  
  
  
<label> Gender:  
</label>  
<input type = "radio" name = "gender" /> Male   
<input type = "radio" name = "gender" /> Female <br>  
<br>  
  
  
<label>  
Address  
</label>  
<textarea cols = "30" rows = "3" value = "address">  
</textarea>  
<br>  
<br>  
  
<label>  
Email  
</label>  
<input type = "email" id = "email" name = "email" size ="30" /> </br>  
<br>  
  
<label>  
Password:  
</label>  
<input type = "password" id = "pass" name = "pwd" size = "30"> <br>  
<br>  
<input type = "reset"  value = "Reset"/>  
<input style = "background-color:skyblue;" width = 30px height = 20px type = "button" value = "Print" onclick = "printFun()"/>  
<br> <br>  
</fieldset>  
<br>  
</form>  
</div>  
  
  
</body>

for more details you can follow this link

https://www.javatpoint.com/javascript-print-method

Mohmmad Amir
  • 72
  • 6
  • i am aware of window.print() , but the problem is the different paper size :( – Hansjörg Hofer May 25 '23 at 06:43
  • i am so sorry for my mistake. actually i don't understand what you want to do that's why i say about the ```window.print()``` function but now i understand what you want to do. here is the solution of your problem.. you can use in your css file ```@page{size: 5in 5in;}``` this selector for change the print style. for more details you can follow the link below.. https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/ you can read the article.. – Mohmmad Amir May 25 '23 at 16:55
  • You have seen @media rule in previous chapters. This rule allows you to specify different style for different media. So, you can define different rules for screen and a printer. `````` https://www.tutorialspoint.com/css/css_printing.htm# for more details – Mohmmad Amir May 25 '23 at 17:03