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.
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>
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.
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