Hello World

Right-to-left design

All chapters

Part 4 · Design

Right-to-left design

Chapter 18 17 min read 12 sections

You add Arabic to your app. You put dir="rtl" on the <html> element, reload, and most of the page flips on its own. The navigation moves to the right, the text lines up on the right, and the sidebar swaps sides.

Then you look closer. The back arrow still points left, so it now points forward. The search icon sits on top of the text you type, because its padding is on the wrong side. The carousel slides the wrong way. A price in the order summary has its currency on the wrong end. The heading you styled with a little letter-spacing has fallen apart into disconnected letters.

Setting the direction gets you most of the way. This chapter is about the rest: what flips by itself, what you have to flip, what must never flip, and how Arabic and Hebrew text needs handling differently from Latin text. Much of it is inspired by Ahmad Shadeed's excellent RTL Styling 101, which is worth reading in full alongside this chapter.

Keep reading

The rest of this chapter is for readers of the book

Get the book to read the rest of this chapter and every other one, the field guide and the glossary, and to download the whole book as a PDF.

Still to come in this chapter

  • Who reads right to left
  • The whole page reads the other way
  • Set the direction once, in HTML
  • Let the layout flip itself
  • Mirror the icons that point
  • Arabic and Hebrew type
  • Numbers and other left-to-right islands
  • Forms
  • Components that move through space or time
  • Testing right-to-left layouts
  • Checklist
  • Further reading