字間と字下げも、CSSと同じ位置に。日本語組版エンジン「stone-engine.js」0.3.1を公開しました。

私たちの会社では、株式会社日本デザインセンター様のiOS用文字組みエンジン「stone engine」をJavaScriptに移植した「stone-engine.js」を、オープンソースで公開しています（公開時の記事はこちら）。

このたび、バージョン0.3.0と0.3.1を公開しました。字間と字下げを指定できるようになったほか、縦書きと、行頭の括弧の詰めの細かな改善が入っています。

字間と字下げ

字間（letterSpacing）と、段落の1行目の字下げ（textIndent）を指定できるようになりました。CSSの letter-spacing / text-indent と同じ位置に組みます。字下げした行が始め括弧で始まるときは、括弧を半角に詰めて、字面が1字ぶん下がった位置にそろえます。

// 字下げ（px）は、テキストの先頭の行と改行の直後の行に入る
<StoneText width={240} fontSize={16} textIndent={16}>{text}</StoneText>

// 字間（px）は各文字の後ろに足す。「……」の間には足さない
<StoneText width={240} fontSize={16} letterSpacing={3}>{text}</StoneText>

縦書きの改善

縦書きで、文字の位置や列の並びがずれることのあった箇所を直しました。

• 絵文字と「★」「♪」などの記号を、列の中で和文と同じ位置に置くようにしました。これまでは少し手前にずれて、前の文字に重なることがありました。
• 半角カナを、どのブラウザでも横倒しに回して描くようにしました。「ｶﾞ」の濁点が隣の列に出ることがなくなりました。
• 列の端に縦中横の数字や半角カナ、絵文字があるときに、列がずれたり、最後の列が表示されなくなったりする問題を直しました。
• 禁則の追い出しで、列の先頭の縦中横の数字が2つの列に分かれる問題を直しました。

行頭の括弧の詰め

約物の扱いが stone（既定）のときは、行頭の始め括弧（「「」「（」など）を半角に詰めます。0.3.1では、これをテキストの最後の行（1行だけのテキストを含む）にも行うようにしました。これまでは最後の行だけ詰めていなかったので、同じ段落の行頭でも、括弧の位置が半角ずれることがありました。

また、stone と half では、折り返すかどうかを、括弧や句読点を詰めたあとの長さで判断するようにしました。これまでは詰める前の長さで判断していたので、組んだ結果の幅（renderedSize）に合わせて組み直すと、行の最後の文字が次の行に送られることがありました。

アップデートの方法

npm install @non-standardworld/stone-engine.js@latest

0.2.0から更新するときは、次の3点にご注意ください。0.3.0から更新するときは、3つめの点だけが当てはまります。

• 縦書きの折り返しの計算を直したので、縦書きの改行位置が変わることがあります。
• ページのCSSで指定した font-feature-settings（palt など）や text-transform は、組んだ文字には効かなくなりました。文字の位置はエンジンが1文字ずつ決めているので、あとからCSSが効くと、位置がずれてしまうためです。約物の詰めはエンジンが行います。
• テキストの最後の行（1行だけのテキストを含む）の行頭の始め括弧も、半角に詰めるようになりました（0.3.1）。その行の文字は、半角ぶん前に寄ります。

使い方とライブサンプルはドキュメントサイトに、ソースコードはGitHubにあります。

これからも、Webの世界の文字組みがより美しくなるよう、改良を続けていきます。