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