Korean Word Split Test

Align (left/justify)

Word-break (normal/keep-all)

White-space (normal/nowrap)

Adjust text box size

300

이제 훈민정음을 만드는 것은 처음부터 슬기로 마련하고, 애써서 찾은 것이 아니라 다만 그 (원래에 있는)성음(의 원리)을 바탕으로 이치를 다한 것 뿐이다. (음양의) 이치가 이미 둘이 아니니 어찌 천지 자연, (변화를 주관하는) 귀신과 그 사용을 같이 하지 않을 수 있겠는가? 훈민정음 스물 여덟자는 각각 그 모양을 본떠서 만들었다.

Evaluating keep-all & nowrap

You can see the effect keep-all and nowrap CSS settings have by selecting different options and then adjusting the width of the text box to see how the text wraps:

Align - sets the alignment for the text block to either Left or Justified
Break - sets the word-break setting for the text block to either normal or keep-all
White-space - sets the white-space setting for each individual word to either normal or nowrap
Adjust text box size - slider for increases or decreases the size of the text box

Splitting Korean Words

There are two ways Korean text should be split across lines (based on Cardinal Rules of Korean-Language Layout by Steven Bammel, president of Korean Consulting & Translation Service):

Justified where words are allowed to split anywhere within the word
Aligned left where words are not allowed to split - each word stays together on the same line

The Problem

The default browser action is to split Korean words (as well as Chinese and Japanese) anywhere in the word, which is fine for justified text, but not good for left aligned text. The word-break: keep-all; property, which keeps Korean words from splitting, was added to the CSS3 specification around 2011. As of 2015, all of the latest major browser versions support keep-all.

The problem is the Android internet browser that comes with many smartphones does not get updated the way other apps do. This leaves a number of potential visitors with a browser that doesn’t support keep-all, which could result in some visitors having a different experience from what you have designed.

My Solution

I wrap every Korean word in <span> </span> tags, and style the tags as: white-space: nowrap;. This keeps the words together. I use a JavaScript plugin to add the <span> tags when the page loads.