Layout modes

In this document
chevron_rightOutside the iframe
chevron_rightIn a config file
chevron_rightRelated events
chevron_rightOutside the iframe
chevron_rightRight to left mode

List of layout modes

Layout modeDescription
SingleOne page at a time
ContinuousAll pages in one continuous, scrollable column
FacingTwo pages at a time
Facing continuousAll pages in two continuous, scrollable columns
CoverTwo pages at a time, but the first page starts on the right column
Cover continuousAll pages in two continuous, scrollable columns, but the first page starts on the right column

Changing layout mode through UI

  • The layout modes UI is shown when you hover the layout button, found on the top tool bar
  • From left to right, the buttons refer to Single, Continuous, Facing, Facing Continuous, Cover and Cover Continuous

Changing layout mode programmatically

Outside the iframe

var currentLayoutMode = myWebViewer.getLayoutMode();
myWebViewer.setLayoutMode(CoreControls.DisplayModes.Single);

In a config file

var currentLayoutMode = readerControl.getLayoutMode();
readerControl.setLayoutMode(CoreControls.DisplayModes.Single);

Each layout mode is listed at CoreControls.DisplayModes.

Outside the iframe

viewerElement.on('layoutModeChanged', function(event, layoutMode) {
  ...
});

Inside a config file

$(document).on('layoutModeChanged', function(event, layoutMode) {
  ...
});

// or

readerControl.docViewer.on('displayModeUpdated', function(event) {
  ...
});

Right to left mode

To set the page rendering mode to "right to left" you can use the setRightToLeftPages function on DocumentViewer.

readerControl.docViewer.setRightToLeftPages(true);

// true if in right to left mode, false otherwise
readerControl.docViewer.getRightToLeftPages();