Right-to-Left Language Support Showcase Demo Code Sample

Requirements

These packages are required to use these features in production. Trial keys have unlimited access to all features

Web SDKLive demo

Easily load right-to-left (RTL) language PDFs and Office documents and interact with them directly in your browser, without server-side dependencies.

This demo allows you to:

• Upload your own PDF file.
• Set UI in left-to-right mode.
• Edit in left-to-right mode.
• Test sample documents in Arabic, Hebrew, Persian, and Urdu.
• Download the document.

Implementation steps

To add Left-to-Right Language capability in WebViewer: Step 1: Choose your preferred web stack. Step 2: Add the ES6 JavaScript sample code provided in this guide.

Once you generate your license key, it will automatically be included in your sample code below.

index.js

// ES6 Compliant Syntax
// Copilot name: GitHub Copilot, version: 1.0.0, model: GPT-4, version: 2024-06, date: 2025-10-21
// File: showcase-demos/rtl-language-support/index.js

import WebViewer from '@pdftron/webviewer';

const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';

function initializeWebViewer() {
  WebViewer(
    {
      path: '/lib',
      enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
      licenseKey: licenseKey, // Replace with your license key
    },
    document.getElementById('viewer')
  ).then((instance) => {

    // Customize the webviewer left panel
    UIElements.customizeUI(instance);

    // Listen for language change events
    instance.UI.addEventListener('languageChanged', (previous, next) => {
      // Log the previous and new language codes to the console
      console.log(`Previous language: ${previous} -> New language: ${next}`);
    });

    console.log('WebViewer loaded successfully.');
  }).catch((error) => {
    console.error('Failed to initialize WebViewer:', error);
  });
};

// Function to handle RTL language selection
window.SelectRTLLanguage = (instance, rtlLanguage, matchingButton) => {
  UIElements.supportedRtlLanguages.forEach((lang) => {
    lang.button.className = 'rtl-button';
  });

  if (rtlLanguage !== null) {
    // Set the selected rtl language and load the corresponding document
    matchingButton.className = 'rtl-button-selected';
    UIElements.selectedRtlLanguage = rtlLanguage;
    instance.UI.setLanguage(UIElements.selectedRtlLanguage.id);
    instance.UI.loadDocument(UIElements.selectedRtlLanguage.file);
  } else {
    // Reset language to English
    UIElements.selectedRtlLanguage = null;
    instance.UI.setLanguage('en');
  }
};

//helper function to load the ui-elements.js script
function loadUIElementsScript() {
  return new Promise((resolve, reject) => {
    if (window.UIElements) {
      console.log('UIElements already loaded');
      resolve();
      return;
    }
    const script = document.createElement('script');
    script.src = '/showcase-demos/rtl-language-support/ui-elements.js';
    script.onload = function () {
      console.log('✅ UIElements script loaded successfully');
      resolve();
    };
    script.onerror = function () {
      console.error('Failed to load UIElements script');
      reject(new Error('Failed to load ui-elements.js'));
    };
    document.head.appendChild(script);
  });
}

// Load UIElements script first, then initialize WebViewer
loadUIElementsScript().then(() => {
  initializeWebViewer();
}).catch((error) => {
  console.error('Failed to load UIElements:', error);
});

ui-elements.js

ui-elements.js

// ES6 Compliant Syntax
// Copilot name: GitHub Copilot, version: 1.0.0, model: GPT-4, version: 2024-06, date: 2025-10-21
// File: showcase-demos/rtl-language-support/ui-elements.js

// Class with static UI elements and related functions for the rtl language support demo

class UIElements {

    // The list of registered panels in the webviewer
    static viewerPanels = null;

    // The tab panel, representing the webviewer left panel
    static tabPanel = {
        handle: null,
        dataElement: 'tabPanel'
    };

    // The rtl language support sub-panel to be registered
    static rtlLanguagePanel = {
        handle: null,
        dataElement: 'rtlLanguagePanel',
        render: null,
    };

    static apryseFilesUrl = 'https://apryse.s3.us-west-1.amazonaws.com/public/files/samples/';

    // The list of supported rtl languages along with their sample files
    static supportedRtlLanguages = [
        {
            id: 'ar',
            name: 'العربية',
            englishName: 'Arabic',
            file: `${UIElements.apryseFilesUrl}UDHR-arabic.pdf`,
        },
        {
            id: 'he',
            name: 'עברית',
            englishName: 'Hebrew',
            file: `${UIElements.apryseFilesUrl}UDHR-hebrew.pdf`,
        },
        {
            id: 'fa',
            name: 'فارسی',
            englishName: 'Persian',
            file: `${UIElements.apryseFilesUrl}UDHR-persian.pdf`,
        },
        {
            id: 'ur',
            name: 'اردو',
            englishName: 'Urdu',
            file: `${UIElements.apryseFilesUrl}UDHR-urdu.pdf`,
        },
    ];

    // The currently selected rtl language. Default to the first language in the supportedRtlLanguages list
    static selectedRtlLanguage = UIElements.supportedRtlLanguages[0];

    // Customize the webviewer left panel
    static customizeUI = (instance) => {
        const { UI } = instance;

        // Set the toolbar group to the Annotations tools
        UI.setToolbarGroup('toolbarGroup-Annotate');

        // Close the tab panel (if it's open) for refreshment.
        UI.closeElements([UIElements.tabPanel.dataElement]);

        // Get the list of registered panels in the webviewer
        UIElements.viewerPanels = UI.getPanels();

        // Find the Tab Panel to modify. The rtl language sub-panel will be added to this Tab panel.
        UIElements.tabPanel.handle = UIElements.viewerPanels.find((panel) => panel.dataElement === UIElements.tabPanel.dataElement);

        // Register the rtl language sub-panel
        UIElements.RegisterRtlLanguagePanel(instance);

        // Add the new rtl language sub-panel to list of sub-panels under the Tab Panel
        UIElements.rtlLanguagePanel.handle = { render: UIElements.rtlLanguagePanel.dataElement };
        UIElements.tabPanel.handle.panelsList = [UIElements.rtlLanguagePanel.handle, ...UIElements.tabPanel.handle.panelsList];

        UI.openElements([UIElements.tabPanel.dataElement]);
    };

    // Register the rtl language sub-panel
    static RegisterRtlLanguagePanel = (instance) => {
        UIElements.rtlLanguagePanel.render = UIElements.createRtlLanguagePanelElements(instance);
        instance.UI.addPanel({
            dataElement: UIElements.rtlLanguagePanel.dataElement,
            location: 'left',
            icon: '<svg fill="#000000" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="796 796 200 200" enable-background="new 796 796 200 200" xml:space="preserve"><g><path d="M973.166,818.5H818.833c-12.591,0-22.833,10.243-22.833,22.833v109.333c0,12.59,10.243,22.833,22.833,22.833h154.333		c12.59,0,22.834-10.243,22.834-22.833V841.333C996,828.743,985.756,818.5,973.166,818.5z M896,961.5h-77.167		c-5.973,0-10.833-4.859-10.833-10.833V841.333c0-5.974,4.86-10.833,10.833-10.833H896V961.5z M978.58,872.129		c-0.547,9.145-5.668,27.261-20.869,39.845c4.615,1.022,9.629,1.573,14.92,1.573v12c-10.551,0-20.238-1.919-28.469-5.325		c-7.689,3.301-16.969,5.325-28.125,5.325v-12c5.132,0,9.924-0.501,14.366-1.498c-8.412-7.016-13.382-16.311-13.382-26.78h11.999		c0,8.857,5.66,16.517,14.884,21.623c4.641-2.66,8.702-6.112,12.164-10.351c5.628-6.886,8.502-14.521,9.754-20.042h-49.785v-12		h22.297v-11.986h12V864.5h21.055c1.986,0,3.902,0.831,5.258,2.28C977.986,868.199,978.697,870.155,978.58,872.129z"/><g><g><path d="M839.035,914.262l-4.45,11.258h-15.971l26.355-61.09h15.971l25.746,61.09h-16.583l-4.363-11.258H839.035zM852.475,879.876l-8.902,22.604h17.629L852.475,879.876z"/></g></g></g></svg>',
            title: 'RTL Languages',
            render: () => UIElements.rtlLanguagePanel.render,
        });
    };

    // Create the rtl language panel elements.
    static createRtlLanguagePanelElements = (instance) => {
        let panelDiv = document.createElement('div');
        panelDiv.id = 'rtlLanguagePanel';

        let paragraph = document.createTextNode('Load right to left language PDFs and Office documents and interact with them directly in your browser, without server-side dependencies, thanks to the Apryse Web SDK\'s RTL capabilities.');
        panelDiv.appendChild(paragraph);

        let dividerDiv = document.createElement('div');
        dividerDiv.style.borderTop = '1px solid #ccc';
        dividerDiv.style.margin = '10px 0';
        panelDiv.appendChild(dividerDiv);

        // Languages division title
        let languagesTitle = document.createElement("h3");
        languagesTitle.textContent = "Languages";
        panelDiv.appendChild(languagesTitle);

        // Create a button for each supported rtl language
        UIElements.supportedRtlLanguages.forEach((rtlLanguage) => {
            let button = UIElements.createButton(instance, rtlLanguage);
            rtlLanguage.button = button;
            panelDiv.appendChild(document.createElement("p"));
            panelDiv.appendChild(button);
        });

        panelDiv.appendChild(dividerDiv.cloneNode());

        // Create the reset language button
        let resetButton = UIElements.createButton(instance);
        panelDiv.appendChild(document.createElement("p"));
        panelDiv.appendChild(resetButton);

        // Select the first rtl language by default
        UIElements.selectedRtlLanguage.button.click();

        return panelDiv;
    };

    // Create a button for the given rtl language.
    // If rtlLanguage is null, create the reset language button.
    static createButton = (instance, rtlLanguage = null) => {
        let button = document.createElement("button");
        button.id = (rtlLanguage === null) ? `resetBtn` : `${rtlLanguage.id}Btn`;
        button.textContent = (rtlLanguage === null) ? 'Reset Language' : `${rtlLanguage.name} (${rtlLanguage.englishName})`;
        button.style.width = '100%';
        button.style.backgroundColor = 'blue';
        button.style.color = 'white';
        button.style.border = 'none';
        button.style.padding = '10px 15px';
        button.style.borderRadius = '12px';
        button.onmouseover = () => button.style.opacity = '0.8';
        button.onmouseout = () => button.style.opacity = '1.0';
        button.style.cursor = 'pointer';
        button.onclick = () => window.SelectRTLLanguage(instance, rtlLanguage, button);

        return button;
    };
}

index.css

index.css

/* RTL Language Support Demo Styles */

.rtl-button {
  background-color: blue;
}

.rtl-button-selected {
  background-color: darkblue;
}