Design/Whiteboard/Writer SpecialIndicators

From The Document Foundation Wiki
Jump to navigation Jump to search


This page sums up the "already work in progress" on the Page Break Indicators and Header/Footer Indicators in Writer.

Topic Team Member
Development Cedric Bosdonnat
Design (User Experience) Christoph Noack
QA (todo)
Accessibility (todo)
Documentation (todo)
Other Contributions Astron, Cor Nouws, Olivier R., Regina Henschel


Header/Footer Indication

Motivation based on customer feedback:

  • It should be avoided that people accidentally enter the header/footer and "destroy" the given content / formatting (on several pages at once). Consequently, sufficient feedback has to be worked out to show the user "what he does".
  • The selection of pictures anchored to the headers/footers (so that they appear on every page, e.g. watermarks) is improved. Today, user can (too easily) select the pictures via simple click - that might be disturbing when editing the document text in the front.

Requirements and Constraints

Definition "Basic Header/Footer Indication"


The core ideas. The header / footer:

  • base on the today's functionality for the headers / footers
  • indicators / controls are shown when clicking on the header / footer area, or when hovering the header / footer area with the mouse for a certain time
  • indicators / controls depend on whether a header / footer is present (not present: show '+' to add the corresponding header / footer, if present: provide drop-down menu for often used functionality)
  • indicators / controls are partly a substitute for the document borders, so the document borders will only be drawn for the area the user currently edits
  • indicators / controls respect the text flow direction (LTR vs. RTL)
  • indicators / controls don't need to fully consider accessibility, since the today's functionality is kept
  • indicator have a fixed size (zooming has no impact)
  • indicator tab position is dependent on the current viewport (scrolling). The aim is to move the indicator, so that it is very likely that the user will see the tab (to make him aware of editing the header / footer).
  • editing can be aborted by pressing ESC -> the cursor jumps back to the document


  • Case: User edits the document text ...
    • Document border is only shown for the document text area
    • Case: If the mouse pointer does not hover the header / footer area, then don't shown the header / footer indicators.
    • Case: If the user hovers the header / footer area for a certain time, then show the header / footer indicators.
  • Case: User edits the header / footer
    • Document border is only shown for both the header / footer areas
    • All header / footer indicators are shown

Note: One additional change affects the selection of pictures anchored to headers / footers when editing the document content. If the user edits the document text, then ...

  • a single click does not select the picture (any more)
  • a double-click selects the picture and enters header / footer editing mode (new)


Structure of the header / footer indicators:

  • Header / footer divider line
  • Header / footer tab
    • contains the text:
      • if header: "Header ($PAGESTYLE)" -> e.g. "Header (Default)"
      • if footer: "Footer ($PAGESTYLE)" -> e.g. "Footer (First Page)"
    • contains the following actions:
      • if header / footer present: '+' symbol -> clicking on the tab
      • if header / footer not present: '\/' (triangle) symbol -> clicking on the tab opens the menu that contains:
        • Format Header... -> Opens the corresponding dialog "Page Style --> Header / Footer" (depending on header / footer)
        • Border and Background... -> Opens the dialog accessible via "Page Style -> Header / Footer -> Options"
        • Delete Header... -> deletes the header, asks for confirmation (as today)

Consequently, the affected / non-affected elements:

  • affected: Document borders (for both document and header/footer areas)
  • affected: Mouse-over behavior for headers / footers
  • not affected: keybindings (except ESC to exit header / footer editing mode)
  • not affected: menu entries
  • not affected: dialogs (e.g. for deleting headers/footers, for editing paragraphs)

Indicator Design

Just an example, since it is already implemented ...

Design Whiteboard Writer SpecialIndicators 2011-09-09 DailyBuild HeaderFooterTest ImprovementProposals.png

Document Margin Design

According to previous discussions in the User Experience Team, document margin lines will be shown as L-marks at the edge of the editing area. See Option 3, Document Border, OOo Wiki.

Definition "Interactive Header Footer Indication



  • intermediate fade in helps us to show the feature earlier without bothering the user
  • full fade in / out avoids being "surprised" when the markup appears


  • The behavior for showing the control is dependent whether the mouse pointer is placed on the control or not
  • If the mouse pointer just hovers the header / footer area for a certain amount of time (500 ... 1000 ms), then the control is faded in a bit (intermediate state, showing it 50% visibility or something like that, fade-in time approx. 250 ms ... 500 ms)
  • If the mouse pointer starts to hover the control ...
    • and the intermediate state (50% transparency) hasn't been reached yet, then jump to at least 50% visibility to show the control reasonably well. Then ...
    • it is faded in completely (approx. 125 ms fade time) (working state, 100% visibility)
  • If the mouse pointer hovers the header / footer area for a longer time (10 s ???) without "using" / hovering the header / footer control, then fade out the control (250 ms) and keep it inactive until the user re-enters the header / footer area with the mouse.

Note: Consider Michael's "mouse pointer movement" idea.

Comment: What idea was that? Can you give a link, so we don't lose this information? --Astron 2011-10-22T22:20:45 (CEST)

Page Break Indication

Motivation: We aim to a) improve its visibility, and b) provide simple access to most used functionality via a drop-down menu. The page break indicator replaces the old "non-printing border on the new page" (see recent LibreOffice Writer help).

Requirements and Constraints

Discussion Thread "Hiding/Showing the page breaks in writer" on libreoffice-ux-advise

Definition "Basic Page Break Indication"


The core ideas: The page break indicator ...

  • is drawn between the pages (more detailed: above the "new" page)
  • consists of:
    • "page break indicator line" --> width according to the "new" page
    • "page break button" --> an arrow like area, fixed size
    • "page break drop-down menu" --> contains most used functionality
  • respects text flow direction (LTR vs. RTL)
  • actions don't need to fully consider accessibility, since the today's functionality is kept

The "page break drop-down menu" contains the menu entries:

  • "Edit Page Break ..." --> leads to the "Format - Paragraph: Text Flow" menu for the paragraph defining the page break
  • "Delete Page Break" --> removes the page break (see Open Points)


The following examples show the page break indication in LTR text direction.

Example for normal pages view (page break between the two pages):

        |                             |
        |                             |
        |                             |
        |                             |
        |                             |

Example for normal pages view with Notes Side Pane (page break between the two pages):

        |                             |         |
        |                             |         |

        |                             |         |
        |                             |         |

Example #1 for book mode (page break before the left page):

        |                             |                              |
        |                             |                              |
        |                             |                              |

Example #2 for book mode (page break before the right page):

        |                             |                              |
        |                             |                              |
        |                             |                              |

Example for side-by-side mode (page break before the lower right page):


        |                             |   |                              |
        |                             |   |                              |
        |                             |   |                              |
        +-----------------------------+   +------------------------------+

        +-----------------------------+ br>~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        |                             |    |                              |
        |                             |    |                              |
        |                             |    |                              |

Indicator Design


Design Whiteboard Writer Special Indicators PageBreak Indicator Proposals.png

Version (3) has been selected for implementation. Details:

Design Whitboard Writer SpecialIndicators PageBreak Details.png

And the small icon: Design Whitboard Writer SpecialIndicators PageBreak Icon.png

Definition "Interactive Page Break Indication"

This description extends the definition "Basic Page Break Indication".

The motivation is to solve the following issues:

  • Show the "page break button" only when required to avoid visual noise
  • Avoid overlay issues for page side-by-side layout
  • Make the concept usable for column breaks

todo: Add description

Column Breaks

This description extends the definition "Interactive Page Break Indication".

todo: Add description


Development Status

Currently being implemented are the definitions:

  • Basic Header Footer Indication
  • Basic Page Break Indication

Available in the LibreOffice daily builds ... check it out!

Known Issues

Header Footer Indication:

  • There are know issues with the undo for header/footer actions, which heavily affect us (since we make the functionality more visible). The mail thread here explains the technical background.
  • The dashed line should always be draw "above" (stack order) the header/footer tab. Sometimes the line is visible in the tab, sometimes its is not (that even changed when working with the feature).

Page Break Indication:

Open Points


  • Open Point: Add mouse hover specific actions (see "Interactive ...") and indication
  • Open Point: Text direction specific visualization of the indicators (LTR vs. RTL)
  • Open Point: Add mouse click "activation" feedback (e.g. different colors)
  • Open Point: Accessibility for the indicators (e.g. changed colors for high-contrast mode)
    • It is already implemented... though it may not be ideal

Header/Footer Indication:

  • Open Point: Check whether it makes sense to add "Edit Header / Footer" to the context menu for the area of the headers / footers when the user edits the document text.
  • Open Point: For pictures anchored in the header / footer, is it possible to access the edit mode via context menu when right clicking on them?

Page Break Indication:

  • Open Point: If we remove the page break, do we "reset" the settings to the current style, or do we change the setting to off (like hard formatting).
    • The current implementation is like hard formatting. It may be interesting to have both as popup menu items.
  • Open Point: Decide how to activate / deactivate the visibility of the Page Break Indicator
  • Indication for "View Pages Side-by-Side Layout" is weird: the previous page hard to guess due to different sorting