Section:

Right-to-Left Language Support Showcase Demo Code Sample

Requirements
View Demo
Web SDK

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.

License Key

1// ES6 Compliant Syntax
2// Copilot name: GitHub Copilot, version: 1.0.0, model: GPT-4, version: 2024-06, date: 2025-10-21
3// File: showcase-demos/rtl-language-support/index.js
4
5import WebViewer from '@pdftron/webviewer';
6
7const licenseKey = 'YOUR_WEBVIEWER_LICENSE_KEY';
8
9function initializeWebViewer() {
10  WebViewer(
11    {
12      path: '/lib',
13      enableFilePicker: true, // Enable file picker to open files. In WebViewer -> menu icon -> Open File
14      licenseKey: licenseKey, // Replace with your license key
15    },
16    document.getElementById('viewer')
17  ).then((instance) => {
18
19    // Customize the webviewer left panel
20    UIElements.customizeUI(instance);
21
22    // Listen for language change events
23    instance.UI.addEventListener('languageChanged', e => {
24      // Log the previous and new language codes to the console
25      console.log(`Previous language: ${e.detail.prev} -> New language: ${e.detail.next}`);
26    });
27
28    console.log('WebViewer loaded successfully.');
29  }).catch((error) => {
30    console.error('Failed to initialize WebViewer:', error);
31  });
32};
33
34// Function to handle RTL language selection
35window.SelectRTLLanguage = (instance, rtlLanguage, matchingButton) => {
36  UIElements.supportedRtlLanguages.forEach((lang) => {
37    lang.button.className = 'rtl-button';
38  });
39
40  if (rtlLanguage !== null) {
41    // Set the selected rtl language and load the corresponding document
42    matchingButton.className = 'rtl-button-selected';
43    UIElements.selectedRtlLanguage = rtlLanguage;
44    instance.UI.setLanguage(UIElements.selectedRtlLanguage.id);
45    instance.UI.loadDocument(UIElements.selectedRtlLanguage.file);
46  } else {
47    // Reset language to English
48    UIElements.selectedRtlLanguage = null;
49    instance.UI.setLanguage('en');
50  }
51};
52
53//helper function to load the ui-elements.js script
54function loadUIElementsScript() {
55  return new Promise((resolve, reject) => {
56    if (window.UIElements) {
57      console.log('UIElements already loaded');
58      resolve();
59      return;
60    }
61    const script = document.createElement('script');
62    script.src = '/showcase-demos/rtl-language-support/ui-elements.js';
63    script.onload = function () {
64      console.log('✅ UIElements script loaded successfully');
65      resolve();
66    };
67    script.onerror = function () {
68      console.error('Failed to load UIElements script');
69      reject(new Error('Failed to load ui-elements.js'));
70    };
71    document.head.appendChild(script);
72  });
73}
74
75// Load UIElements script first, then initialize WebViewer
76loadUIElementsScript().then(() => {
77  initializeWebViewer();
78}).catch((error) => {
79  console.error('Failed to load UIElements:', error);
80});

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales