kTekkie kTekkie - 2 months ago 17
CSS Question

Change printing text size in CSS

I have a HTML file which contains a log report. I want to print that report in a smaller text size. I tried with below css style, but text size was not changed. How to solve this.

<HTML>
<HEAD>
<TITLE>Events</TITLE>

<STYLE type="text/css">
table, th, td
{
border: 1px solid #cccccc;
border-collapse:collapse;
padding: 5px;
}
</STYLE>

<STYLE type="text/css" media="screen">
#eventText {
display: block; overflow-y: auto; height: 600px;
width: auto; left: 0px; top: 50px; font-size: 0.25em;
}
#eventButtons { display: block; }
</STYLE>

<STYLE type="text/css" media="print">
body { margin: 0; background-image: none; font-size: 0.25em }
#eventText {
display: block;
overflow-y: visible;
height: auto;
margin:0;
font-family: geneva, arial, helvetica, sans-serif;
font-size: xx-small;
}
#eventButtons { display: none; }
</STYLE>
</HEAD>

<BODY>
<div id="eventButtons">
<INPUT TYPE="BUTTON" VALUE="View" onclick="javascript:loadValues();">
<INPUT TYPE="BUTTON" VALUE="Print" onclick="javascript:window.print();">
</div>
<div id="eventText"> </div>
</BODY>
</HTML>

Answer

Your exact solution is to use @media rule in CSS

You can set the CSS to change the styles of elements when the web page tries to print. The following CSS will set the background color to white in all the DIV elements when printing.

@media print{    
    div{
        background-color: #FFFFFF;
    }
}

You can easily set the fonts of the elements of your choice this way although you can do much more with it.

You can find more about @media rules here.