UI text flow of various languages

UI text flow of various languages

  • Comments 1

This point came up today in a spec review. The text had language like "put the choices 1-N in rows of three, starting with 1 in the top left corner of the screen, and in rows of three to four going down the screen."

Western Europeans and 'mericans (like me) are accustomed to text layout that looks like this, so the text makes sense to us.

Left-to-right, top-down:

But there's a significant number of people in the world (some of whom would use a product designed to the spec) that read right-to-left.  They would be much more comfortable with a text layout like this:

Right-to-left, top-down:

These people include those who read Arabic or Hebrew, for example.

There's also a third text layout that needs a little introduction.  There are two different layouts for Japanese.

The traditional way to write Japanese is in vertical columns, each of which is read/written top down, and the columns are themselves read right-to-left.  A Japanese would expect a product with a "traditional feel" to be laid out like this:

Top-down, right-to-left:

To digress a little...

If vertical space is constrained (for example, for the sign above a storefront) there might only be room for one character per column:

Top-down, right-to-left, columns are one character high:

To the casual viewer, this is easily confused with right-to-left / top-down.  Japanese is sometimes incorrectly thought of as an RTL language.  There's a similar effect in Western European languages on some hotel signs that have lots of vertical space but only enough horizontal room for one column.

Finally, I should mention that Japanese also has a modern text layout.  For products that are aiming for a modern feel as opposed to a traditional feel, it is usual to write the Japanese characters in left-to-right / top-down layout.

(Footnote: note that single-row-high Japanese text can be read either left-to-right, or right-to-left, depending on context.  There are often clues available to allow a reader to know which way to read; for example, I believe some characters are written differently depending on which layout is in effect.  Also, the font or the setting may give hints as to whether a "traditional" or "modern" feel is intended.)

Leave a Comment
  • Please add 2 and 2 and type the answer here:
  • Post
  • fasza

Page 1 of 1 (1 items)