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

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales