HTMLで文字詰め出来るJavaScriptとjQuery

投稿日 2013/05/14 更新日 2020/09/01

日頃WEBのテキストで句読点および括弧類が連続して出現する場合の詰め処理をしたくてどうしたものかと思案していたら、素晴しいJavaScript（とjQueryの混合）を発見。このスクリプト、要はペアカーニングを任意に設定できてしかも2つの括弧類連続を設定するだけで括弧類が3つ以上連続してもちゃんと詰めてくれる。いやはやありがたや。ということで今回参考というか丸々活用させていただいたのはFLAutoKerning.jsというスクリプト。

HTMLで文字詰めするタイポグラフィー用JS | fladdict

感謝深謝。

カーニングのペアを自動処理

今回の組版の設定は、基本ベタ組みで、句読点および括弧類が2つ連続した場合「全角二分取り」になるような、つまりは二分分詰まるような、オーソドックスな設定で試してみる。そして今回の句読点および括弧類は

起こし括弧類：「『（［｛〈《【〔
受け括弧類：」』）］｝〉》】〕
句読点類・中点：、，。．・

の計21種の組合せに詰め設定を施すが、この組合せを配列にて自動化した。

jQuery(function($){
 var pncPrn = ["」","』","）","］","｝","〉","》","】","〕","「","『","（","［","｛","〈","《","【","〔","、","，","。","．","・"];
 for (var x=pncPrn.length; x--;){
  for (var y=pncPrn.length; y--;){
   p[pncPrn[x] + pncPrn[y]] = -0.6;
  }
 }
});

上記jQueryにて設定した句読点括弧類の【組合せ】をFLAutoKerning.js内カーニングペア定義の箇所に追加（不要な組合せもあるが、処理上別段問題ないのでそのままにする）。

行頭文字の処理

実はこのスクリプト、行頭の1文字もカーニング設定できる。つまり、行頭1字下げしない組み設定の時、起こし括弧類が行頭に来ると直前が二分アキになるのを詰めることができる。これも配列にて自動化した。

jQuery(function($){
 var Prn = ["「","『","（","［","｛","〈","《","【","〔"];
 for (var z=Prn.length; z--;){
  p[Prn[z]] = -0.6;
 }
});

このjQueryもFLAutoKerning.js内行頭専用の箇所に追加。

行末文字の処理は…

このスクリプトでは出来ない。というか組版ソフトはどうやって行末処理のために行末の判別をしているのか、実に不思議だと改めて思う次第。

設定値「-0.6」って何なのさ？

ワタクシのデモページの文字サイズはrem単位にて、rootサイズ1rem（10px相当）、本文サイズは1.2rem（12px相当）に設定しているので、このとき二分は本文の半分の0.6rem（6px相当）になるので。
そうそう、このスクリプトはem単位に設定されているので、その部分をrem単位に変更した（下記の2箇所）

if(space!=0)
 char2 = "<span class='kerning01' style='letter-spacing:" + space + "rem'>" + char + "</span>";
     
//行頭約物の処理
if(i == 0 && kerningInfo[char])
 char2 =  "<span class='kerning02' style='margin-left:" + kerningInfo[char] + "rem'>" + char2 + "</span>";

こうして完成したデモページに、今回は「詰め解除」と「詰め設定」の2つのボタンを設置して詰め具合が判るようにした。
デモページ【WEB TYPOGRAPHY KERNING】