Lab 3.3: Gender Logic & Nested ICU Patterns

Objective

In this hands-on lab, you will act as a senior localization engineer building dynamic UI string assets that require gender agreement and state-based selection. You will refactor rigid English strings into clean ICU select patterns, build a nested ICU message combining select (gender) and plural (item counts), and validate brace syntax and fallback safety inside Visual Studio Code.

Required Setup & Prerequisites

• Editor: Visual Studio Code installed.

• Working Directory: Open your loc_lab working directory in VS Code.

Step-by-Step Instructions

Step 1: Create the Source Asset (en_select_source.json)

1. Open VS Code and navigate to assets/loc/software/.

2. Create a file named en_select_source.json.

3. Paste the following source strings that need dynamic gender and plural handling:

JSON

json
{
  "profile_status": "{gender, select, female {She updated her profile.} male {He updated his profile.} other {They updated their profile.}}",
  "achievement_banner": "{gender, select, female {{count, plural, =0 {She unlocked no achievements.} one {She unlocked # achievement.} other {She unlocked # achievements.}}} male {{count, plural, =0 {He unlocked no achievements.} one {He unlocked # achievement.} other {He unlocked # achievements.}}} other {{count, plural, =0 {No achievements unlocked.} one {1 achievement unlocked.} other {# achievements unlocked.}}}}"
}

1. Save en_select_source.json.

Step 2: Implement Spanish Gender Agreement (es_target.json)

In Spanish, both adjectives (bienvenido / bienvenida) and past participles shift form based on grammatical gender.

1. In assets/loc/software/, create a new file named es_target.json.

2. Write the localized Spanish string for profile_status using ICU select:

   • female: "Ella actualizó su perfil."

   • male: "Él actualizó su perfil."

   • other: "Actualizó su perfil." (Gender-neutral / fallback)

JSON

json
{
  "profile_status": "{gender, select, female {Ella actualizó su perfil.} male {Él actualizó su perfil.} other {Actualizó su perfil.}}"
}

1. Save es_target.json.

Step 3: Construct a Nested ICU Message for French (fr_target.json)

In French, handling achievements requires matching both speaker gender (Il a débloqué vs. Elle a débloquée) and dynamic plural count (1 succès vs. 2 succès).

1. In assets/loc/software/, create fr_target.json.

2. Construct the nested select + plural ICU structure for achievement_banner:

JSON

json
{
  "achievement_banner": "{gender, select, female {{count, plural, =0 {Elle n'a débloqué aucun succès.} one {Elle a débloqué # succès.} other {Elle a débloqué # succès.}}} male {{count, plural, =0 {Il n'a débloqué aucun succès.} one {Il a débloqué # succès.} other {Il a débloqué # succès.}}} other {{count, plural, =0 {Aucun succès débloqué.} one {1 succès débloqué.} other {# succès débloqués.}}}}"
}

1. Save fr_target.json.

Step 4: Audit Nested Brace Symmetry in VS Code

Nested ICU messages contain multiple layers of curly braces. A single missing brace breaks the entire string parser in production.

1. Open fr_target.json in VS Code.

2. Position your cursor next to the very first opening brace { after "achievement_banner": ".

3. Verify the brace matching highlighting across all 3 Depth Levels:

   • Level 1 (Outer Select): {gender, select, ...}

   • Level 2 (Gender Branching): female { ... }, male { ... }, other { ... }

   • Level 3 (Inner Plural Block): {count, plural, =0 { ... } one { ... } other { ... }}

4. Verify that an other fallback block exists at both the select level and the plural level.

Self-Verification Checklist

Check your localized ICU assets against these production criteria before finishing Lab 3.3:

• [ ] es_target.json contains valid ICU select syntax with a mandatory other block.

• [ ] fr_target.json nests {count, plural, ...} inside each branch of {gender, select, ...} without syntax errors.

• [ ] Every opening brace { has a corresponding closing brace } (zero unbalanced brace diagnostics in VS Code).

• [ ] All files are saved using UTF-8 character encoding.