jQuery.yakumono
font-feature-settings
の機能を使い、現在のWebブラウザに不足している日本語組版関係の機能を補完するjQueryプラグインです。
「□□」・「□・□、」「(□□)」(「□□」)
などの約物が連続するパターンで不要な約物のアキを調整し、より美しい組版を実現します。
スクリーンショット
PC(Chrome)
Mobile Safari(iOS10)
ライブデモ
http://codepen.io/hokkey/pen/zNzwQL
主な機能
- 約物アキ量調整(
font-feature-settings: "halt" 1;
による実装) - プロポーショナルメトリクス(
font-feature-settings: "palt" 1;
による実装) - 行末と行頭の判定
- 行末約物半角
- 行末のアキを字間の調整で吸収
- リキッドレイアウト対応
- 実験的な縦組みへの対応
font-feature-settings: "vhal" 1
による実装
- その他
- 常にemベースの横幅へテキストエリアの横幅を調整する機能
- 二連続する全角ダーシをケイ線文字に置換し、ダーシの隙間をなくす機能
- Safariの不完全な実装へのポリフィル
対応ブラウザ
ブラウザ側のOpenType機能の(font-feature-setttings
)の実装に大きく依存します。
- Chrome
- Firefox
- Safari
- 実装に一部バグが有りますが、ポリフィルで対応しています
※縦書きモードは動作未検証。
対応フォント
- Noto Sans JP
- 遊ゴシック
- ヒラギノ角ゴシック
- ヒラギノ明朝
注意点と既知の問題
- 対象となるセレクタの内部に入れ子になった要素内の文字列も処理の対象になります
- 対象となるセレタクの内部に文字以外のコンテンツがある場合、予期しないレイアウトの崩れが発生する可能性あります
- フォントサイズが小数点を含むpx値の場合、ベタ組み時の横幅の計算がうまくいかないバグがあります
- 縦組みモードは実験的なオプションです
依存ライブラリ
- jQuery
- Blast.js
インストール
jQueryとblast.jsが必須です。jQuery.yakumonoはrequireに対応していますが、依存するblast.jsはrequireに対応していません。
npm install --save-dev jquery.yakumono jquery blast-text
使い方とオプション
デフォルトのオプションではベタ組みが適用されます。
... ここに本文を入力
約物アキ量設定
プラグインが文字を1文字づつspan要素で分解し、前後の約物との関係性も含めてHTMLクラス名として付与します。 クラス名のデフォルトのルールは次の通りです。
- 文字一般:
.js-char
- 約物:
.js-char-yakumono
- 前の文字が〜な約物:
.js-char-yakumono--after--〜
- 次の文字が〜な約物:
.js-char-yakumono--before--〜
- 行頭文字:
.is-start-of-line
- 行末文字:
.is-end-of-line
これらのクラス名を手がかりに、アキ量を変更したいパターンをCSSで定義します。
約物の分類
デフォルトで一般的な約物の分類が設定済みです。
// 約物の分類辞書dict: hajimekakko: /(|〔|「|『|[|【|〈|《|‘|“/ owarikakko: /)|〕|」|』|]|】|〉|》|’|”/ nakaten: /・|:|;/ kuten: /。|./ touten: /、|,/ kugiri: /!|?/ hyphen: /‐|〜/ bunrikinshi: /…|‥|—/
初期化時に独自の設定を追加できます。
;
デフォルトのアキ量設定
- 次のときに約物が二分幅(アキなし)になります
- 行末の終わり括弧類・句点類・読点類・中点類
- 行頭の始め括弧類
- 連続する始め括弧類・終わり括弧類
- 直後に終わり括弧類が来る始め括弧類
- 直後に始め/終わり括弧類が来る句点/読点類
- 終わり括弧類と始め括弧類に挟まれた中点類
- これらのパターン以外はブラウザデフォルトの全角幅(二分アキ)になります
// 行末約物半角 .js-yakumono.is-gyomatsu-yakumono-hankaku // 始め括弧系 .js-char-yakumono--hajimekakko // 終わり括弧系 .js-char-yakumono--owarikakko // 句点 .js-char-yakumono--kuten // 読点 .js-char-yakumono--touten // 中点 .js-char-yakumono--nakaten
開発方法
ビルド処理の一部にfrontplate-cliへの依存があります。
npm i -g frontplate-cli
git clone https://github.com/hokkey/jquery.yakumono.git
npm i
# 開発用ビルド
npm run build
# リリース用ビルド
npm run production
作者について
http://media-massage.net/profile/
ライセンス
MIT License