Quick HTML/CSS hack for prettier Japanese titles

As you read this article in English, look at the end of each line of text. You can thank the <space> character for cleanly separating words into unbreakable chunks that aren’t interrupted by newlines. English: words trump newlines.

Japanese does not use spaces (in general). Humans that read Japanese just have a ‘spidey sense’ of where words start and stop based on grammar and context.

For large blocks of text like the body of articles, it is common for “words” to be split at newlines. This is OK — characters are mono-spaced and paragraphs keep an aesthetically pleasing blockiness. Japanese: newlines trump words.

from Asahi Shimbun (text in bottom section is read top-to-bottom, right-to-left)

While “newlines trump words” looks nice in large blocks of text, it looks awkward on lonely one-line text like titles.

Without a space character or hyphen telling the browser where to delimit words, the default behavior is to just pop characters off one-by-one like PEZ candies in a PEZ dispenser.

For example, this text “Learn body parts”:

(gif may take a moment to load)

default “PEZ dispenser” behavior

This is the English equivalent of what’s happening on resize:

Can we agree this is ugly and unreadable?

To prevent PEZ dispensing and force the behavior of “words trump newlines” on this Japanese title, you’ll want to wrap the desired chunks in display: inline-block style.

HTML

CSS

not PEZ dispensing

Much better!

This solution is fine quick fix for the ocassional eye-catching title, but requires knowledge of Japanese grammar to know where to put the spans.

Automate it!

Fortunately there is a cool tool called Budou that automates this formatting. You don’t even have to know Japanese — it uses AI to semantically parse text into words and insert the spans for you (it works for Chinese and Korean too!).

This has been the first of what will probably be many articles on “things I overlooked when translating my website into Japanese”.

See pretty Japanese line-wrapping in action on my children’s book website

Deer illustrations in GIFs by Varvara Fomina

Full stack web developer, full time language geek.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store