Luna UI Documentation

Unity's Localization package is integrated with UI Toolkit. Luna UI provides demos, guidelines, and utility functions for using Unity's Localization package.

Don't forget to set the active localization settings.

Create Localization Settings

Refer to localization for more info.

Runtime Style Switching

The LocalizationViewStyleSwitcher component enables runtime font and style switching based on the active locale. This works around Unity's limitation of not being able to change global USS variables at runtime by applying locale-specific USS classes to all UIViews.

Setup

Add the LocalizationViewStyleSwitcher component to a GameObject in your scene (typically on the same GameObject as your LunaUIManager).

Configuration

Locale Class Prefix

The _localeClassPrefix field (default: "locale-") determines the prefix used for locale-specific USS classes. The component automatically generates class names like locale-en, locale-zh-cn, etc., based on the active locale.

How It Works

When the locale changes, LocalizationViewStyleSwitcher:

Removes the previous locale class from all UIViews using LunaUIManager.RemoveClassFromAllUIViews()
Adds the new locale class to all UIViews using LunaUIManager.AddClassToAllUIViews()

The component automatically subscribes to LocalizationSettings.SelectedLocaleChanged and applies the appropriate locale class whenever the locale changes.

USS Class Structure

Create locale-specific styles in your USS files using the generated class names. In this demo, LocalizationViewStyleSwitcher is implemented only for Japanese locale—switching to Japanese changes the font:

css

/* Japanese locale - uses custom font */
.locale-ja {
  --font-black: url("../Fonts/DelaGothicOne-RegularSDF.asset");
  --font-black-italic: url("../Fonts/DelaGothicOne-RegularSDF.asset");
  --font-bold: url("../Fonts/DelaGothicOne-RegularSDF.asset");
  --font-bold-italic: url("../Fonts/DelaGothicOne-RegularSDF.asset");
  --font-light: url("../Fonts/DelaGothicOne-RegularSDF.asset");
  --font-light-italic: url("../Fonts/DelaGothicOne-RegularSDF.asset");
  --font-medium: url("../Fonts/DelaGothicOne-RegularSDF.asset");
  --font-medium-italic: url("../Fonts/DelaGothicOne-RegularSDF.asset");
}

You can add similar styles for other locales (e.g., .locale-en, .locale-zh-cn) as needed.

See Global UIView Registry for details on how AddClassToAllUIViews and RemoveClassFromAllUIViews work.

AutoSizeText Example

The Localization demo includes an AutoSizeText example that demonstrates how auto-sizing text works with localization. This is particularly useful when dealing with different languages that have varying text lengths.

The example shows labels with the auto-size-text USS class that automatically adjust their font size to fit within their containers, ensuring text remains readable across different locales. See Auto Size Text for detailed information on auto-sizing text in UI Toolkit.