#メインビューポート

インターフェースの右側には、描画された出力が表示されます。描画方式ごとに1つ、計5つのタブがCanvas、PDF、Folio、HTML、EPUB 3の順に並びます。タブを切り替えてもレイアウトは実行し直されません。同じVDTがすべてのバックエンドに渡されるので、どの方式でも表示される内容は一致します。Folioタブは、ブラウザーがWebGL2に対応し、画面がスマートフォンのものでない場合にだけ表示されます（Folioタブを参照）。

各ビューポートは、専用のWeb Worker（postext/worker）の中でレイアウト処理を実行します。ビューポートごとのuseLayoutWorkerフックがワーカーのハンドルを持ち、フォントを転送可能なArrayBufferとしてワーカーに送り、後勝ちのキャンセルでビルドを進めます。キー入力やスライダーのドラッグがあると、次のビルドを始める前に前のビルドのAbortSignalを中断するので、速く入力してもメインスレッドに古い処理がたまることはありません。ビューポートをアンマウントすると、そのワーカーは破棄され、待機中のビルドは拒否されます。ここで使っている組み込みのパターンは、設定 → Web Workerでレイアウトを実行するを参照してください。

1つのVDTが5つの出力タブに渡されます。

#Canvasタブ

文書のラスタライズしたプレビューを、HTML5の<canvas>要素に描画します。正確な文字の位置、段組み、リソースの配置を含め、組み上がった文書の最終的な見た目をピクセル単位で正確に表します。

Canvasのビューポートの上部にあるツールバーには、次の機能があります。

ズームのコントロール：拡大と縮小（1段階ごとに1.25倍、範囲は0.25倍～4倍）。手動でズームすると、合わせるモードは解除されます。
合わせるモード：ページ幅に合わせるか、ページの高さに合わせます。オン・オフを切り替えられ、ウィンドウの大きさが変わると自動的に合わせ直します。
表示モード：単ページ（1行に1ページ）か見開き（本のようなレイアウトで、最初のページは奇数ページとして右側に表示され、以降のページは見開きの組になります）。右綴じの本（page.binding、縦組みの中国語）では見開きが逆向きになり、1ページ目が左側に単独で表示され、続いて[3 | 2]、[5 | 4]となります。縦組みのページでは、クリックするとポインターの下の文字にキャレットが置かれ、キャレットは段を横切る線になります。
印刷プレビュー（Printerアイコン）：印刷される見た目でページを表示します。既定ではオフで、ブラウザーが状態を記憶します。すべての色を印刷の準備の出力プロファイルで分版し、紙そのものの白の上に表示します。大きな黒い面はリッチブラックで表示し、グレースケールに固定したPDFは黒インキだけで表示します。表示するのは印刷されるものだけで、画面用のガイドや枠は描きません（プリフライトで見つかった箇所は検査にあります）。Folioタブとスイッチを共有します。ページを描き直すだけで、レイアウトはやり直しません。

ページはIntersectionObserverによって遅延描画されます。canvasに描かれるのは表示されているページ（と200pxの余裕）だけなので、長い文書でもGPUのメモリー使用量は少なく抑えられます。

#PDFタブ

postext-pdfパッケージで現在の文書の実際のPDFを生成し、埋め込まれたブラウザーのPDFビューアーに表示します。PDFは最初のマウント時と、その後の再生成のたびに自動で作り直されます。canvasタブとHTMLタブに渡されるのと同じVDTを使うので、改行、ページの区切り、リソースの配置は3つのバックエンドでピクセル単位まで一致します。Knuth–Plassがときに受け入れる、はみ出した最終行の詰めまで同じです。

ビューポートの右下に浮かぶツールバーには、次の機能があります。

再計算（RefreshCwアイコン）：現在のMarkdownと設定からPDFを作り直します。自動で再ビルドが始まらない設定を変えた後や、フォントの読み込みが終わったときに使います。
ダウンロード（Downloadアイコン）：現在のPDFをディスクに保存します。ファイル名は文書の最初のH1見出しから作られます（なければdocument.pdf）。
印刷（Printerアイコン）：埋め込まれたPDFビューアーに対してブラウザーの印刷ダイアログを開きます。ほとんどのブラウザーでは、そこから印刷するか、もう一度PDFとして保存できます。
現在の章 / 本全体（タブバーの左端の選択。複数の章を持つ本の場合）：前の章に続けて組んだ表示中の章（既定）の代わりに、すべての章を1つの連続したPDFとして描画します。切り替えるとPDFが再生成されます。Canvasには専用の選択があります（本と章を参照）。

内部では、SandboxはcreatePdfFontProvider()ヘルパーを使います。これはFontsourceのjsdelivr CDNから、プレビューの計測に使うのと同じウェイトごとの静的なWOFF2ファイルを取得し、ブラウザー内でTTFに展開して、そのバイト列をrenderToPdf経由でpdf-libに渡します。太字の文字を実際に太字のウェイトで埋め込むには、（1つの可変フォントではなく）ウェイトごとの静的フォントが必要です。Sandboxの外で同じパターンを使う方法は、PDFの生成を参照してください。

#Folioタブ

本を印刷物として、つまりエンジンが組んだページが製本され、机の上に開いて置かれた姿を3Dで表示します（postext-folio、three.js）。ページはcanvasが描いたものそのもので、テクスチャーの1テクセルが1ピクセルに対応するので、文字はCanvasタブと同じくらい鮮明です。変わるのはその周りのすべてです。紙、製本、机、光はデザインパネルのFolioグループ（folio設定）で決まり、本文中の:::paperの範囲は、そのページを別の用紙に印刷します（文書形式 › :::paperを参照）。

何を表示するか。Folioタブは、canvasの現在の章 / 本全体の選択に従います。章は本の一部として表示されます。前後のページは2つのページの束の厚みに数えられ、章は見開きの本来の側で始まります。右綴じの本（page.binding: 'right'、または縦組みの本）は左右が反転して置かれ、丁を左へめくります。
ページをめくる。ページの端をつかんでドラッグします。半分を越えたところで離すとめくれ、そこまで届かなければ元に戻ります。ページをクリックしてもめくれ（右ページは先へ、左ページは前へ）、ツールバーの‹ ›ボタンや、本にフォーカスがあるときの矢印キー、Page Up/Down、Home、Endでもめくれます。丁はそれぞれの紙に応じてしなります。インディア紙はきつく丸まり、厚紙は大きな弧を描き、板紙と表紙は硬い板としてめくれます。
離れたページへの移動。10ページより離れたページ（ページ欄に入力したもの、パーマリンクが指すもの、リンクや本文パネルのキャレットでたどり着いたもの）へは、一度の動きで移ります。間にあるページの束がそのページ数分の厚みのまま一体で持ち上がり、反対側に重ねられます。10ページまでは、丁が1枚ずつめくれます。
本の周りを見る。右ドラッグで、本の周りを回るように視点を動かせます。真上から70°まで傾けて、背、小口、束の厚みを見られます。視点はページをめくっている間も動かしたところにとどまり、視点をリセットで設定が決める視点（傾きと回転）にゆっくり戻ります。既定の視点として保存は、表示中の視点をそれらの設定に保存するので、本はその視点で開き、視点をリセットもその視点に戻ります。
ポインターの動作。ツールバーの3つのボタンで、本の上で左ボタン（指1本、ペン）が何をするかを選びます。手でページをめくるは既定で、上で説明したとおりに働きます。視点を回転は右ドラッグと同じで、トラックパッドやタブレット向けです。テキストを選択は、傾けたり回したりして見えている本の上で、Canvasタブと同じように働きます。クリックで本文パネルにキャレットを置き、ドラッグで選択し、ダブルクリックで語を選び、リンクをクリックするとリンク先に移ります。この選択は記憶され、本にフォーカスがあるときはH、O、Sで切り替えられます。
エディターへの追従。本文パネルのキャレットと選択範囲がページの上に描かれ、入力している間もそのまま表示されます。ページは組み直されしだい編集を反映します。エディターでキャレットを表示されていないページに移すと、本がそのページまでめくれます。
表紙。表紙を本文をくるむ表紙にすると、本は表紙の色の布、厚紙、革でくるまれます。文書自身のページにすると、最初のページが表表紙に、最後のページが（左ページに来る場合は）裏表紙になります。本は表紙をめくるまで閉じたままで、最後の丁をめくると再び閉じます。厚い本は、2つの束の間に背を立てて開きます。
ツールバー。canvasと同じような浮かぶバーで、再計算、視点をリセット、既定の視点として保存、3つのポインターのモード、印刷プレビュー（canvasと同じ校正を、出力プロファイルの紙の白の上に表示します。そのあいだ本の紙の色合いは使いません。canvasと同じスイッチです）、ピン、‹ ›、ページ欄があります。ページ欄は本のページ番号を受け取り、その見開きまでめくります。開いた見開きの右側のページが、パーマリンクの指すページです（view=folio&page=N）。
設定はすぐに反映。Folioの設定はレイアウトの一部ではありません。紙、製本、光を変えると、ページを組み直さずに本が描き直されます。
表示される環境。このタブには、WebGL2と、短辺が600 px以上の画面が必要です。スマートフォンでは3Dの本がブラウザーが1つのタブに割り当てるより多くのメモリーを使うので、そこではタブは表示されません（WebGL2のないブラウザーでも同様です）。幅が560 pxより狭いペインでは、本は1ページずつ表示されますが、丁は背を越えてめくれます。システムで動きを減らす設定になっている場合は、めくる動きなしで見開きが切り替わります。
ページの上の動画。動画のポスター画像をクリックすると、3つのポインターのモードのどれでも、動画はページの上で再生され、丁がめくれて丸まる間も映像は動き続けます。もう一度クリックすると一時停止し、別の動画を再生すると先の動画は止まります（他の動画と同時に再生がオンなら止まりません）。その動画が見えない見開きで本が静止すると、動画は止まります。Spaceキーで、開いている見開きの動画を再生または一時停止できます。自動再生をオンにした動画は、その見開きが初めて表示されたときにひとりでに再生を始めます。ページをクリックした後なら音声付きで、それより前ならミュートで始まり、クリックするとミュートが解除されます。ガイドの2本の動画はこの設定です。アップロードしたファイルやアドレスにある動画（MP4、HLS）は、そのサーバーがクロスオリジンの読み込みを許可していればこのように再生されます。YouTubeやVimeoの動画では、これまでどおりページがめくれます（文書形式 › Folioのページで再生する動画を参照）。
テキストの代替。各ページは画像として描かれます。そのアクセシブルな名前は、テキストを読むためのHTMLタブと本文パネルを案内します。

#HTMLタブ

postextの出力をShadow DOMのコンテナーの中に描画し、ホストのページとのスタイルを完全に分離します。編集用のCSS（文字組み、アキ、段の罫）はシャドウルートの中に注入されるので、周りのアプリケーションのスタイルから影響を受けることも、そこへ漏れ出すこともありません。

Markdownのリンクは、このタブとPDFで実際に機能します（文書形式 › リンクを参照）。このタブでリンクをクリックするとリンク先が新しいブラウザータブで開くので、Sandboxは開いたままです。:refの引用は、これまでどおり文書内を移動します。

動画はここで再生されます。YouTubeやVimeoの動画はそのプラットフォームのプレーヤーで、ファイルやアドレスはブラウザーのプレーヤーで（ブラウザー自身がHLSに対応していなければ、HLSストリームはhls.jsを通して）、デザインパネルの動画スタイルと各動画のプレーヤーのオプションに従って再生されます。プレーヤー上のクリックはエディターではなくプレーヤーに届きます。HTMLビューアーでの表示をポスター画像にすると、タブには動画にリンクした、印刷用のポスター画像が表示されます。

ビューポートの上部のツールバーには、次の機能があります。

文字の大きさのコントロール：設定のすべての相対的な寸法を保ったまま、本文を小さくしたり大きくしたりします。
段のモード：1段（縦に長くスクロールする1つの段）か段組み（設定された行長に最も近い幅になる段の数で、ページ間を横方向にスクロールスナップします）。2段組みの文書は2段組みのページを保ちますが、それが最も近い場合には、ビューアーは2段を引き伸ばしたり4段を詰めたりする代わりに3段のように奇数の段を表示することがあります。そのとき最後の段は次のページのもので、半分だけ見えます。多段組みの文書や節も2段組みのページとして表示されます。3段から8段の印刷用の段は画面の幅では細すぎるので、ビューアーは本文を1ページ2段で組み、行長に合わせて入るだけの段を横に並べます。右綴じの本（page.binding）は、段組みのモードではページが右から左へ進みます。ビューアーは右端から開き、‹の矢印で次のページへ進みます。縦組みの本は段組みのモードでだけ読めます。1段ボタンは無効になり、ツールチップがその理由を示します。保存した選択は、次の横組みの本で戻ります。

段の配置は、デザインパネルの「Webリーダー（HTML）」の節（デザイン → 書き出し）で決まります。maxCharsPerLineは本文フォントの字数で目標の行長を、columnGapは段組みのモードでの段の間の横方向のアキを決め、optimalLineBreakingはビューアー内でKnuth–Plassを使うかどうかを切り替えます。Sandboxが内部で使っているのと同じパターンは、HTMLビューアーの設定リファレンスと、最初から最後までの組み込みの例を参照してください。

#EPUB 3タブ

postext-epubパッケージで本全体をEPUB 3ファイルとして書き出し、タブの中のリーダーで表示し、ダウンロードできるようにします。ファイルは、PDFタブが本全体で使うのと同じ章ごとのレイアウトからブラウザー内で作られるので、ページ番号、注、相互参照、目次、索引はPDFに印刷されるものと同じです。EPUBは常に本全体を収めるので、このタブには現在の章 / 本全体の選択はありません。代わりに、タブバーの左端でレンディションを選べます（スマートフォンではアイコンで表示されます）。

EPUB 3には2つのレンディションがあり、パッケージのrendition:layoutプロパティで呼び分けます。

固定レイアウト（pre-paginated、FXLとも呼ばれる）：すべてのページを印刷どおりに収めます。各ページはそのページの大きさを持つ独立した文書で、文字はPDFと同じ位置に本のフォントで置かれますが、選択、検索、読み上げができる本物のテキストのままです。見開きは印刷どおりに組になり、右綴じの本（アラビア語、縦組みの中国語）は右から左へめくれます。デザイン、つまり段、フロート、柱、章扉、正確な改行が保たれます。絵本、教科書、カタログ、雑誌のように、ページとしてデザインされた本や、大きな画面のリーディングシステムに向いています。小さな画面ではページが縮小され、読者が拡大して読みます。
リフロー型（スマートフォンとコンピューターでの既定で、EPUBの既定でもあります）：本文、図、表を読む順に収め、リーディングシステムが画面と、読者が選んだ書体、文字サイズ、余白に合わせて組み直します。段落は組まれた行から再構成され（行末に加えたハイフンは取り除かれます）、図と表はそれを引用する本文の後に続き、囲みはasideになり、脚注は各章末の注とリンクで行き来し、印刷版のページ番号はページマーカーとして残ります。デザインから作ったスタイルシートが見出し、囲み、表、キャプションの見た目を与えますが、ページの形はなくなります。段も、柱も、固定の改行もありません。小説、評論、報告書のような続けて読む文章や、スマートフォンと電子ペーパーのリーダーに向いています。

どちらかを選ぶまでは、印刷されたページが収まる画面を持つiPadのようなタブレットでは固定レイアウトで、それ以外ではリフロー型でタブが開きます。選択は訪問をまたいで記憶され（postext-sandbox-epub-layout）、切り替えるとすぐにファイルが書き直されます。

生成。EPUBは、タブを最初に開いたときと、再計算を押したときに書き出されます。進行状況バーが組んでいる章を数え、続いて書き出しの各段階（フォント、画像、表紙。ページまたは章。パッケージ）を示し、ファイルの準備ができたときや失敗したときはスクリーンリーダーに伝えます。編集後は、PDFタブと同じく、再計算の横の矢印でファイルが本文と一致しなくなったことを示します。タブを離れるかレンディションを切り替えると、進行中の生成は止まります。長い本では数秒かかり、その間ページは応答しません。
ファイルに入るもの。メタデータは最初の章のフロントマターから取ります。title、subtitle、author（1つの名前またはリスト）、publishDateまたはdate、isbnまたはidentifier、publisher、rights、descriptionです。言語は設定のlocaleから取ります。識別子のない本には、プロジェクト（または見本の本とその言語）から作った識別子が付くので、同じ本のEPUBはどれも、読者のライブラリーの中で1つの本として扱われます。デザインが指定するフォントファミリーはすべて埋め込まれます。Google Fontsのスライスは本がその文字を印刷する場合だけ、カスタムファミリーは再配布不可と指定されていない場合です。画像は保存されたとおりに入り、PDFの印刷用マスターが入ることはありません。各SVGは、その文字が指定するフェイスを（カスタムファミリーもGoogleのファミリーも）収めます。再配布不可と指定されたファミリーは除かれ、報告されます。動画ファイルはmedia/の下に入ってリーダーのプレーヤーで再生されます。バイト列を持たないファイルは公開先のアドレスから再生され、パッケージはそれをリモートのリソースとして宣言します。YouTubeやVimeoの動画は、動画にリンクしたポスター画像になります。表紙は、本自身の画像が幅600 px以上のビットマップならそれを、そうでなければ最初のページをトンボ用の余白なしで幅1,600 pxに描画したものを使います。
リーダー。タブは書き出したばかりのファイル、つまりダウンロードされるのと同じバイト列を開きます。別のプレビューではありません。固定レイアウトは1ページ、またはペインの幅が十分なら見開きを、収まるように縮小して表示します。リフロー型の本は1画面ずつページ送りされ（縦組みの中国語では上から下へ）、ページは章から次の章へと続きます。本の中のリンクはリーダー内を移動し、Webとメールのリンクは新しいブラウザータブで開きます。← / →、Page Up / Page Down、Home、Endでページをめくり、右から左の本では←で先へ進みます。
ツールバー。PDFタブと同じような浮かぶバーで、再計算、ピン、ファイルのサイズ付きのEPUBをダウンロード（ファイル名は本のタイトルから作られます）、書き出し処理が何か報告したときの警告ボタン、目次（本の目次から作った移動用の一覧）、文字を大きくと文字を小さく（リフロー型だけで、読んでいる位置を保ちます）、‹ ›、固定レイアウトではページ欄があります。ページ欄はファイルの読む順でページを数え、表紙を1とします。各フレームには、そのページの印刷上の番号が名前として付きます。
警告。警告ボタンは、本にあるとおりにはファイルに入れられなかったものを一覧にします。ファイルが保存されていない画像（代わりに空の枠が入ります）、埋め込まれた書体がないファミリー、ウェイト、スタイル（リーディングシステムが代わりの書体を使います）、再配布できない可能性があるため除いたファミリー、そしてレンディションで表現できないものです。同じメッセージがブラウザーのコンソールにも出ます。
ファイルの検証。ガイドと見本の本は、どちらのレンディションもW3C EPUBCheck 5.4をエラーも警告もなく通ります。自分の本を確かめるには、ダウンロードしてepubcheck book.epubを実行するか、Apple Books、Thorium Reader、Calibreで開いてください。

同じファイルを自分のコードで書き出す方法は、EPUBの本を参照してください。

Sandbox：プレビュー

かんたんな説明