0
# Localization Data
1

2
Localization strings for CSS terminology used in MDN Web Docs across multiple languages, providing translated descriptions and explanations for CSS concepts.
3

4
## Capabilities
5

6
### CSS Localization Strings
7

8
Access localized strings for CSS terminology across multiple languages.
9

10
```javascript { .api }
11
/**
12
 * CSS localization data with multi-language support
13
 */
14
const css: LocalizationData;
15

16
interface LocalizationData {
17
  [termKey: string]: LocalizationEntry;
18
}
19

20
interface LocalizationEntry {
21
  /** Language code mapped to localized string */
22
  [languageCode: string]: string;
23
}
24
```
25

26
**Usage Examples:**
27

28
```javascript
29
const { l10n } = require('mdn-data');
30

31
// Get localized strings for "absolute length"
32
const absoluteLength = l10n.css.absoluteLength;
33
console.log(absoluteLength);
34
// Output: {
35
//   "de": "absolute {{cssxref(\"length\")}}",
36
//   "en-US": "absolute {{cssxref(\"length\")}}",
37
//   "fr": "une longueur (type {{cssxref(\"length\")}}) absolue",
38
//   "ja": "絶対的な{{cssxref(\"length\", \"長さ\")}}",
39
//   "ru": "абсолютная {{cssxref(\"length\")}}",
40
//   "zh-CN": "绝对 {{cssxref(\"length\")}}"
41
// }
42

43
// Get English translation for a specific term
44
const englishTerm = l10n.css.absoluteLength['en-US'];
45
console.log(englishTerm);
46
// Output: "absolute {{cssxref(\"length\")}}"
47

48
// Get all available languages for a term
49
const availableLanguages = Object.keys(l10n.css.absoluteLength);
50
console.log(availableLanguages);
51
// Output: ["de", "en-US", "fr", "ja", "ru", "zh-CN"]
52
```
53

54
### Language Support
55

56
Get information about supported languages and available terms.
57

58
```javascript { .api }
59
/**
60
 * Helper functions for working with localization data
61
 */
62

63
// Get all available language codes across all terms
64
function getAvailableLanguages(): string[] {
65
  const languages = new Set();
66
  Object.values(l10n.css).forEach(entry => {
67
    Object.keys(entry).forEach(lang => languages.add(lang));
68
  });
69
  return Array.from(languages);
70
}
71

72
// Get all terms available in a specific language
73
function getTermsForLanguage(languageCode: string): string[] {
74
  return Object.entries(l10n.css)
75
    .filter(([termKey, entry]) => languageCode in entry)
76
    .map(([termKey]) => termKey);
77
}
78

79
// Get translation for a term in a specific language with fallback
80
function getTranslation(termKey: string, languageCode: string, fallback: string = 'en-US'): string | undefined {
81
  const entry = l10n.css[termKey];
82
  if (!entry) return undefined;
83
  
84
  return entry[languageCode] || entry[fallback];
85
}
86
```
87

88
### Term Categories
89

90
Access different categories of localized terms.
91

92
```javascript { .api }
93
/**
94
 * Common term categories available in the localization data
95
 */
96

97
// Length and measurement terms
98
const lengthTerms = [
99
  'absoluteLength',
100
  'absoluteLength0ForNone',
101
  'relativeLength',
102
  'lengthPercentage'
103
];
104

105
// Color terms
106
const colorTerms = [
107
  'color',
108
  'colorValue',
109
  'namedColor',
110
  'systemColor'
111
];
112

113
// Layout terms  
114
const layoutTerms = [
115
  'blockSize',
116
  'inlineSize',
117
  'logicalProperty',
118
  'physicalProperty'
119
];
120

121
// Time and animation terms
122
const timeTerms = [
123
  'time',
124
  'duration',
125
  'animationDuration'
126
];
127
```
128

129
**Usage Examples:**
130

131
```javascript
132
// Find all length-related terms in Japanese
133
const japaneseTerms = Object.entries(l10n.css)
134
  .filter(([termKey, entry]) => 'ja' in entry && termKey.includes('Length'))
135
  .map(([termKey, entry]) => ({
136
    term: termKey,
137
    translation: entry.ja
138
  }));
139

140
// Get localized description for computed values
141
const computedValue = l10n.css.computed;
142
console.log(computedValue['fr']);
143
// Output: French translation for "computed value"
144

145
// Find terms with incomplete translations (missing specific language)
146
const incompleteTerms = Object.entries(l10n.css)
147
  .filter(([termKey, entry]) => !('zh-CN' in entry))
148
  .map(([termKey]) => termKey);
149
```
150

151
### Template String Support
152

153
Many localization strings contain template references to other MDN content.
154

155
```javascript { .api }
156
/**
157
 * Template string handling for MDN cross-references
158
 */
159

160
// Common template patterns in localization strings:
161
// {{cssxref("property")}} - Link to CSS property documentation
162
// {{cssxref("property", "display text")}} - Link with custom display text
163
// <code>value</code> - Inline code formatting
164

165
// Example of processing template strings
166
function processTemplateString(template: string): string {
167
  // This would typically be handled by MDN's rendering system
168
  return template
169
    .replace(/{{cssxref\("([^"]+)"\)}}/g, '<a href="/CSS/$1">$1</a>')
170
    .replace(/{{cssxref\("([^"]+)",\s*"([^"]+)"\)}}/g, '<a href="/CSS/$1">$2</a>');
171
}
172

173
const processed = processTemplateString(l10n.css.absoluteLength['en-US']);
174
// Converts: "absolute {{cssxref(\"length\")}}"
175
// To: "absolute <a href=\"/CSS/length\">length</a>"
176
```
177

178
## Data Structure Details
179

180
The localization data provides:
181

182
- **Multi-language Support**: Translations for CSS terminology in multiple languages including English, German, French, Japanese, Russian, and Chinese
183
- **Template Integration**: Strings formatted for MDN's template system with cross-references
184
- **Consistent Terminology**: Standardized translations for CSS concepts across MDN documentation
185
- **Incomplete Coverage**: Not all terms are available in all languages
186

187
## Common Use Cases
188

189
1. **Documentation Localization**: Translating CSS documentation to different languages
190
2. **Educational Tools**: Building CSS learning resources in multiple languages  
191
3. **Developer Tools**: Providing localized error messages and help text
192
4. **Content Management**: Managing translated content for CSS reference materials
193
5. **Template Processing**: Converting MDN template strings to rendered HTML
194
6. **Translation Coverage**: Identifying missing translations for specific languages