Localization

Right-to-left support

Fabric comes with an alternate CSS file for pages written in right-to-left (RTL) languages, such as Arabic and Hebrew. This reverses the order of columns in the responsive grid, making it easy to create an RTL layout without writing additional templates. Future versions of Fabric will also reverse some icons and provide additional helper utilities.

Usage

Apply the “dir” attribute to the HTML tag, and reference the RTL version of Fabric.

<html dir="rtl">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="fabric-[version].rtl.min.css">
  </head>
  ...
</html>

Language-optimized fonts

By default, Fabric presents all text using the Western European character set of Segoe UI. For languages with other characters, Fabric will either serve a version of Segoe UI with a different character set or use a system font.

Usage

The HTML “lang” attribute specifies the language of the element's content. This is typically applied to the root HTML element, where it will be inherited by the entire page. In this example the entire page is in Thai.

<html lang="th-TH">...</html>

For pages with content in multiple languages, the “lang” attribute can be applied to individual elements. In this example, a page that is mostly Thai also contains some Vietnamese.

<html lang="th">
  ...
  <section lang="vi">...</section>
</html>

Fabric supports a variety of language codes, which map to the following font stacks:

Language Code Font stack Example text
West European (default) N/A 'Segoe UI', 'Segoe UI Web (West European)' Drag files here to upload
Japanese ja 'Yu Gothic', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI' アップロードするファイルをここにドラッグ
Korean ko 'Malgun Gothic', Gulim, 'Segoe UI' 파일을 업로드하려면 여기로 끌어오세요.
Chinese (simplified) zh-hans 'Microsoft Yahei', Verdana, Simsun, 'Segoe UI' 将文件拖到此处以上传
Chinese (traditional) zh-hant 'Microsoft Jhenghei', Pmingliu, 'Segoe UI' 拖曳檔案到這裡以上傳
Hindi hi 'Nirmala UI', 'Segoe UI' अपलोड करने के लिए फ़ाइलों को यहाँ खींचें
Thai th 'Leelawadee UI Web', 'Kmer UI', 'Segoe UI' ลากไฟล์มาที่นี่เพื่ออัปโหลด
Arabic ar 'Segoe UI Web (Arabic)', 'Segoe UI' اسحب الملفات هنا للتحميل
Bulgarian bg 'Segoe UI Web (Cyrillic)', 'Segoe UI' Плъзнете файловете тук, за да ги качите
Czech cs 'Segoe UI Web (East European)', 'Segoe UI' Sem přetáhněte soubory, které chcete nahrát.
Estonian et 'Segoe UI Web (East European)', 'Segoe UI' Üleslaadimiseks lohistage failid siia
Croatian hr 'Segoe UI Web (East European)', 'Segoe UI' Povucite datoteke ovdje da biste ih prenijeli
Hungarian hu 'Segoe UI Web (East European)', 'Segoe UI' Húzza ide a feltölteni kívánt fájlokat
Lithuanian lt 'Segoe UI Web (East European)', 'Segoe UI' Nusiųstinus failus vilkite čia
Latvian lv 'Segoe UI Web (East European)', 'Segoe UI' Velciet failus uz šejieni, lai augšupielādētu
Polish pl 'Segoe UI Web (East European)', 'Segoe UI' Przeciągnij pliki tutaj, aby je przekazać
Serbian sr-latn 'Segoe UI Web (East European)', 'Segoe UI' Prevucite datoteke ovde da biste ih otpremili
Russian ru 'Segoe UI Web (Cyrillic)', 'Segoe UI' Перетащите сюда файлы для отправки
Ukrainian uk 'Segoe UI Web (Cyrillic)', 'Segoe UI' Перетягніть файли сюди, щоб передати їх
Turkish tr 'Segoe UI Web (East European)', 'Segoe UI' Dosyaları karşıya yüklemek için buraya sürükleyin
Slovak sk 'Segoe UI Web (East European)', 'Segoe UI' Nahrajte súbory presunutím sem
Kazakh kk 'Segoe UI Web (East European)', 'Segoe UI' Файлдарды жүктеп салу үшін осы жерге әкеліңіз
Greek el 'Segoe UI Web (Greek)', 'Segoe UI' Σύρετε αρχεία εδώ για αποστολή
Hebrew he 'Segoe UI Web (Hebrew)', 'Segoe UI' גרור קבצים לכאן כדי להעלות
Vietnamese vi 'Segoe UI Web (Vietnamese)', 'Segoe UI' Kéo tệp vào đây để tải lên

For all languages, if the fonts specified above are unavailable we then fall back to:

-apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif