CODEWITHSUNDEEP
javascripthtmlcss
Jannice
Jannice

Reputation: 75

adjust font size when print

How can i adjust the font size of the text when i'm gonna print it ? i tried to put font size property but it's no used when i'm gonna click the print button , it will just go back to the default font size.

            function print1(strid)
    {

    var values = document.getElementById(strid);
    var printing =window.open("");
    printing.document.write(values.innerHTML);
    printing.document.close();
    printing.focus();
    printing.print();
    printing.close();

    }


<div id="print2">
Ex : My data table 1
</div>

<input type="button" value="Print" onclick="return print1('print2')">

Upvotes: 1

Views: 1418

Answers (1)

bitfiddler
bitfiddler

Reputation: 2115

You can use a CSS media query. In a style section add something like the following to increase the font size for the entire body. You can use any other CSS selector instead of body, so for just your div use #print2. 

<style type="text/css">
  @media print {
    body {  
      font-size: large;
    }
  }
</style>

Add that to your HTML document after the <head> tag. Of course you can set any other CSS properties in the block.

Here's a complete example:

<!doctype html>
<html>
<head>
<style type="text/css">

    body {
        font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
        font-size: 12pt;
    }

    @media print {
        body {  
          font-size: 48pt;
        }
    }

</style>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>

<body>

This is a sample document with normal size text that should print large.

</body>
</html>

Upvotes: 4

Related Questions