# Postext — ウェブで動く、プログラムできる組版システム
> 何世紀も受け継がれてきた印刷組版の技術と、現代のウェブ技術をつなぐ組版エンジン。意味構造のあるMarkdownを渡すと、出版品質のページが得られます。出力はHTML、Canvas、入稿できるPDFです。
- HTML版: https://postext.dev/ja
- 他の言語: [en](https://postext.dev/en.md), [es](https://postext.dev/es.md), [ca](https://postext.dev/ca.md), [zh](https://postext.dev/zh.md), [ar](https://postext.dev/ar.md)
## かんたんな説明
Postextは、本や雑誌、報告書のページをレイアウトする、無料のオープンソースソフトウェアです。いくつかの簡単な記号を付けて文章を書くと、Postextがそれを、印刷された本のような完成したページにします。印刷の世界で何世紀も使われてきた規則に従うので、文章が読みやすくなります。ページはウェブサイトやアプリに載せることも、そのまま印刷できるPDFにすることもできます。書き手、出版社、デザイナー、開発者のためのソフトウェアです。
## ウェブで動く、プログラムできる組版システム
Postextは、意味構造のあるMarkdownに、何世紀も受け継がれてきた組版の規則を当てはめます。Knuth-Plassの両端そろえ、高さのそろった段組み、収まるべき場所を心得たフロート。そうして、HTML、Canvas、入稿できるPDFで出版品質のページを生成します。
## 2分でわかるPostext
**文字起こし.** ナレーションの全文と、画面に映るものの説明。
- 0:00 · *画面:* 暗いカードに、細い金色の罫線の上で「MAINZ · 1455」の文字。見出し「5世紀をかけて、印刷はページの組み方を身につけた。」の背後で、巨大な袋文字の年号が1455から2026まで数え上がり、そのまわりに印刷用語が次々に降りてきます。両端そろえ、カーニング、ウィドウ、オーファン、段末そろえ、行送り、ベースライングリッド、hy·phen·a·tion（ハイフネーション）、行長、フロート、柱、リバー。カメラが最後の句点に飛び込むと、画面は金色に満たされます。 · *ナレーション:* 5世紀をかけて、印刷はページの組み方を身につけてきました。
- 0:05 · *画面:* 見出し「Webはインターフェースのレイアウトを覚えた。ページを組むことは覚えなかった。」example.com/longform/articleを開いたブラウザーのウィンドウに、3段組みで両端そろえの記事「なぜWebはページを組めないのか」が表示されています。赤いタグが、白いすき間の流れ（リバー）、ウィドウ、オーファン、本文に重なった画像、そろっていない最後の段を指します。その横にコードのチップ「column-count: 3;」、続いて「…ほかにはほとんど何もない。」と、同じ5つの欠陥を取り消し線で消したリストが並びます。ウィンドウが乱れ、崩れ落ちます。 · *ナレーション:* Webが覚えたのはインターフェースのレイアウトで、ページではありません。だから長い文章は今も崩れます。リバー、ウィドウ、オーファン、衝突。
- 0:18 · *画面:* 白い閃光と、青・金・赤の縞が横切ったあと、Postextのロゴとワードマークがせり上がり、キャッチフレーズ「プログラムできるWebの組版エンジン」が添えられます。その下に「オープンソース · MITライセンス · v1.7.0 · ブラウザーで動作」。 · *ナレーション:* Postextです。プログラムできる、Webのための組版エンジンです。
- 0:24 · *画面:* 全7セクションの01「コンテンツの入力」：「Markdownは、それが何であるかを書く。」Markdownファイル03-why-postext.mdが打ち出されていきます。partディレクティブ、リード文付きの見出し「Why Postext」、:refで図fig-flowを参照する段落、::resourceの行、:::calloutのブロック。隣のconfig.tsは、2段組み、両端そろえの本文、en-usのハイフネーションを指定してbuildDocumentを呼び出しています。その上に「見た目は設定が決める。レイアウトに関することは本文に一切書かない。」の一文。 · *ナレーション:* 書くのは意味を表すMarkdownで、それぞれが何であるかを示します。見た目は設定が決めます。
- 0:32 · *画面:* セクション02「Pretextが測る」：「DOMに触れずに計測する。」見出し、段落、囲みが1つずつスキャンされ、寸法線がそれぞれの高さをポイントで示します。コードパネルでは、prepare(text, '25px Lora')とlayout(prepared, width, 38)が高さと行数を返します。2本のバーが1万段落を競い合います。「ブラウザーのリフロー · DOM」はほとんど進まず、「Pretext · canvasの計測値と算術」は一瞬で満ちます。カウンターが600×まで上がり、その上に「DOMより速いテキスト計測。入力するそばから本全体が組み直される」と「Powered by @chenglou/pretext」の文字。 · *ナレーション:* どの段落もDOMに触れずに計測します。最大で600倍の速さです。それを可能にしたのが、ライブラリーのPretextです。
- 0:42 · *画面:* セクション03「Postextが決める」：「1ピクセルを描く前に、すべての行の位置を決める。」7つの区分からなる輪が順に点灯します。構造、計測、配置、フロート、調整、段末そろえ、リズム。それぞれに1行の説明が付きます。その横でPostextガイドの2段組みのページが組み上がっていきます。ラベル付きのブロックが段に飛び込み、注記「:ref{id="fig-flow"} → 段の下端」の下に図が滑り込み、章扉の帯が降り、行が現れ、段の高さがそろい、ベースライングリッドが上から下へ走ります。輪は反復1から3まで回り、チェックマークとともに「3回の反復で確定」と表示されます。囲みには1行のバウンディングボックスとベースラインが示されます。 · *ナレーション:* そしてPostextが決めます。7つの工程ですべての行を配置し、すべての図をフロートさせ、すべての段をそろえます。何も動かなくなるまで繰り返します。
- 0:54 · *画面:* セクション04「仮想文書」：「1語を変えれば、変わったところだけが組み直される。」注記は「Reactの仮想DOMと同じ発想を、ページに。VDT、仮想文書ツリー。」p. 7からp. 13までの7ページが横に並びます。p. 11の編集箇所にキャレットが立ち、その段の残りがDIRTYとして金色に変わり、一部がp. 12にあふれます。p. 12にはチェックマークとSETTLED、前のページにはSKIPPED、後のページにはUNTOUCHEDの表示。3つの箇条書きが規則を述べ、renderToHtmlIndexed()と題したパネルが、文書ツリーの変更されたノードにPATCHEDの印を付けます。 · *ナレーション:* すべては仮想文書の中にあります。Reactの仮想DOMと同じです。1語を変えれば、変わったところだけが組み直されます。
- 1:03 · *画面:* 「長い文書？描画するのは画面に映る部分だけ。」本のページの列が、VIEWPORTと記された金色の枠の中をスクロールしていきます。枠の上下には200ピクセルの余白があります。枠内のページは完全に描かれ、枠外のページは破線の輪郭だけです。大きなカウンターが、48ページのうちその瞬間に描画されているページ数を示し（IntersectionObserver · +200 px）、隣に「ジオメトリーは全ページ分。ピクセルは見える分だけ。」の文字。 · *ナレーション:* 長い本でも、描画するのは画面に映っているページだけです。
- 1:10 · *画面:* セクション05「Knuth–Plassの両端そろえ」：「段落のあらゆる改行のしかたを、一度に。」左では、改行についての段落がブラウザーと同じ先頭詰め（ファーストフィット）で組まれ、もっともゆるい行が赤くなります。その下で、すべての単語が1本の線上の点になります。赤い弧は貪欲法の改行位置、淡い青の弧は可能な改行位置をすべて試し、金色の経路が最良の組み合わせを選びます。右のKnuth–Plass版は間隔が均等で、各行のバッドネス、式「(1 + badness + penalty)²」、より小さいデメリットの合計が示されます。 · *ナレーション:* ブラウザーは貪欲に、1行ずつ改行します。PostextはTeXのアルゴリズムであるKnuth–Plassを使います。段落全体のあらゆる改行のしかたを比べ、もっとも均等なものを残します。
- 1:24 · *画面:* セクション06「1つのレイアウト、3つのレンダラー」：「見えているものが、そのまま印刷に回る。」コードの行const vdt = buildDocument(content, config);の下で、1つのページが3つに分かれます。Canvas（renderToCanvas()、ピクセル単位で正確なビットマップ）にはピクセルの格子を拡大するルーペが重なります。HTML（renderToHtml()、選択可能、リサイズに追従）では、すべてのブロックが枠で囲まれ、、
、などのタグが付きます。PDF（renderToPdf()、印刷用、PDF/UA、CMYK）では4色の版が滑り込んで見当が合い、トンボとカラーバーが現れます。 · *ナレーション:* 1つのレイアウトに、3つのレンダラー。canvas、HTML、そして印刷用のPDFです。見えているものが、そのまま印刷に回ります。
- 1:35 · *画面:* セクション07「なぜオープンな標準なのか」：「印刷の水準を決めたのはLaTeXだった。今、出版はあらゆる画面の上にもある。」2枚のカード。1984年のLaTeXには、「印刷ページのために作られた」「ビルドが1台のマシンのフォントとパッケージに縛られる」「コンパイルして、待って、繰り返す」「レスポンシブなWebでは編集デザインのレイアウトができない」に×印。2026年のPostextには、「Web、canvas、印刷用PDFを1つのレイアウトから」「持ち運べる1つの.postextファイルにすべてを収める」「入力するそばから組み直される」「どのブラウザーでも動作 · サーバー不要 · MIT」にチェックマーク。Postextのカードが明るくなります。 · *ナレーション:* LaTeXは印刷の標準を作りました。しかし今、出版はあらゆる画面の上にあります。
- 1:41 · *画面:* キッカーは「1つのファイルに、本のすべてを」、見出しは「LaTeXの届かないところまで広がる、出版のためのオープンな標準。」.postextファイルのアイコンが5つの部分にはじけます。preset.json（設定とデザイン）、chapters/*.md（章ごとに1つのMarkdownファイル）、fonts/*.woff2（書体そのもの）、images/ · SVG（すべての画像を埋め込み）、resources（表、図、キャプション）。キャプションは「ただのZIP。オープンで、仕様が公開され、MITライセンス。どんなツールでも読み書きできる。」 · *ナレーション:* Postextはオープンな標準です。持ち運べる1つのファイルで、仕様が公開され、MITライセンスなので、どんなツールでも読み書きできます。
- 1:51 · *画面:* 「ショーケース · 本物のエンジンで組んだもの」：本のページの壁が遠近法で奥へ遠ざかり、カウンターが48ページに達します。文字は「12章、3部、表紙を、約0.5秒でレイアウト。Postextガイドの全ページを、この映像のためにpostext v1.7.0がブラウザーで計算。手作業で置いたものは何もない。」続いてタグが並びます。教科書、雑誌、文芸書、カタログ。 · *ナレーション:* だから、数百ページの本でも10分の数秒でレイアウトできるのです。
- 1:58 · *画面:* エンドカード：Postextのロゴとキャッチフレーズ「プログラムできるWebの組版エンジン」、アドレスpostext.dev、「$ pnpm add postext」と打ち込まれるターミナルの行、フッター「オープンソース · MIT · github.com/drnachio/postext」。 · *ナレーション:* Postext。オープンソースです。postext.devでどうぞ。
## 書籍の組版を、 ウェブのために計算する
CSSには、flexbox、grid、columnsといったレスポンシブなレイアウトの仕組みがあります。しかし、段の高さをそろえること、見出しをそれが導く段落と同じ段に保つこと、ウィドウとオーファンを防ぐこと、図を次の段の頭へフロートさせることはできません。これらは、何世紀もの印刷で磨かれてきた編集上の判断です。
Postextはこの溝を埋めます。意味構造のあるMarkdownと設定オブジェクトを渡すと、[@chenglou/pretext](https://github.com/chenglou/pretext)を使ってDOMより300–600倍速くテキストを計測し、すべての行、フロート、キャプションを含むページの幾何情報を残らず計算して、HTML、Canvas、入稿できるPDFのバックエンドで描画します。
## 印刷の組版者が昔から知っていたこと
### Knuth-Plassの両端そろえ
TeXと同じ最適な行分割アルゴリズムを、TeXのパターンによるハイフネーションとオーファン制御とともに使います。白い川（リバー）のない均一な版面を、CSSでは表現できない水準で組みます。
[ドキュメントで読む](https://postext.dev/ja/docs/justification#knuth-plass段落全体を見渡す)
### リソースと相互参照
図、SVGの図表、表を、印刷のフロートと同じように段やページの天または地へフロートとして配置します。番号は種類ごとに振られ、:refによる相互参照は常に番号と一致します。
[ドキュメントで読む](https://postext.dev/ja/docs/document-format#リソース)
### 表とキャプション
本文と見出し行に別々の文字組みを設定できる表。ページをまたいで分割し、見出し行を繰り返します。キャプションは設定に従って番号が振られ、説明する対象のリソースのそばに置かれます。
[ドキュメントで読む](https://postext.dev/ja/docs/configuration#表スタイル)
### 単色インクの図
SVGの図を輝度に応じて1色のインクの濃淡に置き換え、すべての図版をデザインに合わせます。特色印刷にもそのまま使えます。
[ドキュメントで読む](https://postext.dev/ja/docs/configuration#ダイアグラムスタイル)
### LaTeXの数式
LaTeXで書いたインライン数式と別行立て数式を、エンジンが計測して組み、本文とともにベースライングリッドに乗せます。
[ドキュメントで読む](https://postext.dev/ja/docs/document-format#数式)
### ウェブ、入稿用PDF、EPUB
1つの組版エンジンから4つの出力。計算した同じページを、HTML、Canvas、入稿できるPDF（ブックマーク、CMYKカラー、タグ付きのアクセシブルなPDF/UA出力に対応）に描画し、ページそのままの形またはリフロー型のEPUB 3電子書籍としても書き出せます。
[ドキュメントで読む](https://postext.dev/ja/docs/architecture#バックエンドインターフェース)
## 1つの関数で、すべてを制御
コンテンツと設定オブジェクトを渡して`buildDocument`を呼び出すと、ページの幾何情報がすべて返ります。`renderPage`で任意のページを画像として描くことも、`renderToPdf`で本全体を入稿できるPDFとして組むこともできます。
```ts
import { buildDocument, renderToHtml } from "postext";
const doc = buildDocument(
{ markdown },
{
layout: { layoutType: "double" },
bodyText: {
textAlign: "justify",
hyphenation: { enabled: true, locale: "en-us" },
},
}
);
const html = renderToHtml(doc);
```
## 出版品質のレイアウトまで3ステップ
1. **意味構造のあるMarkdownを書く.** 見出し、リスト、表、数式、囲み、図への:ref相互参照を使い、拡張Markdownで内容を書きます。レイアウトを気にする必要はなく、書くのは内容だけです。
2. **レイアウトの規則を設定する.** ページサイズ、段組み、文字組み、見出しのデザイン、柱、フロートの配置をPostextConfigオブジェクトで定義します。Sandboxで目で見ながらデザインすることもできます。
3. **HTML、Canvas、PDFに描画する.** buildDocumentを呼び出すと、レイアウトの幾何情報がすべて返ります。それをHTML、Canvas、入稿できるPDFのバックエンドで描画します。
## 1つのファイルに、本1冊
1つの.postextファイルに、どのマシンでも文書を組み直すために必要なものがすべて入っています。誰でも採用できる、オープンで編集可能な形式です。
多くの出版用の形式では、プロジェクトがばらばらに散らばります。LaTeXのビルドは特定のマシンにインストールされたフォントとパッケージに依存し、主要なレイアウトソフトのネイティブファイルは、外部に置かれた画像や書体にリンクしています。プロジェクトを移すと、何かが欠けます。私たち自身、LaTeXでこの限界に突き当たりました。
.postextは、誰でも開いて読み、編集できる通常のZIPアーカイブです。中身はJSONのマニフェスト、章ごとに1つのMarkdownファイル、そしてフォントファイルと画像そのものです。Sandboxが書き出し、postext-portエージェントスキルが書き、`postext/bundle`がどのプログラムからでも開いて同じページを組み直します。形式は文書化され、MITライセンスで公開されており、どんなツールからも読み書きできます。
- **設定**
- **章**
- **書体**
- **リソース**
- **画像**
### ガイドを開いて、ページを得る
Sandboxの最初の見本であるPostextガイドは、1つの.postextファイルです。ブラウザーで開いて、すべてのページを画像にします。書体も図も表も、ファイル自体から読み込まれます。
- [postext-guide.postext](https://postext.dev/bundles/postext-guide.postext)
## 1分以内に始める
```bash
pnpm add postext
```
```ts
import { buildDocument, renderToHtml } from "postext";
const doc = buildDocument({
markdown: "# Hello World\n\nYour content here.",
});
const html = renderToHtml(doc);
```
## ドキュメント
- [Postextの紹介](https://postext.dev/ja/docs/introduction.md): Postextとは何か、なぜ作られたのか、どんな問題を解決するのか
- [Postextのアーキテクチャー](https://postext.dev/ja/docs/architecture.md): Postext組版エンジンの技術的なアーキテクチャー
- [Postextの設定](https://postext.dev/ja/docs/configuration.md): Postextのレイアウト設定オプションをすべて網羅したリファレンス
- [ハイフネーションと両端そろえ](https://postext.dev/ja/docs/justification.md): PostextがKnuth-Plassアルゴリズムを使って行を分割し、テキストを両端そろえで組み、語間を制御するしくみ
- [文書形式](https://postext.dev/ja/docs/document-format.md): Postextが解析するMarkdownのサブセットと、原稿となる文書を書くときの規則
- [中国語の組版](https://postext.dev/ja/docs/chinese-layout.md): Postextが中国語を横組みと縦組みで組む方法。地域、禁則処理、約物の幅、字間による両端そろえ、文字グリッド、右綴じの本、縦中横、符号、ルビ、割注、漢数字、フォント
- [アラビア語の組版](https://postext.dev/ja/docs/arabic-layout.md): Postextがアラビア語をどう組むか。書字方向と双方向アルゴリズム、右綴じの本、切り離さず字間も空けない連結した語、カシーダによる両端そろえ、母音記号、強調、数字と番号の書式、序数の語、脚注、古典詩、目次、索引、引用、フォント
- [日本語の組版](https://postext.dev/ja/docs/japanese-layout.md): Postextが日本語を縦組みと横組みで組む方法。日本の地域設定、禁則処理、約物のアキ、段落先頭の括弧、縦組み用の字形、ルビ、圏点と傍線、漢文訓読、番号付け、行取りの見出し、注、五十音順の索引、引用、フォント、青空文庫のテキスト
- [Postextへの貢献](https://postext.dev/ja/docs/contributing.md): Postextのコミュニティに参加し、プロジェクトに貢献する方法
- [Sandbox](https://postext.dev/ja/docs/sandbox.md): Postextの組版エンジンをブラウザーで試せるインタラクティブな実験の場
- [エージェントスキル：出版物をPostextに移植する](https://postext.dev/ja/docs/skill.md): Claude Code、Codexなどのエージェントにpostext-portスキルを入れ、PDF、Word、PowerPoint、EPUB、InDesign、HTMLの原稿を、元のレイアウトに沿ったPostextプロジェクトに変換させます
## リンク
- [GitHub](https://github.com/drnachio/postext)
- [npm](https://www.npmjs.com/package/postext)
- [YouTube](https://www.youtube.com/@Postext)
- [レシピ集](https://postext.dev/ja/cookbook.md): そのままコピーして使えるPostextの例。章扉から1冊の本まで、それぞれが組むページと全コードを添えています。
- [Sandbox](https://postext.dev/ja/sandbox): ブラウザーで動く対話型エディター。Markdownを書き、設定を調整し、印刷用のPDFとEPUB 3の電子書籍を書き出せます。
- [MITライセンス](https://postext.dev/ja/license.md)