OOo Interface Demos: Zooming/Page arrangement behavior

These interface demos are an attempt to unify view and zoom features, reducing the number of distinct view and zooming modes. They were created during the discussion Writer: Multiple pages per View on the mailing list discuss@ux.openoffice.org.

If the pages won't get any smaller when you move the zoom slider further to the left, it is because your browser is set to display web pages at a certain size. The demos should work properly if you temporarily deactivate this feature.

Please contact me if you've got questions or suggestions.

Oct 21, 2007: Demo 1: Static Window Size

A first attempt to demonstrate how an easy-to-access zoom feature (e.g. using a slider) could replace a dedicated "two pages next to each other" view mode.

See also mailing list posting.

Interactive elements:

document area (scrollable)
horizontal slider (adjusts zoom factor)
on slider: clickable markers (fit height, 100%)
checkbox "connect left and right pages" (For convenience, to avoid having two separate prototypes. Not part of the interface demo as such.)
You can now click anywhere in slider to zoom

Tested browsers:

Safari 3/Mac: OK
Opera 9/Mac/Win: OK
Firefox 2/Mac/Win: OK
MSIE 6/Win, MSIE 7/Win: OK
MSIE 5.5/Mac: doesn't work
probably OK in most modern browsers

Nov 1, 2007: Demo 2: Resizable Window, no Auto-Scaling

Resizing the browser window resizes the demo's OOo Writer "window." This interface demo adheres to the window metaphor. This means that enlarging the window reveals more of its content (Enlarging the window does not scale the content in this demo, see Demo 3 for an example where this happens).

See also mailing list posting.

New in this demo:

Pages are now editable to emphasize that this is an interface demo for edit mode (not print preview).
Slider markers adjust their positions when window is resized (but slider stays where it is [window metaphor]).
New "Entire page" marker replaces "Fit height."
"Fit width" marker replaces "100%."
Markers apply to the dimensions of single pages in normal mode, and to the dimensions of double pages in "facing pages" mode.
Slider function more clearly depicted by (clickable) "small" and "large" pictograms.
"Facing pages" mode (formerly "connect left and right pages") now shows blank pages where appropriate.

Interactive elements:

document area (scrollable, page contents editable)
horizontal slider (adjusts zoom factor)
on slider: clickable markers (entire page, fit width)
left and right of slider: min and max zoom
left of slider: checkbox "facing pages"
You can now click anywhere in slider to zoom

Tested browsers:

Safari 3/Mac: OK
Opera 9/Mac/Win: minor quirks
Firefox 2/Mac/Win: OK
MSIE 7/Win: OK

Try out Demo 2
(my favourite, but for the facing pages checkbox)

Nov 1, 2007: Demo 3: Resizeable, Auto-Scaling Window

Identical to Demo 2, but has an additional auto-scaling feature. When you resize the window, the content scales with the window. This behavior deviates from the window metaphor. (Personally, I prefer Demo 2's behavior, but this page is not the right place for debate.)

See also mailing list posting.

New in this demo:

Contents scale with the window width. Known problem: Doesn't scale properly in smaller window sizes.
You can now click anywhere in slider to zoom

Interactive elements:

document area (scrollable, page contents editable)
horizontal slider (adjusts zoom factor)
on slider: clickable markers (entire page, fit width)
left and right of slider: min and max zoom
left of slider: checkbox "facing pages"

Tested browsers:

Safari 3/Mac: minor quirks
Opera 9/Mac/Win: minor quirks
Firefox 2/Mac/Win: minor quirks
MSIE 7/Win: minor quirks

Nov 3, 2007: Demo 4: Christoph's Idea

This interface demo lets you play around with Christoph Noack's suggestion for dealing with special Viewing and Zooming modes. As you see, the modes still exist, but here, the user can see them all the time. This demo tries to emulate the suggested behaviour. While it isn't 100% exact in doing this, you can still get a feel for it, I think.

See also Christoph's mailing list posting and his Mockup.

New in this demo:

Added working dropdown controls for View and Zoom Modes.
You can now click anywhere in the slider to zoom (I updated this in the other demos, too).

Interactive elements:

document area (scrollable, page contents editable)
dropdown control (left) for view mode selection
dropdown control (right) for zoom mode selection
horizontal slider (clickable, adjusts zoom factor)
left and right of slider: increase and decrease zoom

Tested browsers:

Safari 3/Mac: oddly, stacking only doesn't work if 'one row' was selected before. Select 'facing pages', THEN 'stack' for it to work.
Opera 9/Mac/Win: OK
Firefox 2/Mac/Win: OK
MSIE 7/Win: can't click into slider, please drag slider instead

This page as well as the demos themselves can be freely used, modified and redistributed (2-clause BSD license, view page source for details), with the exception of the third-party slider code, to which other restrictions may apply.
Please also bear in mind that, while this page and the demos use XHTML/CSS, they are not a good place to get inspiration for clean coding. They're abominable hacks.