> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/options/translations-and-languages/rtl-and-non-latin.md).

# Right-to-left and non-Latin text

Right-to-left layout for Arabic and Hebrew storefronts, and what to watch with non-Latin scripts.

The widget supports right-to-left layout and non-Latin scripts. A few settings need attention that a Latin-script store does not have to consider.

## Right-to-left layout

The widget's alignment setting includes a right-to-left option.

**Settings** > **Settings** > **General** > **Widget Settings** > **Alignment** > **Right to left**

This lays out the widget for right-to-left reading. Labels, fields, help text, and swatch rows all flow from right to left.

<table><thead><tr><th width="230">Alignment</th><th>Use for</th></tr></thead><tbody><tr><td><strong>Left</strong></td><td>Left-to-right languages. The default</td></tr><tr><td><strong>Center</strong></td><td>A centered design, in either direction</td></tr><tr><td><strong>Right</strong></td><td>Right-aligned text without changing reading direction</td></tr><tr><td><strong>Right to left</strong></td><td>Arabic, Hebrew, and other right-to-left storefronts</td></tr></tbody></table>

{% hint style="warning" %}
Alignment is **store-wide**. If you sell in both a left-to-right and a right-to-left language, you cannot set alignment per language here. Use [custom CSS](/options/storefront-display-and-design/custom-css.md) based on your theme's own language markers instead.
{% endhint %}

See [Widget behavior](/options/storefront-display-and-design/widget-behavior.md).

## Fonts and scripts

The widget's typography is set store-wide in **Settings** > **Design** > **Typography**. Check that the font you select includes your script.

<table><thead><tr><th width="290">Check</th><th>Why</th></tr></thead><tbody><tr><td>The chosen font includes your script</td><td>Many otherwise excellent fonts have no Arabic, Hebrew, Thai, or CJK glyphs. Missing glyphs fall back to a system font, which looks inconsistent</td></tr><tr><td>Font size suits the script</td><td>CJK and Arabic often need a slightly larger size than Latin at the same nominal value to be equally legible</td></tr><tr><td>Bold and italic exist</td><td>Many non-Latin fonts have no italic at all, and a faked slant looks wrong</td></tr></tbody></table>

See [Borders and typography](/options/storefront-display-and-design/borders-and-typography.md).

## The Personalizer

The Personalizer needs the most attention, because the preview draws the text itself.

<table><thead><tr><th width="290">Setting</th><th>What to watch</th></tr></thead><tbody><tr><td><a href="/options/product-personalizer/layer-settings/fonts.md">Font family</a></td><td>The font must contain your script. Test with real customer names, not placeholder text</td></tr><tr><td><a href="/options/product-personalizer/layer-settings/curve-and-auto-fit.md">Curve</a></td><td>Connected scripts such as Arabic do not bend the way separated letterforms do. Check the result carefully before using curve with Arabic</td></tr><tr><td><a href="/options/product-personalizer/layer-settings/curve-and-auto-fit.md#auto-fit-max-width">Auto-fit max width</a></td><td>Worth turning on. Character widths vary far more across scripts than within Latin</td></tr><tr><td><a href="/options/option-types/shared-settings/limits.md#min-and-max-character">Max character</a></td><td>A character limit means different physical widths in different scripts. Set it for the script your customers use, or use auto-fit as the real constraint</td></tr><tr><td><a href="/options/product-personalizer/layer-settings/text-layers.md#font-size">Font size</a></td><td>Check by eye per script rather than reusing a value that worked for Latin</td></tr></tbody></table>

If you offer personalization in several scripts, create a separate option set for each language group and target it with [country rules](/options/option-sets/assign-to-countries.md), so each one has its own font and limits.

## Input rules

<table><thead><tr><th width="290">Setting</th><th>Behavior with non-Latin text</th></tr></thead><tbody><tr><td><a href="/options/option-types/shared-settings/text-input-rules.md#allowed-value">Allowed value</a></td><td><strong>Letters</strong> means letters, not Latin letters. It does not restrict a customer to the Latin alphabet</td></tr><tr><td><a href="/options/option-types/shared-settings/text-input-rules.md#text-transform">Text transform</a></td><td>Case has no meaning in scripts without upper and lower case, so these settings do nothing there</td></tr><tr><td><a href="/options/option-types/shared-settings/limits.md#min-and-max-character">Character limits</a></td><td>Count characters, so one CJK character counts as one — even though it occupies more width than a Latin one</td></tr></tbody></table>

## The date picker

The calendar has its own language setting, separate from everything else on this page. It supports more than fifty languages, including Arabic, Hebrew, Thai, and several CJK languages.

**Other language** and **Localization** on the option's **Advanced** tab. See [Date and time picker](/options/option-types/input-types/date-and-time-picker.md).

## A checklist for a right-to-left store

{% stepper %}
{% step %}

### Set Alignment to Right to left

**Settings** > **Settings** > **General**.
{% endstep %}

{% step %}

### Choose a font that includes your script

**Settings** > **Design** > **Typography**. If none of the built-in fonts covers your script, upload a custom font.
{% endstep %}

{% step %}

### Translate the widget text

**Settings** > **Translations**. See [Translate widget text](/options/translations-and-languages/translate-widget-text.md).
{% endstep %}

{% step %}

### Translate your option content

In the builder, per option set. See [Translate option content](/options/translations-and-languages/translate-option-content.md).
{% endstep %}

{% step %}

### Set the calendar language on any date option

Per option, on its Advanced tab.
{% endstep %}

{% step %}

### Test a full product page on your storefront

Check a validation error, a swatch row, and any personalization preview.
{% endstep %}
{% endstepper %}