Figures 6 and 7, sideways writing modes, will not work on Chrome. If you want to see what they look like, try viewing the page in Firefox.
People who I deeply admire and whose work I respect have been working on how to layout languages other than English and Latin languages on the web and how we can combine these languages in the same layout.
I will concentrate on direction, writing modes, and text orientation as these are the easiest ones to work with and the ones that will have a big impact on how text appears on your web content.
The following examples, copied from Jen Simmons’ Labs and it shows different writing modes, direction, and vertical alignment.
Figure 1 is the standard that we’re used for English and most European languages, including Greek and Cyrillic. We read from top to bottom and left to right.
Something like figure 2 was my first experience with languages and layouts other than English. Arabic and Hebrew write text from right to left. Figure 2 also shows what English looks like when written from right to left instead of our traditional left to right layout.
The first big surprise came when I saw figure 3 and later in Jen’s presentation When working with languages other than Latin and European languages. We can write languages like Japanese like we write English (horizontal, left to right) or we can write them vertically (vertical top to bottom, right to left).
We can do the same thing while flipping the text to go from left to right. The English reads a little weird but it’s not the target language for this layout.
The sideways text addresses another set of non-western / non-European languages. We can also use sideways text to create interesting layouts for our content.
The final piece of surprise was the vertical layout for languages like Japanese. It’ll work with English and other western languages but, as you can see in figures 8 and 9, it looks odd when used with western languages but looks as intended when used with Japanese and other eastern languages.
You may wonder why we went into this excursion into writing modes, writing directions and text orientations. It’s important to know that we can write text in the direction, writing mode and orientation that is appropriate to the languages you’re working on. We can also use these writing modes combined to do direct quotations in one language versus another. Knowing about this also helps when working with localized landing pages or we need to understand how languages other than English and European languages will impact our layouts.
Again, put the users (not just English speakers and European languages) first.