v0.3.11

El Tipógrafo Programable para la Web

Postext parte de markdown semántico y aplica reglas de maquetación con siglos de historia — prevención de huérfanas, balanceo de columnas, colocación de figuras — para generar componentes React con calidad editorial.

EmpezarVer en GitHub

Qué Es Postext

Maquetación Editorial,
Computada para la Web

CSS ofrece maquetación responsiva — flexbox, grid, columnas. Pero no sabe balancear columnas, evitar huérfanas, ajustar texto alrededor de figuras ni colocar notas al pie en la base de una columna. Son decisiones editoriales depuradas durante siglos de tipografía impresa.

Postext cubre ese vacío. Pásale markdown semántico y un objeto de configuración. Mide texto entre 300 y 600 veces más rápido que el DOM gracias a @chenglou/pretext, y devuelve componentes React compuestos según estándares tipográficos profesionales.

Entrada

# Chapter One

The quick brown fox jumps over
the lazy dog. A paragraph with
a {{figure:hero-img}} reference
and a footnote.[^1]

[^1]: Additional context placed
at column bottom automatically.

Salida

Capacidades

Lo que los Tipógrafos Siempre Han Sabido

Prevención de Huérfanas y Viudas

Ni una sola línea suelta al inicio o al final de una columna. Postext aplica reglas tipográficas que CSS no puede expresar.

Balanceo de Columnas

Contenido repartido entre columnas para que acaben a la misma altura, tal como lo haría un tipógrafo profesional.

Flujo de Texto Alrededor de Figuras

Imágenes, citas destacadas y tablas en línea, flotantes o en márgenes, con el texto ajustándose a su alrededor de forma natural.

Notas al Pie y Notas Marginales

Notas al pie ancladas al fondo de columna. Notas marginales alineadas con el párrafo que las referencia. Notas finales recopiladas al final de sección.

Separación Silábica y Ajuste de Bandera

División inteligente de palabras y control del margen derecho que evita ríos de blanco y produce bloques de texto homogéneos.

Salida Web y PDF

Un motor de maquetación, dos renderizadores. Genera componentes React para la web o salida PDF para impresión — desde la misma fuente.

API

Una Función, Control Total

Llama a createLayout con tu contenido y un objeto de configuración. Recibes un componente React compuesto a tu medida.

import { createLayout } from "postext";

const Article = createLayout(
  {
    markdown: content,
    resources: [
      { id: "hero", type: "image", src: "hero.jpg", width: 800, height: 400 },
    ],
    notes: [
      { id: "1", type: "footnote", content: "Additional context." },
    ],
  },
  {
    columns: 2,
    gutter: "2rem",
    typography: {
      orphans: 2,
      widows: 2,
      hyphenation: true,
    },
    references: {
      footnotes: { placement: "columnBottom" },
    },
  }
);

Flujo de Trabajo

Maquetación Editorial en Tres Pasos

  1. Escribe Markdown Semántico

    Escribe tu contenido en markdown enriquecido con referencias a recursos y marcadores de notas al pie. Sin pensar en maquetación — solo contenido.

  2. Configura las Reglas de Maquetación

    Define columnas, reglas tipográficas, estrategias de colocación de recursos y ajustes por sección en un objeto PostextConfig.

  3. Renderiza Componentes React

    Llama a createLayout y obtén un componente React con maquetación editorial al píxel — listo para web o PDF.

Instalación

Empieza en Menos de un Minuto

# Instala con tu gestor de paquetes
pnpm add postext
// Inicio rápido
import { createLayout } from "postext";

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

export default Page;