# Postext — Compositor programável para a web

> Um motor de layout que une o ofício secular da composição tipográfica impressa à tecnologia web atual. Entra markdown semântico, saem páginas com qualidade editorial, renderizadas em HTML, canvas, PDF pronto para impressão e EPUB.

- Versão HTML: https://postext.dev/pt
- Outros idiomas: [en](https://postext.dev/en.md), [es](https://postext.dev/es.md), [ca](https://postext.dev/ca.md), [zh](https://postext.dev/zh.md), [ja](https://postext.dev/ja.md), [ar](https://postext.dev/ar.md)

## Em poucas palavras

O Postext é um software livre e gratuito que diagrama as páginas de livros, revistas e relatórios. Você escreve o texto com algumas marcações simples, e o Postext o transforma em páginas prontas, como as de um livro impresso. Ele segue regras que os impressores usam há séculos, para que o texto seja fácil de ler. As páginas podem ir para um site, para um aplicativo ou para um PDF pronto para a gráfica. Foi feito para quem escreve, edita, projeta ou programa.

## O compositor programável para a web

O Postext parte de markdown semântico e aplica regras editoriais com séculos de história (justificação Knuth-Plass, colunas equilibradas, flutuantes que sabem o seu lugar) para produzir páginas com qualidade editorial em HTML, canvas ou PDF pronto para impressão.

## O Postext em dois minutos

**Transcrição.** Tudo o que o narrador diz, com uma descrição do que aparece na tela.

- 0:00 · *Na tela:* Sobre fundo escuro, “MOGÚNCIA · 1455” acima de um fio dourado. Atrás da manchete “Durante cinco séculos, a imprensa aprendeu a compor a página.”, o ano avança de 1455 a 2026 em grandes algarismos vazados, e termos do ofício vão caindo em volta: Justificação, Kerning, Viúvas, órfãs, Colunas equilibradas, Entrelinha, Grade de base, hi·fe·ni·za·ção, Medida, Flutuantes, Cabeços, Rios. A câmera entra no ponto final, que enche a tela de dourado. · *Narração:* Durante cinco séculos, a imprensa aprendeu a compor a página.
- 0:06 · *Na tela:* Manchete: “A web aprendeu a diagramar interfaces. Nunca aprendeu a compor uma página.” Uma janela de navegador em example.com/longform/article mostra um artigo justificado em três colunas, “Por que a web falha”; etiquetas vermelhas apontam rios de branco, uma órfã, uma viúva, uma imagem que cai sobre o texto e uma última coluna desequilibrada. Ao lado, um chip de código diz “column-count: 3;”, seguido de “…e pouco mais.” e de uma lista riscada com os mesmos cinco defeitos: Rios de branco, Órfãs, Viúvas, Colisões, Colunas desequilibradas. A janela se distorce e desaba. · *Narração:* A web aprendeu a diagramar as interfaces. Nunca as páginas. Por isso o texto longo continua se quebrando: rios, viúvas, órfãs, colisões.
- 0:20 · *Na tela:* Depois de um clarão branco e de uma varredura de faixas azul, dourada e vermelha, o logotipo do Postext sobe até o seu lugar com o lema “O tipógrafo programável para a web”. Embaixo: CÓDIGO ABERTO · LICENÇA MIT · v1.20.3 · FUNCIONA NO SEU NAVEGADOR. · *Narração:* Este é o Postext: o tipógrafo programável para a web.
- 0:26 · *Na tela:* Seção 01 de 07, “Entra o conteúdo”: “O Markdown diz o que é cada coisa.” Um arquivo Markdown, 03-por-que-postext.md, se digita sozinho: uma diretiva de parte, o título “Por que Postext” com um lead, um parágrafo que cita a figura fig-flow com :ref, uma linha ::resource e um bloco :::callout. Ao lado, config.ts chama buildDocument com diagramação em duas colunas, texto justificado e hifenização para “pt-BR”, sob a frase “A configuração decide como fica. O texto não contém nenhuma decisão de diagramação.” · *Narração:* Você escreve Markdown semântico, que diz o que é cada coisa. A configuração decide como fica.
- 0:34 · *Na tela:* Seção 02, “O Pretext mede”: “Medido sem tocar no DOM.” Um título, um parágrafo e um boxe são escaneados um depois do outro, e linhas de cota dão a altura de cada um em pontos; um painel de código mostra prepare(text, '25px Lora') e layout(prepared, width, 38), que devolve uma altura e um número de linhas. Duas barras disputam 10.000 parágrafos: “Reflow do navegador · DOM” mal sai do lugar e “Pretext · canvas + aritmética” se enche na hora, e um contador sobe até 600× acima de “mais rápido que o DOM para medir texto, para que um livro inteiro se recomponha enquanto você digita” e “Baseado em @chenglou/pretext”. · *Narração:* Cada parágrafo se mede sem tocar o DOM, até seiscentas vezes mais rápido, graças ao Pretext, a biblioteca que o tornou possível.
- 0:44 · *Na tela:* Seção 03, “O Postext decide”: “Cada linha no lugar antes de pintar um pixel.” Um anel de sete segmentos se acende por turnos, Estrutura, Medição, Disposição, Flutuantes, Refino, Equilíbrio e Ritmo, cada um com uma linha de explicação, enquanto ao lado se monta uma página em duas colunas do guia do Postext: os blocos etiquetados voam para as suas colunas, uma figura desliza até o lugar com a nota “:ref{id="fig-flow"} → pé da coluna”, a faixa de abertura desce, as linhas aparecem, as colunas se nivelam e a grade de base desce pela página. O anel percorre as iterações 1 a 3 e mostra “Estável em 3 iterações” com um visto; um boxe dá a caixa e a linha de base de uma linha. · *Narração:* Depois, o Postext decide. Sete passadas posicionam cada linha, levam cada figura ao seu lugar e equilibram as colunas, até que nada se mova.
- 0:57 · *Na tela:* Seção 04, “O documento virtual”: “Mude uma palavra. Só se recompõe o que muda.”, com a nota “Como o virtual DOM do React, mas para páginas: o VDT, uma árvore de documento virtual.” Sete páginas, da p. 7 à p. 13, em fila; um cursor marca uma edição na p. 11, o resto dessa coluna fica dourado como SUJO e uma faixa passa para a p. 12, que recebe um visto e ESTÁVEL, enquanto as anteriores dizem PULADA e as seguintes INTACTA. Três marcadores explicam a regra, e um painel com o título renderToHtmlIndexed() marca como ATUALIZADO os nós da árvore que mudaram. · *Narração:* Tudo vive num documento virtual, como o virtual DOM do React. Você muda uma palavra, e só o que mudou é recomposto.
- 1:07 · *Na tela:* “Um documento longo? Só se pinta o que está na tela.” Uma coluna de páginas passa por uma moldura dourada chamada VIEWPORT, com uma margem de 200 pixels acima e abaixo: as páginas de dentro são desenhadas inteiras e as de fora são contornos tracejados. Um contador grande indica quantas das 51 páginas estão pintadas a cada momento (IntersectionObserver · +200 px), ao lado de “Geometria: todas as páginas. Pixels: só o que você vê.” · *Narração:* E num livro longo, só são pintadas as páginas que estão visíveis na tela.
- 1:14 · *Na tela:* Seção 05, “Justificação Knuth–Plass”: “Todas as formas de quebrar o parágrafo. Ao mesmo tempo.” À esquerda, sob “Gulosa · o navegador”, um parágrafo sobre a quebra de linhas é composto de forma gulosa, como faz o navegador, com as linhas mais frouxas em vermelho. Embaixo, cada palavra é um ponto sobre uma reta: arcos vermelhos para as quebras gulosas, arcos azuis tênues que testam todas as quebras possíveis e um caminho dourado com a melhor combinação. À direita, a versão “Knuth–Plass · Postext”, de espaçamento uniforme, com os deméritos de cada linha, a fórmula “(1 + feiura + penalidade)²” e uma soma de deméritos menor. · *Narração:* Um navegador quebra as linhas de forma gulosa, uma a uma. O Postext usa Knuth-Plass, o algoritmo do TeX: pesa todas as formas de quebrar o parágrafo inteiro e fica com a mais uniforme.
- 1:29 · *Na tela:* Seção 06, “Uma diagramação, cinco saídas”: “O que você vê é o que vai para a gráfica.” Sob a linha de código const vdt = buildDocument(content, config); uma página se divide em cinco. Canvas (renderToCanvas(), bitmaps exatos ao pixel) ganha uma lupa sobre a sua grade de pixels; HTML (renderToHtml(), selecionável e responsivo) contorna cada bloco com a sua etiqueta `<h1>`, `<p>`, `<figure>` etc.; em PDF (renderToPdf(), para impressão, PDF/UA, CMYK) quatro chapas de cor entram em registro e aparecem marcas de corte e uma barra de cor. Em EPUB 3 (renderToEpub(), livro digital, fixo ou refluível) a página aparece num leitor de livros digitais com a etiqueta “Layout fixo”; a tela se estreita até o tamanho de um celular, o texto se redistribui e a etiqueta passa a “Refluível”. Em Folio (postext-folio, um livro em 3D que vira as páginas) a página se abre numa página dupla e uma folha gira sobre a lombada. · *Narração:* Uma diagramação, cinco saídas: canvas, HTML, PDF para impressão, EPUB 3, fixo ou refluível, e um livro em 3D. O que você vê é o que vai para a gráfica.
- 1:45 · *Na tela:* Seção 07, “Por que um padrão aberto”: “LaTeX definiu o padrão do papel. Hoje a edição vive também em cada tela.” Dois cartões: LaTeX, 1984, com xis ao lado de “Pensado para a página impressa”, “Preso às fontes e pacotes de uma máquina”, “Compilar, esperar, repetir” e “Sem diagramação editorial na web responsiva”; Postext, 2026, com vistos ao lado de “Web, PDF para gráfica e EPUB 3, uma diagramação”, “Um só arquivo .postext leva tudo”, “Recompõe ao vivo enquanto você digita” e “Em qualquer navegador · sem servidores · MIT”. O cartão do Postext se acende. · *Narração:* O LaTeX definiu o padrão do papel. Mas hoje a edição vive em todas as telas.
- 1:52 · *Na tela:* Chamada “Um arquivo, o livro inteiro” e manchete “Um padrão aberto para a edição, além de onde o LaTeX chega.” Um ícone de arquivo .postext se abre em cinco peças: preset.json (configuração e design), chapters/*.md (um Markdown por capítulo), fonts/*.woff2 (as próprias fontes), images/ · SVG (cada imagem, incluída) e resources (tabelas, figuras e legendas). Rodapé: “Um ZIP comum: aberto, documentado e com licença MIT. Qualquer ferramenta pode lê-lo e escrevê-lo.” · *Narração:* O Postext é um padrão aberto: um único arquivo portátil, documentado e com licença MIT, que qualquer ferramenta pode ler e escrever.
- 2:03 · *Na tela:* “A amostra · composta pelo motor real”: um mural de páginas da edição brasileira do guia se afasta em perspectiva enquanto um contador chega a 51 páginas. Texto: “11 capítulos, 3 partes e as capas, diagramados em cerca de meio segundo. Cada página do guia do Postext, calculada em um navegador pelo postext v1.20.3 para esta peça. Nada posto à mão.” Depois, as etiquetas Livros didáticos, Revistas, Edições literárias, Catálogos. · *Narração:* Por isso ele consegue diagramar livros de centenas de páginas em décimos de segundo.
- 2:10 · *Na tela:* Fechamento: o logotipo do Postext com o lema “O tipógrafo programável para a web”, o endereço postext.dev, uma linha de terminal que digita “$ pnpm add postext” e o rodapé “Código aberto · MIT · github.com/drnachio/postext”. · *Narração:* Postext. Código aberto, em postext.dev.

## Diagramação editorial, calculada para a web

O CSS oferece layout responsivo (flexbox, grid, colunas), mas não sabe equilibrar colunas, manter um título junto ao seu parágrafo, evitar viúvas e órfãs nem levar uma figura ao topo da coluna seguinte. São decisões editoriais, refinadas ao longo de séculos de impressão.

O Postext preenche essa lacuna. Você fornece markdown semântico e um objeto de configuração. Ele mede o texto de 300 a 600 vezes mais rápido que o DOM usando [@chenglou/pretext](https://github.com/chenglou/pretext), depois calcula a geometria completa da página (cada linha, flutuante e legenda) e a renderiza pelos renderizadores de HTML, canvas ou PDF pronto para impressão.

## O que os tipógrafos sempre souberam

### Justificação Knuth-Plass

O mesmo algoritmo ótimo de quebra de linhas que o TeX usa, com hifenização por padrões do TeX e controle de órfãs: blocos de texto uniformes, sem rios de branco, além do que o CSS consegue expressar.

[Ler na documentação](https://postext.dev/pt/docs/justification#knuth-plass-o-parágrafo-inteiro-de-uma-vez)

### Recursos e referências cruzadas

Figuras, diagramas SVG e tabelas flutuam para o topo ou o pé de colunas e páginas, como os flutuantes na impressão, com numeração por tipo e referências cruzadas :ref sempre sincronizadas.

[Ler na documentação](https://postext.dev/pt/docs/document-format#recursos)

### Tabelas e legendas

Tabelas com tipografia independente para o corpo e o cabeçalho, divididas entre páginas com o cabeçalho repetido, e legendas que seguem a sua configuração, numeradas e posicionadas junto ao recurso que descrevem.

[Ler na documentação](https://postext.dev/pt/docs/configuration#estilo-de-tabela)

### Diagramas em uma só tinta

Recolore diagramas SVG em tons de uma única tinta segundo a luminância, para que cada ilustração combine com o seu design e fique pronta para impressão em cor especial.

[Ler na documentação](https://postext.dev/pt/docs/configuration#estilo-de-diagramas)

### Matemática em LaTeX

Equações no texto e em destaque escritas em LaTeX, medidas e compostas pelo motor para assentar na grade de linhas de base junto ao texto.

[Ler na documentação](https://postext.dev/pt/docs/document-format#fórmulas-matemáticas)

### Web, PDF pronto para impressão e EPUB

Um motor de layout, quatro saídas. As mesmas páginas calculadas são renderizadas em HTML, canvas ou PDF pronto para impressão (com marcadores, cor CMYK e saída PDF/UA etiquetada e acessível) e saem como e-book EPUB 3, página a página ou refluível.

[Ler na documentação](https://postext.dev/pt/docs/architecture#interface-dos-renderizadores)

## Uma função, controle total

Chame `buildDocument` com o seu conteúdo e um objeto de configuração. Você recebe a geometria completa das páginas: desenhe qualquer página como imagem com `renderPage` ou componha o livro inteiro como PDF pronto para impressão com `renderToPdf`.

```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);
```

## Diagramação editorial em três passos

1. **Escreva markdown semântico.** Escreva o conteúdo em markdown enriquecido: títulos, listas, tabelas, fórmulas, boxes e referências cruzadas :ref às suas figuras. Nada de diagramação nesta etapa, só conteúdo.
2. **Configure as regras de diagramação.** Defina o tamanho da página, as colunas, a tipografia, o design dos títulos, os cabeços e o posicionamento dos flutuantes num objeto PostextConfig, ou desenhe tudo visualmente no Sandbox.
3. **Renderize em HTML, canvas ou PDF.** Chame buildDocument e receba a geometria completa da diagramação; depois renderize-a com o renderizador de HTML, canvas ou PDF pronto para impressão.

## Um arquivo, o livro inteiro

Um arquivo .postext leva tudo de que um documento precisa para ser composto de novo, em qualquer máquina: um formato aberto e editável que qualquer um pode adotar.

A maioria dos formatos editoriais espalha um projeto. Uma compilação LaTeX depende das fontes e dos pacotes instalados numa máquina, e os arquivos nativos dos grandes programas de diagramação fazem link para imagens e fontes guardadas fora deles. Ao mover o projeto, algo se perde. Nós mesmos esbarramos nesses limites com o LaTeX.

Um .postext é um arquivo ZIP comum que qualquer pessoa pode abrir, ler e editar: um manifesto JSON, um arquivo Markdown por capítulo e os próprios arquivos de fontes e imagens. O Sandbox o exporta, a skill para agentes postext-port o escreve e `postext/bundle` o abre em qualquer programa para compor de novo as mesmas páginas. O formato é documentado e tem licença MIT, pronto para qualquer ferramenta ler e escrever.

- **Configuração**
- **Capítulos**
- **Famílias tipográficas**
- **Recursos**
- **Imagens**

### Abra o guia, obtenha as suas páginas

O primeiro exemplo do Sandbox, o guia do Postext, é um único arquivo .postext. Abra-o no navegador e transforme cada página numa imagem: as fontes, figuras e tabelas vêm do próprio arquivo.

- [postext-guide.postext](https://postext.dev/bundles/postext-guide.postext)

## Comece em menos de um minuto

```bash
pnpm add postext
```

```ts
import { buildDocument, renderToHtml } from "postext";

const doc = buildDocument({
  markdown: "# Hello World\n\nYour content here.",
});

const html = renderToHtml(doc);
```

## Documentação

- [Introdução ao Postext](https://postext.dev/pt/docs/introduction.md): O que é o Postext, por que ele existe e que problema resolve
- [Arquitetura do Postext](https://postext.dev/pt/docs/architecture.md): Arquitetura técnica do motor de composição tipográfica Postext
- [Configuração do Postext](https://postext.dev/pt/docs/configuration.md): Referência completa de todas as opções de configuração de diagramação do Postext
- [Hifenização e justificação](https://postext.dev/pt/docs/justification.md): Como o Postext quebra linhas, justifica o texto e controla o espaçamento entre palavras com o algoritmo de Knuth-Plass
- [Formato do documento](https://postext.dev/pt/docs/document-format.md): O subconjunto de Markdown que o Postext lê e as regras para escrever os documentos de origem
- [Composição chinesa](https://postext.dev/pt/docs/chinese-layout.md): Como o Postext compõe o chinês, na horizontal e na vertical: regiões, quebra de linhas, largura da pontuação, justificação entre caracteres, a grade de caracteres, livros encadernados pela direita, números em pé, marcas, rubi, warichu, numerais chineses e fontes
- [Composição em árabe](https://postext.dev/pt/docs/arabic-layout.md): Como o Postext compõe o árabe: direção do texto e algoritmo bidirecional, livros encadernados pela direita, palavras ligadas que nunca são cortadas nem espaçadas, justificação com kashida, sinais vocálicos, ênfase, algarismos e estilos de numeração, ordinais por extenso, notas de rodapé, verso clássico, sumário, índice remissivo, citações e fontes
- [Composição japonesa](https://postext.dev/pt/docs/japanese-layout.md): Como o Postext compõe o japonês, na vertical e na horizontal: a região Japão, kinsoku, espaçamento dos yakumono, colchetes no início do parágrafo, formas verticais, furigana, marcas de ênfase e linhas laterais, kanbun, contadores, títulos com gyōdori, notas, índice remissivo em ordem gojūon, citações, fontes e textos do Aozora Bunko
- [Quadrinhos](https://postext.dev/pt/docs/comics.md): Como o Postext compõe quadrinhos e mangás a partir de Markdown: páginas de quadrinhos cortadas por uma árvore de divisões, desenhos dos quadros recortados em torno da área segura, letreiramento gerado a partir de um roteiro (fala, pensamento, sussurro, grito, rádio, recordatórios, onomatopeias), estilos de balão, âncoras dos personagens nos desenhos, tiras no meio do texto, páginas duplas, leitura da direita para a esquerda e letreiramento vertical, traduções e as saídas em canvas, PDF, HTML e EPUB
- [Como contribuir com o Postext](https://postext.dev/pt/docs/contributing.md): Como entrar na comunidade do Postext e contribuir com o projeto
- [Sandbox](https://postext.dev/pt/docs/sandbox.md): Ambiente interativo para experimentar com o motor de layout do Postext
- [Skill para agentes: portar uma publicação para o Postext](https://postext.dev/pt/docs/skill.md): Instale a skill postext-port no Claude Code, no Codex ou em qualquer agente e deixe que ela transforme um PDF, Word, PowerPoint, EPUB, InDesign ou HTML em um projeto do Postext que segue a diagramação original

## Links

- [GitHub](https://github.com/drnachio/postext)
- [npm](https://www.npmjs.com/package/postext)
- [YouTube](https://www.youtube.com/@Postext)
- [Receitas](https://postext.dev/pt/cookbook.md): Exemplos do Postext para copiar, de uma abertura de capítulo a um livro inteiro, cada um com as páginas que compõe e o código completo.
- [Sandbox](https://postext.dev/pt/sandbox): Editor interativo no navegador: escreva markdown, ajuste a configuração e exporte PDF pronto para a gráfica e livros digitais EPUB 3.
- [Licença MIT](https://postext.dev/pt/license.md)