O compositor programável para a web

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

1. 0:00

   Na telaSobre 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çãoDurante cinco séculos, a imprensa aprendeu a compor a página.

2. 0:06

   Na telaManchete: “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çãoA 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.

3. 0:20

   Na telaDepois 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çãoEste é o Postext: o tipógrafo programável para a web.

4. 0:26

   Na telaSeçã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çãoVocê escreve Markdown semântico, que diz o que é cada coisa. A configuração decide como fica.

5. 0:34

   Na telaSeçã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çãoCada 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.

6. 0:44

   Na telaSeçã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çãoDepois, o Postext decide. Sete passadas posicionam cada linha, levam cada figura ao seu lugar e equilibram as colunas, até que nada se mova.

7. 0:57

   Na telaSeçã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çãoTudo vive num documento virtual, como o virtual DOM do React. Você muda uma palavra, e só o que mudou é recomposto.

8. 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çãoE num livro longo, só são pintadas as páginas que estão visíveis na tela.

9. 1:14

   Na telaSeçã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çãoUm 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.

10. 1:29

    Na telaSeçã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çãoUma 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.

11. 1:45

    Na telaSeçã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çãoO LaTeX definiu o padrão do papel. Mas hoje a edição vive em todas as telas.

12. 1:52

    Na telaChamada “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çãoO Postext é um padrão aberto: um único arquivo portátil, documentado e com licença MIT, que qualquer ferramenta pode ler e escrever.

13. 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çãoPor isso ele consegue diagramar livros de centenas de páginas em décimos de segundo.

14. 2:10

    Na telaFechamento: 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çãoPostext. Código aberto, em postext.dev.