InDesign文字組みアキ量設定をCSS text-spacing-trimプロパティで

mojikumi-css-text-spacing.md

InDesign文字組みアキ量設定に対応するCSSのプロパティ指定

はじめに：CSS text-spacing-trim プロパティが利用可能に！

CSS Text Module Level 4 の text-spacing-trim プロパティ が最近のブラウザ Chrome (Chromium) 123 以降で利用可能になりました。また、CSS組版ソフトVivliostyleでも以前から利用可能です。

この text-spacing-trim プロパティの機能（行頭・行末や連続する約物の詰めの制御）は、DTPソフトのInDesignの文字組みアキ量設定に近いものです。そこで文字組みアキ量設定に対応するCSSでの設定方法をまとめます。

text-spacing-trim プロパティの値は次の通り：

space-all | normal | space-first | trim-start | trim-both | trim-all | auto

値	行頭約物	行末約物	連続約物	他の箇所の約物
space-all	全角のまま
normal	全角のまま	収まらなければ詰める	詰める	全角のまま
space-first	先頭行以外は詰める
trim-start	詰める
trim-both		詰める
trim-all	詰める
auto	UA／プラットフォームに依存

• このうち、Chrome で現在サポートされている値は以下：

  space-all | normal | space-first | trim-start
  

  • 現在 trim-both、trim-all、auto は未サポート

• Vivliostyle で現在サポートされている値は以下：

  space-all | normal | space-first | trim-start | trim-both | auto
  

  • trim-all は未サポート
  • auto は trim-both と同じ扱い
  • これらの値のほかに、過去のドラフト仕様で定義されていた値もサポートされている（非推奨）
    • 旧仕様 https://www.w3.org/TR/2022/WD-css-text-4-20221231/#text-spacing-property にあった以下のキーワードが有効：
      • space-start
      • space-end
      • allow-end
      • trim-adjacent
      • space-adjacent
  • Vivliostyle はブラウザエンジンを利用していますが、text-spacing-trim プロパティは独自実装してるので、ブラウザでの text-spacing-trim のサポートには依存しません。

InDesignの文字組みアキ量設定

文字組み設定の手引き (PDF) の「3　定義済み文字組み設定の特徴」から：

• ①行末約物半角
• ②行末受け約物半角・段落１字下げ（起こし全角）
• ③行末受け約物半角・段落１字下げ（起こし食い込み）＊
• ④約物全角・段落１字下げ＊
• ⑤約物全角・段落１字下げ（起こし全角）
• ⑥行末約物全角／半角・段落１字下げ＊
• ⑦行末受け約物全角／半角・段落１字下げ（起こし全角）
• ⑧行末受け約物全角／半角・段落１字下げ（起こし食い込み）＊
• ⑨行末約物半角・段落１字下げ＊
• ⑩約物全角
• ⑪行末受け約物全角／半角
• ⑫行末句点全角・段落１字下げ
• ⑬行末句点全角・段落１字下げ（起こし全角）
• ⑭行末句点全角

メモ：

• ①〜⑭の番号は、「文字組み設定の手引き」での節番号 3.1〜3.14 に対応する。
• 「＊」印は「文字組み設定の手引き」で「特に広く用いられていると考えられるセット」とされているもの。
• 設定の名前に含まれる「行末約物」と「行末受け約物」は同じものらしい。「行末受け約物」に統一すればよかったのに、「行末約物半角」と「行末約物半角・段落１字下げ」は、InDesignより前に普及していたDTPソフトの影響でそうなったとか。

この①〜⑭の並びでは分かりにくいので、なんでやねんDTP: 「文字組みアキ量設定」の一覧で整理された表にする：

行末受け約物全角／半角	行末（受け）約物半角	（行頭括弧類・行末受け）約物全角	行末句点全角（その他行末受け約物半角）
⑪行末受け約物全角／半角	①行末約物半角	⑩約物全角	⑭行末句点全角
⑥行末約物全角／半角・段落１字下げ＊	⑨行末約物半角・段落１字下げ＊	④約物全角・段落１字下げ＊	⑫行末句点全角・段落１字下げ
⑦行末受け約物全角／半角・段落１字下げ（起こし全角）	②行末受け約物半角・段落１字下げ（起こし全角）	⑤約物全角・段落１字下げ（起こし全角）	⑬行末句点全角・段落１字下げ（起こし全角）
⑧行末受け約物全角／半角・段落１字下げ（起こし食い込み）＊	③行末受け約物半角・段落１字下げ（起こし食い込み）＊

CSSでの対応

次のスタイルがベースにあるとする：

p {
  text-align: justify;
  margin: 0;
}

行末受け約物全角／半角

⑪行末受け約物全角／半角

p {
  text-spacing-trim: trim-start;
}

⑥行末約物全角／半角・段落１字下げ＊

p {
  text-indent: 1em;
  text-spacing-trim: trim-start;
}

⑦行末受け約物全角／半角・段落１字下げ（起こし全角）

p {
  text-indent: 1em;
  text-spacing-trim: space-first;
}

⑧行末受け約物全角／半角・段落１字下げ（起こし食い込み）＊

p {
  text-indent: 1em;
  text-spacing-trim: trim-start;
  hanging-punctuation: first; /* ❗️Chromeでは未サポート */
}

行末（受け）約物半角

①行末約物半角

p {
  text-spacing-trim: trim-both; /* ❗️Chromeでは未サポート */
}

⑨行末受け約物半角・段落１字下げ＊

p {
  text-indent: 1em;
  text-spacing-trim: trim-both; /* ❗️Chromeでは未サポート */
}

②行末受け約物半角・段落１字下げ（起こし全角）

p {
  text-indent: 1em;
  text-spacing-trim: space-first trim-end; /* ❌現仕様では不可能　🔺Vivliostyleでは可能だが非推奨 */
}

③行末受け約物半角・段落１字下げ（起こし食い込み）＊

p {
  text-indent: 1em;
  text-spacing-trim: trim-both; /* ❗️Chromeでは未サポート */
  hanging-punctuation: first; /* ❗️Chromeでは未サポート */
}

（行頭括弧類・行末受け）約物全角

⑩約物全角

p {
  text-spacing-trim: space-start space-end; /* ❌現仕様では不可能　🔺Vivliostyleでは可能だが非推奨 */
}

④約物全角・段落１字下げ＊

p {
  text-indent: 1em;
  text-spacing-trim: trim-first space-end; /* ❌現仕様では不可能 */
}

⑤約物全角・段落１字下げ（起こし全角）

p {
  text-indent: 1em;
  text-spacing-trim: space-start space-end; /* ❌現仕様では不可能　🔺Vivliostyleでは可能だが非推奨 */
}

行末句点全角（その他行末受け約物半角）

⑭行末句点全角

p {
  text-spacing-trim: trim-start trim-end-except-fullstop; /* ❌現仕様では不可能 */
}

⑫行末句点全角・段落１字下げ

p {
  text-indent: 1em;
  text-spacing-trim: trim-start trim-end-except-fullstop; /* ❌現仕様では不可能 */
}

⑬行末句点全角・段落１字下げ（起こし全角）

p {
  text-indent: 1em;
  text-spacing-trim: space-start trim-end-except-fullstop; /* ❌現仕様では不可能 */
}