So, I’m learning and hate to ask these silly questions but I want to make sure I don’t mess up anything and then have to fix crashes that could take days on mission critical websites (over 5 dozen members watching).
PRINT BUTTON
I want members to be able to print an Agenda page. I know how to find html print code and an associated button, but if I put that on a CSS styled page, will it print only the page area in which the button is placed or will it print the entire page including the header, side bar, etc.?
READER PAGE VERSION
Also is there an option to make a page have a Reader Version, like some websites that have a small icon in the left of the URL address bar that allows the visitor to click and the page converts to a document style version?
With this reader version, the visitor could print a document page and thus have record of the meeting agenda, meeting notes, etc. from the member group website blog.
To print an entire webpage, I would suggest adding an HTML button to the page itself:
<button onclick="printPage()">Print Page</button>
Then after this HTML, add the following JavaScript:
<script>
function printPage() {
window.print();
}
</script>
Nerd explanation of how it works: Onclick is our event handler. When the button is clicked or tapped, our custom printPage function is run. Within this function we use the Window object and the print method. Very reliable - will work almost anywhere. The browser printer dialogue window is shown when the print button is clicked or tapped.
This will print the entire webpage. The quality of the printout you get varies greatly on the theme you are using. Most better-made themes have dedicated printer style sheets to intelligently omit non-essentials - like backgrounds and navigation - and will return text back to sensible colour schemes and styling. Other themes don’t have printer style sheets; meaning you are more likely to just finish with a garbled mess of a printout.
Printing particular sections of a larger webpage? Possible with something like PrintBox. That will certainly handle text and tables with no problem. It would be less suitable for content like images, video etc.
Reader mode:
My understanding is that the mainstream web browsers are still using algorithms to determine if reader mode is applicable to the current page and which segment of the page to present within reader mode. You will probably find the algorithm is dependent on factors like word counts and the structural markup of the webpage. Again you might find a better quality theme (which is using schematic markup and landmark tags) works better, compared to a more fragmented page created using lots of little stacks or other sub containers.
Creating PDF copies of your most valuable content might be the more consistent and reliable approach. However take note that iOS handles PDFs as images - meaning only the first page will get shown and there would be no option to pan or scroll the PDF content in the web browser. So you would probably need to conjure up a solution using something like a combination of Embed + RottenApple to cater for all website users.
