DEV Community

Claire Froelich
Claire Froelich

Posted on

2 1

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 multi-character "words" to be split at newlines. This is OK:  characters are mono-spaced and paragraphs keep an aesthetically pleasing blockiness. Japanese: newlines trump words.

Image description
From Asahi Shimbun (text in bottom section is read top-to-bottom, right-to-left).

Note above how each newline breaks in the same spot, regardless of position in the word. No hyphens necessary in Japanese!

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

For example, this text "Learn body parts":

<h2>体の部分を学ぶ</h2>
Enter fullscreen mode Exit fullscreen mode

Image description

Default "PEZ dispenser" behavior

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.

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

Learn body part
s
Learn body par
ts
Learn body pa
rts
...
Enter fullscreen mode Exit fullscreen mode

Can we agree this is ugly and unreadable?

To prevent PEZ dispensing and force compound characters to stick together in this Japanese title, you'll want to wrap the desired chunks in display: inline-block style.

HTML

<h2>
  <span class="w">体の</span>
  <span class="w">部分を</span>
  <span class="w">学ぶ</span>
</h2>

<!-- 

CSS style:

.w {
  display: inline-block;
}

-->
Enter fullscreen mode Exit fullscreen mode

Image description

Not PEZ dispensing

Much better!

Automate it!

This solution is fine quick fix for the occasional eye-catching title, but requires knowledge of Japanese grammar to know where to put the <span> tags.

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 the pretty Japanese line-wrapping in action on my children's book website: The Power of Vegetables

Deer illustrations in GIFs by Varvara Fomina

This article was originally posted on Medium

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (2)

Collapse
 
kamonwan profile image
Kamonwan Achjanis • Edited

You can also use the built-in JavaScript object Intl.Segmenter to split string into words.

Collapse
 
mike_andreuzza profile image
Michael Andreuzza

super intetesting.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay