Localize the web PDF document editor

In This Topic

VintaSoft ASP.NET Core PDF Editor Demo provides the localization dictionaries, which allow to localize the web PDF document editor (WebPdfDocumentEditorControlJS) into 45 languages (Afrikaans, Arabic, Armenian, Azerbaijan, Belarusian, Bulgarian, Chinese, Croatian, Czech, Danish, Dutch, English, Estonian, Finnish, French, Georgian, German, Greece, Hebrew, Hindi, Hungarian, Italian, Japanese, Kazakh, Korean, Kyrgyz, Latvian, Lithuanian, Norwegian, Portugese, Romanian, Russian, Slovakian, Slovenian, Spanish, Swahili, Swedish, Tajik, Tatar, Turkish, Turkmen, Ukrainian, Uzbek, Vietnamese, Zulu).
The localization dictionaries can be found in the "<SdkInstallPath>\VintaSoft\Imaging .NET 14.0\Examples\ASP.NET Core\CSharp\AspNetCorePdfEditorDemo\wwwroot\locales\" folder.

If you want to create a custom localization dictionary for the user interface of web document viewer, you should do the following steps:

Define the list of languages for localization
Create dictionaries for localization
Add JavaScript code for UI localization

If you have created the custom localization dictionary for web document viewer and you want to share your dictionary with other users, please send us the created custom dictionary and we will include it into the source codes of VintaSoft ASP.NET Core PDF Editor Demo.

1. Define the list of languages for localization

First, it is necessary to define the list of languages for localization and create a file of localization settings, for example "settings.json". Here is the content of file "settings.json", which defines that the interface can be localized to English and German languages:

JSON

{
  "locales": [ "en", "af", "ar", "bg", "cs", "da", "de", "el", "es", "fi", "fr", "he", "hi", "hr", "hu", "it", "ja", "ko", "nb", "nl", "pt", "ro", "ru", "sv", "tr", "vi", "zh" ]
}

Next, the "settings.json" file must be added to the content of web application, for example placed into folder "locales".

Finally, it is necessary to add the element "link" with information about localization settings onto a web page:

HTML

<link rel="localization" href="/locales/settings.json">

2. Create dictionaries for localization

The dictionary file should have a name, which equals to the browser locale name, and ".txt" extension. For example, the file of English language dictionary must have the name "en.txt", the file of German language dictionary must have the name "de.txt", the file of French language dictionary must have the name "fr.txt", the file of Spanish language dictionary must have the name "es.txt", the file of Italian language dictionary must have the name "it.txt", the file of Portuguese language dictionary must have the name "pt.txt", the file of Russian language dictionary must have the name "ru.txt".

The dictionary file should be located in the same folder with the file "settings.json", in our case this folder is "locales".

For creating English dictionary it is necessary to do the following steps:

Render all elements, which should be localized, on HTML page.
Create an instance of VintasoftLocalizationJS class that allows to localize DOM-elements on HTML page.
Call VintasoftLocalizationJS.getDocumentLocalizationDictionary for getting the English localization dictionary for DOM-elements on HTML page.
Serialize the English localization dictionary using "JSON.stringify" function.
Save serialized JSON object to a file with name "en.txt".

Here is JavaScript code that demonstrates how to create the localization dictionary for a HTML page that contains web document viewer:

JavaScript

...
// create UI localizer
_localizer = new Vintasoft.Shared.VintasoftLocalizationJS();
...

/**
 Creates the dictionary for localization of application UI.
*/
function __createUiLocalizationDictionary() {
    __createDocumentViewerDialogsForLocalization();

    var localizationDict = _localizer.getDocumentLocalizationDictionary();
    var localizationDictString = JSON.stringify(localizationDict, null, '\t');
    console.log(localizationDictString);
}

/**
 Creates the dialogs, which are used in Web PDF Document Editor, for localization.
*/
function __createPdfDocumentEditorDialogsForLocalization() {
    var floatingContainer = document.getElementById("pdfDocumentEditorContainer");

    // create a temporary document password dialog - dialog is necessary for localization purposes only
    var documentPasswordDialog = new Vintasoft.Imaging.UI.Dialogs.WebUiDocumentPasswordDialogJS();
    documentPasswordDialog.render(floatingContainer);
    tempDialogs.push(documentPasswordDialog);

    // create a temporary image selection dialog - dialog is necessary for localization purposes only
    var imageSelectionDialog = new Vintasoft.Imaging.UI.Dialogs.WebImageSelectionDialogJS();
    imageSelectionDialog.render(floatingContainer);
    tempDialogs.push(imageSelectionDialog);

    // create a temporary print images dialog - dialog is necessary for localization purposes only
    var printImagesDialog = new Vintasoft.Imaging.UI.Dialogs.WebPrintImagesDialogJS();
    printImagesDialog.render(floatingContainer);
    tempDialogs.push(printImagesDialog);

    // create a temporary image viewer setting dialog - dialog is necessary for localization purposes only
    var imageViewerSettingsDialog = new Vintasoft.Imaging.UI.Dialogs.WebImageViewerSettingsDialogJS();
    imageViewerSettingsDialog.render(floatingContainer);
    tempDialogs.push(imageViewerSettingsDialog);

    // create a temporary thumbnail viewer setting dialog - dialog is necessary for localization purposes only
    var thumbnailViewerSettingsDialog = new Vintasoft.Imaging.UI.Dialogs.WebThumbnailViewerSettingsDialogJS();
    thumbnailViewerSettingsDialog.render(floatingContainer);
    tempDialogs.push(thumbnailViewerSettingsDialog);

    // create a temporary PDF redaction mark appearance dialog - dialog is necessary for localization purposes only
    var pdfRedactionMarkAppearanceDialog = new Vintasoft.Imaging.Pdf.UI.Dialogs.WebPdfRedactionMarkAppearanceDialogJS();
    pdfRedactionMarkAppearanceDialog.render(floatingContainer);
    tempDialogs.push(pdfRedactionMarkAppearanceDialog);

    // create a temporary PDF image resource dialog - dialog is necessary for localization purposes only
    var pdfImageResourceDialog = new Vintasoft.Imaging.Pdf.UI.Dialogs.WebUiPdfImageResourceDialogJS();
    pdfImageResourceDialog.render(floatingContainer);
    tempDialogs.push(pdfImageResourceDialog);

    // create a temporary PDF/A conversion and validation dialog - dialog is necessary for localization purposes only
    var pdfAConversionAndValidationDialog = new Vintasoft.Imaging.Pdf.UI.Dialogs.WebUiPdfAConversionAndValidationDialogJS();
    pdfAConversionAndValidationDialog.render(floatingContainer);
    tempDialogs.push(pdfAConversionAndValidationDialog);

    // create a temporary PDF document compressor dialog - dialog is necessary for localization purposes only
    var pdfDocumentCompressDialog = new Vintasoft.Imaging.Pdf.UI.Dialogs.WebPdfDocumentCompressorDialogJS();
    pdfDocumentCompressDialog.render(floatingContainer);
    tempDialogs.push(pdfDocumentCompressDialog);

    // create a temporary export file setting dialog - dialog is necessary for localization purposes only
    var exportFileSettingsDialog = new Vintasoft.Imaging.UI.Dialogs.WebExportFileSettingsDialogJS();
    exportFileSettingsDialog.render(floatingContainer);
    tempDialogs.push(exportFileSettingsDialog);
    
    // create a temporary thumbnail viewer context menu panel - panel is necessary for localization purposes only
    var thumbnailViewerContextMenu = new Vintasoft.Imaging.UI.UIElements.WebThumbnailViewerContextMenuJS(_pdfDocumentEditor._thumbnailViewer, {});
    thumbnailViewerContextMenu.render(floatingContainer);
    tempDialogs.push(thumbnailViewerContextMenu);
}

For creating German (or other non English) dictionary it is necessary to do the following steps:

Use the English localization dictionary as a template for German localization dictionary, i.e. copy "en.txt" file into "de.txt" file
Translate text values from English language to German language in "de.txt" file.

Here is an example of simple dictionary file:

JSON

{
        "documentViewer": {
                "fileLabel": {
                        "text": "File"
                },
                "viewLabel": {
                        "text": "View"
                },
                "toolsLabel": {
                        "text": "Tools"
                },
                "annotationsLabel": {
                        "text": "Annotations"
                },
                "uploadFileButton": {
                        "title": "Upload and open file"
                },
                "previousUploadFilesButton": {
                        "title": "Previously Uploaded Files"
                },
                "printImagesButton": {
                        "title": "Print images"
                },
                "downloadFileButton": {
                        "title": "Download image file"
                },
                ...
        }
}

3. Add JavaScript code for UI localization

The VintasoftLocalizationJS class provides functionality for localization of DOM elements and constant strings.

Here is JavaScript code that demonstrates how to enable localization of web document viewer in web application:

JavaScript

/**
 Enables the localization of application UI.
*/
function __enableUiLocalization() {
    // if localizer is ready (localizer loaded localization dictionary)
    if (_localizer.get_IsReady()) {
        // localize DOM-elements of web page
        _localizer.localizeDocument();
    }
    // if localizer is NOT ready
    else
        // wait when localizer will be ready
        Vintasoft.Shared.subscribeToEvent(_localizer, "ready", function () {
            // localize DOM-elements of web page
            _localizer.localizeDocument();
        });

    // subscribe to the "dialogShown" event of document viewer
    Vintasoft.Shared.subscribeToEvent(_docViewer, "dialogShown", function (event, data) {
        _localizer.localizeDocument();
    });
}

Send Feedback