Question

Even without a “printer-friendly” view to print directions, when I choose “File->Print” in my browser, the page is formatted differently than the original view. How does Google achieve this? Is it a special javascript facade?

Answer 1

There’ll be a print stylesheet defined in the code, something along the lines of:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

if the stylesheet were contained in a separate file. Or:

@media print {
    body { font-size: 10pt }
}
@media screen {
    body { font-size: 13px }
}
@media screen, print {
    body { line-height: 1.2 }
}

if the styles are defined in the body of the code. The last definition shows that the same style can be applied to multiple media types.

I’ve no idea how Google organise their codebase, and it is irrelevant for the purposes of this answer.

Recognised media types are:

all Suitable for all devices.
braille
Intended for braille tactile feedback
devices.
embossed Intended for paged
braille printers.
handheld Intended
for handheld devices (typically small
screen, limited bandwidth).
print
Intended for paged material and for
documents viewed on screen in print
preview mode. Please consult the
section on paged media for information
about formatting issues that are
specific to paged media.
projection
Intended for projected presentations,
for example projectors. Please consult
the section on paged media for
information about formatting issues
that are specific to paged media.
screen Intended primarily for color
computer screens.
speech Intended for
speech synthesizers. Note: CSS2 had a
similar media type called ‘aural’ for
this purpose. See the appendix on
aural style sheets for details.
tty
Intended for media using a fixed-pitch
character grid (such as teletypes,
terminals, or portable devices with
limited display capabilities). Authors
should not use pixel units with the
“tty” media type.
tv Intended for
television-type devices (low
resolution, color,
limited-scrollability screens, sound
available).

From here