Handling Wrapping With Japanese (and all CKJ) Text

For most situations, the answer is an easy one:

CSS’s word-break: break-word;
It works well for both Japanese and English.
That’s all you need. This isn’t a recipe website and you don’t need to scroll down.


IE Support

If you need IE support, you won’t be able to use word-break: break-word; You will be stuck with CSS’s line-break: normal; which will split English words right in the middle, but will do an acceptable job with Japanese. This issue can be mitigated by only applying the style when the content is Japanese

Example
Set a lang attribute on the html element with JS:

// Get the language. For this example, we pull the language from the browser
const lang = navigator.language.substring(0, 2);
// Set the language on the <html> element
document.querySelector('html').setAttribute('lang', lang);

Set styles based on the set language

html[lang="ja"] {
  .some-class {
    line-break: normal;
  } 
}

<wbr> element

Another helpful aspect of wrapping Japanese text is the <wbr> element.
The <wbr> element is for “word-break recommendations” which is helpful for recommending where word breaks occur within text and is especially helpful for column headers with multiple Japanese words. I’ve seen this behavior emulated with the following:

split1<mywbr />split2

mywb::after{
  content: "\a"; /* line break */
  white-space: pre;
}

If you have any tips or questions, or if this untested code doesn’t work, leave a comment 🙂


Leave a Reply

Your email address will not be published. Required fields are marked *