Overview

This article explains the implementation for dynamically specifying the viewingDirection of the Mirador viewer via URL parameters. This feature allows the same manifest to be displayed left-to-right or right-to-left.

Implementation

1. Retrieving URL Parameters

Retrieve the viewingDirection parameter from the URL and set a default value:

// Get viewing direction from URL parameters
const urlParams = new URLSearchParams(window.location.search);
const viewingDirection = urlParams.get('viewingDirection') || 'right-to-left';

In this implementation, when no parameter is specified, 'right-to-left' is used as the default.

2. Applying to Mirador Configuration

Incorporate the retrieved viewingDirection into the Mirador initial configuration:

const miradorConfig = {
    id: "viewer",
    windows: [{
        id: 'known-window-id',
        loadedManifest: manifestUrl,
        viewingDirection: viewingDirection,  // Use the URL parameter value
    }],
    window: {
        allowClose: false,
        allowMaximize: false,
        allowFullscreen: false,
        hideWindowTitle: true,
    },
    workspaceControlPanel: {
        enabled: false,
    },
};

3. Usage Examples

Right-to-Left Display (Default)

https://example.com/viewer.xml

or

https://example.com/viewer.xml?viewingDirection=right-to-left

Left-to-Right Display

https://example.com/viewer.xml?viewingDirection=left-to-right

XSLT Implementation

When implementing this feature within an XSLT template, add the following code to the script section (mirador.xsl:222-230):

<!-- Get viewing direction from URL parameters -->
const viewingDirection = urlParams.get('viewingDirection') || 'right-to-left';

// Mirador initial configuration
const miradorConfig = {
    id: "viewer",
    windows: [{
        id: 'known-window-id',
        loadedManifest: manifestUrl,
        viewingDirection: viewingDirection,
    }],
    // ... other settings
};

Available Values

The following values can be used for Mirador’s viewingDirection:

  • left-to-right - Pages turn from left to right (e.g., Western books)
  • right-to-left - Pages turn from right to left (e.g., Japanese books, Arabic books)
  • top-to-bottom - Top to bottom (e.g., scrolls)
  • bottom-to-top - Bottom to top

Notes

  1. If viewingDirection is specified in the manifest file, the manifest setting takes priority. This method is primarily effective when the viewing direction is not specified in the manifest file
  2. This setting is applied per window
  3. URL parameters are evaluated only at page load time
  4. If the user changes the viewing direction through the Mirador UI, the URL parameter value is overwritten
  • xsl/mirador.xsl - XSLT transformation template (implementation location)