Macho.js - Better CJK text wrapping V0.31

Text wrapping in Chinese or other CJK languages are not as easy as in latin based languages. For example, you may have seen this in a block of text or h1, h2 title:

不 costdown 才會不浪費，才能得到好東
西。

This is quite ugly. It should be re-wrapped to this:

不 costdown 才會不浪費，才能得到
好東西。

In order to do this, we can use <span style="display: inline-block;"> to tag the last three Chinese characters to achieve the goal. This is exactly what Macho.js brings to you, in flavor of jQuery's way.

Macho.js is a jQuery plugin. The interface is simple:

$('p').macho();

Then Macho.js will scan through all the tags you passed to it and do the wrapping.

Wrap rules and examples

The following examples will only wrap when the width is too small to hold the entire strings.

Last Chinese characters will be grouped in 3 (can be customized in option)

寫起來以後自己參考。
-->
寫起來以後自
己參考。      

Long English word will be wrapped, no need to wrap Chinese with it

我喜歡使用photoshop.
-->
我喜歡使用
photoshop.    

Short English word will be treated as Chinese characters

這個plugin真的是太棒了ya!
-->
這個plugin真的是太
棒了ya!

Emotion symbols will be wrapped as whole

這亂七八糟◢▆▅▄▃崩╰(〒皿〒)╯潰▃▄▅▇◣
-->
這亂七八糟
◢▆▅▄▃崩╰(〒皿〒)╯潰▃▄▅▇◣

Usage and API

/* include macho.js in your html header */

$('p').macho();    // Wrapped text default grouped to 3 CJK characters

$('p').macho({
  'length':5,      // Wrapped text grouped to 5 CJK characters
  'inline': false  // Generate <span class="macho"> instead of
});                // <span class="macho" style="display: inline-block;">

Installation and compatibilities

Simply include macho.js into your html file. Remember to set your html encoding to utf8.

Bugs and todos

• Custom span and class name?

• If there is other tags like <strong> <em>, macho.js won't process them

Author

Felix Ren-Chyan Chern 陳仁乾(idryman)

License

BSD license