The Japanese you read online is typically rendered horizontally and arranged for reading form left-to-right, much like in English. This is great - but there is also another, traditional way of writing Japanese - from right to left, top to bottom from the top right-hand corner of a page (or other point) down.
Typically this pretty vertical arrangement of text is used in books, poetry, newspapers and calligraphy but is generally avoided in print (except newspapers and magazines) and the web. One of the main reasons for its absence on the Internet is that the ability to render the text correctly is still beyond many web browsers.
I thought I’d have a go with using nothing but CSS and sensible markup to see if I could, at least, approximate vertically rendered Japanese text. If you just want to skip ahead, the finished example is here.
As you can see form the example, I built two versions, one using the CSS3 columns directive, and the other in an altogether much more hacky manner. The hack is as follows:
Set the max and min width on a p tag to 1em - This forces it to be roughly one
glyph in width.
In all modern browsers (IE7+, FF 3+, Safari & Chrome), Chinese, Korean and Japanese characters are handled specially - and in specifically, they break quite happily per-glyph.
This means that right away, in my paragraph I had a single row of text.
Deal with Latin characters in the same way, by using the word-wrap:break-word; directive
and adding letter-spacing:0.3em;, I was able to force a latin word to be displayed as a
stacked list of characters.
Float all the p tags to the right, in order to give the desired right-to-left reading pattern.
The biggest drawback of my hack is that you have to make sure you're hard-breaking every vertical line by
closing your p to force a new one, even when semantically, it doesn't make sense to do so.
Because the native CSS3 version will reflow automatically, it's certainly the best bet going forwards.
The finished example is here, feel free to view the source. As you can see, it’s nothing too clever.
Even better is that once the W3C ratifies the CSS3 specifications for dealing with rtl and vertical text and multiple columns you’ll be a able to just write your text and tell it what way to flow.
Using feature detection, it’s possible to switch between this hacky stop-gap layout and the standards compliant CSS-columns way.
The second example in the file uses just the CSS3 directives and the same handling of Latin characters. I don’t view this as a finished solution by any means, but one I’ve been playing with and hope to expand upon in the future.
Do you guys have any suggestions / improvements? Please do share them!