Print" in my browser, the page is formatted d...">
Clever Geek Handbook

How does Google map printing work?

Even without the "printable" print view, when I select "File-> Print" in my browser, the page is formatted differently than the original. How does Google achieve this? Is this a custom javascript facade?

+2


source to share


3 answers


The code will display a print stylesheet, something like strings:

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

if the stylesheet was 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 styles are defined in the code text. The latter definition shows that the same style can be applied to multiple types of media.



I do not know how Google organizes its codebase and it is irrelevant to the purpose of this answer.

The recognized media types are:

all Suitable for all devices.
braille Designed for tactile feedback of a braille device.
Embossed Designed for swap braille printers.
pocket . for handheld devices (usually small screen, limited bandwidth).
Print Designed for materials loaded by page and for documents viewed on screen in print preview mode. Consult the section on paged media for information on formatting issues that are specific to the uploads.
projectionDesigned for predictable presentations such as projectors. Consult the section on paged media for information on formatting issues that are specific to paged media.
Screen Designed primarily for color computer screens.
speech Designed for speech synthesizers. Note. CSS2 has a similar type of media called "aural" for this purpose. See Appendix for Styles. terminal Designed for use with fixed-pitch media (such as teleprinters, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" Media Type.
tv Designed for television devices (low resolution, color, screens with limited scrolling, sound available).

From here

+11


source


View Source -> Search for "@media print".



The Google maps page defines a separate layout for the print styles in the <style> ad at the top of the page. Their engineers have done an excellent job of obfuscating as much content as possible.

+1


source


Google does this by specifying @media print

for their styles on the page.

You can also do this by specifying the type "media" for the tag <link>

. You can specify that style sheets should be used for screen display only, or in this case for printing. In the meantime, there is no need to know about it. ”

An example from the W3C CSS 2.0 Specification :

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">

OR

@media print {
    body { font-size: 10pt }
}

Valid types:

all, braille, embossed, handheld, print, projection, screen, speech, tty, tv
0


source






More articles:


All Articles