カーニング調整するやつ

ざっくり簡易的にカーニング調整するJS書いた

• 文頭のカッコ始まり
• 改行後の文頭のカッコ始まり
• 、「 とか文字間が広いやつを狭める
• 」、「 みたいな3文字のやつにも適応させる
• 文頭以外の単一約物にはアテない
• 引用符 “” '’ は無視した

くらいのものです。

/**
 * CSS設定
 * @type {{first: string, rspace: string, rspace2: string}}
 */
var _defaultCSS = {
  first : "-.5em",
  rspace : "-.75em",
  rspace2: "-.5em"
};

/**
 * カーニングのやつ
 * @param $target
 */
var _kerning = function($target){
  $target.each(function(){
    var __$target = $(this);

    // altとtitleをいったん格納する
    var __alt = []
        ,__title = []
        ,__$img = __$target.find("img")
        ,__$a = __$target.find("a");
    if(__$img.length > 0){
      __$img.each(function(){
        __alt.push($(this).attr("alt"));
        $(this).removeAttr("alt");
      });
    }
    if(__$a.length > 0){
      __$a.each(function(){
        __title.push($(this).attr("title"));
        $(this).removeAttr("title");
      });
    }


    // もにょもにょする
    var __text = __$target.html();
    __text = __text.replace(/^(\s|\t|\n)+|(\s|\t|\n)+$/g,''); //文章の頭とケツの半角・全角スペース、タブ、改行削除
    __text = __text.replace(/(\n)((\s|\t)+)/g,''); //改行後の頭の半角・全角スペース、タブ削除
    __text = __text.replace(/^(（|〔|［|｛|〈|《|「|『|【)/g,"<span class='rspace-first'>$1</span>"); //文頭調整
    __text = __text.replace(/(<br \/>|<br>)(（|〔|［|｛|〈|《|「|『|【)/g,"$1<span class='rspace-first'>$2</span>"); //br改行後の文頭調整
    __text = __text.replace(/(、|。|，|．|）|〕|］|｝|〉|》|」|』|】)(、|。|，|．|）|〕|］|｝|〉|》|」|』|】)(（|〔|［|｛|〈|《|「|『|【)/g,"<span class='rspace2'>$1</span><span class='rspace'>$2</span>$3");
    __text = __text.replace(/(、|。|，|．|）|〕|］|｝|〉|》|」|』|】)(（|〔|［|｛|〈|《|「|『|【)/g,"<span class='rspace2'>$1</span>$2");
    __$target.html(__text);
    __$target.find(".rspace-first").css({
      position: "relative",
      left : _defaultCSS.first,
      letterSpacing : _defaultCSS.first
    });
    __$target.find(".rspace").css({letterSpacing : _defaultCSS.rspace});
    __$target.find(".rspace2").css({letterSpacing : _defaultCSS.rspace2});


    // altとtitleつけなおす
    __$img = __$target.find("img");
    __$a = __$target.find("a");
    if(__$img.length > 0){
      __$img.each(function(i){
        $(this).attr({"alt": __alt[i]});
      });
    }
    if(__$a.length > 0){
      __$a.each(function(i){
        $(this).attr({"title": __title[i]});
      });
    }
  });
};

_kerning($(".kerning"));

---

<p class="kerning"> 「テスト」<br />テスト<br />「テスト」<br />
  　「テスト」</p>
<p class="kerning"> “テスト”<br />テスト<br />
  　“テスト”</p>
<p class="kerning"> 「テスト」<br />『テスト』<br />【テスト】<br />（テスト）<br />［テスト］<br />《テスト》<br />〔テスト〕<br />
  　｛テスト｝</p>
<p class="kerning"> 「テスト」、『テスト』、【テスト】。（テスト）、［テスト］。</p>

とかでもちゃんといけてるはず。

いろんなフォントで検証してないですけどね。