How to make beautiful line breaks in Japanese?

Question

I have a website in English and Japanese. English is displayed perfectly.

There are problems with hyphenation in Japanese. Sometimes hanging 1-2 characters remain on a new line.

I want to manage the hyphenation and put it where I need to.

I split the Japanese text into syllables. https://github.com/google/budou

I unite the syllables with a space \u200A. (thin space) Space selected so that it was the minimum width and was invisible. I hope to get line breaks where this space is.

But line breaks is carried out not by spaces, but by width.

What can you think of for hyphenation management?

Text income from an API, I can’t just insert the <br> tag

score 3 · Accepted Answer · answered Aug 08 '19 at 09:46

I have no experience with Japanese in HTML, but maybe you can use word-break:keep-all;?

According to Mozilla:

keep-all

Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as for normal.

div {
  display:inline-block;
  font-size:30px;
  width:100px;
  border:1px solid black;
}
.break {
  word-break:keep-all;
}

<div>寿司が&#x200a;好き&#x200a;です</div>
<div class="break">寿司が&#x200a;好き&#x200a;です</div>

score 1 · Answer 2 · answered Nov 03 '19 at 03:14

In order to get perfect results from Budou, you should apply display:inline-block to the chunks. The chunk inside an inline block won't be split by line breaks, which makes a widow unlikely to happen.

div {
  display:inline-block;
  font-size:32px;
  width: 100px;
  border:1px solid black;
}
.chunk {
  display: inline-block;
}

<div>天気が良い週末</div>
<div><span class="chunk">天気が</span><span class="chunk">良い</span><span class="chunk">週末</span></div>

How to make beautiful line breaks in Japanese?

2 Answers2