フォントの縦書きグリフを確認するIllustratorCS5向けjsxスクリプト

Font

f:id:itouhiro:20130717003317p:plain


M+ LOG にある記事 http://mplus-fonts.sourceforge.jp/cgi-bin/blosxom.cgi/2013/07/05#mplus_fonts-130705-2 の画像のように表示して、フォントの縦書きグリフを確認したい。
しかしIllustratorに不慣れな私が手作業で文字を置くと、正確な位置に置けない気がする。


そこで、文字を配置してくれるAdobe Illustrator CS5向けのjsxを作成した。

verticaltext.jsx

// http://mplus-fonts.sourceforge.jp/cgi-bin/blosxom.cgi/2013/07/05#mplus_fonts-130705-2 と同じような表を作成する

fontName = 'mplus-1p-bold';
fontSize = 32;
lineGap = 8;

// http://ja.wikipedia.org/wiki/引用符 , http://ja.wikipedia.org/wiki/括弧
texts = [
  '■あ亜',
  '‥…、。',
  '〈〉《》「」',
  '『』【】〔〕',
  '〖〗〘〙〜',
  'ぁぃぅぇぉ',
  'っゃゅょ',
  'ァィゥェォ',
  'ッャュョヮ',
  'ヵヶー（）',
  '，．：＝',
  '［］｛｝～',
  '―￣＿〝〟〞',
  '‘’“”',
  'ゎゕゖ',
];

theDoc = app.activeDocument;
theLayer = theDoc.activeLayer;
maxLength = 0;
for (i=0; i<texts.length; i++) {
  if (texts[i].length > maxLength) maxLength = texts[i].length;
}
for (i=0; i<texts.length; i++) {
  for (j=0; j<maxLength; j++) {
    putBox(-50-(fontSize*j), theDoc.width-50-((fontSize+lineGap)*i), fontSize,fontSize);
  }
  for (j=0; j<texts[i].length; j++) {
    letter = texts[i].charAt(j);
    putLetter(-50-(fontSize*j), theDoc.width-50-((fontSize+lineGap)*i), letter);
  }
}

function setColor(r, g, b) {
  var col = new RGBColor();
  col.red = r;
  col.green = g;
  col.blue = b;
  return col;
}

function putBox(atop, aleft, w, h) {
  rect = theLayer.pathItems.rectangle(atop,aleft, w,h);
  rect.filled = false; //塗り
  rect.stroked = true; //線
  rect.strokeWidth = 0.7; //pt
  rect.strokeColor = setColor(0xE5, 0xE5, 0xE5);
}

// http://cssdk.host.adobe.com/sdk/1.0/docs/WebHelp/references/csawlib/com/adobe/illustrator/package-detail.html
// http://logic.moo.jp/memo.php/category/10/tag/illustrator/
// http://d.hatena.ne.jp/itouhiro/20090614
function putLetter(atop, aleft, txt) {
  var caption = theLayer.textFrames.add();
  caption.top = atop + fontSize/5;
  caption.left = aleft + fontSize/10;
  caption.contents = string_as_unicode_escape(txt);
  caption.textRange.characterAttributes.textFont = app.textFonts.getByName(fontName);
  caption.textRange.characterAttributes.size = fontSize/4;
  caption.textRange.characterAttributes.fillColor = setColor(0xE0, 0xE0, 0xFF);

  var letter = theLayer.textFrames.add();
  letter.top = atop + fontSize/3;
  letter.left = aleft + fontSize/2;
  letter.contents = txt;
  letter.orientation = TextOrientation.VERTICAL;
  letter.textRange.characterAttributes.textFont = app.textFonts.getByName(fontName);
  letter.textRange.characterAttributes.size = fontSize;
}

// http://stackoverflow.com/questions/5786483/char-to-hex-in-javascript
function string_as_unicode_escape(input) {
    function pad_four(input) {
        var l = input.length;
        if (l == 0) return '0000';
        if (l == 1) return '000' + input;
        if (l == 2) return '00' + input;
        if (l == 3) return '0' + input;
        return input;
    }
    var output = '';
    for (var i = 0, l = input.length; i < l; i++)
        output += 'U+' + pad_four(input.charCodeAt(i).toString(16).toUpperCase());
    return output;
}


実行方法は以下。

  1. 上のスクリプトをテキストファイルに保存する。文字コードはUTF-8にする。
  2. Illustrator CS5で[ファイル-新規]で新規ドキュメントをひらく。「プリント A4 横」などにする。
  3. [ファイル-スクリプト-その他のスクリプト]で、保存したテキストファイルを選択する。

fontNameは http://logic.moo.jp/data/archives/788.html で調べた。
fontSizeの数値の単位はpt。


http://sourceforge.jp/projects/mplus-fonts/lists/archive/dev/2013-July/000736.html でM+フォントの縦書き改善の報告と、試作フォントが提示されていたので、Illustratorでの表示を確認するために作成した。

この記事冒頭の画像は M+ 1p bold での表示だが、かなり改善されたことを確認できた。



Illustrator ABC

Illustrator ABC