CODEWITHSUNDEEP
htmlcssprinting
Denver Dang
Denver Dang

Reputation: 2615

Change CSS if A5 size paper is chosen when printing?

I am creating a website where there is an option to print whatever the user have created. As of now I can make the print-out look really nice (for print at least) when A4 paper is chosen, but when A5 is chosen, it gets a bit messy.

So, can I in someway use some different CSS for A4 paper and A3 paper, or is this just the name of the game when playing with prints ?

Upvotes: 1

Views: 1193

Answers (1)

DCR
DCR

Reputation: 15665

you could try the following media queries although I'm not sure how wide spread the support is:

/* style sheet for "A4" printing */
@media print and (width: 21cm) and (height: 29.7cm) {
  @page {
     margin: 3cm;
  }
 }

/* style sheet for "letter" printing */
@media print and (width: 8.5in) and (height: 11in) {
  @page {
  margin: 1in;
  }
} 


function paperSelect(){

var elems = document.body.getElementsByTagName("*");

 if (event.target.id == 'a3'){
    for(let i = 0; i < elems.length; i++){
       elems[i].classList.add("mystyle");    
    }
 }else{
    for(let i = 0; i < elems.length; i++){
       elems[i].classList.remove("mystyle");    
    } 
 }

}
li{
   display:block;
}

li.mystyle{
   display:inline;
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
A4<input id='a4'  type='radio' name='print' checked onchange='paperSelect()'>or A3
<input id='a3' type='radio' name='print' onchange='paperSelect()'>

one way you can solve this is to create your A4 css modeled after your A3 css with the needed changes and then also add a class. Then you can give the user an option of which paper they want to use and toggle the class.

Upvotes: 2

Related Questions