Overview
Internationalization in editors has two layers: UI Localization (translating the interface) and Content Support (allowing users to write in their language).
UI Localization
Ensure all user-facing strings (tooltips, placeholders, menus) are separated from code.
const translations = {
en: {
'placeholder.text': 'Type something...',
'menu.bold': 'Bold',
},
ko: {
'placeholder.text': '내용을 입력하세요...',
'menu.bold': '굵게',
}
};
function t(key, lang) {
return translations[lang][key] || key;
}Text Direction (RTL)
Languages like Arabic and Hebrew are written Right-to-Left.
Best Practice: dir="auto"
Add dir="auto" to your top-level
contenteditable element. The browser will
automatically detect the direction of the
first strong character in a paragraph and
align it accordingly.
Keyboard Layouts
Do not assume Command+B is universally
comfortable or even possible on all layouts.
- Key Codes: Use
event.code(physical key) vsevent.key(character produced). - Configurability: Allow users to remap shortcuts.
- IME: Remember that some keystrokes trigger composition, not direct input (see Input Handling).