web page question: how save?
October 17, 2022 1:02 PM Subscribe
Here's what I'd like to do. I want to download a web page that has an inset CSS or Javascript window with scrolling content and to be able to share that web page file as easily as I would a PDF or .docx. Is that possible?
I'm obviously not a coder and didn't make the website. What I want to do is share the content of the inset scrolling window, text that I wrote, in the context of the web page it appears on. For reasons, linking to it isn't possible, and in any case it's best to download and share a copy or screenshots of stuff you write online in case the site changes.
In assembling my portfolio, I usually "print to PDF" in order to keep my clips and send them to others. Here, this won't do because the window with the text in it scrolls down, and printing the page doesn't show anything but the text that's immediately on screen.
Using Firefox, I saved the web page, but that creates a separate file folder with "_files" appended to the web page's name, and I don't know what if anything I should share from that folder in order for another person to be able to read it. I guess I could make screenshots and save it as a series of JPEGs, scrolling down to continue the content between shots, but that would be time-consuming and it could look amateurish.
It seems like there must be a simple solution here. This has come up before in other contexts, so I am asking y'all --
I'm obviously not a coder and didn't make the website. What I want to do is share the content of the inset scrolling window, text that I wrote, in the context of the web page it appears on. For reasons, linking to it isn't possible, and in any case it's best to download and share a copy or screenshots of stuff you write online in case the site changes.
In assembling my portfolio, I usually "print to PDF" in order to keep my clips and send them to others. Here, this won't do because the window with the text in it scrolls down, and printing the page doesn't show anything but the text that's immediately on screen.
Using Firefox, I saved the web page, but that creates a separate file folder with "_files" appended to the web page's name, and I don't know what if anything I should share from that folder in order for another person to be able to read it. I guess I could make screenshots and save it as a series of JPEGs, scrolling down to continue the content between shots, but that would be time-consuming and it could look amateurish.
It seems like there must be a simple solution here. This has come up before in other contexts, so I am asking y'all --
If you right click on the scrolling part of the page and select "inspect" you might be able to find the full text in the html, which you would then be able to copy and paste. You might not be able to keep all of the formatting, in that case. (If you share the url I'd be happy to take a quick look and make suggestions.)
posted by mskyle at 1:11 PM on October 17, 2022
posted by mskyle at 1:11 PM on October 17, 2022
I use the GoFullPage extension for Google Chrome to accomplish exactly what you're describing.
posted by shesbookish at 1:15 PM on October 17, 2022 [3 favorites]
posted by shesbookish at 1:15 PM on October 17, 2022 [3 favorites]
If I understand the question correctly, the problem is that the content is essentially in an iframe. It's not just that there's content below the fold that you have to scroll to see. It's essentially the same question as if you wanted to print all the images on a carousel to a PDF at once.
You could probably take a couple of screenshots and stitch them together, and then print that to PDF. If you need the scrolling for some reason, you could do an animated gif.
I don't think submitting the page to the Wayback Machine would solve the problem of getting the text in a single file for a portfolio, but it wouldn't hurt for future linking purposes as a backup plan.
Getting more technical, if the rest of the page (nav, ads, etc.) doesn't matter to you, and the text isn't too long, you could probably save a copy of the page and then tweak the CSS to make the inset section larger.
posted by kevinbelt at 1:56 PM on October 17, 2022 [1 favorite]
You could probably take a couple of screenshots and stitch them together, and then print that to PDF. If you need the scrolling for some reason, you could do an animated gif.
I don't think submitting the page to the Wayback Machine would solve the problem of getting the text in a single file for a portfolio, but it wouldn't hurt for future linking purposes as a backup plan.
Getting more technical, if the rest of the page (nav, ads, etc.) doesn't matter to you, and the text isn't too long, you could probably save a copy of the page and then tweak the CSS to make the inset section larger.
posted by kevinbelt at 1:56 PM on October 17, 2022 [1 favorite]
I saved the web page, but that creates a separate file folder with "_files" appended to the web page's name, and I don't know what if anything I should share from that folder in order for another person to be able to read it.
You need to save that entire [web pages' name]_files folder, as well as the [web page's name].html file that was created outside of the folder. Then you just need to open the html file to view the page. (Note, however, that if you move these, you should keep them in the same relative relationship (that is, html file and "files" folder should be stored in the same folder -- don't tuck the html file inside the "files" folder.)
That said, if you normally have PDFs of the page, I'd be inclined to save the PDF of the page as you are currently doing, and just have additional page(s) in the PDF that have the full text all by itself, possibly with a note explaining it was the contents of the scrolling box on the website.
posted by yuwtze at 3:03 PM on October 17, 2022 [2 favorites]
You need to save that entire [web pages' name]_files folder, as well as the [web page's name].html file that was created outside of the folder. Then you just need to open the html file to view the page. (Note, however, that if you move these, you should keep them in the same relative relationship (that is, html file and "files" folder should be stored in the same folder -- don't tuck the html file inside the "files" folder.)
That said, if you normally have PDFs of the page, I'd be inclined to save the PDF of the page as you are currently doing, and just have additional page(s) in the PDF that have the full text all by itself, possibly with a note explaining it was the contents of the scrolling box on the website.
posted by yuwtze at 3:03 PM on October 17, 2022 [2 favorites]
And also, if you decide to keep the Firefox save page, you should probably also test how it displays when your computer is offline/in airplane mode, to make sure that you really do have a complete copy. If, for example, the saved page doesn't actually contain all the images, but still links to the ones on the website, then your saved file will appear to work right up until the website removes the images. If it loads properly with your computer not connected to the internet, then it's a much safer bet that the save will work even after the original site is no longer online.
posted by yuwtze at 3:15 PM on October 17, 2022 [3 favorites]
posted by yuwtze at 3:15 PM on October 17, 2022 [3 favorites]
It depends heavily on what powers that website. If the site sends most/all of its content in the initial HTML payload, then saving the webpage like you have should work, but if it uses Javascript to make network requests to fill in most/all of the content, then it probably won't work. The advice to try it with the computer in airplane mode is sound, as that way you can guarantee that the files you saved are all that is necessary for the HTML and support files you saved to work as a portfolio item.
If you need to show specific interactivity in a way that will be durable, a screen recording is likely to be the most foolproof method.
posted by Aleyn at 5:01 PM on October 17, 2022 [1 favorite]
If you need to show specific interactivity in a way that will be durable, a screen recording is likely to be the most foolproof method.
posted by Aleyn at 5:01 PM on October 17, 2022 [1 favorite]
Can you select all the text within the scrolling window with Ctrl-A, then paste into a document? It's not clear whether it's just text in that window, but if the website allows it, that would be far preferable to movies or JPEGs.
posted by zompist at 5:09 PM on October 17, 2022
posted by zompist at 5:09 PM on October 17, 2022
Paparazzi! for MacOS is designed to do exactly this, it converts the full webpage into an image file. [github]
posted by Lanark at 1:21 AM on October 18, 2022
posted by Lanark at 1:21 AM on October 18, 2022
Response by poster: Thanks for all the advice! I will refer back to it again. For now, I used GoFullPage to make separate screenshots of the content, scrolling down between shots, and it was quicker and neater to make a PDF that way than with Snip & Sketch. (It wouldn't let me scroll for saving within the web page, so.)
If this content was much longer, I would do as yuwtze said and simply add a note, with the bulk of the content as text in a doc or PDF. At this time, the point is just to show that it was published and available in a certain context. But if in the future I want to preserve, say, a bunch of embedded search results, I'll need to go deeper as suggested above.
posted by Countess Elena at 6:36 AM on October 18, 2022 [1 favorite]
If this content was much longer, I would do as yuwtze said and simply add a note, with the bulk of the content as text in a doc or PDF. At this time, the point is just to show that it was published and available in a certain context. But if in the future I want to preserve, say, a bunch of embedded search results, I'll need to go deeper as suggested above.
posted by Countess Elena at 6:36 AM on October 18, 2022 [1 favorite]
This thread is closed to new comments.
posted by number9dream at 1:06 PM on October 17, 2022 [2 favorites]