Skip to content

Choose best language from the user browser #1281

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
htve wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Choose best language from the user browser #1281

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d8552b2
Choose best language from the user browser
htve Jan 6, 2026
80f50c5
Refactor to get the best language for user
htve Jan 6, 2026
c4aadfc
Refactor the function to get the browser language
htve Jan 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 33 additions & 1 deletion ui/i18n/locale_service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const getLang = (): string => {
if (storedLang && storedLang in supportedLanguages) {
return storedLang;
}
return setLang('en');
return setLang(detectUserLanguage());
};

export const setLang = (lang: string): string => {
Expand All @@ -27,6 +27,38 @@ export const setLang = (lang: string): string => {
return lang;
};

const languageMap = new Map<string, string>([
Copy link

@dodoels dodoels Jan 7, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't have to explictly define an utility function to do this which introduces extra complexity when we get rid of Wowhead in the future.

The existing languagedetector API from i18next-browser-languagedetector can already do the job.

Simply do

import LanguageDetector from 'i18next-browser-languagedetector';

export const detectBrowserLang = (): string => {
	const detector = new LanguageDetector();
	const detectedLang = detector.detect() as string;
	const baseLang = detectedLang.split('-')[0].toLowerCase();
	return baseLang in supportedLanguages ? baseLang : 'en'; // this is important, because we define what languages to support and compatible with Wowhead APIs
};

and finally just call this function in getLang()

Copy link

@1337LutZ 1337LutZ Jan 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yea true!

['en-US', 'en'],
['en-GB', 'en'],
['en-AU', 'en'],
['en', 'en'],
['fr-FR', 'fr'],
['fr-CA', 'fr'],
['fr', 'fr'],
['zh-CN', 'cn'],
['zh-Hans', 'cn'],
['zh', 'cn'],
]);

function detectUserLanguage(defaultLang: string = 'en'): string {
const browserLangs = typeof navigator !== 'undefined' && navigator.language ? [navigator.language] : [];
for (const lang of browserLangs) {
const normalized = lang.toLowerCase();
if (normalized in supportedLanguages) {
return normalized;
}
const shortLang = normalized.split('-')[0];
if (shortLang in supportedLanguages) {
return shortLang;
}
const mapped = languageMap.get(normalized) || languageMap.get(shortLang);
if (mapped && mapped in supportedLanguages) {
return mapped;
}
}
return defaultLang in supportedLanguages ? defaultLang : 'en';
}

// Add TypeScript interface for i18next on window
declare global {
interface Window {
Expand Down