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-TH">
...
<section lang="vi-VN">...</section>
</html>
Fabric supports a variety of language codes, which map to the following font stacks:
Language | Code | Font stack |
---|---|---|
Western European (default) | N/A | 'Segoe UI Web Regular', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |
Japanese | ja-JP | YuGothic, "Meiryo UI", Meiryo, "MS Pgothic", Osaka, "Segoe UI", Tahoma, Arial, sans-serif |
Korean | ko-KR | "Malgun Gothic", Gulim, "Segoe UI", Tahoma, Arial, sans-serif |
Chinese (simplified) | ch-ZHS | "Microsoft Yahei", Verdana, Simsun, "Segoe UI", Tahoma, Arial, sans-serif |
Chinese (traditional) | ch-ZHT | "Microsoft Jhenghei", Pmingliu, "Segoe UI", Tahoma, Arial, sans-serif |
Hindi | hi-IN | "Nirmala UI", "Segoe UI", Tahoma, Arial, sans-serif |
Thai | th-TH | 'Leelawadee UI Regular', 'Kmer UI', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |
Arabic | ar | 'Segoe UI Regular Arabic', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |
Bulgarian | bg-BG | 'Segoe UI Regular Cyrillic', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |
Czech | cs-CZ | 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |
Estonian | et-EE | 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |
Croatian | hr-HR | 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |
Hungarian | hu-HU | 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |
Lithuanian | lt-LT | 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |
Latvian (Lettish) | lv-LV | 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |
Polish | pl-PL | 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |
Serbian | lt-sr-SP | 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |
Russian | ru-RU | 'Segoe UI Regular Cyrillic', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |
Ukrainian | uk-UA | 'Segoe UI Regular Cyrillic', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |
Turkish | tr-TR | 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |
Slovak | sk-SK | 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |
Kazakh | kk-KZ | 'Segoe UI Regular EastEuropean', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |
Greek | el-GR | 'Segoe UI Regular Greek', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |
Hebrew | he-IL | 'Segoe UI Regular Hebrew', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |
Vietnamese | vi-VN | 'Segoe UI Regular Vietnamese', 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif |