×

html · level 3 · unit 7 · lesson 2

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

dir="rtl" turns the page round for languages.

English runs left to right. Arabic, Hebrew, Persian and Urdu are right-to-left: each line starts at the right-hand edge. changes the whole page, not only the letters. Lists, tables and forms all flip round.

For a whole page, set dir="rtl" on <html>, next to lang. For one part in another direction, put dir on that element instead.

Never fake it by lining text up on the right. dir tells the browser, screen readers and search engines how the text really reads.

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="utf-8">
    <title>مخبز الياسمين</title>
  </head>
  <body>
    <h1>مخبز الياسمين</h1>
    <ul>
      <li>خبز</li>
      <li>كعك</li>
    </ul>
  </body>
</html>

Press show my page to see it here.

Run it and look at the list: the bullets sit on the right.