EMs

A reader writes:

Can you add option to print in larger print?

I print puzzles, and need larger squares for possible choices, mostly 8’s and 9’s.

As it turns out, this was pretty easy to do. If you visit my puzzle page, and use your browser’s “Print” feature, the grids will now print out about 35% larger than they used to … this is about the biggest I can make them while still fitting the result onto an 8 1/2″ wide page.

CSS

I already had a media-specific STYLE tag for printing:

<STYLE type="text/css" media="print">
	div.field {
		position:		static;
		width:			100%;
	}
	div.copy {
		display:		none;
	}
	p.controls {
		display:		none;
	}
	td.active {
		background:		transparent;
	}
</STYLE>

So all I had to do was adjust the base font-size:

<STYLE type="text/css" media="print">
  	body {
		font-size:		100%;
	}
	// … snip …
	td input.cell_data {
		border-bottom:		0px;
	}
</STYLE>

(I also took the opportunity to remove the input field markers shown on the web page.)

EMs

This worked because all my font-size parameters were set relative to the document’s base font-size (in the BODY tag), and (almost) all my spacing, padding, borders, &c. were specified in ems. EMs are a unit of size defined in terms of the font-size of the containing element. Therefore, when I changed the BODY's font-size, the entire document scaled properly.

This is a pretty old trick, but since it came in so handy, I thought I’d mention it.