--------------------------------------------------------------------------------------------Version 15.0 - New Feature - Edit and insert text in web pages
• See the Editing and Inserting Text
section below for full details.
--------------------------------------------------------------------------------------------Version 15.5 - Fully compatible with Multiprocess Firefox [e10s]
--------------------------------------------------------------------------------------------Version 15.8 - Compatible with Firefox's new Reader View (FF38+)
allows editing of the web page content while in Print Preview mode. Editing the web page prior to printing can compact the layout and remove unwanted content such as adverts, sidebars and blank pages.
In Print Edit mode, the displayed content elements can be edited, formatted, hidden or deleted, prior to printing in Print Preview mode. It is possible to switch repeatedly between Print Edit mode and Print Preview mode.
Any "active" elements (such as animated graphics) are disabled on first entry into Print Edit mode, and are shown as grey vertically striped blocks.
CSS Print Stylesheets are applied on first entry into Print Edit mode, so that the editable page looks similar to the print pages displayed in Print Preview mode. CSS Print Stylesheets can be removed, using the Web Style
feature, so that both the editable page and the print pages looks similar to the web page displayed in normal browsing mode.
Normally, changes are applied to whole elements and where appropriate to their nested sub-elements. However, using the Text Pieces
feature, it is possible for individual pieces of text within elements to be edited, hidden, deleted or formatted, without affecting any nested sub-elements.Print Edit
includes a feature to fix the pagination problems (blank pages and truncated pages) that exist in Firefox's print and print preview functionality. This feature can be used even if web page editing is not required.Print Edit
works with both Firefox's normal browsing view and the new Reader View (Firefox 38.0 or later).GETTING STARTED
To get started with Print Edit
, try the following steps:
THINGS TO TRY
- Start Firefox and load the web page to be edited into a tab as normal.
- If the Firefox main menu bar is visible, select File and then select Print Edit. Otherwise, click the orange Firefox button, select Print and then select Print Edit. The print edit toolbar will be displayed at the top of the window with the web page to be edited beneath.
- Move the mouse over the web page contents and a red box will highlight the element that the mouse is over. Click to select the highlighted element. Move the mouse to highlight another element and click to select that element.
- Click the Delete button on the toolbar and the two selected elements will be deleted. Click the Undo button to restore the deleted elements
- Click the Delete Except button on the toolbar, then select Restricted, and everything except the two selected elements will be deleted.
- Click the Preview button to see how the page will look when printed. Click the Print button to print the edited web page.
- Click the Edit button to return to print edit mode and continue editing the web page. Click the Close button to end editing and return to normal browsing mode.
A common requirement is to print one block of text or one section of a document. The simplest way to do this is to select the block of text or the section, then click on Delete Except
, and then click on Restricted
. To see if Without Float
would give better results, click on Undo
, then click on Delete Except
again, and then click on Without Float
Another common requirement is to expand text blocks to fill the full width of the page. The simplest way to do this is to select the whole page, then click on Format
, then click on Fit to Content
, then tick Apply to sub-elements
, and then click on OK
.USER REFERENCEInitiating Print Edit
Print Edit is initiated from Print Preview by clicking on the Edit
button next to the Close
button on the toolbar.
Alternatively, Print Edit can be initiated from the Print Edit
button drop-down menu on the main toolbar, or from the File
menu on the main menu bar, or from the Print...
submenu on the app menu, or from the Print...
submenu on the context menu (after right-clicking the web page).
The Print Edit
button can be added to the main toolbar by right-clicking the toolbar and selecting Customize
. The default action for the Print Edit
button can be changed.Mode Buttons
There are three mode change buttons:
- enters Print Edit mode from Print Preview mode.
- exits Print Edit mode and returns to Print Preview mode.
- exits Print Edit mode or Print Preview mode and returns to normal browsing mode.Feature Buttons
There are two feature toggle buttons:
• Text Pieces
- allows selection and editing of individual pieces of text.
• Web Style
- alternately removes or applies CSS Print Stylesheets.
When the Text Pieces
feature is toggled off, any individual pieces of text that have been edited will be remain selectable and editable.
There are options to enable these features on first entry into Print Edit mode.Edit Buttons
There are ten edit command buttons:
- selects all elements or all graphic elements, or re-selects elements from previous command.
- deselects all currently selected elements.
- hides the currently selected elements (will not affect the position of other elements).
- deletes the currently selected elements (will affect the position of other elements).
• Hide Except
- hides all elements except those currently selected.
• Delete Except
- deletes all elements except those currently selected.
- formats the currently selected elements (may affect the position of other elements).
- edits a selected text piece or inserts text before or after selected element.
- undoes the affect of the last edit command.
• Undo All
- undoes the affect of all previous edit commands.
commands are mutually exclusive. The Select
button is displayed when no elements are selected and has a drop-down menu with three items:
- selects all elements.
- selects all graphic elements (e.g. images).
- selects the elements that were selected immediately before the last edit command.
button is displayed when one or more elements are selected.
The Delete Except
command has a drop-down menu with three menu items:
- retains position and size restrictions on higher level elements.
• Without Float
- retains position and size restrictions, and removes float, on higher level elements.
- removes position and size restrictions, and removes float, on higher level elements.
Note that Without Float
also remove float from the selected elements.
command can use either of two techniques to hide elements. Using the normal technique, elements cannot be selected after being hidden. Using the alternative technique, elements can still be selected after being hidden, but may not always be fully hidden.
command normally reinstates the select boxes that were displayed prior to the 'undone' command, but this behaviour can be turned off.Other Buttons
There are three more buttons in Print Edit
- saves the edited web page as an HTML
file (see section below).
- provides access to Fix Page Breaks
dialog (see sections below).
- opens the Help
popup panel showing Mouse Actions
and Keyboard Shortcuts
There is a new checkbox in Print Preview
- selects a PDF file as the destination instead of a printer (see section below).Keyboard Shortcuts
Each button on the edit toolbar has a keyboard shortcut, which is Alt
plus the letter that is underlined in the button name, for example Alt+D
for the Delete
Five of the edit commands have additional keyboard shortcuts:
- ] key (when one or more elements are selected)
• Select Again
- [ key (when no elements are selected)
- Insert key
- Delete key
- Backspace key or Ctrl+Z
The three buttons in the Inspect
popup panel also have keyboard shortcuts:
- UpArrow key
- DownArrow key
- Enter keyEditing and Inserting Text
command allows a selected piece of text to be edited or new text to be inserted before or after a selected element. The Text
command button is only enabled when a single piece of text or single element is selected.
popup panel can be dragged by its title bar to a new position so that it doesn't obscure important parts of the web page. The title bar shows #text
when editing a text piece or the HTML tag of the selected element when inserting text before or after that element.
Normally, an individual piece of text can only be selected if the Text Pieces
feature is enabled. However, when the Text Pieces
feature is disabled, any individual pieces of text that have been previously edited will remain selectable and editable.
popup panel provides a text box where existing text can be edited or new text can be prepared before being inserted. The text box is resizable by dragging the 'dotted triangle' in the bottom right corner of the text box. All of the standard editing keyboard shortcuts (e.g. arrow keys, Ctrl+C, Ctrl+V) can be used in the text box.
When an element is selected, text can be inserted before or after that element, either as inline text, or as a text block or as a 'sticky note'. The type of insertion is chosen using the drop-down menu list in the footer of the Text
panel. The width of an inserted text block or 'sticky note' will be the same as the current width of the text box in the Text
Clicking on the Apply
button allows the appearance of the edited/inserted text to be seen in the web page, without closing the Text
panel, so that editing can be continued. After closing the Text
panel, any inserted text must in future be edited as individual text pieces.Applying Format Properties and Using Quick Styles
command allows up to twenty-six format properties to be applied to the selected elements. These format properties affect both the layout of the content and its appearance, and can be used to reduce the space that the content occupies on the printed page and to improve its readability. The format properties correspond to similarly named CSS properties.
popup panel can be dragged by its title bar to a new position so that it doesn't obscure important parts of the web page. The title bar shows the HTML tag of the first element that is being formatted.
The format properties can be applied individually by ticking the checkboxes in the Properties
section, or in groups by using the buttons in the Quick Styles
section. The values of some format properties can be changed by clicking on the small arrow buttons next to the property name.
section can be shown or hidden by clicking the Show/Hide Properties
(down/up chevron) button. The values of all of the format properties can be reset to their default values by clicking the Reset Properties
(arrows target) button.
format properties also remove any corresponding min-width/max-width and min-height/max-height CSS properties. The Font Style
format property affects the font-style and font-weight CSS properties. The Table Border
property affects the border-collapse and border-spacing CSS properties. The Page Break
property affects the page-break-before, page-break-after and page-break-inside CSS properties.
Each Quick Style
button applies several format properties and the currently active Quick Style
buttons will be colored green. If any of the format properties applied by an active Quick Style
button are subsequently un-ticked, then the Quick Style
button will be colored amber to indicate it is only partially active. Clicking a partially active (amber) Quick Style
button will make it fully active (green). Clicking a fully active (green) Quick Style
button will make it inactive (not colored).
The format properties can be applied to just the selected elements or to their nested sub-elements as well, and can also be restricted to specific content types (e.g. Blocks
or List Items
). The Format
command can be applied multiple times to the same element.Inspecting Format Properties
The current format properties for an element can be displayed in the Inspect
popup panel. This is displayed by moving the mouse, so that the highlight box (solid border) is positioned over the element, and then right-clicking the mouse.
popup panel can be dragged by its title bar to a new position so that it doesn't obscure important parts of the web page. The title bar shows the HTML tag of the element that is being inspected.
The format property values are simplified versions of the full CSS property values, but should be sufficient to determine which format properties to apply with the Format
panel has three buttons (Expand
) which allow positiong of the highlight box and selection of the highlighted element.Positioning the Highlight Box
The highlight box is positioned over an element by moving the mouse over the element. If necessary, the position of the highlight box can be adjusted using the Expand
(Up Arrow) and Shrink
(Down Arrow) keys. The element is then selected by clicking the mouse or by pressing the Select
The position of the highlight box can also be adjusted and the element selected using the Expand
buttons in the Inspect
panel. Selecting and Deselecting Individual Elements
Individual elements can be selected (or deselected) using a highlight box (see previous section).
An individual element is selected by moving the mouse, so that the highlight box (solid border) is positioned over the element, and then clicking the mouse (or pressing Enter
). The highlight box then changes to a selection box (dashed border). Any number of elements can be selected, one after another, before applying an edit command.
Any selected element can be deselected by moving the mouse, so that the highlight box (solid border) is positioned over the selected element, and then clicking the mouse (or pressing Enter
). The selection box (dashed border) then disappears.
All selected elements can be deselected by clicking the Deselect
The border color and border width of the highlight box and select boxes can be changed.Selecting and Deselecting Multiple Elements
Multiple elements can be selected (or deselected) together using a draggable capture area.
Multiple elements can be selected together by dragging the mouse to draw a rectangular capture area which encloses the elements. When the mouse is released, all of the elements within the capture area are selected.
It is also possible to only select the graphic elements within the capture area by holding down the Shift
key, then dragging the mouse to draw a rectangular capture area which encloses the graphic elements.
Multiple elements can be deselected together by holding down the Ctrl
key, then dragging the mouse to draw a rectangular capture area which encloses the elements. When the mouse is released, all of the elements within the capture area are deselected.
If the start point of the capture area is close to the edge of the web page, then the start point will snap to the edge. While drawing the capture area, the web page will be automatically scrolled as required.
If the start point of the capture area is within a nested document, then normally the capture area can only be dragged within the boundaries of the nested document. However, by holding down the Alt
key before dragging the mouse, the capture area can be dragged outside the boundaries of the nested document.
All selected elements can be deselected by clicking the Deselect
The border color and area opacity of the capture box can be changed. Saving As PDF
In Print Preview
mode, an edited web page can be previewed as a PDF file by enabling the PDF
checkbox. This selects a PDF file as the destination (instead of a printer) and replaces the Print...
button with a Save PDF...
The edited web page can then be saved as a PDF file by clicking on the Save PDF...
The page setup for the PDF file can be configured using the Page Setup
dialog and/or using the controls on the Print Preview
feature works on Linux, on Windows XP, and on Windows Vista/7/8 with Firefox 3.6 or Firefox 28.0 or later. The PDF
feature also works on Windows Vista/7/8 with Firefox 4.0 - 27.0, if Firefox is run in Windows XP compatibility mode or if Firefox's hardware acceleration option is disabled.
feature is not available on Mac OS X, and is initially disabled on Windows Vista/7/8 with Firefox 4.0 - 27.0 (there is an option to enable).Saving As HTML
In Print Edit
mode, an edited web page can be saved as an HTML file by clicking on the Save
button and then on the drop-down menu selecting either Save HTML...
or Save HTML with Purge...
This will save the edited web page using any of Firefox's standard save methods: 'Web Page, complete', 'Web Page, HTML only' or 'Text Files'.
This feature is also compatible with both the Mozilla Archive Format
add-on (3.0.0) and the UnMHT
add-on (5.7.7, 6.0.0, 6.3.3, 6.4.5 or 7.0.3, but not 6.5.*). The Mozilla Archive Format
add-on provides it's own save methods (MAFF and MHT), and also provides access to the save methods (MHT) of the UnMHT
add-on (which usually gives the best results).
Note that the Mozilla Archive Format
add-on and the UnMHT
add-on are not currently compatible with Multi-Process Firefox and cannot be used in 'e10s' windows.
Note that saving as 'Web Page, complete' always uses Firefox's standard save method, and ignores the "When saving complete web page contents" option in the Mozilla Archive Format
Using Save HTML with Purge...
, it is possible to purge unwanted elements in order to reduce the saved file size. There are options to select which elements to purge: deleted elements, hidden images, scripts, style sheets. The initial settings are to purge deleted elements and hidden images.
When closing Print Edit
, there is an option for the user to be asked whether to close without saving the edited web page.
When re-editing a saved edited web page, the user will be asked whether to retain or discard the edits from the previous session.Fix Page Breaks
Firefox's print preview and print functionality has several long standing problems that cause unwanted blank pages and truncated pages. In most cases, it is possible to fix these problems in Print Edit mode by selecting Fix Page Breaks
from the Tools
The Options Dialog
can be accessed by clicking the Options
button, or by selecting Tools | Add-ons
on the Firefox main menu.
The Options Dialog
allows the user to:
• Choose the default action for the Print Edit
• Choose the original toolbar layout (text labels) or a more compact toolbar layout (icons).
• Choose that elements can still be selected after Hide.
• Choose to reinstate the select boxes after Undo.
• Choose not to ask about saving on Close.
• Choose to enable the Text Pieces and Web Style buttons on first entry.
• Choose which elements to purge when saving as HTML.
• Enable Save PDF feature for Firefox 4-27 on Windows Vista/7/8.
• Set the border color, border width and area opacity for the highlight box.
• Set the border color, border width and area opacity for the select boxes.
• Set the border color, border width and area opacity for the capture box.
• Set the distance within which the capture box start point will snap to edge.Notes for Mac Users
The Save PDF
feature is not available on Mac OS X, but Mac OS X has a built-in feature for saving as a PDF file.
buttons (available on other platforms) are not available on the print preview toolbar. Instead, on Mac OS X, the orientation can be changed by clicking on the Page Setup
button and then selecting Portrait or Landscape.
button on the print preview toolbar works the same for all platforms. In addition, on Mac OS X, the scale can be adjusted by clicking on the Page Setup
button and then entering a value in the Scale box. The value entered in the Scale box acts as a multiplier for the scale set by the Scale