# 設定：リソースと表 > リソースの種類とその番号付け、表とキャプションのスタイル、単色のダイアグラム、紙面上の動画 - HTML版: https://postext.dev/ja/docs/configuration-resources - 最終更新: 2026-10-10 - 読了時間: 5分 - 他の言語: [en](https://postext.dev/en/docs/configuration-resources.md), [es](https://postext.dev/es/docs/configuration-resources.md), [ca](https://postext.dev/ca/docs/configuration-resources.md), [pt](https://postext.dev/pt/docs/configuration-resources.md), [zh](https://postext.dev/zh/docs/configuration-resources.md), [ar](https://postext.dev/ar/docs/configuration-resources.md) ## かんたんな説明 このページでは、図、表、ダイアグラム、動画の設定を説明します。Postextはこれらをリソースと呼び、種類ごとに番号を付けます。罫線、塗り、文字、ページをまたぐときの分け方など、表の見た目を決めます。図や表に付けるキャプションの書き方を決めます。ダイアグラムを1色のインキで刷ることや、動画を紙の上でどう見せるかも選べます。 ## リソースの種類 **リソースの種類**は、ユーザーが定義できる分類です。たとえば「図」「表」「ダイアグラム」「コードリスト」などで、その種類のリソースにどう番号を付け、キャプションを付け、参照するかを決めます。リストは`config.resourceTypes`にあり、Sandboxでは**デザイン → 図と表 → 番号付けと配置**で編集します。 `config.resourceTypes`が未設定の場合、Postextは3つの組み込みの既定の種類、**図**（Figure）、**表**（Table）、**動画**（Video）を用意します。それぞれ独自の`{h1}.{n}`で番号を付け（レベル1の見出しのたびにリセット）、カウンターは10進数です。`video`の種類を含まないリスト（動画が導入される前に保存された本）でも、種類が`video`の動画リソースには番号が付きます。そのために組み込みの動画の種類が追加されます（`effectiveResourceTypes(config, resources)`）。`defaultVideoResourceType(locale)`はこの種類だけを返します。名前は文書の言語で付きます。`config.locale`、なければ`bodyText.hyphenation.locale`、それもなければ英語です（[文書の言語](https://postext.dev/ja/docs/configuration-text.md#文書の言語)を参照）。 組み込みの既定値はロケールに対応しています。エクスポートされた`defaultResourceTypes(locale = 'en')`は、種類の名前、略称、キャプションの接頭辞を文書のロケールに合わせてローカライズします。英語では「*Figure*/*Fig.*」と「*Table*/*Tab.*」、スペイン語では「*Figura*/*Fig.*」と「*Tabla*/*Tabla*」になり、フランス語、ドイツ語、イタリア語、ポルトガル語、カタルーニャ語、オランダ語にもそれぞれの名前があります（一覧は[文書の言語](https://postext.dev/ja/docs/configuration-text.md#文書の言語)の表にあります）。`es-ES`のような地域付きのタグは言語で解決され、翻訳のないロケールは英語にフォールバックします。番号付けの動作（`numberingTemplate: '{h1}.{n}'`、`resetOn: 'h1'`、10進数のカウンター）は言語に依存しません。呼び出すたびに新しいオブジェクトを返すので、結果は自由に変更できます。 ```ts import { defaultResourceTypes } from 'postext'; const types = defaultResourceTypes('es'); // => [{ id: 'figure', name: 'Figura', shortLabel: 'Fig.', captionPrefix: 'Figura', // numberingTemplate: '{h1}.{n}', resetOn: 'h1', counterFormat: 'decimal', … }, // { id: 'table', name: 'Tabla', shortLabel: 'Tabla', captionPrefix: 'Tabla', … }, // { id: 'video', name: 'Vídeo', shortLabel: 'Vídeo', captionPrefix: 'Vídeo', … }] ``` ```ts type ResourceCounterFormat = | 'decimal' | 'roman-lower' | 'roman-upper' | 'alpha-lower' | 'alpha-upper'; type ResourceCounterReset = 'never' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; interface ResourcePlacement { position?: 'auto' | 'top' | 'bottom' | 'here'; // which free slot a float may take; 'here' = inline embed at the ::resource directive span?: 'column' | 'page' | 'side'; // one column, the full content width, or the float-only side column rotate?: 'ccw' | 'cw'; // a quarter turn: a landscape table on a page of its own width?: number; // fraction (0 < width < 1) of the column or page width; default: the whole width align?: 'left' | 'center' | 'right'; // where a float narrower than its column sits; default 'left' captionSide?: boolean; // caption beside the figure, in the side column of a oneAndHalf layout (column floats only) columns?: number; // 'column'フロートがまたがる隣り合う段の数（1.18以降） wrap?: 'none' | 'left' | 'right' | 'start' | 'end'; // リソースの横に本文を組み、リソースは段のその側（1.24以降） wrapGap?: Dimension; // 回り込むリソースと本文との間隔（1.24以降） } interface ResourceType { id: string; // stable id, referenced by Resource.typeId name: string; // singular display name, e.g. "Figure" namePlural?: string; // optional plural, e.g. "Figures" shortLabel: string; // compact label for inline refs, e.g. "Fig." numberingTemplate: string; // "{h1}.{n}" or "{n}" resetOn: ResourceCounterReset; // when the {n} counter resets counterFormat: ResourceCounterFormat;// how {n} is formatted captionPrefix: string; // prepended to the caption, e.g. "Figure" defaultPlacement?: ResourcePlacement;// fallback placement for this type's resources } ``` `ResourcePlacement`は、リソースが自身の`placement`に設定するものと同じ形です。`position`はフロートが入れる空き位置の種類を選びます。`auto`（既定値）は最初の参照の後にある最初の空き位置を取り、`top`／`bottom`はその種類の帯に限定し、`here`はリソースをインラインで埋め込みます。`span`はフロートの範囲を、1段、本文領域の全幅、または1段半レイアウトのフロート専用サイド段から決めます。`rotate`はリソースを90度回転させ、独立したページに置くページ幅のフロートにします。`width`はフロートを段の幅（ページ幅のフロートではページの幅）の一部に狭めます。たとえば広い段に置く小さな表です。`align`は、そのように狭めたフロートを置く位置（既定は左、ほかに中央と右）と、空き位置より狭い画像をその中のどこに置くかを決めます。段より小さいビットマップや、`layout.fitFiguresToPage`が縮小した画像が対象です。キャプションと注は空き位置の行長を保ちます（postext 1.4までは、そうした画像は常に左そろえでした）。`captionSide`は、1段半レイアウト（`layout.sideColumnRole: 'floats'`）のフロート専用サイド段で、キャプションを図の横、図の上端（下側のフロートでは下端）の高さに置きます。段幅のフロートにだけ適用され、そうした段のないページではキャプションは図の下のままです。リソースもその種類も配置を設定しない場合、組み込みの既定値は`auto`／`column`です。`shrink`（`'never'`、`'page'`、`'slot'`）と`minScale`（未設定なら0.7）は、フロートの図版を次へ送らずに置き場所の空きまで縮小し、`captionMeasure: 'body'`は置き場所より幅の狭い図版のキャプションと注を図版の幅で組みます（[ドキュメント形式 › 配置](https://postext.dev/ja/docs/document-format.md#配置)を参照）。前の2つのドキュメント既定値は`layout.floatShrink`で決めます。`wrap`は本文中の埋め込みや 1 段幅のフロートを段の片側に置き、`wrapGap`離して本文を横に組みます。既定値は`layout.wrap`にあります（[文書の書式 › 回り込み](https://postext.dev/ja/docs/document-format.md#回り込み)を参照）。`citingPage`は、`top`または`auto`のフロートを、参照行の後の最初の空き位置ではなく、参照行のあるページまたは段の先頭に置きます。`layout.floatsAtCitingPage`が文書の既定値、`layout.maxTopFraction`がそのフロートの占めてよい段の割合です（[ドキュメント形式 › 配置](https://postext.dev/ja/docs/document-format.md#配置)を参照）。 `columns`（postext 1.18以降）は、複数の段があるページで、`span: 'column'`のフロートを指定した数の隣り合う段にまたがって置きます。新聞の5段のうち2段にまたがる写真などです。幅はそれらの段とその間の段間を合わせたものです。上端のそろった空の段の並びの頭か、引用した段とその後の空の段の足に置かれます。ページの段数以上を指定すると、ページ幅のフロートになります。`'page'`と`'side'`のspan、回転したリソース（`rotate`）、インラインの埋め込み（`here`）では無視され、`captionSide`は1段幅のフロートにだけ効きます。 | プロパティ | 型 | 説明 | | --- | --- | --- | | `id` | `string` | 各リソースの`typeId`が参照する不変の識別子です。種類を作るときに1度だけ設定します。リソースがまだ参照している種類を削除すると、**存在しない種類**の警告が出ます。 | | `name` | `string` | 単数形の表示名です。`style="full"`のインライン参照で使われます（例：`Figure 1.7`）。 | | `namePlural` | `string`（省略可） | 複数形の表示名で、UIのラベルやリソースの一覧に使います。 | | `shortLabel` | `string` | 既定のインライン参照スタイルで使う短い略称です（例：`Fig. 1.7`）。 | | `numberingTemplate` | `string` | 計算される番号のテンプレートです。下の**テンプレートのトークン**を参照してください。よく使う形は`{h1}.{n}`（章単位。例：`2.3`）と`{n}`（1つの通し番号）です。 | | `resetOn` | `ResourceCounterReset` | `'never'`は文書全体の通し番号になります。`'h1'`〜`'h6'`は、そのレベル（またはその上位のいずれか）の見出しが現れるたびに`{n}`カウンターをリセットします。テンプレートに現れる見出しレベルに合わせて設定してください。たとえば`{h1}.{n}`には`resetOn: 'h1'`を組み合わせます。 | | `counterFormat` | `ResourceCounterFormat` | `{n}`カウンターの表示形式です。10進数（`1, 2, 3`）、小文字・大文字のローマ数字（`i, ii`／`I, II`）、小文字・大文字のアルファベット（`a, b`／`A, B`）から選びます。ノンブルやリストの表記も使えます（`'lower-roman'`、`'arabic'`など。[番号書式の表記](https://postext.dev/ja/docs/configuration-page-layout.md#番号書式の表記)を参照）。不明な値は10進数で数え、報告されます。見出しのトークン（`{h1}`など）は常に10進数で表示されます。 | | `captionPrefix` | `string` | 図や表のキャプションの前に付けるテキストです。計算された番号は接頭辞の後に続き、キャプションは`{captionPrefix} {number}. {caption text}`のように表示されます（例：**Figure 1.7. The original plan.**）。`numberingTemplate`が空の種類には番号がなく、キャプションは`{captionPrefix}. {caption text}`になります。接頭辞の末尾のスペースは取り除かれ、すでに`.`、`:`、`!`、`?`、`…`（またはそれらの全角形）で終わる接頭辞には、2つ目のピリオドを付けません（**Pl. Lines at 0°**）。 | | `defaultPlacement` | `ResourcePlacement`（省略可） | 自身の`placement`を設定しない、この種類のリソースが使う配置です。`position`、`span`、`rotate`、`width`、`align`、`captionSide`、`columns`はそれぞれ個別に解決されます。リソースも種類もあるフィールドを設定しない場合は、組み込みの既定値が適用されます。`auto`／`column`、回転なし、全幅、左そろえ、キャプションは図の下です。解決の順序は下の[番号付けと参照](https://postext.dev/ja/docs/configuration-resources.md#番号付けと参照)を、回転したリソースを含む各値の動作は[文書形式 › リソース](https://postext.dev/ja/docs/document-format.md#リソース)を参照してください。 | | `captionStyle` | `CaptionStyleConfig`（省略可） | この種類のリソースに対する、[キャプションのスタイル](https://postext.dev/ja/docs/configuration-resources.md#キャプションスタイル)の部分的な上書きです。設定したキーだけがグローバルの`captionStyle`を置き換え、それ以外はすべて継承されます（`color`を上書きすると、ラベルと注の色も明示的に設定されていない限りその色になります）。典型的な使い方は、表のキャプションを色付きの帯にして*上*に置き、図のキャプションは下のままにすることです。パレットの参照は、ほかの色と同じように解決されます。 | ### テンプレートのトークン `numberingTemplate`は、見出しの番号付けと同じエンジンで表示されます（[見出し](https://postext.dev/ja/docs/configuration-text.md#見出し)を参照）。認識するトークンは2種類です。 - `{n}`：種類ごとのカウンターで、`counterFormat`に従って書式化されます。リソースごとに増え、`resetOn`に従ってリセットされる値です。 - `{h1}`〜`{h6}`：最初の参照の位置で有効な見出し番号で、常に10進数で表示されます。`{h1}`は現在のレベル1の見出しの番号、`{h2}`はレベル2の番号、以下同様です。 そのほかのテキストは文字どおりに扱われます。バックスラッシュで、文字としての`{`、`}`、`\`をエスケープします。見出しのトークンにその範囲で値がない場合（たとえば最初のレベル1の見出しより前の`{h1}`）は、隣接する区切り文字とともに消えます。そのため`{h1}.{n}`は、カウンターだけの形に自然に縮退します。 空のテンプレート（`''`）は番号を表示しませんが、その種類はリソースを数え続けます。キャプションは「*Do. Lines at 0°*」となり、`:ref`はラベルだけ（*Do*）を表示します。postext 1.4までは、そうしたキャプションは「*Do .Lines at 0°*」となり、参照の末尾にはノーブレークスペースが付いていました。 | テンプレート | `h1 = 2`、カウンターが3のとき | 備考 | | --- | --- | --- | | `{n}` | `3` | 1つの通し番号。`resetOn: 'never'`と組み合わせます。 | | `{h1}.{n}` | `2.3` | 章単位。`resetOn: 'h1'`と組み合わせます。 | | `{h1}.{h2}.{n}` | `2.0.3` | 節単位。`resetOn: 'h2'`と組み合わせます。 | ### 番号付けと参照 リソースの種類が生成する番号は、`:ref`が表示し、キャプションの接頭辞の後に続くものです。基本の形は`:ref{id}`です。読む順で最初の参照がリソースを**取り込み**、リソースはその参照の後にある最初の空き位置へフロートとして配置されます。参照している段の下端、次の空いた段の上端または下端、あるいは次のページの帯です（解決された配置に従います。`position: 'auto' | 'top' | 'bottom' | 'here'`と`span: 'column' | 'page' | 'side'`、さらに`rotate`、`width`、`align`、`captionSide`は、リソースごと、次に種類の`defaultPlacement`、最後に組み込みの`auto`／`column`の順に解決されます。`'top'`／`'bottom'`はその種類の空き位置に探索を限定します）。ブロックとして埋め込む`::resource{id}`は省略可能で、`placement.position: 'here'`のとき、つまり流れの中の正確な位置にフロートさせずにインラインで埋め込むときにだけ必要です。文書側の完全な文法（両方の形と、`:ref`の`style`および`text`オプション）は、最初の参照の順序が番号にどう影響するかも含めて[文書形式 › リソース](https://postext.dev/ja/docs/document-format.md#リソース)で説明しています。 これは見出しの番号付けと対応しています。見出しのレベルが`numberingTemplate`を持つのと同じように、リソースの種類もテンプレートを持ちます。ただしリソースのカウンター（`{n}`）は見出しごとではなく最初の参照ごとに進み、`resetOn`によって見出しの階層と結び付きます。 ### 番号が付くもの リソースは、本文が`:ref`または`::resource`の埋め込みで参照したときに、最初の参照の順で番号が付きます。配置は問いません。フロート、インライン（`here`）、サイド段、回転のいずれでも同じです。デザインだけが描くリソース（章扉、柱、部扉の`image`要素）や、何からも参照されないリソースには番号が付かず、その種類のカウンターも進みません。そのため、裁ち落としの図版を章扉の画像にし、小さな図版1点だけを本文で引用したフロートにした写真集では、章扉がそれまでに何点の図版を見せていても、そのフロートが図版**I**になります。章扉の図版にはデザインの中で番号を付け（`{attr.plate}`のような属性を使います）、カウンターは本文が引用する図版のために残しておいてください。 章ごとにレイアウトする本（Sandbox、`buildBundle`、または`continuationAfter()`が引き継ぐカウンターを使う`buildDocument`）では、本全体で最初の参照が有効です。リソースは最初に参照した章で得た番号を保ち、その章だけがリソースを配置します。後の章の`:ref`はその番号を表示しますが何も配置せず、そこでのフロートするリソースの`::resource`埋め込みもただの参照になります（インラインの`here`の埋め込みは、書かれた位置に組まれます）。そうした参照は、図が同じ出力にあればその図へリンクします。本全体のPDFでは、前の章のページへリンクします。章を単独でHTMLやPDFに描画した場合は、図がその文書にないため、リンクの色のプレーンテキストとして組みます。各章のHTMLを1つのページにつなげるホストは、各章が配置するリソースを`refTargets`として`renderToHtml`に渡します。そうすると、そうした参照は再び前の章の図へリンクします。 ```ts import { anchoredResourceIds, buildBundle, renderToHtml } from 'postext'; const docs = buildBundle(bundle); const refTargets = new Set(docs.flatMap((d) => [...anchoredResourceIds(d)])); const html = docs.map((d) => renderToHtml(d, { refTargets })).join(''); ``` **postext 1.5での変更**：1.4までは、図を参照するすべての章がその図を再びフロートとして配置し、すべての`:ref`のHTMLは、図がそのページにあるかどうかにかかわらずリンクでした。 `{h1}`はレベル1の見出しの通し番号です。見出しスタイルが`numbered: false`を設定しない限り、すべてのH1がこの番号を進めます。空の`numberingTemplate`は見出しの番号を隠すだけで、数えるのは止めません。そのため、H1がタイトルだけの記事では、組み込みの`{h1}.{n}`の種類で図の番号が`1.1`、`1.2`…になります。図1、2…と表示する方法は2つあります。 - `{n}`で番号を付け、`resetOn: 'never'`にした種類を使う（`resetOn: 'h1'`ではH1のたびに番号が最初からになります）。 - タイトルと、数えたくないほかのH1に、`numbered: false`の[見出しスタイル](https://postext.dev/ja/docs/configuration-styles.md#見出しスタイル)を指定する。そうした見出しは`{h1}`を進めず、そのままにします。最初の数える対象のH1より前では空のままで、`{h1}.{n}`はカウンターだけになります。また`resetOn: 'h1'`のリセットも起こさないので、番号はその見出しをまたいで続きます。`# Introduction`とその図1.1の後、番号なしの`# Appendix`の下にある最初の図は2.1ではなく1.2になります。 ```ts // Figure 1, 2, 3… in a single-article document resourceTypes: defaultResourceTypes('en').map((t) => ({ ...t, numberingTemplate: '{n}', resetOn: 'never' })), ``` ## 表スタイル `tableStyle`プロパティは、表リソースの文字組みと装飾を設定します。[名前付きの表スタイル](https://postext.dev/ja/docs/configuration-resources.md#名前付きの表スタイル)を選んだ表を除き、すべての表に適用されます。本体のセルと見出しのセルは別々に設定します。フォントファミリー、サイズ、色は、未設定のときは解決済みの本文の値を継承するため、`tableStyle`のない文書では表が本文の文字組みで描画されます。 ```ts const config: PostextConfig = { tableStyle: { headerBold: true, headerBackground: { hex: '#f0f0f0', model: 'hex' }, borders: true, borderWidth: { value: 0.75, unit: 'pt' }, }, }; ``` | プロパティ | 型 | 既定値 | 説明 | | --- | --- | --- | --- | | `bodyFontFamily` | `string` | 本文のフォント | 本体のセルのフォントファミリー。 | | `bodyFontSize` | `Dimension` | 本文のサイズ | 本体のセルのフォントサイズ。 | | `bodyColor` | `ColorValue` | 本文の色 | 本体のセルの文字色。 | | `headerFontFamily` | `string` | 本文のフォント | 見出しのセルのフォントファミリー。 | | `headerFontSize` | `Dimension` | 本文のサイズ | 見出しのセルのフォントサイズ。 | | `headerColor` | `ColorValue` | 本文の色 | 見出しのセルの文字色。 | | `headerBold` | `boolean` | `true` | 見出しのセルを太字で描画します。 | | `headerItalic` | `boolean` | `false` | 見出しのセルをイタリックで描画します。 | | `headerLetterSpacing` | `Dimension` | `0pt` | 見出しのセルの各文字の後に加えるトラッキングで、スペースも対象になります。CSSの`letter-spacing`と同じです。正の値は文字の間隔を広げ（大文字の見出しには通常`0.05em`から`0.1em`が適します）、負の値は詰めます。`em`は見出しのサイズです。見出しの行はこの値を含めて計測されるため、折り返し、中央ぞろえ、そろえにトラッキングが反映され、キャンバス、HTML、PDFで同じように描かれます。見出し行と、`isHeader`を指定したセルを含め、すべての見出しのセルに適用されます。 | | `headerTextTransform` | `'none' \| 'uppercase'` | `'none'` | 見出しのセルを大文字で組みます。テキストの長さは変わらないため、Sandboxは引き続き各文字をソースに対応付けられます。大文字にすると長くなる文字（`ß`）はそのまま残ります。リソースへの参照はラベルを保ちます。 | | `headerBackgroundEnabled` | `boolean` | `true` | 見出し行の背後を塗ります。 | | `headerBackground` | `ColorValue` | `#f0f0f0` | 見出し行の塗りの色。 | | `bodyBackgroundEnabled` | `boolean` | `false` | 本体の行の背後を塗ります。 | | `bodyBackground` | `ColorValue` | `#ffffff` | 本体の行の塗りの色（有効なときだけ塗ります）。 | | `bodyAlternateBackgroundEnabled` | `boolean` | `false` | 縞模様の行。本体の行を1行おきに`bodyAlternateBackground`で塗ります。[縞模様の行](https://postext.dev/ja/docs/configuration-resources.md#縞模様の行)を参照してください。 | | `bodyAlternateBackground` | `ColorValue` | `#f2f2f2` | 交互の本体の行の塗り（有効なときだけ塗ります）。 | | `borders` | `boolean` | `true` | セルの罫線を引きます。 | | `borderColor` | `ColorValue` | 本文の色 | 罫線の色。 | | `borderWidth` | `Dimension` | `0.75pt` | 罫線の太さ（96 DPIで約1px。ページのDPIに応じて変わります）。`'booktabs'`はこれを使わず、独自の太さを使います。 | | `cellPadding` | `Dimension` | `0.375em` | すべてのセルの内側余白。 | | `rules` | `'grid' \| 'horizontal' \| 'outer' \| 'none' \| 'booktabs'` | `'grid'` | `borders`がオンのときに引く罫線です。セルの格子全体、水平の罫線だけ（各行の上端と下端。縦の罫線はなし）、外枠だけ、なし、または学術誌の表の三本罫（[booktabs の罫線](https://postext.dev/ja/docs/configuration-resources.md#booktabs-の罫線)を参照）のいずれかです。 | | `borderRadius` | `Dimension` | `0` | 表の外枠の角の半径です。外枠は角を丸めて引かれ（`grid`または`outer`の罫線の場合）、セルの塗りと見出しの背景はこの形で切り抜かれます。`rules: 'none'`のときや罫線がオフのときも同じです。水平の罫線は外側の輪郭に合わせて切り詰められ、内側の罫線はまっすぐなままです。ページをまたいで分割された表は、最初の部分の上の角と最後の部分の下の角を丸めます。値は表の幅と高さの半分までに制限されます。`'booktabs'`の罫線は直線のままです（塗りは角に合わせて切り抜かれます）。 | | `heavyRuleWidth` | `Dimension` | `0.08em` | booktabs：表の上と最終行の下の罫線。`em`は本文セルの文字サイズです。 | | `lightRuleWidth` | `Dimension` | `0.05em` | booktabs：見出し行の下の罫線とグループ罫。 | | `spanRuleWidth` | `Dimension` | `0.03em` | booktabs：複数列にまたがる見出しセルの下の罫線。 | | `spanRules` | `'trimmed' \| 'full' \| 'none'` | `'trimmed'` | booktabs：最後の見出し行より上で複数列にまたがる見出しセルの下の罫線。両端を`spanRuleTrim`ずつ詰める、セル幅いっぱいに引く、引かない、のいずれか。 | | `spanRuleTrim` | `Dimension` | `0.5em` | booktabs：両端を詰めるまとめ罫を、片側でどれだけ短くするか。 | | `groupRules` | `boolean` | `false` | booktabs：グループの見出しとなる本体行の上に細罫を引きます。 | | `continuedFootRule` | `'bottom' \| 'light' \| 'none'` | `'light'` | booktabs：分割した表のうち次のページへ続く部分を閉じる罫線。 | | `overflow` | `'split' \| 'clip' \| 'hide'` | `'split'` | ページより高い表の扱いです。次のページ以降に続ける、収まる行だけを残す、表を省く、のいずれかです。`splitInline`がオンなら、本文中に置いた表で段の残りに収まらないものにも適用します。後述します。 | | `splitInline` | `boolean` | `true` | `here`に置いた表にも`overflow`を適用します。段に残った余地に収まらないインラインの表は、行の間で切られ、次の段の頭に続きます。`false`にすると、postext 1.24までと同じく、そうした表を丸ごと次の段に移します。以前のバージョンで保存された設定のうち、章でリソースを埋め込んでいるものは`false`として読み込まれます。[ページより高い表](https://postext.dev/ja/docs/configuration-resources.md#ページより高い表)を参照。postext 1.25から。 | | `continuedSuffix` | `string` | `'(cont.)'` | 分割された表の続きの各部分で、キャプションの後にスペースを挟み、イタリックで付け加えます。中国語の文字または全角文字で始まる接尾辞（`'（续）'`）は、キャプションに詰めて組みます。 | | `continuesMarkerEnabled` | `boolean` | `true` | 次のページに続く各部分の下にマーカーを置きます。 | | `continuesMarker` | `string` | `'Continued'` / `'Continúa'` | そのマーカーの文字列で、部分の下に注記の書体で右そろえに組みます（[キャプションスタイル](https://postext.dev/ja/docs/configuration-resources.md#キャプションスタイル)を参照）。既定値は文書の言語に従います（8つの言語については[文書の言語](https://postext.dev/ja/docs/configuration-text.md#文書の言語)を参照）。 | 罫線の太さは端数のまま保たれます。`0.5pt`の罫線は1ピクセルに切り上げられず、PDFでも画面でもヘアラインとして引かれます（下限は0.25pxです）。 ### 縞模様の行 長いデータ表は、1行おきに色を付けると行を横にたどりやすくなります。`bodyAlternateBackgroundEnabled`で縞をオンにし、`bodyAlternateBackground`でその色を設定します。 ```ts const config: PostextConfig = { tableStyle: { bodyBackgroundEnabled: true, bodyBackground: { hex: '#ffffff', model: 'hex' }, bodyAlternateBackgroundEnabled: true, bodyAlternateBackground: { hex: '#eef3fa', model: 'hex' }, }, }; ``` 行は見出し行の次の行から数えます（見出し行は`TableModel.headerRowCount`、または見出しのセルだけからなる先頭の行）。その行は`bodyBackground`のまま（`bodyBackgroundEnabled`がオフなら塗りなし）で、次の行が交互の塗りになり、以下同様に続きます。数え方はページではなく表モデルに従います。そのため、ページをまたいで分割された表でも各行の縞はどのページでも変わらず、複数の行にわたって結合したセルは最初の行の縞になります。見出しのセルは見出しの塗りを保ち、セル自身の`background`はその両方に優先し、パレットに連動した色はパレットに従います。[名前付きの表スタイル](https://postext.dev/ja/docs/configuration-resources.md#名前付きの表スタイル)はこの2つのフィールドをほかのフィールドと同じように設定するため、1つのスタイルだけを縞模様にし、文書のほかの表はそのままにできます。Sandboxでは、**本体のセル**にある**縞模様の行**スイッチとその色がこれに当たります。 VDTでは、交互の行のセルが`alternate: true`を持ち、表のレイアウトが`bodyAlternateBackground`を持ちます。`tableCellFill(table, cell)`は、セルを塗る色（セル自身の色、見出しの色、交互の色、本体の色のいずれか）を返し、キャンバス、HTML、PDFのバックエンドはどれもこの色で塗ります。隣り合う塗りは継ぎ目なく接します。端数のピクセル比で表示するブラウザーやPDFビューアーは塗りを1つずつアンチエイリアス処理するため、そのままでは2つのセルの間にヘアライン状にページが透けて見えます。そこでHTMLとPDFのバックエンドは`tableCellFillRects(table)`を塗ります。これは各セルの塗りに、後から塗るセルと共有するすべての辺をまたぐ細い帯を加えたもので、その帯は後のセルが覆います。キャンバスは塗りをデバイスピクセルに合わせます。 ### booktabs の罫線 学術誌や教科書の表は、縦罫を使わず三本の罫線で組むのが普通です。表の上に太罫、見出しの下に細罫、最終行の下に太罫を引き、複数列をまとめる見出しの下には短い罫を引きます（LaTeX の`booktabs`パッケージの`\toprule`、`\midrule`、`\cmidrule`、`\bottomrule`）。`rules: 'booktabs'`はこの形を描きます。 ```ts const config: PostextConfig = { tableStyle: { rules: 'booktabs', borderColor: { hex: '#000000', model: 'hex' }, headerBackgroundEnabled: false, }, }; ``` - 表の上の罫線と最終行の下の罫線の太さは`heavyRuleWidth`（`0.08em`）、見出し行の下の罫線は`lightRuleWidth`（`0.05em`）です。見出し行のない表には見出しの罫線がありません。 - 最後の見出し行より上で複数列にまたがる見出しセルの下には、太さ`spanRuleWidth`（`0.03em`）の罫線を引きます。`spanRules: 'trimmed'`（既定）では両端を`spanRuleTrim`（`0.5em`）ずつ詰めるので、隣り合う二つの見出しの罫線は接しません。`'full'`はセル幅いっぱいに引き、`'none'`は引きません。 - `groupRules: true`は、グループの見出しとなる本体行（表の全幅にわたる一つのセル、または見出しセルだけの行）の上に細罫を加えます。その行が表やページの先頭に来るときは、見出しの罫線がすでにあるので加えません。 - 太さは本文セルの文字サイズ（`bodyFontSize`）を基準に解決するので、見出しの文字が大きくても見出しの罫線は太くなりません。太さを`0`にするとその罫線は引きません。 - 罫線の色は`borderColor`です（パレットに結び付いた色はパレットと`:::part palette`に従います）。`borders: false`ですべて消えます。`borderWidth`も`borderRadius`も効きません。罫線は直線のままで、セルの塗りは角丸の枠に合わせて切り抜かれます。見出しの塗り、縞模様の行、セル自身の`background`はほかのパターンと同じく罫線の下に塗られます。 - ページをまたいで分割した表は各部分で見出し行を繰り返すので、どの部分も太罫と見出しの罫線で始まります。最終行の下の太罫は最後の部分だけを閉じます。次のページへ続く部分は`continuedFootRule`で終わります。細罫（`'light'`、既定）、太罫（`'bottom'`）、なし（`'none'`）のいずれかです。 罫線はレイアウトが一度だけ計算します。VDT の表はそれを`strokes`（`{ x1, y1, x2, y2, widthPx }`、表本体の左上隅からの相対位置）として持ち、キャンバス、HTML ビューア、PDF、固定レイアウトの EPUB はそのとおりに引きます。タグ付き PDF ではレイアウトのアーティファクトです。リフロー型 EPUB では表と見出しの CSS の罫線として書き出し、両端を詰めた罫線は背景の線で描きます。Sandbox では、**罫線**のリストで**booktabs**（三本罫）を選ぶとこれらの項目が表示され、**罫線の太さ**と**角の半径**は隠れます。 ### 名前付きの表スタイル 文書の表がすべて同じ体裁であることはまれです。角を丸めた外枠付きの紺の格子のチェックリスト、外枠だけで囲んだ選択肢の行、水平の罫線だけのデータ表、といった具合です。`tableStyles`で名前付きの変種を宣言し、表リソースは`table.styleId`でその1つを選びます。スタイルが設定していないフィールドは、まず`tableStyle`から、次に本文から読み取られるため、スタイルにはその表を区別する点だけを書けば済みます。`styleId`のない表や、どのスタイルも宣言していないidを持つ表は`tableStyle`のままです。`tableStyles`のない文書は、これまでとまったく同じに描画されます。 ```ts const config: PostextConfig = { tableStyle: { borderColor: { hex: '#163a76', model: 'hex' }, borderWidth: { value: 1.3, unit: 'pt' }, borderRadius: { value: 10, unit: 'pt' }, }, tableStyles: [ { id: 'option', name: 'Option row', rules: 'outer', borderColor: { hex: '#7a9cc6', model: 'hex' }, borderWidth: { value: 1, unit: 'pt' }, borderRadius: { value: 8, unit: 'pt' }, headerBackgroundEnabled: false, }, ], }; // In the resources: this table is set in the "option" style. const resource: Resource = { id: 'choices', typeId: 'table', kind: 'table', createdAt: 0, updatedAt: 0, table: { model: { rows: [/* … */] }, styleId: 'option' }, }; ``` 各エントリーは`tableStyle`のすべてのフィールドに加えて、`id`（`table.styleId`が参照するもの）と、エディター向けの省略可能な`name`（既定値はid）を取ります。スタイルで設定できるものはすべて表ごとに適用されます。文字組み、塗り、罫線、罫線の引き方、角の半径、内側余白、そして続きの文字列を含む、ページに収まらないときの扱いです。`resolveTableStylesConfig(styles, tableStyle, resolvedBodyText, locale?)`は解決済みのリストを、`pickTableStyle(resolved, styleId)`は表を組むスタイルを返し、`stripTableStylesDefaults`は未設定のフィールドを取り除きます（組み込みの既定値と等しいフィールドは残します。そのフィールドは、異なる`tableStyle`の値を引き続き上書きするからです）。リフロー型 EPUB では、名前付きスタイルは表のクラス（`pt-table-`）になり、本のスタイルシートがそれを装飾します。 ### ページより高い表 フロートの表が、渡された新しいページに収まらない場合でも、縮められたりはみ出したりはしません。`overflow: 'split'`（既定値）では、エンジンがページに収まる最後の行境界で表を分割し、必要なだけ次のページに続けます。続きの各部分は表の見出し行（`TableModel.headerRowCount`、未設定なら見出しのセルだけからなる先頭の行）を繰り返し、説明の後に`continuedSuffix`を付けたキャプションを再び掲げます（「Table 6-4. Title *(cont.)*」）。次に続く各部分の下には、注記の書体で`continuesMarker`を右そろえに置きます。表の注記は最後の部分まで持ち越されます。分割は結合したセルを横切りません（行方向に結合したセルは丸ごと次の部分に移ります）。また、下に続く行の見出しとなる行、つまり表の全幅にわたる1つのセルからなる行は、ページの末尾に取り残されず、次の部分へ送られます。booktabs の表は、続く各部分を`continuedFootRule`で閉じます（[booktabs の罫線](https://postext.dev/ja/docs/configuration-resources.md#booktabs-の罫線)を参照）。 **最初の部分の終わる位置**。参照の後で空の段の頭を渡された表は、そこに収まる行を取り、次の枠に続きます。段を単独で占めるときは、段の下端まで埋めます。部分の下に本文の行が3行未満しか残らない場合は、テキストの切れ端を残さず、その行も取ります。段にすでに別のフロートの帯がある場合（たとえばページの頭を横切る全幅の図）は、部分は段の下端から少なくとも本文3行分手前で止まります。これは、フロートがほかのフロートと段を共有するときに残すテキストの余地で、段がフロートだけで終わらず、表の下にいくらかテキストが来るようにするためです。長い表を段の下端まで続けたい場合は、表が始まるページにほかのフロートがない位置で参照するか（たとえば全幅の図のあるページの次）、行を段に収まるようにしてください。 `'clip'`はページに収まる先頭の行を残し、残りを知らせずに捨てます（注記はその部分の最後に置かれます）。`'hide'`は表全体を省きます。どちらも表がページより高いときだけ働き、収まる表はどのモードでも丸ごと置かれます。 **本文中に置いた表**。`here`に置いた表（`::resource`で埋め込んだもの）も、postext 1.25から同じ規則に従います（`splitInline`、既定でオン）。段に残った余地に収まらないときは、行の間で切ります。最初の部分は上のフロートのアキを保ち、少なくとも見出し行と本体の2行を含みます（それに満たなければ、これまでどおり表全体が次の段から始まります）。続く各部分は、上にアキを取らずに次の段の頭から始まり、その段の幅で組まれます（1段半レイアウトで部分が狭い段に入れば、その幅で組みます）。`::resource`の行の後のテキストは、最後の部分の後に続きます。見出し行の繰り返し、接尾辞を付けたキャプション、続きの印、最後の部分の注記、3行以上の末尾、結合セルや見出しとなる行を避ける分割位置は、フロートの表と同じです。本体が5行未満の表は切りません。`'clip'`は段より高いインラインの表の先頭の収まる行を残し、段の頭に組みます。`'hide'`はそうした表を省きます。それより低い表は、どちらのモードでも丸ごと次の段に移ります。インラインの表が始めるページでは、そのページが受け取るフロートから空けておくのは最初の部分の余地だけなので、待っている全幅の図がそのページの頭に来て、表はその下に続きます。縦組みのページのインラインの表と、囲みの中の表は切りません。`splitInline: false`にすると、postext 1.24までと同じく、インラインの表を丸ごと次の段に移します。 続きの文字列の既定値は文書の言語（`locale`、なければハイフネーションのロケール）によって決まります。英語は`(cont.)` / `Continued`、スペイン語は`(cont.)` / `Continúa`で、フランス語、ドイツ語、イタリア語、ポルトガル語、カタルーニャ語、オランダ語にも同様の既定値があります（[文書の言語](https://postext.dev/ja/docs/configuration-text.md#文書の言語)に一覧があります）。 セルの内容はインラインのMarkdownで、セル内の改行（改行文字、またはキャプションや注記と同じく`\\`）は新しい段落を始めます。行頭記号かダッシュ（`•`、`-`、`*`、`–`）または番号（`1.`、`1)`）の後にスペースが続く段落は、リストの項目として組まれます。記号は書かれたとおりに描かれ、テキストは文書の`unorderedLists.gap`だけ離れてぶら下がり、折り返した行はテキストにそろい、先頭のスペース2つで1段階入れ子になります。そのため、`• Ofrece elección\n• Acomoda a personas diestras y zurdas`と書いたセルは2項目のリストになります。通常のスペースだけの行は何も加えません。ノーブレークスペース（U+00A0）を含む行は、CommonMarkと同じくセルの1行になるため、`1\n`の後にノーブレークスペースを続けると、その行は2行分の高さになります。セルのテキスト末尾のノーブレークスペースは幅を保ちます。`760`とノーブレークスペースを`(231)`の上に右ぞろえで置くと、端からスペース1つ分手前で終わり、0が1に近づきます。数字が正確にそろうのは、スペースが括弧と同じ幅の場合だけで、たいていの書体ではスペースのほうが狭くなります（postext 1.4までは、どちらも取り除かれていました）。 列の幅はスタイルではなく表モデルに属します。`TableModel.columnWidths`は列ごとの相対的な重みを並べた省略可能な配列で、レイアウト時に正規化されます。`[2, 1, 1]`は最初の列に幅の半分を与えます。配列がない場合、長さが合わない場合、正でない重みがある場合は、均等に分割されます。表エディターは、列を追加または削除したときに配列を列とそろえたまま保ちます。 ### 表モデルの構築 `TableModel`は行優先の格子で、各セルは格子内の位置によって配置されます。`rows[r][c]`は列`c`に置かれます。そのため、結合したセルは自分が覆うセルを格子に残し、覆われた各セルには主セルを指す`hiddenBy`が付きます。覆われたセルを省くHTMLの表とは異なります。`postext`がエクスポートするモデルのヘルパーはこの形を保ちます。どれも新しいモデルを返す純粋関数で、`mergeCells(model, { start, end })`と`unmergeCell(model, at)`、`addRow`、`addColumn`、`removeRow`、`removeColumn`、`setCellContent`、`setCellImage`、`setCellBackground`、`setAlignment`があります。行と列の4つのヘルパーは結合を崩しません。結合したブロックの内側に追加した行や列はブロックを広げ、ブロックの前に追加したものはブロックを移動させ、ブロックから削除したものはブロックを縮めます。最初の行や列を失ったブロックは、新しい左上のセルに内容を保ちます。そして、すべての`hiddenBy`は引き続き主セルを指します。 `parseTSV(text, options?)`は、タブ区切りのテキスト、つまりスプレッドシートから貼り付けた範囲からモデルを作ります。行は改行で、セルはタブで分割し、短い行は格子が長方形になるように補います。`headerRows`は先頭の行を見出し行にします。そのセルには`isHeader`が、モデルには`headerRowCount`が付くため、ページをまたいで分割された表ではこれらの行が繰り返されます。 ```ts import { parseTSV, mergeCells } from 'postext'; let model = parseTSV('Part\tQty\tNote\nBolt\t4\tM6\nNut\t8\t', { headerRows: 1 }); // model.headerRowCount === 1; model.rows[0][0] is { content: 'Part', isHeader: true } model = mergeCells(model, { start: { row: 2, col: 1 }, end: { row: 2, col: 2 } }); // rows[2][1] gets colSpan: 2; rows[2][2] stays in the grid with hiddenBy: { row: 2, col: 1 } ``` `tableGridIssues(model)`は格子を検査します。健全なモデルには空のリストを返し、そうでなければ格子が壊れている箇所をすべて行の順に返します。`spanOverlap`は、別のセルの`colSpan` / `rowSpan`の下にある可視のセルです（`coveredBy`がそのセルを示します）。覆われたセルをHTMLのように省くとこうなります。その後のすべてのセルが結合の上にずれるためです。`missingCells`は、最後の列より前で終わり、残りを覆う結合もない行で、格子に穴が開きます。 ```ts import { tableGridIssues } from 'postext'; tableGridIssues({ rows: [ [{ content: 'A', colSpan: 2 }, { content: 'C' }], [{ content: '1' }, { content: '2' }, { content: '3' }], ], }); // => [{ kind: 'spanOverlap', row: 0, col: 1, coveredBy: { row: 0, col: 0 } }, // { kind: 'missingCells', row: 0, col: 2 }] ``` 文書で使う表の格子にこのような問題があると、`doc.contentWarnings`に`raggedTableGrid`として報告されます（[文書の中の警告](https://postext.dev/ja/docs/configuration-programmatic-usage.md#文書の中の警告)を参照）。 ## キャプションスタイル `captionStyle`プロパティは、リソースのキャプション（画像、SVG、表の下、または上に置く`Figure 1 — …`の行）を設定します。番号付きのラベルと説明は同じ書体とサイズを共有しますが（エンジンの制約です）、ラベルには独自のウェイト、イタリック、色を付けられます。フォントファミリー、サイズ、色は、未設定のときは本文の値を継承します。キャプションはリソースの**上**に置くことができ（表では通常この形です）、ブロックの幅いっぱいに広がる色付きの**帯**の上に組むこともできます。省略可能な小さめの**注記**（出典、クレジット。`Resource.note`）は、サブオブジェクト`note`で設定します。リソースの種類は、`ResourceType.captionStyle`で自分のリソースについてこれらのフィールドのどれでも上書きできます（[リソースの種類](https://postext.dev/ja/docs/configuration-resources.md#リソースの種類)を参照）。 ```ts const config: PostextConfig = { captionStyle: { align: 'center', labelBold: true, labelColor: { hex: '#295AA3', model: 'hex' }, descriptionItalic: true, position: 'above', backgroundEnabled: true, padding: { value: 0.35, unit: 'em' }, note: { italic: true, align: 'left' }, }, }; ``` | プロパティ | 型 | 既定値 | 説明 | | --- | --- | --- | --- | | `fontFamily` | `string` | 本文のフォント | キャプションのフォントファミリー（ラベルと説明）。 | | `fontSize` | `Dimension` | 本文のサイズ | キャプションのフォントサイズ（ラベルと説明）。 | | `color` | `ColorValue` | 本文の色 | 説明の文字色。 | | `align` | `'left' \| 'center' \| 'right' \| 'justify' \| 'start' \| 'end'` | `'left'` | キャプションの行の水平方向のそろえです。`'justify'`は最後の行以外を全幅に広げます。キャプションの帯の上では、行は帯の内側余白の内側でそろい、横に置くキャプションは自身の幅の中でそろいます。 | | `gap` | `Dimension` | `0.75em` | リソースとキャプションの間の垂直方向のアキ。 | | `labelBold` | `boolean` | `true` | 番号付きのラベル（たとえば`Figure 1`）を太字で描画します。 | | `labelItalic` | `boolean` | `false` | 番号付きのラベルをイタリックで描画します。 | | `labelColor` | `ColorValue` | キャプションの`color` | 番号付きのラベルの色。 | | `descriptionItalic` | `boolean` | `false` | 説明のテキストをイタリックで描画します。 | | `position` | `'above' \| 'below'` | `'below'` | キャプションの位置です。`'above'`ではキャプション（とその帯）が先に来て、リソースの本体はキャプションの高さと`gap`の分だけ下がります。この場合、注記は本体の下に置かれます。 | | `backgroundEnabled` | `boolean` | `false` | キャプションの背後に帯を塗ります。帯はブロックの幅いっぱいに広がり、キャプションの行と四方の`padding`を囲みます。 | | `background` | `ColorValue` | パレットのメインカラー | 帯の塗りの色（有効なときだけ塗ります）。 | | `padding` | `Dimension` | `0.35em` | 帯の縁とキャプションのテキストの間の内側余白。帯がオフのときは無視されます。 | | `note` | `object` | — | リソースの注記のスタイル。下のサブテーブルを参照してください。 | | `labelNumberGap` | `string` | ノーブレークスペース。日本語の文書では`''` | キャプションとインラインの`:ref`で、ラベルと番号の間に置くものです（*Figure 1.7*、*Fig. 1.7*）。中国語と日本語では詰めて組みます。`''`で图1-1になり、日本語の文書ではこれが既定値です（図1-1）。 | | `labelSeparator` | `string` | `'. '`。日本語の文書では`'　'` | 番号の後、説明の前に置くものです（*Figure 1.7. A caption*）。中国語のキャプションは全角スペース`'　'`を使い（图1-1　标题）、日本語のキャプションも既定で同じです（図1-1　東京の地図、JLReq §4.3）。番号のないラベルは独自の規則に従い、接頭辞がピリオドで終わっていなければピリオドを付けます。 | サブオブジェクト`note`は`Resource.note`のスタイルを設定します。これはリソースの下に小さめのサイズで組む短いテキスト（出典、クレジット、補足）です。キャプションと同じインライン書式と`:ref`を使え、キャプションの書体を継承します。キャプションが下にあるときはキャプションの下に、キャプションが上にあるときはリソースの本体の下に置かれます。注記の高さはブロックに含まれるため、注記付きのリソースは1つの単位としてフロートします。 | プロパティ | 型 | 既定値 | 説明 | | --- | --- | --- | --- | | `note.fontSize` | `Dimension` | キャプションのサイズの0.85倍 | 注記のフォントサイズ。 | | `note.color` | `ColorValue` | キャプションの`color` | 注記の文字色。 | | `note.italic` | `boolean` | `false` | 注記をイタリックで描画します。 | | `note.gap` | `Dimension` | `0.35em` | 注記とその前にあるもの（キャプションまたは本体）の間のアキ。 | | `note.align` | `'left' \| 'center' \| 'right' \| 'justify' \| 'start' \| 'end'` | `'left'` | 注記の行の水平方向のそろえ。キャプションの`align`と同じです。 | 種類ごとの上書きは`mergeCaptionStyle(resolvedCaptionStyle, override, palette?)`で統合されます。パイプラインの外で同じ解決を行う必要のあるホストのためにエクスポートされています。 ## ダイアグラムスタイル `diagramStyle`プロパティは、埋め込んだSVGのダイアグラム（`kind: 'svg'`のリソース）の色の付け方と、その文字を組むフォントを設定します。**単色刷りモード**は、ダイアグラム内のすべての色を1つのインキの濃淡に置き換える色変換の処理で、1色の特色で印刷する文書でも図が忠実に再現されます。**フォントの埋め込み**は、各SVGの文字が指定するフェイスをそのSVGに埋め込む処理で、ラベルがキャンバス、HTML、EPUBのどこでも文書のフォントで組まれます（[SVGの文字のフォント](https://postext.dev/ja/docs/configuration-resources.md#svgの文字のフォント)を参照）。 ```ts const config: PostextConfig = { diagramStyle: { singleInk: true, inkColor: { hex: '#295AA3', model: 'hex' }, }, }; ``` | プロパティ | 型 | 既定値 | 説明 | | --- | --- | --- | --- | | `singleInk` | `boolean` | `false` | 埋め込んだすべてのSVGダイアグラムを、1つのインキの濃淡に色変換します。 | | `inkColor` | `ColorValue` | メインカラー（`#295AA3`） | インキです。既定値は文書のパレットのメインカラーで（`paletteId: 'main-color'`でパレットに連動）、パレットの色見本を差し替えると、見出しや太字の範囲と一緒にダイアグラムの色も変わります。 | | `inlineFonts` | `boolean` | `true` | 各SVGを画像として表示する前に、その文字が指定するフェイス（`font-family`）を`@font-face`のデータURIとして埋め込みます。対象はキャンバス、HTML、EPUB、PDFのラスターのフォールバックです。保存されたファイルには書き込みません。リソース単位では`svg.inlineFonts: false`で無効にできます（postext 1.25以降）。 | ### 単色刷りの仕組み `singleInk`を有効にすると、SVGマークアップ内のすべての色が`inkColor`の濃淡に書き換えられます。その濃さは**1 − 相対輝度**です（ガンマ補正済みのチャンネルにRec. 709の係数を適用します。知覚的な近似ですが、濃淡の対応付けには十分です）。この対応付けは知覚上の明るさを保ちます。白は紙の白に、黒はインキのベタになり、明るい塗りは元の色相にかかわらず明るいままです。淡い黄色の背景はインキの淡い濃淡になり、暗い線はインキのベタに近づきます。 色変換はエクスポートされた`applySingleInkToSvg(svgText, inkHex)`が行います。この関数はDOMを使わず、SVGマークアップをテキストとして処理します。 - `#rgb` / `#rgba` / `#rrggbb` / `#rrggbbaa`の16進リテラル、`rgb()` / `rgba()`関数、`hsl()` / `hsla()`関数は、表示属性、インラインの`style`、グラデーション、``など、どこにあっても書き換えられます。関数のチャンネルは整数、小数、パーセントのいずれでもよく、カンマ区切りとスペース区切りのどちらの構文も使えます。そのため`rgb(11.37%, 20%, 50.59%)`（Cairoが書き出す形）や`rgb(51 102 153 / 50%)`も色変換されます。濃淡にした関数は`rgb(…)`または`rgba(…)`として書き戻されます。 - `white`と`black`のキーワードは、ペイントの値として現れる場所（`fill`、`stroke`、`stop-color`、`flood-color`、`color`。属性またはインラインスタイルのプロパティとして）でだけ置き換えられ、テキストの内容やラベルの中では置き換えられません。 - `none`、`transparent`、`currentColor`はそのまま残り、ほかの名前付きの色（`red`、`steelblue`など）や、塗りを指定していない図形やテキストの既定の黒もそのままです。こうした要素を色変換したい場合は、明示的に色を指定してください。 - アルファチャンネルは保たれます（`#rgba` / `#rrggbbaa`の桁と`rgba(…)`のアルファ成分はそのまま引き継がれます。パーセントのアルファは数値として書き出されます）。 - `inkHex`を解析できない場合は、入力がそのまま返されます。 - 結果のルートの``には`data-postext-single-ink="#…"`（インキ）が付き、すでにこの印を持つマークアップは、どのインキを示していてもそのまま返されます。この対応付けはべき等ではありません。2回目の処理ではすべての色が明るくなり、黒はインキの約3分の2になります。そのため画像の色変換は、利用者のコードとバックエンドのどちらが先に処理しても1回だけ行われます（この印はpostext 1.5で追加されたもので、1.4で色変換したマークアップには付いていません）。 ```ts import { applySingleInkToSvg } from 'postext'; const recoloured = applySingleInkToSvg(svgText, '#295AA3'); applySingleInkToSvg(recoloured, '#295AA3') === recoloured; // true: never twice ``` 単色刷りは3つのバックエンドすべてに適用されます。PDFバックエンドは、`resourceBytes`から渡されたSVGのバイト列を色変換してからベクターとして描きます。キャンバスとHTMLのバックエンドは、求めに応じて描画するSVGの画像に色を付けます（[キャンバスとHTMLでの単色刷り](https://postext.dev/ja/docs/configuration-resources.md#キャンバスとhtmlでの単色刷り)を参照）。そのため、書き出したPDFは画面上のプレビューと一致します。 解決関数（resolver）と既定値の除去関数（stripper）は、ほかのセクションと同じ形で、型`DiagramStyleConfig` / `ResolvedDiagramStyleConfig`とともに提供されます。 ```ts import { DEFAULT_DIAGRAM_STYLE_CONFIG, resolveDiagramStyleConfig, stripDiagramStyleDefaults, applySingleInkToSvg, } from 'postext'; import type { DiagramStyleConfig, ResolvedDiagramStyleConfig } from 'postext'; const resolved = resolveDiagramStyleConfig(config.diagramStyle); // => { singleInk: false, inkColor: { hex: '#295AA3', model: 'hex', paletteId: 'main-color' } } const minimal = stripDiagramStyleDefaults(config.diagramStyle); // => undefined when everything matches the defaults ``` ### キャンバスとHTMLでの単色刷り キャンバスとHTMLのバックエンドは、画像をSVGマークアップではなく、デコード済みの画像（`registerResourceImage`）またはURL（`resourceImageUrl`）として受け取ります。求めに応じて、描くものに同じ対応付けを適用します。 - **キャンバス**（`renderPage`、`renderPageToCanvas`、`renderToCanvas`）。色付けの対象となるすべてのSVG画像（図、表のセルの画像、デザインの画像、ボックスのアイコンやマーカー）は、配置されたサイズでラスタライズされ、そのピクセルがインキの濃淡に色付けされます。``として登録したか`ImageBitmap`として登録したかは問いません。色付けしたビットマップは、ほかのベクターのラスターと同じくキャッシュされます。ビットマップの画像は色付けされません。 - **HTML**（`renderToHtml`、`renderToHtmlIndexed`）。各SVGの``には`filter: url(#pt-ink-…)`が付き、ページが持つ`feColorMatrix`を指します。これはサイズ0の``に入った``で、ページの最初に置かれ、インデックス付きの出力ではページの`decorationHtml`に含まれます。単色刷りが適用されている間は、画像の有無にかかわらずすべてのページがこれを持つため、ブロックを1つずつ差し替えるホストが、フィルターのない画像を持ち込むことはありません。 **二度は色付けしない**。postext 1.4までは、キャンバスとHTMLのバックエンドは画像を渡されたとおりに描いていたため、ホストは渡す前に`applySingleInkToSvg`で自らマークアップを色変換していました。バンドルのアダプターとSandboxは今もそうしています。マークアップの処理はPDFとまったく同じ色になるからです（下の最後の段落を参照）。そのため画像の色付けは1回だけで、それを保証する次の3つの規則が3つのバックエンドすべてで成り立ちます。 - **印の付いたマークアップには手を加えない**。PDFバックエンドは`resourceBytes`を`applySingleInkToSvg`で色変換するため、すでに色変換されたSVGのバイト列は渡されたとおりに描かれます。キャンバスとHTMLでも、マークアップに印のあるSVGのデータURIから読み込んだ画像は色付けされません。 - **postext 1.xでは、求められない限りオフ**。キャンバスは、独自のフラグなしで登録されたSVG画像を、描画に`singleInk: true`（`RenderPageOptions`）が渡されたときだけ色付けし、`registerResourceImage(id, img, { singleInk: true })`で登録した画像はどの描画でも色付けします。HTMLバックエンドは、`renderToHtml`が`singleInk: true`を受け取ったとき、または`resourceImageUrl`のリゾルバーが`singleInk: true`を持つときに色付けします。1.4向けに書かれたホスト、つまりマークアップを色変換し、デコードした画像をフラグなしで登録するホストは、出力が変わりません。次のメジャーリリースでは既定で色付けするようになります。 - **`singleInk: false`は色付けしない**。blobやネットワークのURLの先にあるマークアップは読み戻せないため、自分で色変換してそのような方法でデコードする画像は、`registerBundleImages`やSandboxと同じく`singleInk: false`で登録します。`bundleImageUrl(bundle)`は`singleInk: false`を持つリゾルバーを返し、`bundleResourceBytes`はバンドル自身のバイト列をPDFに渡し、PDFバックエンドがそれを1回だけ色変換します。 どちらのバックエンドも、各画像の種別をVDTから知ります。図とセルの画像はリソースの種別を持ち、デザインの画像ブロックはレイアウト時にリソースから取った`imageKind`（`'svg'`または`'bitmap'`）を持ちます。`imageKind`ができる前に作られたVDTでは、キャンバスはベクターのソースとして登録されたデザインの画像をSVGとして扱い、HTMLバックエンドはURLがSVGのデータURIであるか`.svg`で終わる画像をSVGとして扱います。 マークアップを自分で色変換するか、バックエンドに元の画像を色付けさせるか、どちらか一方にしてください。両方を行ってはいけません。 ```ts import { applySingleInkToSvg, registerResourceImage, renderPage, renderToHtml } from 'postext'; // Raw SVG: tinted while diagramStyle.singleInk is on… registerResourceImage('diagram.svg', rawImg, { singleInk: true }); // …or register it plainly and ask on each render. registerResourceImage('diagram.svg', rawImg); const canvas = renderPage(doc.pages[0], doc, { singleInk: true }); // Recoloured before decoding (as postext 1.4 hosts do): painted as given. const inked = applySingleInkToSvg(svgText, ink); registerResourceImage('diagram.svg', await decode(inked), { singleInk: false }); // The HTML backend with URLs to the raw markup. const html = renderToHtml(doc, { resourceImageUrl: urlFor, singleInk: true }); ``` `renderToHtml`は`singleInk`の既定値をリゾルバー自身のフラグから取るため、`bundleImageUrl(bundle)`にはオプションが要りません。 マークアップの処理が書き換えるすべての色（16進、`rgb()`、`hsl()`の値、`white`と`black`。[単色刷りの仕組み](https://postext.dev/ja/docs/configuration-resources.md#単色刷りの仕組み)を参照）について、ピクセルの対応付けは、アンチエイリアスのかかった縁やグラデーションも含めて同じ結果になります。両者が異なるのは、マークアップの処理が色をそのまま残す場合です。`white`と`black`以外の名前付きの色、`currentColor`、塗りのない図形やテキスト（既定の黒で描かれるもの）、SVGに埋め込まれたビットマップは、画面では色付けされますが、PDFでは元の色のままです。まったく同じ出力を得るには、ダイアグラムのすべての要素に16進、`rgb()`、`hsl()`のいずれかで明示的に色を指定してください。キャンバスがピクセルを読み戻せない場合（別のオリジンからCORSなしで読み込んだ``）、画像は色付けされずに描かれます。 ### SVGの文字のフォント SVGの画像は、キャンバス、HTML、EPUBのいずれでも``という画像として表示されます。画像の文書からはページのWebフォントが見えないため、``はシステムのフォントに置き換わってしまいます。postext 1.25以降、エンジンは画像をデコードする前、またはURLとして渡す前に、文字が指定するフェイスをマークアップに埋め込みます。フォントファイル1つにつき1つの`@font-face`規則を作り、そのバイト列をデータURIにして、ルートの``タグの直後の`