Lab 2.1: The Mojibake Rescue

Objective

In this hands-on lab, you will act as a localization engineer diagnosing and repairing a multi-lingual string file that suffered Mojibake (character encoding corruption). You will inspect encoding profiles in Visual Studio Code, re-open mis-interpreted files under their original regional encoding, and re-save them cleanly as universal UTF-8.

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 "Corrupted" Mojibake Asset

When a file written in a legacy regional encoding (like Windows-1252 or ISO-8859-2) is opened by a system expecting UTF-8, special characters and foreign alphabets scramble into garbage text. Let's create the corrupted asset you will rescue.

1. Open VS Code.

2. Inside assets/loc/software/, create a new file named ui_mojibake_sample.json.

3. Copy and paste the following broken code snippet into the file:

JSON

json
{
  "city_name": "ZamoϾ",
  "welcome_title": "Witaj w naszym mieœcie!",
  "btn_confirm": "PotwierdŸ"
}

What happened here? The original Polish text (Zamość, Witaj w naszym mieście!, Potwierdź) was saved using a Central European encoding profile, but VS Code is trying to read the bytes as standard UTF-8 or Windows-1252, causing ś and ź to turn into œ, æ, and Ÿ.

1. Save the file (Cmd + S on macOS / Ctrl + S on Windows).

Step 2: Inspecting Encoding Metadata in VS Code

1. Look at the Status Bar at the bottom right of the VS Code window.

2. Observe the encoding profile indicator (it likely says UTF-8).

3. Notice that while VS Code treats the file as UTF-8, the actual visible letters inside the string values remain scrambled.

Step 3: Re-Open the File with the Correct Legacy Encoding

To fix Mojibake, you must tell VS Code to re-interpret the raw bytes using the file's original character map.

1. Click on the UTF-8 indicator in the bottom-right Status Bar (or press Cmd + Shift + P / Ctrl + Shift + P and type Change File Encoding).

2. Select Reopen with Encoding.

3. In the search box that appears, type ISO-8859-2 (or Central European (ISO 8859-2)).

4. Select ISO-8859-2 and press Enter.

5. Observe the editor view instantly update:

   JSON

   json
   {
     "city_name": "Zamość",
     "welcome_title": "Witaj w naszym mieście!",
     "btn_confirm": "Potwierdź"
   }

   The Polish diacritics (ś, ć, ź) are fully restored!

Step 4: Convert and Save Permanently as Universal UTF-8

Re-opening the file under ISO-8859-2 fixes the view locally, but modern build pipelines expect UTF-8. You must now convert the underlying file bytes to UTF-8.

1. Click the encoding indicator in the Status Bar (which now reads ISO 8859-2).

2. Select Save with Encoding.

3. Type UTF-8 into the search box and press Enter.

4. Save the file (Cmd + S / Ctrl + S).

5. Verify that the Status Bar now explicitly displays UTF-8 and that all Polish characters (ś, ć, ź) remain perfectly rendered on screen.

Step 5: Rename to Clean Production File

1. Right-click ui_mojibake_sample.json in the Explorer panel Rename (or press F2).

2. Rename the file to ui_pl_clean.json.

3. Confirm that the relative path is assets/loc/software/ui_pl_clean.json and the status bar reads UTF-8.

Self-Verification Checklist

Before moving forward, check your cleaned file against these parameters:

• [ ] Character corruption (ZamoϾ) is resolved and correctly renders Zamość.

• [ ] Status bar explicitly reads UTF-8.

• [ ] File contains valid JSON syntax with no red squiggly underlines.

• [ ] Asset is saved as ui_pl_clean.json.