This page contains intentional internationalization issues for testing and educational purposes only. These examples demonstrate common i18n mistakes like hardcoded text, wrong date/currency formats, missing language attributes, and poor RTL support. Always use proper i18n libraries and follow localization best practices in production.
Internationalization Issues
The following examples demonstrate common i18n problems:
1. Hardcoded Text Strings Hardcoded
Text hardcoded in code instead of using translation keys:
<!-- VIOLATION: Hardcoded text -->
<h1>Welcome to our website</h1>
<p>Click here to continue</p>
<button>Submit</button>
<!-- No way to translate to other languages -->
Welcome to our website
Click here to continue
All text is hardcoded in English only
2. Missing Language Attribute Language
No lang attribute on html element:
<!-- VIOLATION: Missing lang attribute -->
<html>
<!-- Should be <html lang="en"> or appropriate language -->
<!-- Screen readers and browsers can't determine language -->
3. Hardcoded Date Formats Dates
Dates formatted in one locale only:
// VIOLATION: Hardcoded date format
const date = new Date().toLocaleDateString('en-US');
// Always shows: 12/25/2024
// Doesn't adapt to user's locale
12/25/2024
January 15, 2024
2024-12-25
Inconsistent date formats, not localized
4. Hardcoded Currency Formats Currency
Currency always shown in one format:
// VIOLATION: Hardcoded currency
const price = "$99.99";
// Always shows USD with $ symbol
// Doesn't adapt to user's currency
$99.99
USD 99.99
99.99 dollars
Hardcoded USD format, not localized
5. No RTL (Right-to-Left) Support RTL
Layout that doesn't work for RTL languages:
/* VIOLATION: No RTL support */
.menu {
float: left;
margin-left: 20px;
padding-left: 10px;
}
/* Fixed left positioning breaks RTL layout */
Menu Item 1
Menu Item 2
Menu Item 3
Layout doesn't adapt for Arabic, Hebrew, etc.
6. Hardcoded Number Formats Numbers
Numbers formatted in one locale only:
// VIOLATION: Hardcoded number format
const number = "1,234.56";
// US format: 1,234.56
// European format: 1.234,56
// Doesn't adapt to locale
1,234.56
1234.56
US number format hardcoded
7. Missing hreflang Tags hreflang
No language alternatives specified:
<!-- VIOLATION: No hreflang tags -->
<!-- No indication of available language versions -->
<!-- Search engines can't find alternate language pages -->
8. Hardcoded Time Formats Time
Time always shown in one format:
// VIOLATION: Hardcoded time format
const time = "3:45 PM";
// Always 12-hour format
// Doesn't adapt to 24-hour format preference
3:45 PM
15:45
Inconsistent time formats
9. Character Encoding Issues Encoding
Missing or incorrect character encoding:
<!-- VIOLATION: Missing charset -->
<head>
<!-- No <meta charset="UTF-8"> -->
<!-- Special characters may display incorrectly -->
</head>
Special characters: café, résumé, naïve, 北京, Москва
May display incorrectly without proper encoding
10. Hardcoded Address Formats Addresses
Address format that only works for one country:
<!-- VIOLATION: US-only address format -->
<input placeholder="Street Address">
<input placeholder="City">
<input placeholder="State">
<input placeholder="ZIP Code">
<!-- Doesn't work for international addresses -->
US-only format, doesn't work internationally
11. Hardcoded Phone Number Formats Phone
Phone format that only works for one country:
<!-- VIOLATION: US-only phone format -->
<input type="tel" placeholder="(555) 123-4567">
<!-- Doesn't work for international phone numbers -->
US format only, doesn't work for +44 20 7946 0958 or other formats
12. No Pluralization Support Pluralization
Text that doesn't handle plural forms correctly:
// VIOLATION: No pluralization
const message = `You have ${count} item`;
// Always "item" even when count > 1
// Should be "items" for plural
You have 1 item
You have 5 item
Incorrect pluralization
13. Hardcoded Measurement Units Units
Always showing one unit system:
<!-- VIOLATION: Hardcoded units -->
<p>Distance: 5 miles</p>
<p>Temperature: 72°F</p>
<p>Weight: 150 lbs</p>
<!-- Imperial units only, no metric option -->
Distance: 5 miles
Temperature: 72°F
Weight: 150 lbs
Imperial units only, no localization
14. Text Direction Not Specified Direction
Mixed LTR and RTL text without proper direction:
<!-- VIOLATION: No direction specified -->
<p>Hello مرحبا</p>
<!-- Mixed LTR and RTL text may display incorrectly -->
Hello مرحبا
English text with Arabic: مرحبا
Mixed direction text may not display correctly
15. No Language Switcher Switcher
No way for users to change language:
<!-- VIOLATION: No language switcher -->
<!-- Users can't change language -->
<!-- Content always in one language -->
Content is only available in English
No way to switch to other languages
Internationalization Best Practices
The following examples demonstrate proper i18n practices:
1. Translation Keys and Externalization Translation
<!-- Compliant: Using translation keys -->
<h1>{{ t('welcome.title') }}</h1>
<p>{{ t('welcome.description') }}</p>
<button>{{ t('button.submit') }}</button>
// Translation files:
// en.json: { "welcome.title": "Welcome to our website" }
// es.json: { "welcome.title": "Bienvenido a nuestro sitio web" }
// fr.json: { "welcome.title": "Bienvenue sur notre site web" }
Welcome to our website
✓ Text externalized to translation files
✓ Easy to translate to multiple languages
2. Proper Language Attribute Language
<!-- Compliant: Language attribute -->
<html lang="en">
<!-- Or for other languages: -->
<html lang="es"> <!-- Spanish -->
<html lang="fr"> <!-- French -->
<html lang="ar" dir="rtl"> <!-- Arabic, RTL -->
3. Localized Date Formats Dates
// Compliant: Localized date format
const date = new Date();
const formatted = new Intl.DateTimeFormat(navigator.language, {
year: 'numeric',
month: 'long',
day: 'numeric'
}).format(date);
// Adapts to user's locale automatically
✓ Date format adapts to user's locale
4. Localized Currency Formats Currency
// Compliant: Localized currency
const price = new Intl.NumberFormat(navigator.language, {
style: 'currency',
currency: 'USD' // Or detect from user location
}).format(99.99);
// Adapts to locale: $99.99 (US), 99,99 € (EU), etc.
✓ Currency format adapts to user's locale
5. RTL Support RTL
/* Compliant: RTL support */
.menu {
margin-inline-start: 20px;
padding-inline-start: 10px;
}
/* Uses logical properties that adapt to direction */
[dir="rtl"] .menu {
/* RTL-specific styles if needed */
}
مرحبا (Hello in Arabic - RTL)
✓ Layout adapts for RTL languages
6. Localized Number Formats Numbers
// Compliant: Localized number format
const number = new Intl.NumberFormat(navigator.language).format(1234.56);
// US: 1,234.56
// EU: 1.234,56
// Adapts automatically
// Compliant: Localized time format
const time = new Intl.DateTimeFormat(navigator.language, {
hour: 'numeric',
minute: 'numeric',
hour12: true // Adapts to locale preference
}).format(new Date());
// Adapts to 12-hour or 24-hour format
Special characters display correctly: café, résumé, naïve, 北京, Москва, العربية
✓ UTF-8 encoding supports all languages
10. Flexible Address Formats Addresses
<!-- Compliant: Flexible address format -->
<input type="text" name="address" placeholder="{{ t('address.street') }}">
<input type="text" name="city" placeholder="{{ t('address.city') }}">
<input type="text" name="postal" placeholder="{{ t('address.postal') }}">
<select name="country">
<option value="US">United States</option>
<option value="GB">United Kingdom</option>
<!-- Adapts based on country selection -->
</select>
✓ Adapts based on selected country
11. International Phone Number Support Phone
<!-- Compliant: International phone format -->
<input type="tel" name="phone" placeholder="+1 555 123 4567">
<!-- Or use library like libphonenumber -->
<!-- Supports international formats -->
✓ Supports international phone formats
12. Proper Pluralization Pluralization
// Compliant: Proper pluralization
const message = new Intl.PluralRules(navigator.language).select(count);
// Returns: 'zero', 'one', 'two', 'few', 'many', 'other'
const text = t(`items.${message}`, { count });
// Handles all plural forms correctly
// Compliant: Using i18n libraries
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
i18n
.use(initReactI18next)
.init({
resources: {
en: { translation: { welcome: "Welcome" } },
es: { translation: { welcome: "Bienvenido" } }
},
lng: navigator.language,
fallbackLng: 'en'
});
// Or use Intl API for formatting
const formatter = new Intl.DateTimeFormat(navigator.language);
About This Page
This page is designed for:
Testing internationalization analysis tools
Training developers on i18n best practices
Understanding localization requirements
Learning about RTL support and character encoding
Remember: Always externalize text strings, use proper language attributes, format dates/currency/numbers based on user locale, support RTL languages, and provide language switching. Use i18n libraries like i18next, react-intl, or the native Intl API for proper localization.
