-
SPC09 Updates
-
Upcoming
Live Online Workshops -
Ongoing Series
-
Authors
-
SharePoint Resources
- Bits of SharePoint
- Codeless Solutions for SharePoint
- Get the Point
- Innovation Matters
- Laura Rogers
- Path to SharePoint
- Paul Galvin
- SharePoint 911
- SharePoint Blank
- SharePoint Blogs at SharePointU
- SharePoint Forums at SharePointU
- SharePoint Screencasts
- SharePoint Use Cases
- Social Media Talk Tweets
- The Sanity Point
- The Weekly Newsletter
| Weekly Newsletter Signup |
Dec
17
The ability to print web pages has been available for years. Comparing it to the transition that most browsers have gone through, there is very little that has changed about how web pages are printed.
While moving the digital version of a page to its paper equivalent, important information is not accessible to the print job. Luckily you can quite easily provide your visitors with a richer printing experience using no more than a couple of lines of JavaScript.
So what are we actually missing?
Note: The solutions provided in this article assume you have experience with the jQuery library and are either calling it from an external location or have downloaded it and installed it within a library on your site.
Resources:
jQuery Web Site
jQuery Download
Links targets
A printed copy of a web page has limited interaction. How many times have you printed a web page with some links on it? Were you able to find out where those links were pointing to upon printing? While a web browser can properly display the target of a link in the status bar, page can’t. You’re going to miss some information.
Abbreviations and acronyms
The language we’re all using every day is full of abbreviations and acronyms. They simplify the way we communicate and shorten the message. Unfortunately for the digital documents published on the Internet, you don’t always know who is reading them. In order to make the message understandable, you should always explain what the particular abbreviation or acronym means the first time you use it. Most browsers give you a visual hint about the explanation after you hover the mouse pointer over it.
But do you have a mouse pointer to hover over a printed page?
Image alt text
An image says more than thousand words. Using images to support text makes it easier for the readers to understand what we want to tell. Unlike printed media, the images we’re using on the Internet might be unavailable in some situations. Furthermore, there is a big chance that a visually impaired user will read your web page. To keep the message clear it is considered a best practice to attach an alt tag to the image.
When used properly alt text turns into a powerful mechanism which can help you guide your readers through the story even when images are not there.
But can you actually see the alt text upon printing? I don’t think so.
There is however a simple way to improve the printing experience and embed all that information in the printed version of web page.
Improving print experience using jQuery
Looking at the things I described earlier, let’s break the functionality into chunks.
Displaying the target of links
Looking at the HTML of a link, the URL is being stored in the href attribute. Using jQuery we can easily pick up all anchors within the page/content wrapper and add the target URL to the link label:
Just three lines of code! Isn’t that cool?
There are however a couple exceptions when the code above would display a little too much decreasing the printing experience. If you look at the screenshot above once again you will find a link to my blog.
The label already contains the URL so there is no point of appending it to the link’s label.
Once in a while we use links to add some interaction to the document and trigger JavaScript code. Such URL’s have in most situations either an empty href attribute or link to # (empty anchor). Is there any point in adding such information to the link label? Not really.
Considering the above we can extend the JavaScript code so that it will display the href text only when useful:
<Displaying the full text of abbreviations and acronyms
The first time you use an acronym or an abbreviation you should include its meaning in the title attribute:
Assuming that the titles are there we can add them to the abbreviations using a simple jQuery construction:
Because structure of both elements is the same, we can use one jQuery selector to get us both kind of elements and append the explanation of the abbreviation/acronym whenever applicable.
Including the image alt text in the printed version
This is probably one of the most challenging parts to accomplish. While retrieving the alt text of an image is as simple as getting the title of an abbreviation, getting it displayed correctly is where the things go wrong. In most situations it has to do with how you display and format the images. This part is also very likely something you will have to adjust to fit the design of your website.
In the showcase example, I’ve been using images which are aligned on the page using ‘float’. Using that knowledge, I wrap the obtained alt text in an extra div which is being aligned just like the image it’s wrapping. To get some extra formatting control I’m using a span around the alt text:
And the result:
Alternative approach
While I’ve chosen JavaScript, you could achieve similar results using CSS for printed media. It would simplify the whole solution because you would have all the presentation defined in one place (CSS). The downside is that not every browser support the selectors needed to accomplish that using CSS. Using JavaScript provides you a better cross-browser experience. Building such functionality on top of jQuery additionally simplifies retrieving the elements and altering the HTML output.
Check out the working showcase @ http://blog.mastykarz.nl/samples/jquery/printThisPage.html
Waldek Mastykarz
Innovation Matters
Waldek Mastykarz is a software developer living in Alphen aan den Rijn in the Netherlands.
Sweet! Although I keep telling my users to stop printing so much, I want to show them this.
[...] Improving the SharePoint Print Experience (EndUser SharePoint)The ability to print web pages has been available for years. Comparing it to the transition that most browsers have gone through, there is very little that has changed about how web pages are printed. While moving the digital version of a page to its paper equivalent, important information is not accessible to the print job. Luckily you can quite easily provide your visitors with a richer printing experience using no more than a couple of lines of JavaScript. [...]
Great job!
Is there an actual code sample to go along with the article?
Martin – Let me speak with Waldek and I’ll see if I can get something.
Waldek… you there? — Mark
[...] has been playing around with some pretty cool interface stuff. The last article he wrote for EndUserSharePoint.com showed a way to highlight characters on a page as the user was typing. He’s come up with [...]
Waldek,
Mark,
Would it be possible to have the code and ‘installation instructions’?
Dank je wel!
Greg