Dear All,

Charles is on the right track. Much to my surprise when I stumbled upon it,
there is indeed a way to grab a WYSIWYG rendering of a webpage, regardless
of the underlying styling that would ordinarily make a mess of printing. In
developer tools in Chrome and Firefox (and probably others), an obscure
tool will render the website as you see it on screen into one (potentially
very tall) .png image file.

In Chrome on a Windows machine, I do this by pressing  Ctrl + Shift + I  to
open developer tools, then  Ctrl + Shift + P  within developer tools to
bring up a "run" dialog box. Here, I type in "screenshot", which brings up
among several options a "Capture full size snapshot" command. When you
click that, Chrome dumps a .png of the webpage into your Downloads folder.
(On Mac, apparently the equivalent shortcuts are Command + Option + I then
Command + Shift + P, but I don't have a Mac to try this).

Printing a very tall image file is the next challenge. The one success I've
had is converting the .png to .pdf. (Adobe Reader will do this, but I don't
know if it's in the free version or not, as we have access to full
Acrobat). Assuming you can get your image file properly converted to PDF,
the image will appear as one very, very tall page. To "cut" this properly
into a bunch of pages, go to "print" in Adobe, and select the "Poster"
option under "Page Size and Handling." Adobe will now preview the document
with cut lines, showing how it will divide the image into multiple pages.
Its first guess will probably (almost certainly) be wrong. You just need to
play with the "Tile Scale" percentage until it shows the new width as 8.5
inches (it will show this new page size right above the preview image). In
a test I just did for a fairly tall webpage, a 35% Tile Scale yielded an
"8.5 by 77 inches" poster rendered in 7 pages.

This is not foolproof, funky stuff can still happen (when, for example, the
code is trying to shovel content into the DOM via Ajax calls), but it's the
best way I've found to get a website printed "like it looks on my screen."

Best,
Dan



On Sun, Dec 4, 2022 at 6:29 PM Joe Hourclé <[log in to unmask]> wrote:

> On Dec 4, 2022, at 6:18 PM, Fitchett, Deborah <
> [log in to unmask]> wrote:
> >
> > This is entirely dependent on the webpage you want to print, and
> whether or not they've designed it to be printable. Some websites haven't
> (especially highly interactive ones) in which case if you print it there's
> no way to avoid it being ugly.
>
> It’s also possible to set different styles for printing vs screen display,
> so the website might be designed to intentionally *not* let you print what
> it looks like on your screen.
>
> I’m not in front of a desktop computer to verify if it still works, but
> this website used to do it: https://stereo-ssc.nascom.nasa.gov/
>
> (It removed the side navigation, added the URLs after the links, and I
> think it might have removed the graphics across the top, too)
>
> Developer Tools would help you with that, potentially, but you’d have to
> know CSS, I suspect.
>
> -Joe



-- 
*Daniel Johnson, Ph.D.*
*English; Digital Humanities**; and Film, Television, and Theatre *
*Librarian*
*Navari Family Center for Digital Scholarship, **Hesburgh Libraries*

*University of Notre Dame*
250C Hesburgh Library
Notre Dame, IN 46556
o: 574-631-3457
e: [log in to unmask]