Skip to content
Rob Garrison edited this page Oct 21, 2015 · 3 revisions

Sections: Opening and Closing the Popup | Removing Items | Remove Everything Except An Element | Moving the Highlight Around | Undo Last Action | Add Print Styles | Remove Graphics | Send to Print | Change Font Size | Full Width | Toggle messages

Using The Printliminator

To save the bookmarklet, go to the Bookmarklet demo page and drag the "Printliminator" button into your bookmarks bar.

Once The Printliminator popup is open, the script has been initialized and any of The Printliminator actions can be performed

Opening and Closing the Popup

For the bookmarklet:

  • Open The Printliminator by clicking on The Printliminator bookmarklet button which should be saved into your bookmarks bar, or favorites folder.
  • To close & disable The Printliminator:
    • Click the red button with an "X", next to the "CLOSE" text in the upper right corner of the popup window.
    • Or, press Esc (escape).
    • To open the popup so more adjustments can be made, click on the bookmarklet button. All undo history is saved, so you can still restore the page completely.
  • To completely remove all traces of The Printliminator, reload the page.

For the extension:

  • Click on the extension icon. If it isn't visible, you'll need to go into the browser settings:
    • Chrome: Menu > More Tools > Extensions - make sure the extension is enabled, then click on the "Show button" button.
    • Firefox: Menu > Addons - make sure the addon is enabled; then if it is still not visible, go to Menu > Customize, then drag the icon into the toolbar.
    • Opera: Menu > Extensions > Extension Manager (or Ctrl + Shift + E) - make sure the "Hide from toolbar" checkbox is unchecked.
    • Safari: ???
  • The popup should now be open.
    • Hovering over elements in the main page will work, but keyboard commands will not because the main document does not have focus.
    • This is because the popup is not contained within the main document, so you will need to shift the focus.
  • Shifting focus. There are at least three methods to use to give the main document page focus:
    • Press Esc (escape) once.
    • Cick on the scroll bar.
    • Click on the tab of the window itself
    • Or, click in an area on the page where only the body of the page is visible (no red highlight appears while hovering). Clicking on an element to remove it will also work, but if it was done unintentionally, you'll need to press Backspace to restore the element.
  • Once the popup closed and the main document has focus, the red hover highlighting should still work. If not, you will need to click on the extension icon again.
  • To disable The Printliminator, press Esc a second time. The red hover highlighting should no longer be in effect.
  • To make more adjustments, click on The Printliminator extension icon again. All undo history is saved, so you can still restore the page completely.

Removing Items

When the mouse is moved around on the main web page, a red highlight (or outline) will appear around the different items (or elements).

Red Outline

Sometimes the entire highlight box may not be visible, this is usually due to part of the element being hidden or obscured by other elements.

If you want to remove the item in the red box, simply click on it.

Some elements, like a YouTube video can't be removed by a click because it is in a frame that is separate from the main page. In this case, add a red highlight around the video by moving the mouse over it, then press the Enter key to remove it .

† NOTE: When using the Enter key, don't hold it down or more items may be removed!

Removing Everything Except An Element

If you only want one section, or article to be visible:

  • Highlight the element by moving the mouse over it.
  • Press and hold down the Alt key before clicking on it to hide everything except the highlighted element.

You can "undo last" to restore the elements if needed.

Moving the Highlight Around

For more precise control, you can move the red highlight around using the keyboard. To target the:

  • Wrapper (or parent) of the currently highlighted element, press the up arrow or PageUp key.
  • Content (or child) of the currently highlighted element, press the down arrow or PageDown key. The first visible element (or child) will be highlighted.
  • Next box (or sibling) of the currently highlighted element, press the right arrow.
  • Previous box (or sibling) of the currently highlighted element, press the left arrow.

If you find that the highlight isn't moving, it might be because the window doesn't have focus. Click on:

  • The scroll bar
  • The tab of that window
  • Or, on a section of the page that doesn't have any elements - the body will never be removed, just the elements inside of it.

Undo Last Action

If you accidently clicked on an element and it disappeared, but you wanted to include it in the print, then use the "Undo Last" button.

The undo can restore the entire page to its original form, if needed; but there is no way to undo any other action except for the last.

Use the Backspace key as a keyboard shortcut for this action.

Add Print Styles

A print style sheet based on Hartija (Css Print Framework) can be applied to the page to make it more "printer friendly".

When this action is performed:

  • All stylesheets are disabled
  • All in-line styles are removed. This usually ends up removing background images.

Luckily, if you don't like the look of the print style, you can undo it.

Remove Graphics

When using this action, all of the following will be hidden:

  • Images (<img> & <input type="image">)
  • Iframes
  • Objects
  • Embedded elements
  • Audio
  • Video
  • SVG

Use "undo last" to restore the graphics as desired.

Send to Print

This opens the browser print dialog.

In most browsers, a print preview of the page can be seen. Cancel the print to make any further adjustments.

Additionally, the following methods will also open the browser print dialog:

  • Most browsers use Ctrl + p for this.
  • The Printliminator adds the PrtScn key as a shortcut.

Note: Firefox does not have a built-in print preview, so you may need to use an addon like Print/Print Preview to see how the changes look in print.

Change Font Size

The font size of the main page can be changed by using the following keys:

  • Numpad + or + (okay to press = without Shift) will increase the <body> font size by one.
  • Numpad - or - will decrease the <body> font size by one.
  • Numpad or (okay to press 8 without Shift) will restore the original <body> font size.

Note that even though the body font size is changing, this may not apply to elements that have a specific font size setting (e.g. <h1> elements).

The Printliminator does attempt to change the font size & maintain the units being used. So if the body font-size was set to 12pt then the size will increase by pt. If set using em, then the size will increase by em - it'll change size really fast!

Full Width

In some cases, a width is set on an element, so even if you removed everything around it, it doesn't fill the browser window.

You could use the "Add Print styles" action to remove the set dimensions, but it may not achieve the desired effect. Instead, do this:

  • Target the element that needs to be made full width by moving the mouse over it.
  • Press and hold the Shift key, then click.
  • The outline should turn from red to blue once the full width style has been applied.

If the element still hasn't stretched to fill the browser width:

  • Don't move the mouse!
  • Instead, press the up arrow, or PageUp key to target the wrapper.
  • Now press and hold the Shift key, then click again.
  • Keep repeating the above steps until the element fills the browser width.

The reason these steps need to be done is because a lot of web sites set the dimensions and wrap elements in multiple layers.

In case you wanted to know, when applying the full width class, the following css definitions are applied:

full_width {
	width     : 100% !important;
	min-width : 100% !important;
	max-width : 100% !important;
	margin    : 0    !important;
}

Toggle messages

The extension has one additional feature which shows messages. This feature is not included with the Bookmarklet!

A message will appear when any of the following actions are performed:

  • Element is hidden
  • Action is undone
  • Removing everything but the targeted element
  • Print styles are applied
  • All graphics are removed
  • Will moving around the elements using the keyboard: finding wrapper, content or adjacent elements.
  • Making an element full width
  • Font size changes

Additionally, the message may include the element & first class name.

For example, in the main demo, if the arrow pointing to the Printliminator bookmarklet is removed, the following message will appear:

Removing: <span class="drag-arrow">

When the action is undone, the following message will appear:

Restoring: <span class="drag-arrow">

If these messages are distracting, or covering up an element you need to access, press F1 to toggle the display of these messages.