Keep in mind within the previous days if you needed to successfully run two websites or create separate templates in a CMS for “printer pleasant pages”? Nobody preferred that. Then print stylesheets got here alongside and every little thing grew to become great and straightforward. Besides that the individuals who use our websites didn’t suppose so; in actual fact, most received a tad confused as a result of all of a sudden the “print this web page” button and the next full display preview disappeared on all however the largest of web sites.
Article Continues Beneath
What’s taking place now?#section2
Many websites have performed away with the “print this web page” button completely. Most internet designers count on website customers to know the best way to print from the browser, and in the event that they do provide a “print this web page” button, clicking the button merely prints and not using a preview. There may be, in fact, a “preview” button within the print dialogue field however most individuals miss it, have forgotten about it, or don’t even find out about it.
As Cameron Adams famous again in 2004, guests aren’t accustomed to print CSS and don’t see a print preview; they count on that after they print an online web page, the design on display will match the printed web page—or at the very least be very related. Readers of A Listing Aside know that the modifications from display stylesheets to print stylesheets might be dramatic. That is typically by design, as we wish to enhance individuals’s paper-based expertise by eradicating “pointless” parts reminiscent of navigation and promoting. Nonetheless, these dramatic modifications could make individuals unsure how the printed web page they’ve of their fingers pertains to the web site they simply visited.
Oh nice—expectations#section3
So how can we set the precise expection about our print model? Why, we change stylesheets in fact! We will create an alternate stylesheet to point out how the web page will look when it’s printed, maybe show a preview message explaining what this new view is about, after which mechanically print the web page with the print stylesheet we all know, love, and belief.
The constructing#section4
First we’ll swipe among the code from an previous ALA article, “Various Model: Working With Alternate Model Sheets”, particularly this one. (Line wraps are marked ». – Editor)
setActiveStyleSheet(title){ // choose the stylesheet
var i, a, most important;
for(i=0; (a = doc.getElementsByTagName("hyperlink") »
[ i ]); i++) {
if(a.getAttribute("rel").indexOf("model") != -1
&& a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = »
false;
}
}
}
We then drop a few features into our JavaScript file. These features merely add a “print this web page” hyperlink on the web page load, “print preview” which switches to the print preview and mechanically prints the web page, “add preview message” which shows a preview message and eventually ”cancel print preview” which permits customers to return to the “regular view” of the positioning. (Line wraps are marked ». – Editor)
operate addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'operate') {
window.onload = func;
} else {
window.onload = operate() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(operate() {
/* extra code to run on web page load */
if (doc.getElementById){
// add further features to web page instruments record
var print_page = doc.getElementById('nav');
// create print hyperlink
var print_function = doc.createElement('p');
// print_function.setAttribute('class', 'print');
//IE would not like this
var print_function_link = doc. »
createElement('a');
print_function_link.onclick = operate() »
{ print_preview(); return false; }
print_function_link.setAttribute('href', '#');
var print_function_link_text = »
doc.createTextNode('Print the Web page');
print_function_link.appendChild »
(print_function_link_text);
print_function.appendChild »
(print_function_link);
print_page.appendChild(print_function);
}
});
operate print_preview() {
// Swap the stylesheet
setActiveStyleSheet('Print Preview');
// Create preview message
add_preview_message();
// Print the web page
window.print();
}
operate add_preview_message(){
var main_content = doc.getElementById('content material');
var main_body = main_content.parentNode;
if (doc.getElementById){
var preview_message = doc.createElement »
('div');
preview_message.id = 'preview-message';
// Create Heading
var preview_header = doc.createElement('h3');
var preview_header_text = doc. »
createTextNode('This can be a print preview of this web page');
preview_header.appendChild(preview_header_text);
// Create paragraph
var preview_para = doc.createElement('p');
var preview_para_text = doc.createTextNode »
('With out this message in fact. ');
var cancel_function_link = doc. »
createElement('a');
cancel_function_link.onclick = operate() »
{ cancel_print_preview(); return false; };
cancel_function_link.setAttribute('href', »
'#');
var cancel_function_link_text = doc. »
createTextNode('Return to the prevailing web page.');
cancel_function_link.appendChild »
(cancel_function_link_text);
preview_para.appendChild(preview_para_text); //
preview_para.appendChild(cancel_function_link);
// Put all of it collectively
preview_message.appendChild(preview_header);
preview_message.appendChild(preview_para);
main_body.insertBefore(preview_message, »
main_content);
}
}
operate cancel_print_preview() {
// Destroy the preview message
var print_preview = doc.getElementById
('preview-message');
var main_body = print_preview.parentNode;
main_body.removeChild(print_preview);
// Swap again stylesheet
setActiveStyleSheet('default');
}Then we’ll add within the alternate stylesheet “Print Preview” to our HTML information.
<hyperlink rel="alternate stylesheet" kind="textual content/css" href="https://alistapart.com/article/printtopreview/css/print-preview.css" media="display" title="Print Preview" />
The print preview stylesheet merely imports our present print stylesheet and units kinds for the preview message.
@import "print.css";
#preview-message {
show:block;
border:1px strong #666;
background:#eaeaea;
padding:2px 5px;
}
This message is essential as a result of it offers context for the brand new “view.” With out it, the brand new stylesheet might be fairly complicated to a customer who clicks the preview hyperlink accidentally.
An improved printing expertise#section5
Right here’s an instance. Clearly, this isn’t the proper method for each website and it’s best to most likely do person testing and tweak the implementation on a case-by-case foundation: you might discover you have to show a “getting ready print model” message for just a few seconds earlier than the model change for some audiences, however not for others.
Now if we may solely assist individuals determine which printer they’ve printed to and the place that printer is…