Skip to content

Commit 26cfdda

Browse files
NETIZEN-11NETIZEN-11
committed
Add RTL support and Persian localization
- Introduce localization section in landscape.yml with RTL configuration - Add Persian translation (fa.json) with category/subcategory names and metadata - Provide documentation for localization schema, RTL implementation, and examples - Include RTL stylesheet and HTML template for testing - Update README in localizations directory with overview and guidelines Signed-off-by: NETIZEN-11 <[email protected]>
1 parent c8c1f05 commit 26cfdda

7 files changed

Lines changed: 2000 additions & 0 deletions

File tree

‎landscape.yml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,38 @@
11
# yaml-language-server: $schema=https://raw.githubusercontent.com/cncf/landscape2/refs/heads/main/docs/config/schema/data.schema.json
22

3+
# Localization and RTL Support Configuration
4+
# This section enables support for multiple languages and right-to-left (RTL) text direction
5+
# For details, see localizations/LOCALIZATION_SCHEMA.md
6+
localization:
7+
enabled: true
8+
# Default language configuration
9+
defaultLanguage: en
10+
languages:
11+
- code: en
12+
name: English
13+
dir: ltr
14+
textAlign: left
15+
enabled: true
16+
# Persian (Farsi) with full RTL support
17+
- code: fa
18+
name: Persian
19+
dir: rtl
20+
textAlign: right
21+
enabled: true
22+
localizationFile: localizations/fa.json
23+
# RTL Support Configuration
24+
rtl:
25+
enabled: true
26+
# When enabled, headings will be right-aligned for RTL languages
27+
alignHeadings: true
28+
# CSS class to apply for RTL styling
29+
rtlClass: rtl-layout
30+
# Apply direction styling to these elements:
31+
appliedElements:
32+
- category_headings
33+
- subcategory_headings
34+
- filter_labels
35+
336
landscape:
437
- category:
538
name: Provisioning

‎localizations/LOCALIZATION_SCHEMA.md‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
# Localization Configuration Schema
2+
3+
This file describes the schema for localization files in the CNCF Cloud Native Landscape.
4+
5+
## File Structure
6+
7+
Each localization file should be named with the language code (e.g., `fa.json` for Persian, `es.json` for Spanish) and placed in the `localizations/` directory.
8+
9+
## JSON Schema
10+
11+
```json
12+
{
13+
"metadata": {
14+
"language": "string (ISO 639-1 code, e.g., 'fa', 'es', 'de')",
15+
"languageName": "string (human-readable language name)",
16+
"dir": "string ('ltr' for left-to-right or 'rtl' for right-to-left)",
17+
"textAlign": "string ('left' for LTR or 'right' for RTL)",
18+
"version": "string (semantic version)",
19+
"description": "string (description of the localization)"
20+
},
21+
"categories": {
22+
"Category Name": {
23+
"name": "string (translated category name)",
24+
"dir": "string ('rtl' or 'ltr')"
25+
}
26+
},
27+
"subcategories": {
28+
"Subcategory Name": {
29+
"name": "string (translated subcategory name)",
30+
"dir": "string ('rtl' or 'ltr')"
31+
}
32+
}
33+
}
34+
```
35+
36+
## Properties
37+
38+
### metadata
39+
- `language`: ISO 639-1 language code (required)
40+
- `languageName`: Descriptive name of the language in English (required)
41+
- `dir`: Text direction - either "rtl" (right-to-left) or "ltr" (left-to-right) (required)
42+
- `textAlign`: CSS text-align value - "right" for RTL or "left" for LTR (required)
43+
- `version`: Version of the localization file following semantic versioning (required)
44+
- `description`: Brief description of what this localization provides (required)
45+
46+
### categories
47+
Each key is the English category name from `landscape.yml`, and the value contains:
48+
- `name`: The translated name of the category
49+
- `dir`: Inherits from metadata but can be overridden per category if needed
50+
51+
### subcategories
52+
Each key is the English subcategory name from `landscape.yml`, and the value contains:
53+
- `name`: The translated name of the subcategory
54+
- `dir`: Inherits from metadata but can be overridden per subcategory if needed
55+
56+
## RTL Support
57+
58+
For right-to-left languages, the rendering system should:
59+
60+
1. **Set the HTML `dir` attribute** to "rtl" when displaying content in RTL languages
61+
2. **Apply right-aligned styling** to headings and text blocks
62+
3. **Mirror layout** where appropriate (e.g., navigation, sidebars)
63+
4. **Flip spacing and margins** for proper visual alignment in RTL mode
64+
65+
### CSS Classes for RTL Support
66+
67+
The following CSS classes should be applied when `dir="rtl"`:
68+
69+
```css
70+
/* Headings (Categories and Subcategories) */
71+
h1[dir="rtl"], h2[dir="rtl"], h3[dir="rtl"] {
72+
text-align: right;
73+
direction: rtl;
74+
unicode-bidi: isolate;
75+
}
76+
77+
/* Paragraphs and text content */
78+
p[dir="rtl"], span[dir="rtl"] {
79+
text-align: right;
80+
direction: rtl;
81+
unicode-bidi: isolate;
82+
}
83+
84+
/* Additional layout adjustments */
85+
[dir="rtl"] {
86+
margin-right: auto;
87+
margin-left: 0;
88+
padding-right: 1em;
89+
padding-left: 0;
90+
}
91+
```
92+
93+
## Currently Supported Languages
94+
95+
- **Persian (fa)**: Full RTL support with comprehensive category and subcategory translations
96+
97+
## Adding a New Language
98+
99+
To add support for a new language:
100+
101+
1. Create a new JSON file in `localizations/` directory with the language code (e.g., `es.json` for Spanish)
102+
2. Include the required metadata fields
103+
3. Translate all category names from the main categories in `landscape.yml`
104+
4. Translate all subcategory names
105+
5. Set the `dir` property to "rtl" for right-to-left languages, "ltr" for left-to-right
106+
6. Set `version` to "1.0.0"
107+
7. Submit a pull request with the new localization file
108+
109+
## Translation Guidelines
110+
111+
### Categories
112+
- Keep translations concise and clear
113+
- Use standard technical terminology in the target language
114+
- Maintain the intent and meaning of the original English category name
115+
116+
### Subcategories
117+
- Consistency: Use the same translated terms across different subcategories
118+
- Context: Consider how the subcategory appears in the landscape hierarchy
119+
- Clarity: Ensure target vocabulary clearly conveys the technical concept
120+
121+
### RTL Language Considerations
122+
- For Persian: Use standard Persian technical terms
123+
- Avoid English acronyms where possible, but if necessary, keep them as-is (they will be rendered in correct reading order with proper bidirectional text)
124+
- Numbers and numeric values should follow standard conventions of the target language
125+
- Symbols: Use culturally appropriate symbols and punctuation
126+
127+
## Usage in Rendering
128+
129+
When rendering the landscape in a specific language:
130+
131+
1. Load the corresponding localization file from `localizations/{lang}.json`
132+
2. Replace English category/subcategory names with translated names from the localization file
133+
3. Apply `dir="rtl"` attribute to the HTML root or appropriate containers if `metadata.dir` is "rtl"
134+
4. Apply CSS classes to ensure proper text alignment and layout mirroring
135+
136+
### Example Implementation
137+
138+
```javascript
139+
// Pseudo-code for rendering with localization
140+
function renderLandscape(language) {
141+
const localization = loadLocalization(`localizations/${language}.json`);
142+
const { metadata, categories, subcategories } = localization;
143+
144+
// Set document direction
145+
document.documentElement.dir = metadata.dir;
146+
document.documentElement.lang = metadata.language;
147+
148+
// Render category
149+
categories.forEach(category => {
150+
const translatedName = categories[category.name]?.name || category.name;
151+
renderCategory(translatedName, metadata.dir);
152+
});
153+
154+
// Render subcategory
155+
subcategories.forEach(subcategory => {
156+
const translatedName = subcategories[subcategory.name]?.name || subcategory.name;
157+
renderSubcategory(translatedName, metadata.dir);
158+
});
159+
}
160+
```
161+
162+
## File Format Guidelines
163+
164+
- Use UTF-8 encoding for all localization files
165+
- Ensure valid JSON with proper escaping
166+
- Include comments explaining any special translation decisions
167+
- Provide a PR description including any notes on translation choices
168+

0 commit comments

Comments
 (0)