印刷物基準の文字組みをウェブの世界で。日本デザインセンター様から出ているiOS用文字組みエンジンをJavaScriptに移植しました。
私たちの会社では株式会社日本デザインセンター様から出ている、書く気分を高めるエディタ「stone」から生まれたオープンソースのiOS用文字組エンジン「stone engine」を、広くWebの世界で利用できるように「stone-engine.js」としてJavaScriptに移植しました。
これにより、モダンJSフレームワークを使ったウェブの世界でも、印刷物水準の日本語組版、縦書き、禁則処理、文字詰めが可能になります。
日本デザインセンター様より許可をいただき、本日よりオープンソースで無償で公開しています。一行のコマンドで導入できるので、ぜひご利用ください。
すでにこのサイトと自社サービス「atelier yori.so」に利用されています。
できること
すべてこのページ上で実際に組まれています。文字にマウスを乗せると赤くなるのは、1文字ずつがSVGの要素になっているからです。
縦書きと縦中横
2 桁以下の数字は正体で並べ、3 桁以上の数字と英字は 90 度回転します。句読点や括弧は縦組み用のグリフに置き換わります。
コードを見る
<StoneText direction="tbRl" height={280} fontSize={18} lineHeightScale={1.9}>
{"令和6年12月31日、Ver.2.0を公開した。数字は2桁まで縦中横、3桁以上の123と英字は回転する。"}
</StoneText>禁則処理
句読点や閉じ括弧を行頭に、開き括弧を行末に置きません。「ー」や小書きの仮名、全角の「！」「・」も行頭に置かない強い禁則（CSS の line-break: strict 相当）で、「……」「——」の途中でも改行しません。
コードを見る
// 比べやすいように 1 文字単位で折り返す（dividesByWords={false}）
<StoneText width={220} dividesByWords={false} kinsoku>{text}</StoneText>
<StoneText width={220} dividesByWords={false} kinsoku={false}>{text}</StoneText>約物の詰め
句読点や括弧の連続を半角にします。stone モードは前後の文字を見て、自然に見えるところだけ詰めます。
コードを見る
<StoneText punctuationMode="whole">{text}</StoneText> // 常に全角
<StoneText punctuationMode="half">{text}</StoneText> // 常に半角
<StoneText punctuationMode="stone">{text}</StoneText> // 前後関係で判断（既定）文字種ごとのフォントとスケール
和文・欧文・絵文字ごとにフォントとスケールを指定できます。ここでは欧文を Georgia にし、0.9 倍にしています。
コードを見る
<StoneText
fonts={{
japanese: { family: '"Noto Serif JP", serif' },
latin: { family: "Georgia, serif", scale: 0.9 },
}}
>
{"日本語の中に English や 2024 を混ぜても、文字種ごとにフォントとスケールを選べる。"}
</StoneText>文字寄せ
行頭・中央・行末・均等。均等配置は最終行と改行で終わる行を除き、余白を文字間に均等に配ります。欧文の単語の途中と「……」「——」の間は空けません。
コードを見る
// 余白は文字間に均等に配る。欧文の単語の途中と「……」「——」の間は空けない
<StoneText textAlign="justify" width={300}>{text}</StoneText>ダーシ・リーダー・引用符
「……」「——」や「‼」「※」は欧文の後ろでも和文フォントで組み、縦書きでは回転させずに列の中央に描きます。引用符は欧文に付けば欧文、和文中なら和文として組みます。
コードを見る
// ダーシ・リーダーと「‼」「※」などは欧文の後ろでも和文フォントで組み、縦書きで回転させない。
// 引用符は欧文に付けば欧文、和文中なら和文として組む
<StoneText direction="tbRl" height={280}>
{"「待って……」と言った——“了解”‼ ※欧文の“Hello”は回転する。"}
</StoneText>切り詰めと省略記号
行送り方向（横書きは高さ、縦書きは幅）に収まらない行は表示せず、最後に表示する文字を省略記号にします。縦書きでは正立の「︙」を描きます。
コードを見る
// 行送り方向（横書きは高さ、縦書きは幅）に収まらない行は表示せず、
// 最後に表示する文字を省略記号（横書き「…」、縦書き「︙」）にする
<StoneText width={260} height={84}>{text}</StoneText>
<StoneText direction="tbRl" width={96} height={220}>{text}</StoneText>レイアウト情報に触れる
1 文字ごとの位置・矩形・行番号が取り出せます。showFrames は各文字の占有矩形を描きます。
コードを見る
// showFrames で各文字の占有矩形を描く。
// onLayout で受け取る StoneContext から位置・矩形・行番号が取れる。
<StoneText showFrames onLayout={(layout) => console.log(layout.runs)}>
{"文字ごとの位置と矩形が取れる。"}
</StoneText>くわしい利用方法は here for more information.
これにより、Web の世界の文字組みがより美しくなることを願っています。