bookreader icon indicating copy to clipboard operation
bookreader copied to clipboard

Implemented multilingual support

Open Ayush32-ai opened this issue 4 months ago • 0 comments

This pull request introduces a comprehensive internationalization (i18n) system to the BookReader UI, enabling multi-language support. It refactors all user-facing text strings to use a centralized, key-based translation framework, making the component more accessible and user-friendly for a global audience.

The initial implementation includes full dictionary support for English (en) and German (de).

Key Features & Implementation Centralized i18n Core (src/i18n/index.js): A new I18n class manages language loading, translation lookups (i18n.t()), and variable interpolation (e.g., i18n.t('key', { count: 5 })). It defaults to English if a translation key is missing in the selected language.

Language Dictionaries (src/i18n/languages/): All UI strings are now stored in language-specific files (en.js, de.js). This structure makes it straightforward to add new languages in the future.

UI Integration: Core components like Navbar.js, Toolbar.js, and the SearchView have been updated to replace hardcoded strings with calls to the i18n.t() function.

Configuration Options (options.js):

enableI18n: A new boolean flag (defaulting to true) to enable or disable the i18n system.

interfaceLanguage: Allows developers to explicitly set the UI language (e.g., 'de').

Automatic Language Detection: A new initializeLanguage() utility function automatically sets the language based on user preferences in localStorage or the browser's language settings, falling back to English.

Language Switcher Component (LanguageSwitcher.js): A new, self-contained UI component has been added. While not yet integrated into the toolbar by default, it provides a ready-to-use dropdown for users to switch languages dynamically. It includes styling, accessibility features, and event handling.

Documentation and Demo:

src/i18n/README.md: Comprehensive documentation for the new i18n system.

src/i18n/demo.html: A new demo page to showcase and test the i18n features in isolation.

Changes by File New Files (src/i18n/*):

index.js: Core i18n logic and instance.

languages/en.js, languages/de.js: Translation dictionaries.

LanguageSwitcher.js: Reusable UI component for language selection.

language-switcher.css: Styles for the switcher.

README.md, demo.html, integration-example.js: Documentation and examples.

Modified Files:

src/BookReader.js: Initializes the i18n system based on options.

src/BookReader/Navbar/Navbar.js: Replaced hardcoded labels and titles with i18n keys.

src/BookReader/Toolbar/Toolbar.js: Replaced all UI text in the toolbar and share dialog with i18n keys.

src/BookReader/options.js: Added enableI18n and interfaceLanguage options. Default navigation control labels are now i18n keys.

src/plugins/search/view.js: Updated search results text and button titles to be translatable.

Ayush32-ai avatar Aug 15 '25 09:08 Ayush32-ai