User Interface

PARAGRAPH SETTINGS ISSUES

Right-to-left Languages

While some languages are read from left to right, others (most notably Arabic) are read from right to left. This affects the order in which readers understand information and directly impacts how content and UI must appear in other contexts so that it can be understood.

Note that this also impacts what people look at first, next, and then last, and so UI that depends on an assumed reading direction can become incomprehensible. See the Arabic Style Guide for more information.

Example: In the images to the right, the left-to-right and right-to-left versions of Facebook Messenger and Twitter are side by side to show how certain design elements must appear differently.

Vertically-oriented Text

Vertical text is rarely used in languages that use Latin alphabet, e.g. English and Spanish. For horizontally-oriented languages, it's hard for users to understand vertical script, because: a) the shape of the word (including the letters and blank spaces in between) are important linguistic cues, and stacking the letters will change its shape; b) there are other elements that do not work in vertical script, such as diacritics, capitalization, and spacing.

Example: In the image to the right are four examples. Both "Awful" (stacked, cursive typeface) and "Bad" (stacked, upper-lower case) are hard to read and should never appear in our UI. "Better" (stacked, all caps) can work in some contexts, like signs and banners. "Best" (rotated 90°, reading bottom to top) is the easiest to read, but still uncomfortable since it would require readers to move their screen or tilt their heads.

Solution: Avoid vertical text if possible for languages that are not meant to be read top-down. If it is truly unavoidable, aim for the "Better" and "Best" versions. NEVER use "Awful" or "Bad" stacked vertical text.

Unnatural Word Splitting

Languages like English and Portuguese have grammar rules to correctly split words.

Example: In the image to the right, the words "organised" and "online" are split randomly, and not based on English grammar, making it very hard to understand.

Solution: Implement a text wrap code to avoid word splitting, implement automatic hyphenation based on grammar rules, or (as a last resort) manually edit the text using tags like \a and \n.

Unclear Reading Order

Typically, the priority of reading order is first line, then column. Thus, text written in side-by-side columns will confuse readers — even if there is a separator — because in horizontal languages, the user's brain is trained to prioritize lines.

Example: The image to the right became a meme because most people would read it "Inhex, haha, lele" before realizing it should be "Inhale, Exhale." There are other similar memes, such as the one for Don't Dead, Open Inside for the same reason.

Solution: Avoid writing text across column separators and follow the word-splitting rules mentioned above.

Page updated

Google Sites

Report abuse