Demonstrates :lang() typography, ruby visibility, locale-aware quotes, and RTL layout.
Each block uses lang to activate script-appropriate font family, line height, and word breaking.
English (default)
The quick brown fox jumps over the lazy dog. Typography adapts automatically based on the language attribute.
Japanese (lang="ja")
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
Chinese (lang="zh")
天地玄黄，宇宙洪荒。日月盈昃，辰宿列张。寒来暑往，秋收冬藏。闰余成岁，律吕调阳。
Korean (lang="ko")
모든 인간은 태어날 때부터 자유로우며 그 존엄과 권리에 있어 동등하다. 인간은 천부적으로 이성과 양심을 부여받았으며 서로 형제애의 정신으로 행동하여야 한다.
Arabic (lang="ar" dir="rtl")
يولد جميع الناس أحراراً متساوين في الكرامة والحقوق. وقد وهبوا عقلاً وضميراً وعليهم أن يعامل بعضهم بعضاً بروح الإخاء.
Hebrew (lang="he" dir="rtl")
כל בני האדם נולדו חופשיים ושווים בכבודם ובזכויותיהם. הם חוננו בתבונה ובמצפון, לפיכך חייבים לנהוג איש ברעהו ברוח של אחווה.
Thai (lang="th")
มนุษย์ทั้งหลายเกิดมามีอิสระและเสมอภาคกันในเกียรติศักดิ์และสิทธิ ต่างมีเหตุผลและมโนธรรม และควรปฏิบัติต่อกันด้วยเจตนารมณ์แห่งภราดรภาพ
Hindi (lang="hi")
सभी मनुष्यों को गौरव और अधिकारों के मामले में जन्मजात स्वतन्त्रता और समानता प्राप्त है। उन्हें बुद्धि और अन्तरात्मा की देन प्राप्त है और परस्पर उन्हें भाईचारे के भाव से बर्ताव करना चाहिये।
Toggle data-ruby on <html> to control ruby annotation display.
Japanese with furigana
漢字の 読み方を 示す例です。
English with ruby (hidden in auto mode)
The element ruby provides phonetic guides.
The <q> element uses CSS quotes to render locale-appropriate quotation marks.
English
She said hello
and welcome to
.the party
German
Sie sagte hallo
und willkommen zur
.Party
French
Elle a dit bonjour
et bienvenue à la
.fête
Japanese
彼女はこんにちは
と
と言いました。パーティー
へようこそ
Russian
Она сказала привет
и добро пожаловать на
.вечеринку
Elements <code>, <kbd>, <samp>, <pre>, and <var> automatically get translate: no.
Press Ctrl+C to copy the output of git status.
The variable x holds the return value of process.exit(0).
npm install vanilla-breeze
Logical CSS properties automatically flip layout for RTL languages. No additional CSS needed.