hanzi-rails 0.0.3 → 0.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 3bf6279622dcf65dd2d529e27c7d97d09bd6e8ad
-  data.tar.gz: 39e9a0e9e5973225b15f03371ce6adfec0c27aa6
+  metadata.gz: d376de721042532c4f7c2f99f146461b0cef6899
+  data.tar.gz: 3bcb98fa871757975ad994c6cf79bf9a91a951df
 SHA512:
-  metadata.gz: 2ea058b6c801b4deba45dccb145f0f0709e342206b60d7802af8daac09c9bc3fc64019ce642bf15d04651d5c5c0c9d93b78e0c70ae6e96cca8396065dc2f30d8
-  data.tar.gz: f8222df3a6c61f516c641322e7695dc24bcb4aad7227ec7d56a057d0a08d6de9e9942eafa373d5164ee5d218e883be949d80e3c7015254ef5900222e0adaf47b
+  metadata.gz: eb7000d1153a2c853951ca9ff8e12ae67faea07b4054001f73ec4e92d6001e619620e9ef6acf1f99cb186e5ba4d076ad4589dd5d3c2f6b8de660240cf1ba4d89
+  data.tar.gz: 910609e466d5bad1468a21b281f9fd843996cf52c93ce47198e3a652c08b50b1c4937273e20be683ba08d00024f6b459d7154af1813cde688bc5a24111812f8f

data/app/assets/javascripts/hanzi.js

@@ -1,5 +1,5 @@
 /*!
- * 漢字標準格式 v3.1.0 | MIT License | css.hanzi.co
+ * 漢字標準格式 v3.2.0 | MIT License | css.hanzi.co
  * Han.css: the CSS typography framework optimised for Hanzi
  */
 
@@ -22,7 +22,7 @@ var root = document.documentElement
 
 var body = document.body
 
-var VERSION = '3.1.0'
+var VERSION = '3.2.0'
 
 var ROUTINE = [
   // Initialise the condition with feature-detecting
@@ -33,6 +33,7 @@ var ROUTINE = [
   'renderElem',
   // Handle Biaodian
   //'jinzify',
+  'renderHanging',
   'renderJiya',
   // Address Hanzi and Western script mixed spacing
   'renderHWS',
@@ -147,7 +148,7 @@ var UNICODE = {
   /**
    * CJK-related blocks (CJK相關字符區段)
    *
-   *  1. 中日韓統一表意文字：[\u4E00-\u9FFF]
+   *  1. 中日韓統一意音文字：[\u4E00-\u9FFF]
          Basic CJK unified ideographs
    *  2. 擴展-A區：[\u3400-\u4DB5]
          Extended-A
@@ -163,9 +164,9 @@ var UNICODE = {
          Extended-F (not supported yet)
    *  8. 筆畫區：[\u31C0-\u31E3]
          Strokes
-   *  9. 表意數字「〇」：[\u3007]
+   *  9. 意音數字「〇」：[\u3007]
          Ideographic number zero
-   * 10. 相容表意文字及補充：[\uF900-\uFAFF][\u2F800-\u2FA1D]（不使用）
+   * 10. 相容意音文字及補充：[\uF900-\uFAFF][\u2F800-\u2FA1D]（不使用）
          Compatibility ideograph and supplement (not supported)
 
          12 exceptions:
@@ -175,7 +176,7 @@ var UNICODE = {
 
    * 11. 康熙字典及簡化字部首：[\u2F00-\u2FD5\u2E80-\u2EF3]
          Kangxi and supplement radicals
-   * 12. 表意文字描述字元：[\u2FF0-\u2FFA]
+   * 12. 意音文字描述字元：[\u2FF0-\u2FFA]
          Ideographic description characters
    */
   hanzi: {
@@ -343,7 +344,7 @@ var TYPESET = (function() {
    
   // For words like `it's`, `Jones’s` or `'99`
   var rApo = '[\u0027\u2019]'
-  var rChar = rHan + '|(' + rAlph + '|' + rApo + ')+'
+  var rChar = rHan + '|(?:' + rAlph + '|' + rApo + ')+'
 
   var rZyS = UNICODE.zhuyin.initial
   var rZyJ = UNICODE.zhuyin.medial
@@ -366,35 +367,37 @@ var TYPESET = (function() {
         open:  new RegExp( '(' + rBdOpen + ')', 'g' ),
         close: new RegExp( '(' + rBdClose + ')', 'g' ),
         end:   new RegExp( '(' + rBdEnd + ')', 'g' ),
-        liga:  new RegExp( '(' + rBdLiga + ')', 'g' ),
-
-        group: [
-          new RegExp( '(' + rBdOpen + '|' + rBdMid + '|' + rBdEnd + '){2,}', 'g' ),
-          new RegExp( '(' + rBdLiga + rBdOpen + ')', 'g' )
-        ]
+        liga:  new RegExp( '(' + rBdLiga + ')', 'g' )
       },
 
-      hanzi: {
-        individual: new RegExp( '(' + rHan + ')', 'g' ),
-        group:      new RegExp( '(' + rHan + ')+', 'g' )
-      },
+      hanzi: new RegExp( '(' + rHan + ')', 'g' ),
 
-      word: new RegExp( '(' + rLatn + '|' + rGk + '|' + rCy + '|' + rPt + ')+', 'ig' ),
+      latin:       new RegExp( '(' + rLatn + ')', 'ig' ),
+      ellinika:    new RegExp( '(' + rGk + ')', 'ig' ),
+      kirillica:   new RegExp( '(' + rCy + ')', 'ig' ),
 
-      alphabet: {
-        latin:       new RegExp( '(' + rLatn + ')', 'ig' ),
-        ellinika:    new RegExp( '(' + rGk + ')', 'ig' ),
-        kirillica:   new RegExp( '(' + rCy + ')', 'ig' ),
-        kana:        new RegExp( '(' + rKana + ')', 'g' ),
-        smallkana:   new RegExp( '(' + rKanaS + ')', 'g' ),
-        eonmun:      new RegExp( '(' + rEon + ')', 'g' ),
-        halfeonmun:  new RegExp( '(' + rEonH + ')', 'g' )
-      }
+      kana:        new RegExp( '(' + rKana + '|' + rKanaS + '|' + rKanaH + ')', 'g' ),
+      eonmun:      new RegExp( '(' + rEon + '|' + rEonH + ')', 'g' )
+    },
+
+    /* Word-level selectors (詞級選擇器)
+     */
+    group: {
+      biaodian: [
+        new RegExp( '(' + rBd + '){2,}', 'g' ),
+        new RegExp( '(' + rBdLiga + rBdOpen + ')', 'g' )
+      ],
+      punct:       null,
+      hanzi:       new RegExp( '(' + rHan + ')+', 'g' ),
+      western:     new RegExp( '(' + rLatn + '|' + rGk + '|' + rCy + '|' + rPt + ')+', 'ig' ),
+      kana:        new RegExp( '(' + rKana + '|' + rKanaS + '|' + rKanaH + ')+', 'g' ),
+      eonmun:      new RegExp( '(' + rEon + '|' + rEonH + ')+', 'g' )
     },
 
     /* Punctuation Rules (禁則)
      */
     jinze: {
+      hanging:  new RegExp( '(' + rWhite + '*)(' + rBdClose + '*|[…⋯]*)([、，。．])(?!' + rBdEnd + ')', 'ig' ),
       touwei:   new RegExp( '(' + rBdOpen + '+)(' + rChar + ')(' + rBdEnd + '+)', 'ig' ),
       tou:      new RegExp( '(' + rBdOpen + '+)(' + rChar + ')', 'ig' ),
       wei:      new RegExp( '(' + rChar + ')(' + rBdEnd + '+)', 'ig' ),
@@ -475,10 +478,10 @@ Han.UNICODE.greek    = Han.UNICODE.ellinika
 Han.UNICODE.cyrillic = Han.UNICODE.kirillica
 Han.UNICODE.hangul   = Han.UNICODE.eonmun
 
-Han.TYPESET.char.cjk               = Han.TYPESET.char.hanzi
-Han.TYPESET.char.alphabet.greek    = Han.TYPESET.char.alphabet.ellinika
-Han.TYPESET.char.alphabet.cyrillic = Han.TYPESET.char.alphabet.kirillica
-Han.TYPESET.char.alphabet.hangul   = Han.TYPESET.char.alphabet.eonmun
+Han.TYPESET.char.cjk      = Han.TYPESET.char.hanzi
+Han.TYPESET.char.greek    = Han.TYPESET.char.ellinika
+Han.TYPESET.char.cyrillic = Han.TYPESET.char.kirillica
+Han.TYPESET.char.hangul   = Han.TYPESET.char.eonmun
 
 var $ = {
   // Simplified query selectors which return the node list
@@ -1196,60 +1199,56 @@ return Fibre
 }())
 );
 
+function createBdChar( char ) {
+  var div = $.create( 'div' )
+  var unicode = char.charCodeAt( 0 ).toString( 16 )
+  var clazz = 'biaodian cjk ' + ( char.match( TYPESET.char.biaodian.open ) ? 'open' :
+    char.match( TYPESET.char.biaodian.close ) ? 'close end' :
+    char.match( TYPESET.char.biaodian.end ) ? 'end' : 
+    char.match( new RegExp( '(' + UNICODE.biaodian.liga + ')' )) ? 'liga' : '' )
+
+  div.innerHTML = '<h-char unicode="' + unicode + '" class="' + clazz + '">' + char + '</h-char>'
+  return div.firstChild
+}
+
 $.extend( Fibre.fn, {
   // Force punctuation & biaodian typesetting rules to be applied.
   jinzify: function() {
-    var origFilterOutSelector= this.filterOutSelector
-
-    this.filterOutSelector += ', jinze'
+    var origFilterOutSelector = this.filterOutSelector
+    this.filterOutSelector += ', h-jinze'
 
     this
     .replace(
       TYPESET.jinze.touwei,
       function( portion, match ) {
-        var mat = match[0]
-        var text = $.create( '', mat )
-        var elem = $.create( 'jinze', 'touwei' )
-
-        elem.appendChild( text )
-        return (
-          ( portion.index === 0 && portion.isEnd ) || portion.index === 1
-        ) ? elem : ''
+        var elem = $.create( 'h-jinze', 'touwei' )
+        elem.innerHTML = match[0]
+        return (( portion.index === 0 && portion.isEnd ) || portion.index === 1 )
+          ? elem : ''
       }
     )
     .replace(
       TYPESET.jinze.wei,
       function( portion, match ) {
-        var mat = match[0]
-        var text = $.create( '', mat )
-        var elem = $.create( 'jinze', 'wei' )
-
-        elem.appendChild( text )
+        var elem = $.create( 'h-jinze', 'wei' )
+        elem.innerHTML = match[0]
         return portion.index === 0 ? elem : ''
       }
     )
     .replace(
       TYPESET.jinze.tou,
       function( portion, match ) {
-        var mat = match[0]
-        var text = $.create( '', mat )
-        var elem = $.create( 'jinze', 'tou' )
-
-        elem.appendChild( text )
-        return (
-          ( portion.index === 0 && portion.isEnd ) ||
-          portion.index === 1
-        ) ? elem : ''
+        var elem = $.create( 'h-jinze', 'tou' )
+        elem.innerHTML = match[0]
+        return (( portion.index === 0 && portion.isEnd ) || portion.index === 1 )
+          ? elem : ''
       }
     )
     .replace(
       TYPESET.jinze.middle,
       function( portion, match ) {
-        var mat = match[0]
-        var text = $.create( '', mat )
-        var elem = $.create( 'jinze', 'middle' )
-
-        elem.appendChild( text )
+        var elem = $.create( 'h-jinze', 'middle' )
+        elem.innerHTML = match[0]
         return (( portion.index === 0 && portion.isEnd ) || portion.index === 1 )
           ? elem : ''
       }
@@ -1259,108 +1258,114 @@ $.extend( Fibre.fn, {
     return this
   },
 
-  groupify: function() {
-    this
-    .wrap(
-      TYPESET.char.biaodian.group[ 0 ],
-      $.clone( $.create( 'char_group', 'biaodian cjk' ))
-    )
-    .wrap(
-      TYPESET.char.biaodian.group[ 1 ],
-      $.clone( $.create( 'char_group', 'biaodian cjk' ))
-    )
+  groupify: function( option ) {
+    var origFilterOutSelector = this.filterOutSelector
+    var option = $.extend({
+      biaodian: false,
+    //punct: false,
+      hanzi: false,   // Includes Kana
+      kana: false,
+      eonmun: false,
+      western: false  // Includes Latin, Greek and Cyrillic
+    }, option || {})
+
+    this.filterOutSelector += ', h-hangable, h-char-group'
+
+    if ( option.biaodian ) {
+      this.wrap(
+        TYPESET.group.biaodian[ 0 ], $.clone( $.create( 'h-char-group', 'biaodian cjk' ))
+      ).wrap(
+        TYPESET.group.biaodian[ 1 ], $.clone( $.create( 'h-char-group', 'biaodian cjk' ))
+      )
+    }
+    if ( option.hanzi ) {
+      this.wrap(
+        TYPESET.group.hanzi, $.clone( $.create( 'h-char-group', 'hanzi cjk' ))
+      )
+    }
+    if ( option.western ) {
+      this.wrap(
+        TYPESET.group.western, $.clone( $.create( 'h-word', 'western' ))
+      )
+    }
+    if ( option.kana ) {
+      this.wrap(
+        TYPESET.group.kana, $.clone( $.create( 'h-char-group', 'kana' ))
+      )
+    }
+    if ( option.eonmun ) {
+      this.wrap(
+        TYPESET.group.eonmun, $.clone( $.create( 'h-word', 'eonmun hangul' ))
+      )
+    }
+
+    this.filterOutSelector = origFilterOutSelector
     return this
   },
 
   // Implementation of character-level selector
   // (字元級選擇器)
   charify: function( option ) {
+    var origFilterOutSelector = this.filterOutSelector
     var option = $.extend({
-      hanzi:     'individual',
-                  // individual || group || biaodian || none
-      liga:      'liga',
-                 // liga || none
-      word:      'group',
-                  // group || punctuation || none
-
-      latin:     'group',
-      ellinika:  'group',
-      kirillica: 'group',
-      kana:      'none',
-      eonmun:    'none'
-                  // group || individual || none
+      biaodian: false,
+      punct: false,
+      hanzi: false,     // Includes Kana
+      latin: false,
+      ellinika: false,
+      kirillica: false,
+      kana: false,
+      eonmun: false
     }, option || {})
 
-    // CJK and biaodian
-    if ( option.hanzi === 'group' ) {
-      this.wrap( TYPESET.char.hanzi.group, $.clone( $.create( 'char_group', 'hanzi cjk' )))
-    }
-    if ( option.hanzi === 'individual' ) {
-      this.wrap( TYPESET.char.hanzi.individual, $.clone( $.create( 'char', 'hanzi cjk' )))
-    }
-
-    if ( option.hanzi === 'individual' ||
-         option.hanzi === 'biaodian' ||
-         option.liga  === 'liga'
-    ) {
-      if ( option.hanzi !== 'none' ) {
-        this.replace(
-          TYPESET.char.biaodian.all,
-          function( portion, match ) {
-            var mat = match[0]
-            var text = $.create( '', mat )
-            var  clazz = 'biaodian cjk ' + (
-                  mat.match( TYPESET.char.biaodian.open ) ? 'open' :
-                    mat.match( TYPESET.char.biaodian.close ) ? 'close end' :
-                      mat.match( TYPESET.char.biaodian.end ) ? 'end' : ''
-                )
-            var elem = $.create( 'char', clazz )
-            var unicode = mat.charCodeAt( 0 ).toString( 16 )
-
-            elem.setAttribute( 'unicode', unicode )
-            elem.appendChild( text )
-            return elem
-          }
-        )
-      }
+    this.filterOutSelector += ', h-char'
 
+    if ( option.biaodian ) {
       this.replace(
-        option.liga === 'liga' ? TYPESET.char.biaodian.liga :
-          new RegExp( '(' + UNICODE.biaodian.liga + ')', 'g' ),
-        function( portion, match ) {
-          var mat = match[0]
-          var text = $.create( '', mat )
-          var elem = $.create( 'char', 'biaodian liga cjk' )
-          var unicode = mat.charCodeAt( 0 ).toString( 16 )
-
-          elem.setAttribute( 'unicode', unicode )
-          elem.appendChild( text )
-          return elem
-        }
+        TYPESET.char.biaodian.all,
+        function( portion, match ) {  return createBdChar( match[0] )  }
+      ).replace(
+        TYPESET.char.biaodian.liga,
+        function( portion, match ) {  return createBdChar( match[0] )  }
       )
     }
-
-    // Western languages (word-level)
-    if ( option.word !== 'none' ) {
-      this.wrap( TYPESET.char.word, $.clone( $.create( 'word' )))
+    if ( option.hanzi ) {
+      this.wrap(
+        TYPESET.char.hanzi, $.clone( $.create( 'h-char', 'hanzi cjk' ))
+      )
     }
-
-    // Western languages (alphabet-level)
-    if ( option.latin !== 'none' ||
-         option.ellinika !== 'none' ||
-         option.kirillica !== 'none'
-    ) {
-      this.wrap( TYPESET.char.punct.all, $.clone( $.create( 'char', 'punct' )))
+    if ( option.punct ) {
+      this.wrap(
+        TYPESET.char.punct.all, $.clone( $.create( 'h-char', 'punct' ))
+      )
     }
-    if ( option.latin === 'individual' ) {
-      this.wrap( TYPESET.char.alphabet.latin, $.clone( $.create( 'char', 'alphabet latin' )))
+    if ( option.latin ) {
+      this.wrap(
+        TYPESET.char.latin, $.clone( $.create( 'h-char', 'alphabet latin' ))
+      )
     }
-    if ( option.ellinika === 'individual' ) {
-      this.wrap( TYPESET.char.alphabet.ellinika, $.clone( $.create( 'char', 'alphabet ellinika greek' )))
+    if ( option.ellinika ) {
+      this.wrap(
+        TYPESET.char.ellinika, $.clone( $.create( 'h-char', 'alphabet ellinika greek' ))
+      )
     }
-    if ( option.kirillica === 'individual' ) {
-      this.wrap( TYPESET.char.alphabet.kirillica, $.clone( $.create( 'char', 'alphabet kirillica cyrillic' )))
+    if ( option.kirillica ) {
+      this.wrap(
+        TYPESET.char.kirillica, $.clone( $.create( 'h-char', 'alphabet kirillica cyrillic' ))
+      )
+    }
+    if ( option.kana ) {
+      this.wrap(
+        TYPESET.char.kana, $.clone( $.create( 'h-char', 'kana' ))
+      )
     }
+    if ( option.eonmun ) {
+      this.wrap(
+        TYPESET.char.eonmun, $.clone( $.create( 'h-char', 'eonmun hangul' ))
+      )
+    }
+
+    this.filterOutSelector = origFilterOutSelector
     return this
   }
 })
@@ -1372,6 +1377,7 @@ void [
   'wrap',
   'revert',
   'jinzify',
+  'groupify',
   'charify'
 ].forEach(function( method ) {
   Han.fn[ method ] = function() {
@@ -1385,9 +1391,7 @@ void [
   }
 })
 
-var Hyu = {
-  JS_RENDERED_CLASS: 'hyu-js-rendered'
-}
+var Locale = {}
 
 function writeOnCanvas( text, font ) {
   var canvas = $.create( 'canvas' )
@@ -1406,58 +1410,73 @@ function writeOnCanvas( text, font ) {
   context.strokeStyle = 'black'
   context.fillText( text, 0, 0 )
 
-  return [ canvas, context ]
+  return {
+    node: canvas,
+    context: context,
+    remove: function() {
+      $.remove( canvas, body )
+    }
+  }
 }
 
-function detectFont( treat, control, text ) {
-  var treat = treat
-  var control = control
-  var text = text || '辭Q'
+function compareCanvases( treat, control ) {
   var ret
+  var a = treat.context
+  var b = control.context
 
   try {
-    control = writeOnCanvas( text, control || 'sans-serif' )
-    treat = writeOnCanvas( text, treat )
-
     for ( var j = 1; j <= 20; j++ ) {
       for ( var i = 1; i <= 50; i++ ) {
         if (
-          ret !== 'undefined' &&
-          treat[1].getImageData(i, j, 1, 1).data[3] !== control[1].getImageData(i, j, 1, 1).data[3]
+          typeof ret === 'undefined' &&
+          a.getImageData(i, j, 1, 1).data[3] !== b.getImageData(i, j, 1, 1).data[3]
         ) {
-          ret = true
+          ret = false
           break
-        } else if ( ret ) {
+        } else if ( typeof ret === 'boolean' ) {
           break
         }
 
-        if ( i === 50 && j === 20 && !ret ) {
-          ret = false
+        if ( i === 50 && j === 20 && typeof ret === 'undefined' ) {
+          ret = true
         }
       }
     }
 
     // Remove and clean from memory
-    $.remove( control[0] )
-    $.remove( treat[0] )
-    control = null
+    treat.remove()
+    control.remove()
     treat = null
+    control = null
 
     return ret
-  } catch ( e ) {
-    return false
-  }
+  } catch (e) {}
+  return false
+}
+
+function detectFont( treat, control, text ) {
+  var treat = treat
+  var control = control || 'sans-serif'
+  var text = text || '辭Q'
+  var ret
+
+  control = writeOnCanvas( text, control )
+  treat = writeOnCanvas( text, treat )
+
+  return !compareCanvases( treat, control )
 }
 
-Hyu.detectFont = detectFont
+Locale.writeOnCanvas = writeOnCanvas
+Locale.compareCanvases = compareCanvases
+Locale.detectFont = detectFont
 
-Hyu.support = (function() {
+Locale.support = (function() {
 
   var PREFIX = 'Webkit Moz ms'.split(' ')
 
   // Create an element for feature detecting
   // (in `testCSSProp`)
-  var elem = $.create( '_' )
+  var elem = $.create( 'h-test' )
   var exposed = {}
 
   function testCSSProp( prop ) {
@@ -1576,7 +1595,7 @@ Hyu.support = (function() {
       injectElementWithStyle(
         '@font-face{font-family:test-for-unicode-range;src:local(Arial),local("Droid Sans")}@font-face{font-family:test-for-unicode-range;src:local("Times New Roman"),local(Times),local("Droid Serif");unicode-range:U+270C}',
         function() {
-          ret = !Hyu.detectFont(
+          ret = !Locale.detectFont(
             'test-for-unicode-range', // treatment group
             'Arial, "Droid Sans"',    // control group
             'Q'                       // ASCII characters only
@@ -1594,15 +1613,18 @@ Hyu.support = (function() {
   }
 })()
 
-Hyu.initCond = function( target ) {
+var UA = window.navigator.userAgent || null
+var isIE = /Trident/i.test( UA )
+
+Locale.support['pseudo-element-clipboard'] = isIE ? true : false
+
+Locale.initCond = function( target ) {
   var target = target || root
   var ret = ''
   var clazz
 
-  target.classList.add( Hyu.JS_RENDERED_CLASS )
-
-  for ( var feature in Hyu.support ) {
-    clazz = ( Hyu.support[ feature ] ? '' : 'no-' ) + feature
+  for ( var feature in Locale.support ) {
+    clazz = ( Locale.support[ feature ] ? '' : 'no-' ) + feature
 
     target.classList.add( clazz )
     ret += clazz + ' '
@@ -1611,25 +1633,25 @@ Hyu.initCond = function( target ) {
 }
 
 /**
- * Create and return a new `<ru>` element
+ * Create and return a new `<h-ru>` element
  * according to the given contents
  */
 function createNormalRu( $rb, $rt, attr ) {
-  var $ru = $.create( 'ru' )
+  var $ru = $.create( 'h-ru' )
   var $rt = $.clone( $rt )
   var attr = attr || {}
+  attr.annotation = $rt.textContent
 
   if ( Array.isArray( $rb )) {
     $ru.innerHTML = $rb.map(function( rb ) {
-      if (typeof rb == 'undefined') { return '' }
+      if ( typeof rb === 'undefined' )  return ''
       return rb.outerHTML 
-    }).join('')
+    }).join('') + $rt.outerHTML
   } else {
     $ru.appendChild( $.clone( $rb ))
+    $ru.appendChild( $rt )
   }
 
-  $ru.appendChild( $rt )
-  attr.annotation = $rt.textContent
   $.setAttr( $ru, attr )
   return $ru
 }
@@ -1642,10 +1664,7 @@ function createZhuyinRu( $rb, $rt ) {
   var $rb = $.clone( $rb )
 
   // Create an element to return
-  var $ru     = $.create( 'ru' )
-  var $zhuyin = $.create( 'zhuyin' )
-  var $yin    = $.create( 'yin' )
-  var $diao   = $.create( 'diao' )
+  var $ru = $.create( 'h-ru' )
 
   // #### Explanation ####
   // * `zhuyin`: the entire phonetic annotation
@@ -1670,20 +1689,15 @@ function createZhuyinRu( $rb, $rt ) {
       y ? 'Y' : null
     ].join('')
   })
-  // - <ru>
+  // - <h-ru>
   // -   <rb><rb/> 
-  // -   <zhuyin>
-  // -     <yin></yin>
-  // -     <diao></diao>
-  // -   </zhuyin>
-  // - </ru>
-  $diao.innerHTML = diao
-  $yin.innerHTML = yin
-  $zhuyin.appendChild( $yin )
-  $zhuyin.appendChild( $diao )
-
+  // -   <h-zhuyin>
+  // -     <h-yin></h-yin>
+  // -     <h-diao></h-diao>
+  // -   </h-zhuyin>
+  // - </h-ru>
   $ru.appendChild( $rb )
-  $ru.appendChild( $zhuyin )
+  $ru.innerHTML += '<h-zhuyin><h-yin>' + yin + '</h-yin><h-diao>' + diao + '</h-diao></h-zhuyin>'
 
   // Finally, set up the necessary attribute
   // and return the new `<ru>`
@@ -1699,11 +1713,11 @@ function createZhuyinRu( $rb, $rt ) {
 /**
  * Normalisation rendering mechanism
  */
-$.extend( Hyu, {
+$.extend( Locale, {
 
   // Render and normalise the given context by routine:
   //
-  // > ruby > u, ins > s, del > em
+  // ruby -> u, ins -> s, del -> em
   //
   renderElem: function( context ) {
     this.renderRuby( context )
@@ -1712,8 +1726,8 @@ $.extend( Hyu, {
     this.renderEm( context )
   },
 
-  // Traverse target elements (those with text-decoration
-  // -line) to see if we should address spacing in
+  // Traverse target elements (those with text-decoration-
+  // line) to see if we should address spacing in
   // between for semantic presentation.
   renderDecoLine: function( context, target ) {
     var target = target || 'u, ins'
@@ -1745,21 +1759,26 @@ $.extend( Hyu, {
 
     $target
     .forEach(function( elem ) {
-      var $elem = Fibre( elem )
+      var $elem = Han( elem )
 
-      if ( !Hyu.support.textemphasis ) {
-        $elem.jinzify()
+      if ( !Locale.support.textemphasis ) {
+        $elem
+        .jinzify()
+        .groupify({ western: true })
       }
 
       $elem
-      .groupify()
-      .charify( Hyu.support.textemphasis ? {
-        hanzi:     'biaodian',
-        word:      'punctuation'
+      .groupify({ biaodian:  true })
+      .charify( Locale.support.textemphasis ? {
+        biaodian:  true,
+        punct:     true
       } : {
-        latin:     'individual',
-        ellinika:  'individual',
-        kirillica: 'individual'
+        hanzi:     true,
+        biaodian:  true,
+        punct:     true,
+        latin:     true,
+        ellinika:  true,
+        kirillica: true
       })
     })
   },
@@ -1794,7 +1813,7 @@ $.extend( Hyu, {
       var clazz = ruby.classList
 
       var condition = (
-        !Hyu.support.ruby ||
+        !Locale.support.ruby ||
         clazz.contains( 'zhuyin') ||
         clazz.contains( 'complex' ) ||
         clazz.contains( 'rightangle' )
@@ -1811,8 +1830,8 @@ $.extend( Hyu, {
       $cloned = $.qsa( target, frag )[0]
 
       // 1. Simple ruby polyfill for, um, Firefox;
-      // 2. Zhuyin polyfill for all.
-      if ( !Hyu.support.ruby || clazz.contains( 'zhuyin' )) {
+      // 2. Zhuyin polyfill for all browsers.
+      if ( !Locale.support.ruby || clazz.contains( 'zhuyin' )) {
 
         $
         .tag( 'rt', $cloned )
@@ -1826,16 +1845,16 @@ $.extend( Hyu, {
           do {
             irb = ( irb || rt ).previousSibling
 
-            if ( !irb || irb.nodeName.match( /(r[ubt])/i ))  break 
+            if ( !irb || irb.nodeName.match( /(r\-?[ubt])/i ))  break 
 
             $rb.insertBefore( $.clone( irb ), $rb.firstChild )
             airb.push( irb )
-          } while ( !irb.nodeName.match( /(r[ubt])/i ))
-          // Create a real `<ru>` to append.
+          } while ( !irb.nodeName.match( /(r\-?[ubt])/i ))
+          // Create a real `<h-ru>` to append.
           $ru = clazz.contains( 'zhuyin' ) ?
             createZhuyinRu( $rb, rt ) : createNormalRu( $rb, rt )
 
-          // Replace the ruby text with the new `<ru>`,
+          // Replace the ruby text with the new `<h-ru>`,
           // and remove the original implied ruby base(s)
           try {
             rt.parentNode.replaceChild( $ru, rt )
@@ -1860,7 +1879,7 @@ $.extend( Hyu, {
         //
         // Note that we only support one single Zhuyin
         // container in each complex ruby
-        !function( rtc ) {
+        void function( rtc ) {
           if ( !rtc )  return
 
           $ru = $
@@ -1902,7 +1921,8 @@ $.extend( Hyu, {
                   rb = $ru.shift()
                   aRb.push( rb ) 
                 } catch (e) {}
-                if (typeof rb == 'undefined') { break }
+
+                if ( typeof rb === 'undefined' )  break
                 span += Number( rb.getAttribute( 'span' ) || 1 )
               } while ( rbspan > span )
 
@@ -1911,7 +1931,7 @@ $.extend( Hyu, {
                   console.error( 'An impossible `rbspan` value detected.', ruby ) 
                   return
                 }
-                aRb = $.tag( 'rb', aRb[0] )
+                aRb = $.tag( 'h-rb', aRb[0] )
                 $ru = aRb.slice( rbspan ).concat( $ru ) 
                 aRb = aRb.slice( 0, rbspan )
                 span = rbspan
@@ -1937,12 +1957,10 @@ $.extend( Hyu, {
           $.remove( rtc )
         })
       }
-      // Create a new fake `<hruby>` element so the
+      // Create a new fake `<h-ruby>` element so the
       // style sheets will render it as a polyfill,
       // which also helps to avoid the UA style.
-      //
-      // (The ‘H’ stands for ‘Han’, by the way)
-      hruby = $.create( 'hruby' )
+      hruby = $.create( 'h-ruby' )
       hruby.innerHTML = frag.firstChild.innerHTML
 
       // Copy all attributes onto it
@@ -1960,18 +1978,10 @@ $.extend( Hyu, {
   // * Better error-tolerance
 })
 
-/*!
- * Hyu
- * css.hanzi.co/hyu
- *
- * This module is a subset project of Han,
- * which aims to provide HTML5-ready and
- * Hanzi-optimised style normalisation.
- */
-
-Han.normalize = Hyu
-Han.support = Hyu.support
-Han.detectFont = Hyu.detectFont
+Han.normalize = Locale
+Han.localize = Locale
+Han.support = Locale.support
+Han.detectFont = Locale.detectFont
 
 Han.fn.initCond = function() {
   this.condition.classList.add( 'han-js-rendered' )
@@ -2009,24 +2019,23 @@ $.extend( Han.support, {
   // 'fangsong-gb': Han.detectFont( '"Han Fangsong GB"' )
 })
 
-var QUERY_HWS_AS_FIRST_CHILD = '* > hws:first-child, * > wbr:first-child + hws, wbr:first-child + wbr + hws'
+var QUERY_HWS_AS_FIRST_CHILD = '* > h-hws:first-child, * > wbr:first-child + h-hws, wbr:first-child + wbr + h-hws'
 
 //// Disabled `Node.normalize()` for temp due to
 //// issue below in IE11.
 //// See: http://stackoverflow.com/questions/22337498/why-does-ie11-handle-node-normalize-incorrectly-for-the-minus-symbol
 var isNodeNormalizeNormal = (function() {
-      var div = $.create( 'div' )
-
-      div.appendChild( $.create( '', '0-' ))
-      div.appendChild( $.create( '', '2' ))
-      div.normalize()
+  var div = $.create( 'div' )
 
-      return div.firstChild.length !== 2
-    })(),
+  div.appendChild( $.create( '', '0-' ))
+  div.appendChild( $.create( '', '2' ))
+  div.normalize()
 
-    hws
+  return div.firstChild.length !== 2
+})()
 
-hws = $.create( 'hws' )
+var hws = $.create( 'h-hws' )
+hws.setAttribute( 'hidden', '' )
 hws.innerHTML = ' '
 
 $.extend( Han, {
@@ -2049,9 +2058,14 @@ $.extend( Han, {
     .replace( Han.TYPESET.hws[ mode ][0], '$1<hws/>$2' )
     .replace( Han.TYPESET.hws[ mode ][1], '$1<hws/>$2' )
 
-    // Deal with `' 字'`, `" 字"` => `'字'`, `"字"`
+    // Deal with [' 字'], [" 字"] => ['字'], ["字"]
     .replace( /(['"]+)<hws\/>(.+?)<hws\/>\1/ig, '$1$2$1' )
 
+    // Remove all `<hws/>` pre/post [“字”] and [‘字’]
+    // See: https://github.com/ethantw/Han/issues/59
+    .replace( /<hws\/>([‘“]+)/ig, '$1' )
+    .replace( /([’”]+)<hws\/>/ig, '$1' )
+
     // Convert text nodes `<hws/>` into real element nodes
     .replace( '<hws/>', function() {
       return $.clone( hws )
@@ -2077,7 +2091,7 @@ $.extend( Han, {
       // or a text fragment, but the latter one is
       // not what we want. We don't want comments,
       // either.
-      while ( target.nodeName === 'HWS' ) {
+      while ( target.nodeName === 'H-HWS' ) {
         $.remove( target, parent )
 
         target = parent.parentNode.insertBefore( $.clone( hws ), parent )
@@ -2088,8 +2102,8 @@ $.extend( Han, {
         }
 
         // This is for extreme circumstances, i.e.,
-        // `漢<a><b><c><hws/>zi</c></b></a>` =>
-        // `漢<hws/><a><b><c>zi</c></b></a>`
+        // `漢<a><b><c><h-hws/>zi</c></b></a>` =>
+        // `漢<h-hws/><a><b><c>zi</c></b></a>`
         if ( target !== parent.firstChild ) {
           break
         }
@@ -2112,7 +2126,7 @@ $.extend( Han.fn, {
   renderHWS: function( strict ) {
     Han.renderHWS( this.context, strict )
 
-    this.HWS = $.tag( 'hws', this.context )
+    this.HWS = $.tag( 'h-hws', this.context )
     return this
   },
 
@@ -2124,28 +2138,75 @@ $.extend( Han.fn, {
   }
 })
 
-Han.renderJiya = function( context ) {
+Han.isSpaceFontLoaded = (function() {
+  var div = $.create( 'div' )
+  var ret
+
+  div.innerHTML = '<span>a b</span><span style="font-family: \'Han Space\'">a b</span>'
+  body.appendChild( div )
+  ret = div.firstChild.offsetWidth !== div.lastChild.offsetWidth
+  $.remove( div, body )
+  return ret
+})()
+
+Han.support['han-space'] = Han.isSpaceFontLoaded
+
+Han.renderHanging = function( context ) {
   var context = context || document
-  var finder = [ Han.find( context ) ]
+  var finder = Han.find( context )
 
-  finder[ 0 ].filterOut( 'textarea, code, kbd, samp, pre, jinze, em', true )
-  finder[ 0 ].groupify()
+  finder
+  .filterOut( 'textarea, code, kbd, samp, pre, hangable', true )
+  .replace(
+    TYPESET.jinze.hanging,
+    function( portion, match ) {
+      var elem = $.create( 'h-hangable' )
+      var unicode = match[3].charCodeAt( 0 ).toString( 16 )
+
+      elem.innerHTML = match[2] + '<h-cs biaodian="' + match[3] + '"><h-inner hidden> </h-inner></h-cs><h-char class="biaodian cjk end" unicode="' + unicode + '">' + match[3] + '</h-char>'
+      return portion.index === 0 ? elem : ''
+    }
+  )
+
+  return finder
+}
+
+$.extend( Han.fn, {
+  hanging: null,
+
+  renderHanging: function() {
+    this.hanging = Han.renderHanging( this.context )
+    return this
+  },
 
-  $
-  .qsa( 'char_group.biaodian', context )
+  revertHanging: function() {
+    try {
+      this.hanging.revert( 'all' )
+    } catch ( e ) {}
+    return this
+  }
+})
+
+Han.renderJiya = function( context ) {
+  var context = context || document
+  var finder = Han.find( context )
+
+  finder
+  .filterOut( 'textarea, code, kbd, samp, pre', true )
+  .groupify({ biaodian:  true })
+  .charify({  biaodian:  true })
+
+  // The reason we're doing this instead of using pseudo elements in CSS
+  // is because WebKit has problem rendering pseudo elements containing only 
+  // space.
+  $.qsa( 'h-char.biaodian.open, h-char.biaodian.end', context )
   .forEach(function( elem ) {
-    finder.push(
-      Han( elem )
-      .charify({
-        hanzi:     'biaodian',
-        liga:      'liga',
-        word:      'none',
-        latin:     'none',
-        ellinika:  'none',
-        kirillica: 'none'
-      })
-    )
+    var html = '<h-inner>' + elem.innerHTML + '</h-inner>'
+    var hcs = '<h-cs hidden> </h-cs>'
+    var isOpen = elem.classList.contains( 'open' )
+    elem.innerHTML = isOpen ? hcs + html : html + hcs
   })
+
   return finder
 }
 
@@ -2167,7 +2228,7 @@ $.extend( Han.fn, {
 
 var mdot
 
-mdot = $.create( 'char', 'biaodian cjk middle' )
+mdot = $.create( 'h-char', 'biaodian cjk middle' )
 mdot.setAttribute( 'unicode', 'b7' )
 
 Han.correctBasicBD = function( context, all ) {
@@ -2180,14 +2241,7 @@ Han.correctBasicBD = function( context, all ) {
 
   finder
   .wrap( /\u00B7/g, $.clone( mdot ))
-  .charify({
-    liga:      'liga',
-    hanzi:     'none',
-    word:      'none',
-    latin:     'none',
-    ellinika:  'none',
-    kirillica: 'none'
-  })
+  .charify({ biaodian: true })
 }
 
 $.extend( Han.fn, {
@@ -2206,51 +2260,20 @@ $.extend( Han.fn, {
   }
 })
 
-var QUERY_RU_W_ANNO = 'ru[annotation]'
+var QUERY_RU_W_ANNO = 'h-ru[annotation]'
 var SELECTOR_TO_IGNORE = 'textarea, code, kbd, samp, pre'
 
 var isCombLigaNormal = (function() {
-  var fakeBody = body || $.create( 'body' )
-  var div = $.create( 'div' )
-  var control = $.create( 'span' )
-  var container = body ? div : fakeBody
-  var treat, docOverflow, ret
+  var treat   = Han.localize.writeOnCanvas( '\u0069\u030D', '"Romanization Sans"' )
+  var control = Han.localize.writeOnCanvas( '\uDB80\uDC69', '"Romanization Sans"' )
 
-  if ( !body ) {
-    fakeBody.style.background = ''
-    fakeBody.style.overflow = 'hidden'
-    docOverflow = root.style.overflow
-
-    root.style.overflow = 'hidden'
-    root.appendChild( fakeBody )
-  } else {
-    body.appendChild( container )
-  }
-
-  control.innerHTML = '&#x0069;&#x030D;'
-  control.style.fontFamily = 'sans-serif'
-  control.style.display = 'inline-block'
-
-  treat = $.clone( control )
-  treat.style.fontFamily = '"Romanization Sans"'
-
-  container.appendChild( control )
-  container.appendChild( treat )
-
-  ret = control.clientWidth !== treat.clientWidth
-  $.remove( container )
-
-  if ( !body ) {
-    root.style.overflow = docOverflow
-  }
-  return ret
+  return Han.localize.compareCanvases( treat, control )
 })()
 
 var aCombLiga = Han.TYPESET[ 'display-as' ][ 'comb-liga-pua' ]
 var aInaccurateChar = Han.TYPESET[ 'inaccurate-char' ]
 
-var charCombLiga = $.create( 'char', 'comb-liga' )
-var charCombLigaInner =  $.create( 'inner' )
+var charCombLiga = $.create( 'h-char', 'comb-liga' )
 
 $.extend( Han, {
   isCombLigaNormal: isCombLigaNormal,
@@ -2270,12 +2293,10 @@ $.extend( Han, {
         new RegExp( pattern[ 0 ], 'ig' ),
         function( portion, match ) {
           var ret = $.clone( charCombLiga )
-          var inner = $.clone( charCombLigaInner )
 
           // Put the original content in an inner container
           // for better presentational effect of hidden text
-          inner.innerHTML = match[ 0 ]
-          ret.appendChild( inner )
+          ret.innerHTML = '<h-inner>' + match[0] + '</h-inner>'
           ret.setAttribute( 'display-as', pattern[ 1 ] )
           return portion.index === 0 ? ret : ''
         }