章 3.14 · 部 II · 技法
設定:テンプレートページ
テンプレートページのためのページテンプレート:フレーム、グループ、装飾、継承と左右ページのバリアント、画像のアンカーに付けるラベルスタイル、テンプレートが出す警告
かんたんな説明
このページでは、ページテンプレートを説明します。テンプレートは設定の中に描いたページで、フレームと呼ぶ名前付きの箱と、それぞれの位置、どこまで大きくなれるか、どう見えるかを決めます。テンプレートページのMarkdownは、そのフレームに名前で中身を入れます。そのため本文に位置を書くことはなく、設定に本文を書くこともありません。テンプレートはほかのテンプレートをもとにして一部のフレームだけを変えられ、左ページと右ページで違う形にもできます。画像の上に置く文字のラベルスタイルと、テンプレートが出すすべての警告とその直し方も載せています。
#ページテンプレート
テンプレートページは、形を設定のテンプレートから、中身を::::page{template="…"}フェンスのMarkdownから受け取るページです。テンプレートはフレームと呼ぶ長方形に名前を付け、Markdownはそれぞれの中身を名前(スロット)でフレームに送ります。Markdownに位置や大きさが現れることはなく、テンプレートに本文が現れることもありません。本のテンプレートはpageTemplatesプロパティに入れます。
const config: PostextConfig = {
calloutStyles: [{ id: 'caja-azul' }, { id: 'tab-titulo' }],
pageTemplates: [
{
id: 'tema-cajas',
decoration: {
elements: [
{ kind: 'image', id: 'fondo', resourceId: '{attr.fondo}', decorative: true,
placement: { anchor: { to: 'bleed', edge: 'top-left' }, size: { width: 'fill', height: 'fill' } } },
],
},
frames: [
{ name: 'titulo', takes: 'h1', style: 'tab-titulo' },
{ name: 'texto', flow: true },
{ name: 'dinero', style: 'caja-azul', padding: { right: { value: 62, unit: 'mm' } } },
{ name: 'dinero-fotos', layer: 2, width: { value: 60, unit: 'mm' },
placement: { anchor: { to: '#dinero', edge: 'top-right' } } },
],
groups: [
{ name: 'pagina', kind: 'stack', gap: { value: 6, unit: 'mm' }, frames: ['titulo', 'texto', 'dinero'] },
],
},
],
};idとフレーム1つだけを指定したテンプレートは、そのフレームが版面いっぱいに広がる1ページになります。ほかの項目はすべて省略できます。
| プロパティ | 型 | 既定値 | 説明 |
|---|---|---|---|
id | string | 必須 | ページのフェンスが指定する名前です(template="tema-cajas")。テンプレートのあいだで一意で、同じidの2つ目のテンプレートは無視されます。 |
name | string | idと同じ | Sandboxに表示する名前です。組版では読みません。 |
extends | string | なし | このテンプレートがもとにするテンプレートのidです。継承とバリアントを参照してください。 |
area | 'content' | 'trim' | 'bleed' | 'content' | フレームの位置の基準になる長方形です。'content'はページの版面で、本文と同じく左右のページで鏡像になります。'trim'は断裁後のページ、'bleed'は塗り足しを含めたページです。 |
grid | { columns, rows, columnGap?, rowGap? } | なし | 領域をセルに分け、フレームやグループをplacementの代わりにセルで配置できるようにします(grid: { col: 2, row: 1, cols: 2 }、1から数えます)。間隔の既定値は0です。 |
frames | FrameConfig[] | [] | フレームをテンプレートの順に並べます。この順序で先に測り、優劣がつかないときもこの順序で決めます。フレームを参照してください。 |
groups | FrameGroupConfig[] | [] | 空間を分け合うフレームの縦の積み重ねと横の並びです。グループを参照してください。 |
decoration | DesignSlot | なし | ページと一緒に描く画像、罫線、ボックスで、柱とノンブルと同じ要素の書き方を使います。テキスト要素に入れられるのはプレースホルダーだけです({pageNumber}、{chapterTitle}、ページのフェンスの属性を表す{attr.x})。要素はフレームやグループに固定でき('#dinero')、その場合はそれと一緒に動きます。装飾はフレームの後に置かれ、本文を押しのけることはありません。 |
header、footer | DesignSlot | false | 継承 | ページの柱とノンブルです。未設定なら章のものをそのまま使い、falseなら表示しません。 |
spread | boolean | false | テンプレートが、1枚として組む向かい合った2ページを表します。見開きは、左から右に読む本では必ず左ページから(右から左に読む本では右ページから)始まり、必要なら前に白ページが加わります。 |
gutter | Dimension | 0 | 見開きで、フレームが避けるノドの帯です。crossGutter: trueを指定したフレームは避けません。 |
variants | { recto?, verso? } | なし | 右ページ(recto)または左ページ(verso)での変更で、テンプレートそのものと同じように書きます。左右は物理的な位置なので、左から右に読む本でも右から左に読む本でも使えます。 |
overflowTemplate | string | このテンプレート | フレームが次のページに続くとき(overflow.)に加えるページのテンプレートです。未設定なら、加えたページはこのテンプレートを使い、続きのフレームだけを埋めます。 |
bodyStyle | string | なし | ページの本文の段落スタイルで、見出しスタイルにあるものと同じです。 |
palette | string | なし | ページのパレットの上書きで、見出しスタイルや部にあるものと同じです。 |
role | string | 'composed' | pagesフィルターを持つデザイン要素から見たページの役割です。 |
#フレーム
フレームは、組まれた中身を受け取る名前付きの長方形です。nameがMarkdownの指定するスロットで、テンプレートの中で一意です(アンカーはフレームとグループを同じ書き方で指すので、グループもフレームの名前を使えません)。
テンプレートにグリッドがあればフレームはgridのセルで、なければplacementで配置します。placementはデザイン要素の配置と同じしくみで、アンカー('container'は領域、'page'、'bleed'、ほかのフレームやグループなら'#name')、辺、オフセット、サイズからなります。ほかのフレームに固定したフレームは、そのフレームと一緒に動きます。どちらもなければ、フレームは領域全体を占めます。
| プロパティ | 型 | 既定値 | 説明 |
|---|---|---|---|
name | string | 必須 | スロットの名前です。 |
placement | ElementPlacement | 領域全体 | アンカー、辺、オフセット、サイズで、要素の配置と同じです。グリッドのセルでフレームを配置するときは無視されます。 |
grid | { col, row, cols?, rows? } | なし | テンプレートのグリッドのセルで、1から数え、cols × rows個のセルにまたがります(既定値は1)。グリッドの外にあるセルは、グリッドの中に戻されます。テンプレートにグリッドがなければ無視されます。 |
width、height | Dimension | { percent } | 'auto' | 'fill' | 'fill'、'auto' | 固定の長さ、領域に対する割合(0から100)、'auto'(中身そのものの大きさ)、'fill'(フレームを固定した辺までの残り)のいずれかです。未設定ならplacement.sizeを読み、それもなければ既定値(全幅、高さは中身に合わせる)になります。テキストのフレームには行長が要るので、幅の'auto'が意味を持つのは画像を1枚だけ入れるフレームです(フレームの高さに合わせたときの画像の幅になります)。エンジンが使えない値(負の長さ、不明な単位)は既定値として扱います。 |
minWidth、maxWidth、minHeight、maxHeight | Dimension | なし | 'auto'や'fill'のサイズと、グループが与えたり取り戻したりする空間の上限と下限です。最小値が最大値より優先され、範囲の外にある固定のサイズは範囲の中に収められます(どちらの場合もframeMinMaxが警告します)。 |
style | string | 枠なし | 囲みスタイルのidです。フレームは囲みスタイルで描きます(背景、枠線、パディング、帯、アイコン、ラベルのタブ、タイトル)。タブの文字はMarkdownから受け取ります(:::frame{slot="dinero" label="El dinero"})。囲みの設定のうち、本文の中での箱の置き場所に関するもの(placement、span、columns、width、fixedなど)はフレームには効きません。 |
padding | { top?, right?, bottom?, left? } | スタイルの値 | スタイルのパディングを辺ごとに上書きします。たとえば、ボックスの上に重ねる写真のための余地を作れます。 |
layer | number | 1 | 描く順序です。装飾はレイヤー0で、負のレイヤーはその下に描きます。 |
rotate | number | 0 | 時計回りの角度です。ボックスと中身が一緒に回ります。 |
verticalAlign | 'top' | 'middle' | 'bottom' | 'justify' | 'top' | フレームが中身より高いとき、中身をどこに置くかです。 |
columns、columnGap | number、Dimension | 1、スタイルの値 | フレームの中の段組みです。 |
exclude | 'none' | 'push' | 'none' | 'push'にすると、ほかのフレームの文字がこのフレームの長方形を避けて回り込みます。 |
flow | boolean | false | スロットを指定していない中身を、このフレームが受け取ります。 |
takes | 'h1' … 'h6' | なし | スロットを指定していないそのレベルの最初の見出しを、このフレームが受け取ります。そのため、ページのタイトルはフェンスの先頭に# Titleと書くだけです。 |
next | string | なし | 連結です。入りきらない中身は、同じページのその名前のフレームに続きます。 |
overflow.continueIn | string | なし | 入りきらない中身の続く先です。'#frame'(ページのほかのフレームで、nextと同じ)、'next-page'(このページの後に加えるページの同じフレーム)、'template:<id>'(そのテンプレートのページ)のいずれかです。 |
overflow.mark | string | false | 言語による | 切れた部分の終わりに付ける目印です。未設定なら、文書の言語の「続く」の語を使います(分割した表と同じ)。falseなら何も付けません。 |
fit.shrinkText | boolean | true | ほかの手段で中身が収まらないとき、文字を小さく組んでもよいかどうかです。 |
fit.minScale | number | 0.9 | 文字の最小の縮小率で、0より大きく1以下です(1より大きい値は1として扱います)。 |
fit.scaleImages、fit.imageMinScale | boolean、number | true、0.8 | フレームの中の画像を小さくしてよいか、どこまで小さくしてよいかです。 |
pin | boolean | false | フレームが動かず、大きさも変わりません。絵柄と位置をそろえておく必要のあるボックスに使います。グループはそれを避けて並びます。 |
grow、shrink、priority | number | 0 | フレームがグループの空間をどう分け合うかです。growは余った空間の取り分、shrinkはフレームが空間を返せるかどうかを決め、priorityの低いフレームから先に返します。 |
optional | boolean | false | Markdownがこのフレームに何も送らなくても警告しません。 |
crossGutter | boolean | false | 見開きで、フレームがノドの帯をまたいでもかまいません。 |
writingMode、direction | 'horizontal-tb' | 'vertical-rl'、'ltr' | 'rtl' | ページの値 | 横組みのページに置く縦組みのボックス、またはその逆です。 |
remove | boolean | false | ほかのテンプレートを拡張するテンプレートやバリアントの中で、同じ名前の継承したフレームを取り除きます。 |
#グループ
グループは、空間を分け合って一緒に動くフレームの積み重ね(上から下)または並び(始端から終端)です。グループの中では、グループの方向に沿ったフレーム自身の位置は無視され、グループが順に並べて、あいだにgapを空けます。あるフレームの文字が増えると、その後のフレームが一緒に動きます。グループはボックスでもあり、フレームや装飾をそこに固定できます('#pagina')。
| プロパティ | 型 | 既定値 | 説明 |
|---|---|---|---|
name | string | 必須 | テンプレートのフレームとグループのあいだで一意です。 |
kind | 'stack' | 'row' | 'stack' | 上から下か、始端から終端かです。 |
frames | string[] | [] | グループのフレームを、ページ上の順に並べます。1つのフレームが属するグループは多くても1つです。テンプレートのフレームではない名前や、すでに挙げたフレームは飛ばします。 |
gap | Dimension | 0 | グループの隣り合う2つのフレームのあいだの空きです。 |
placement、grid | フレームと同じ | フレームを囲む箱 | グループ自身のボックスです。未設定なら、フレームに宣言したボックスを囲む箱になります。 |
align | 'start' | 'center' | 'end' | 'space-between' | 'start' | グループのどのフレームも伸びないとき、余った空間をどこに置くかです。 |
remove | boolean | false | ほかのテンプレートを拡張するテンプレートやバリアントの中で、継承したグループを取り除きます。 |
#継承とバリアント
extendsを持つテンプレートは、指定したテンプレート(それ自身がさらにほかのテンプレートを拡張していてもかまいません)から始まり、書いたところだけを変えます。
area、header、overflowTemplateなどの項目は親の値を置き換えます。gridはキーごとに統合します。spread、gutter、roleも継承しますが、id、name、extendsはテンプレート自身のものです。framesとgroupsは名前で統合します。継承した項目と同じ名前の項目は、書いたフィールドだけを変えて残りを保ちます(fit、overflow、paddingはキーごとに統合し、placementは丸ごと置き換えます)。remove: trueはその項目を取り除き、新しい名前は継承した項目の後に加わります。- 装飾の要素も同じように
idで統合します。新しいidの要素やidのない要素は加わります。
variants.rectoとvariants.versoはテンプレートと同じように書き、同じように統合して、右ページと左ページに適用します。適用はextendsの連鎖全体の後で、根のテンプレートのバリアントが先です。見開きは両方の側を持つので、どちらのバリアントも適用しません。
pageTemplates: [
{ id: 'tema', frames: [{ name: 'texto', flow: true }, { name: 'margen', width: { value: 30, unit: 'mm' },
placement: { anchor: { to: 'container', edge: 'top-left' } } }],
variants: { recto: { frames: [{ name: 'margen', placement: { anchor: { to: 'container', edge: 'top-right' } } }] } } },
{ id: 'tema-sin-margen', extends: 'tema', frames: [{ name: 'margen', remove: true }] },
]Sandboxがテンプレートを保存するとき、既定値と同じ値も捨てずに残します。ほかのテンプレートを拡張するテンプレートやバリアントの中では、その値が親の値を上書きするからです。
コードからは、resolvePageTemplate(config, id, { parity })が、連鎖を統合し、その側のバリアントを適用し、すべての既定値を埋め、下の警告で説明するとおりにすべての参照を解決したテンプレートを返します。validatePageTemplates(config)は警告を返します。
#ラベルスタイル
labelStylesプロパティは、画像の上に置くラベルの見た目に名前を付けます。地図の海や町、図の各部の名前などです。ラベルは画像のアンカー(漫画の話し手と同じく、リソースと一緒に保存する点)に立ち、アンカーまたはラベルが指定するスタイルを使います。
labelStyles: [
{ id: 'mar', fontStyle: 'italic', textTransform: 'uppercase', letterSpacing: 0.12,
color: { hex: '#2b6ca3', model: 'hex' } },
{ id: 'ciudad', fontWeight: 600, halo: { color: { hex: '#ffffff', model: 'hex' }, width: { value: 0.6, unit: 'pt' } } },
]| プロパティ | 型 | 既定値 | 説明 |
|---|---|---|---|
id | string | 必須 | アンカーとラベルが使う名前です。 |
name | string | idと同じ | Sandboxに表示する名前です。 |
paragraphStyle | string | なし | ラベルが書体の設定を借りる段落スタイルです。下の項目がそれを上書きします。 |
fontFamily、fontSize、fontWeight | string、Dimension、number | 本文の値 | ラベルの書体、サイズ、ウエイトです。 |
fontStyle | 'normal' | 'italic' | 'normal' | 正体かイタリックかです。 |
color | ColorValue | 本文の色 | 文字の色です。 |
textTransform | 'none' | 'uppercase' | 'none' | 大文字にします。地図で海や国の名前を組むときのような使い方です。 |
letterSpacing | number | 0 | 文字のあいだに加える空きで、単位はemです。 |
halo | { color, width } | なし | 文字の後ろに付ける縁取りで、込み入った絵の上でも読めるようにします。 |
background、padding | ColorValue、Dimension | なし | ラベルの後ろに敷く地と、文字のまわりの空きです。 |
minScale | number | 0.85 | ラベルが幅に収まらないとき、どこまで小さく組んでよいかです。 |
#アンカーのラベル項目
画像のアンカー(Resource.anchors、漫画が話し手に使う点)は、ラベルのための省略可能な項目をいくつか持てます。どれも画像に対する割合なので、どの言語でも、画像をどう切り抜いても成り立ちます。漫画はこれらを無視します。
| 項目 | 型 | 既定値 | 説明 |
|---|---|---|---|
width | number | ラベル自身の幅 | ラベルの行長で、画像の幅に対する割合です。長い名前はその中で2行に折り返します。 |
align | 'start' | 'center' | 'end' | 'center' | ラベルのどちら側をアンカーの点に合わせるかです。 |
verticalAlign | 'top' | 'middle' | 'bottom' | 'middle' | ラベルのどの辺をアンカーの高さに合わせるかです。 |
rotate | number | 0 | アンカーの点を中心にした時計回りの角度です。川の名前を流れに沿わせるときに使います。 |
style | string | なし | labelStylesのidです。ラベルが自分のスタイルを指定していれば、そちらが優先されます。 |
#ページテンプレートの警告
ほかの設定では、エンジンは知らないキーを無視します。ページテンプレートとラベルスタイルはそうではなく検査され、問題はすべて設定の警告としてpostext checkとSandboxの検査パネルに出ます。これらの警告のpathは、問題のある項目を指すJSONポインターです。たとえば/pageTemplates/3/frames/2/style、/pageTemplates/0/variants/recto/frames/1/next、/resources/4/anchors/0/styleです。項目が継承されたものなら、ポインターはそれを書いたテンプレートを指します。存在しないidや名前を指す警告は、存在するもののうち最も近いものも示します。
テンプレート、フレーム、グループ、グリッド、fit、overflow、バリアント、ラベルスタイルのキーの綴り違いはunknownConfigKeyになります。設定の選択肢にない語(area、verticalAlign、exclude、takes、kind、align、writingMode、direction、fontStyle、textTransform)はunknownConfigValueになり、その設定は既定値のままです。idのないテンプレートや、nameのないフレームとグループは無視され、その項目にunknownConfigValueが出ます。
| 警告 | 原因 | 対処 |
|---|---|---|
templateDuplicate | 2つのテンプレートが同じidを持っています。最初のものを使い、後のものは無視します。 | どちらかの名前を変えるか、複製を削除します。 |
templateExtendsCycle | extendsをたどると同じテンプレートに戻ります(a → b → a)。輪の中のすべてのテンプレートと、そのどれかを拡張するすべてのテンプレートが捨てられ、どのページでも使えません。 | 輪の中のテンプレートのどれか1つからextendsを外します。 |
templateExtendsUnknown | extendsが、どのテンプレートにもないidを指しています。テンプレートは何も継承せず、単独で使われます。 | idを直す(警告が最も近いidを示します)か、親のテンプレートを加えます。 |
frameDuplicate | 1つのリストの中の2つのフレームまたは2つのグループが同じnameを持っているか、グループがフレームと同じ名前を持っています。後の項目は無視され、その名前へのアンカーはフレームを指します。 | フレームとグループにそれぞれ別の名前を付けます。継承したフレームを変えるには、その名前の項目を1つだけ書きます。 |
frameStyleUnknown | フレームのstyleが、どの囲みスタイルも指していません。フレームは枠なしで描かれます。 | idを直すか、calloutStylesにそのスタイルを加えます。 |
frameAnchorUnknown | フレーム、グループ、装飾の要素が'#name'に固定されているのに、テンプレートにその名前のフレーム、グループ、要素がありません。または、フレームとグループが互いに輪になって固定されています(自分では何にも固定せず、ボックスがフレームを囲む箱になるグループを経由する場合も含みます)。アンカーは'container'、つまり領域として扱われます。 | 存在するフレームかグループに固定するか、どれか1つを領域に固定して輪を断ちます。 |
frameMinMax | 最小値が最大値より大きい(minHeight 40mm > maxHeight 30mm)か、固定のwidthやheightが範囲の外にあります。最小値が優先され、固定のサイズは範囲の中に収められ、usedがフレームの実際の値を示します。単位の違う長さはページの解像度で比べ、emは本文のサイズで換算します。 | 最小値を最大値以下にするか、固定のサイズと矛盾する制限を外します。 |
groupFrameUnknown | グループのframesに、テンプレートのフレームではない名前があります(子のテンプレートやバリアントで取り除かれたのかもしれません)。グループはそれを飛ばします。 | 名前を直すか、リストから外します。 |
groupFrameTwice | 1つのフレームが2つのグループに、または1つのグループに2回挙げられています。フレームが属するグループは1つだけなので、後のほうは飛ばします。 | フレームを、一緒に動くべき1つのグループだけに残します。 |
frameChainLoop | フレームがnextやoverflow.で輪になって続いています(a → b → a)。輪を閉じるつながりが捨てられ、連鎖はその手前のフレームで終わります。 | 連鎖を最後のフレームで終わらせます。そのnextを外すか、次のページに続けます。 |
overflowTargetUnknown | nextがテンプレートのどのフレームも指していない、overflow.continueInがどのフレーム('#x')もテンプレート('template:x')も指していないか、'#frame'、'next-page'、'template:<id>'のどの形でもない、またはoverflowTemplateがどのテンプレートも指していない、のいずれかです。入りきらない中身はそこには続きません。 | 名前やidを直すか、3つの形のどれかで書きます。 |
labelStyleUnknown | 画像のアンカーが、labelStylesにないstyleを指しています。警告はリソースを示します。そのアンカーのラベルは既定の見た目になります。 | アンカーのスタイルのidを直すか、labelStylesにそのスタイルを加えます。 |
ページテンプレートの導入以来、設定のバージョンは15です(それ以前に書かれたバンドルはこれまでどおり読み込めます。古い設定に書かれた内容の意味は何も変わりません)。