Design Systems & Component Libraries · Lekcja

Umiędzynarodowienie (i18n)

Projektuj i twórz komponenty, które płynnie dostosowują się do różnych języków, kultur i preferencji regionalnych.

Lekcja 2 z 411 kroki

Umiędzynarodowienie (i18n) to bezpłatna lekcja Design Systems & Component Libraries na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Design Systems & Component Libraries, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Design Systems & Component Libraries zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

Intro to Internationalization

Internationalization (i18n) is the process of designing and developing your components and applications so they can be easily adapted to different languages, regional differences, and technical requirements of a target country, region, or culture.

Think of it as preparing your product for the world! It's not just about translation, but about making sure your UI works everywhere.

Understanding Locale

A locale is a set of parameters that defines the user's language, country, and any special variant preferences that should be used to present information.

en-US: English (United States)
fr-CA: French (Canada)
es-MX: Spanish (Mexico)

These codes help your system know how to format things correctly.

Translating Text with Keys

Instead of hardcoding text directly into your components, you use translation keys. These keys are like placeholders.

For example, instead of "Hello", you might use a key like "greeting.hello". Your application then looks up the actual translated text for that key based on the user's locale.

Code: Dynamic Greetings

Here's a conceptual example of how translation keys work. The getTranslatedString function would fetch the correct text based on the locale from a translation file.

public class Greeter {
  public static String getTranslatedString(String key, String locale) {
    if (locale.equals("en-US")) {
      if (key.equals("greeting.hello")) return "Hello!";
      if (key.equals("action.welcome")) return "Welcome!";
    } else if (locale.equals("es-MX")) {
      if (key.equals("greeting.hello")) return "¡Hola!";
      if (key.equals("action.welcome")) return "¡Bienvenido!";
    }
    return "Translation missing for " + key;
  }

  public static void main(String[] args) {
    String userLocale = "es-MX"; // Imagine this comes from user settings
    System.out.println(getTranslatedString("greeting.hello", userLocale));
    userLocale = "en-US";
    System.out.println(getTranslatedString("action.welcome", userLocale));
  }
}

Adapting Dates & Times

Dates and times are presented differently around the world. For example, "03/04/2023" means March 4th in the US but April 3rd in many other countries.

Your design system components should use locale-aware formatting utilities to display dates and times correctly for the user's region.

Formatting Numbers & Money

Number formats also vary. The decimal separator can be a dot (.) or a comma (,).

US: 1,234.56
Germany: 1.234,56

Currencies need their symbol and correct placement (e.g., $100.00 vs. 100,00 €).

Handling Text Direction

Most languages read from Left-to-Right (LTR). However, languages like Arabic, Hebrew, and Farsi read from Right-to-Left (RTL).

For RTL languages, the entire layout of your components needs to be mirrored. This includes text alignment, icon placement, and the flow of elements.

Cultural Imagery

Sometimes, images, icons, or even videos need to change based on the user's culture or region.

A picture that resonates well in one country might be confusing or even offensive in another. Your design system should support managing and delivering locale-specific assets.

Design Systems for i18n

A design system is key for good i18n because it provides:

Centralized Translations: All strings managed in one place.
Adaptable Components: Components designed to handle varying text lengths and RTL layouts.
Consistent Formatting: Standardized date, time, and number formatting.

This ensures a consistent global experience.

i18n Quick Check

You're building a button component for your design system. Which of these is the BEST practice for displaying the button's text to support internationalization?

Odpowiedz w interaktywnej lekcji

i18n Recap

We've explored Internationalization (i18n), understanding that it's more than just translation.

We learned about locales and how they define regional preferences.
We saw how to use translation keys for dynamic text.
We discussed adapting dates, numbers, currencies, and layouts (RTL).
And finally, how a design system provides a powerful foundation for building globally-ready components.

Keep these principles in mind for truly global products!

Bezpłatny start

Ucz się Design Systems & Component Libraries dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 12
Lekcje: 48

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Umiędzynarodowienie (i18n)” jest bezpłatna?

Tak — pełny tekst „Umiędzynarodowienie (i18n)” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Design Systems & Component Libraries, przejdź na CoddyKit PRO. Kurs Design Systems & Component Libraries zawiera 4 lekcji w sumie.

Co nauczysz się w „Umiędzynarodowienie (i18n)”?

Projektuj i twórz komponenty, które płynnie dostosowują się do różnych języków, kultur i preferencji regionalnych. Ćwiczysz Design Systems & Component Libraries z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Design Systems & Component Libraries?

Nie wymagamy żadnego doświadczenia. Design Systems & Component Libraries w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Umiędzynarodowienie (i18n)”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Design Systems & Component Libraries?

Tak. Każda lekcja Design Systems & Component Libraries zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Design Systems & Component Libraries