I thought I'd share a tip I use often with Firefox.. well, technically it requires the Firebug extension. Maybe you can share similar tips and or let me know if you can get a similar functionality in other browsers (my fav' is Google Chrome, but for this tip we'll need Firefox).
Have you tried printing something and get lots of undesired content ?
With Firefox and the Firebug extension you can completely customize a web page before printing it, by removing any unwanted elements. If you are a little experienced with CSS you can even change colours, hide all flash or images and so on, by editing the stylesheet rules in real time (no saving extra files or any configuration).
Another great use for this is to create PDF documents that you can read offline. I'm not sure about other OS'es but on Mac OS if you select Print you have the option to print to a PDF document.
If you find a technical article with an interesting table (say common OS keyboard shortcuts), you can remove all the site layout by deleting header, footer, side columns, until you have only the table you want. Then you can print that to PDF and you have a clean document that you can lookup
Here's an example with usingmac.com keyboard shortcuts article, we want to print just the table, or create a nice PDF out of it:
* Install the Firebug extension
* Load up UsingMac.com article
* Use FireBug to annihilate all unwanted content
Using FireBug:
* Press F12 to toggle FireBug or click the beetle icon in the status bar (bottom right of the window), or press Cmd Shift C (Mac) to go directly to "Inspect" mode (this also opens FireBug).
* Select the HTML tab if it is not active. When it is focused, you can navigate the HTML tree with cursor up/down, left/right to walk up and down the HTML "branches". Explore top-down, start with the "<body>" element. Focus "<div id="topbar">" you can see it highlighted in the browser view. Don't want that? Hit backspace to delete it (you can also right-click and select "Delete Element"). Rinse-repeat with "<div id="navibar" ...>", explore down "<div id="content-wrapper" ...>, delete "<div id="sidebar"...>". If you go down the divs "post-content" and then "posts" you will find the ad banner a couple lines down the H2 title. Hit delete! You can delete "Related entries" in one fell swoop by targeting a "<div class="posts">.
* Sometimes it's easier to directly point something in the window, hit Cmd Shift C or click the Inspect button in Firebug (second-left icon that looks like a little arrow). Highlight something. Often, you'll hit a smaller element like a Paragraph. Look at the HTML window and go up (Cursor up) the nested elements to target more of them, and delete! For example click "Inspect" then click the page logo "UsingMac.com", then press cursor up to select the parent "<div class="title"...>", and hit delete!
We're pretty close now. Still I don't want the big title in my PDF. Again try inspect or navigate the HTML view. Delete the "H2" element.
Now there is only the article text, and the useful tables. Try Print and Preview.
Last steps:
* Note that the website's print stylesheet is still active, so the Print Preview takes care of the background image. But there is an empty space on the right side, where the sidebar used to be.
* This requires a little of CSS knowledge but you may be able to repeat this with many websites: Inspect the "<div id="post-content">" element. On the right side check that the "Style" tab is selected. This shows all the stylesheet rules that apply to the selected element. Let's edit those: click the blue text, that is click the property values not the property names! Click "700px", and replace it with "100%", tada! The background looks weird now, but it won't show in Print Preview anyway.
For the perfectionists:
* Notice how the columns are not aligned in the tables? Select the 2nd or 3rd column anywhere. The style rule "table.list td" should show up in the right panel. Let's add a new property: point the cursor at the end, on the line that says "}", double click in the empty space there. Then type in "width" then ENTER then "40%". Now all table cells in the document will align. Try Print preview again, that's better! The first column is a bit large, experiment with other values. Try "50%" (hint: press cursor up/down when a CSS value is selected to increase/decrease!). Try Print preview again... perfect!
Click "PDF" in the Print Preview window, then "Save as...".
You can also save the page for offline viewing, and that's where Firefox rules: it saves the edited page, with all the crust removed.
Now you have a perfect PDF document (which I assume will also make for better indexation with Spotlight).
That was long, but when you get the hang of it, it's really quick and easy.
Best of all, if you're not a web developer you will become more knowledgeable about how a web page is built, and learn CSS basics. Experimenting with Firebug is fun! Change the page colour, delete all images, etc.
Come to think of it, there's probably extensions out there to help you print bits of pages, but this approach lets you do pretty much anything you want.
PPS: One thing I can't do yet, is add a new style rule. If the stylesheet doesn't have a generic rule for the "img" elements for example, you can't hide them all at once (style rule "display: none"). Anybody knows how to add a new style rule in real time in Firebug?
Have you tried printing something and get lots of undesired content ?
With Firefox and the Firebug extension you can completely customize a web page before printing it, by removing any unwanted elements. If you are a little experienced with CSS you can even change colours, hide all flash or images and so on, by editing the stylesheet rules in real time (no saving extra files or any configuration).
Another great use for this is to create PDF documents that you can read offline. I'm not sure about other OS'es but on Mac OS if you select Print you have the option to print to a PDF document.
If you find a technical article with an interesting table (say common OS keyboard shortcuts), you can remove all the site layout by deleting header, footer, side columns, until you have only the table you want. Then you can print that to PDF and you have a clean document that you can lookup
Here's an example with usingmac.com keyboard shortcuts article, we want to print just the table, or create a nice PDF out of it:
* Install the Firebug extension
* Load up UsingMac.com article
* Use FireBug to annihilate all unwanted content
Using FireBug:
* Press F12 to toggle FireBug or click the beetle icon in the status bar (bottom right of the window), or press Cmd Shift C (Mac) to go directly to "Inspect" mode (this also opens FireBug).
* Select the HTML tab if it is not active. When it is focused, you can navigate the HTML tree with cursor up/down, left/right to walk up and down the HTML "branches". Explore top-down, start with the "<body>" element. Focus "<div id="topbar">" you can see it highlighted in the browser view. Don't want that? Hit backspace to delete it (you can also right-click and select "Delete Element"). Rinse-repeat with "<div id="navibar" ...>", explore down "<div id="content-wrapper" ...>, delete "<div id="sidebar"...>". If you go down the divs "post-content" and then "posts" you will find the ad banner a couple lines down the H2 title. Hit delete! You can delete "Related entries" in one fell swoop by targeting a "<div class="posts">.
* Sometimes it's easier to directly point something in the window, hit Cmd Shift C or click the Inspect button in Firebug (second-left icon that looks like a little arrow). Highlight something. Often, you'll hit a smaller element like a Paragraph. Look at the HTML window and go up (Cursor up) the nested elements to target more of them, and delete! For example click "Inspect" then click the page logo "UsingMac.com", then press cursor up to select the parent "<div class="title"...>", and hit delete!
We're pretty close now. Still I don't want the big title in my PDF. Again try inspect or navigate the HTML view. Delete the "H2" element.
Now there is only the article text, and the useful tables. Try Print and Preview.
Last steps:
* Note that the website's print stylesheet is still active, so the Print Preview takes care of the background image. But there is an empty space on the right side, where the sidebar used to be.
* This requires a little of CSS knowledge but you may be able to repeat this with many websites: Inspect the "<div id="post-content">" element. On the right side check that the "Style" tab is selected. This shows all the stylesheet rules that apply to the selected element. Let's edit those: click the blue text, that is click the property values not the property names! Click "700px", and replace it with "100%", tada! The background looks weird now, but it won't show in Print Preview anyway.
For the perfectionists:
* Notice how the columns are not aligned in the tables? Select the 2nd or 3rd column anywhere. The style rule "table.list td" should show up in the right panel. Let's add a new property: point the cursor at the end, on the line that says "}", double click in the empty space there. Then type in "width" then ENTER then "40%". Now all table cells in the document will align. Try Print preview again, that's better! The first column is a bit large, experiment with other values. Try "50%" (hint: press cursor up/down when a CSS value is selected to increase/decrease!). Try Print preview again... perfect!
Click "PDF" in the Print Preview window, then "Save as...".
You can also save the page for offline viewing, and that's where Firefox rules: it saves the edited page, with all the crust removed.
Now you have a perfect PDF document (which I assume will also make for better indexation with Spotlight).
That was long, but when you get the hang of it, it's really quick and easy.
Best of all, if you're not a web developer you will become more knowledgeable about how a web page is built, and learn CSS basics. Experimenting with Firebug is fun! Change the page colour, delete all images, etc.
Come to think of it, there's probably extensions out there to help you print bits of pages, but this approach lets you do pretty much anything you want.
PPS: One thing I can't do yet, is add a new style rule. If the stylesheet doesn't have a generic rule for the "img" elements for example, you can't hide them all at once (style rule "display: none"). Anybody knows how to add a new style rule in real time in Firebug?