Multidirectional/Multilingual Layouts and Bidi Text With CSS Logical Properties (Reference)

Published February 25, 2021 by Tommy George

A few links to material that I’m referencing while putting together some thoughts about doing multi-lingual layouts.

This is not a thought-out blog post, but rather a reference to some thoughts and other articles. I figured I would just post my notes as I make them.

Please reach out with corrections, or additional/better info, if you’d like to contribute!

---

dir HTML prop: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir

• Note the period on the end of the first example sentence in English. 🤔
• The browser will do a lot for text.

Use that over CSS wherever possible!

CSS direction and unicode-bidi mess with how the browser will automatically figure things out for people with certain settings. Avoid these if you can.

• direction https://developer.mozilla.org/en-US/docs/Web/CSS/direction

  • sets the direction of text, table columns, and horizontal overflow.
  • sets the base text direction of block-level elements and the direction of embeddings created by the unicode-bidi property. It also sets the default alignment of text, block-level elements, and the direction that cells flow within a table row.

• unicode-bidi https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi

  • This property is intended for Document Type Definition (DTD) designers. Web designers and similar authors should not override it.
  • together with the direction property, determines how bidirectional text in a document is handled
  • the user-agent uses a complex Unicode algorithm to decide how to display the text. The unicode-bidi property overrides this algorithm and allows the developer to control the text embedding.

Articles:

• Mozilla “RTL Guidelines” (including mirroring layouts)
• Building Multidirectional Layouts
  • Specifically, a comment links to a good visualization of the properties
• Jen Simmons on Writing Modes
• Rachel Andrew on Logical Properties and Values
  • Especially if your layout is using Flexbox and/or Grid, as it should, understanding the directionality of flow (even without Logical Properties) will help you reason about layouts.
• W3C, esp “content whose direction is not known in advance”
• RTL in mobile design
  • Talks about Facebook sign in, digit layouts (phone numbers), icons and button positions
• Parts 1 and 2 of “Building RTL Aware Websites”
• Google’s Material Design docs on mirroring layout and bidirectionality
• MDN Writing Mode
• MDN Flex Direction
• MDN Logical Properties
• CSS Tricks direction
• “Can I Use…?” page for Logical Properties

Misc Notes:

• Keep SOURCE ORDER in mind. E.g., Screen readers, and Semantic HTML.
• “visually first” doesn’t mean first.
• Consider text expansion (translations of content that may be much different in size).
• Consider web fonts compatibility/encoding.
• Dates/times/formatting.