# Un boletín semanal: los primeros informes del sida

> Dos informes de los CDC de 1981 en un boletín tamaño carta: cabecera, casos con etiquetas en línea, estilos para Reported by y la nota editorial, citas.

- Versión HTML: https://postext.dev/es/cookbook/outbreak-report-bulletin
- Receta N.º 143 · Publicaciones completas · Nivel 2 (Intermedio) · Salidas: Canvas, PDF
- Géneros: Artículos y trabajos académicos, Informes y memorias
- Requiere postext ≥ 1.19.0, postext-pdf ≥ 1.19.0 · probada con 1.19.0, postext-pdf 1.19.0 el 2026-10-06
- Páginas: [1](https://postext.dev/cookbook/outbreak-report-bulletin/en/p01.webp?v=6679adff), [2](https://postext.dev/cookbook/outbreak-report-bulletin/en/p02.webp?v=6679adff), [3](https://postext.dev/cookbook/outbreak-report-bulletin/en/p03.webp?v=6679adff), [4](https://postext.dev/cookbook/outbreak-report-bulletin/en/p04.webp?v=6679adff), [5](https://postext.dev/cookbook/outbreak-report-bulletin/en/p05.webp?v=6679adff), [6](https://postext.dev/cookbook/outbreak-report-bulletin/en/p06.webp?v=6679adff)
- PDF: https://postext.dev/cookbook/outbreak-report-bulletin/en/outbreak-report-bulletin.pdf?v=6679adff
- Abrir en el Sandbox: https://postext.dev/es/sandbox#recipe=outbreak-report-bulletin&lang=en (.postext: https://postext.dev/cookbook/outbreak-report-bulletin/en/outbreak-report-bulletin.postext)
- Última actualización: 2026-10-06
- Otros idiomas: [en](https://postext.dev/en/cookbook/outbreak-report-bulletin.md), [ca](https://postext.dev/ca/cookbook/outbreak-report-bulletin.md), [zh](https://postext.dev/zh/cookbook/outbreak-report-bulletin.md), [ja](https://postext.dev/ja/cookbook/outbreak-report-bulletin.md), [ar](https://postext.dev/ar/cookbook/outbreak-report-bulletin.md)

## En pocas palabras

Un boletín de salud pública de 1981, compuesto de nuevo en papel carta. Cada tipo de párrafo (los casos, la lista de médicos que los comunicaron, el comentario de la redacción) tiene su aspecto, y las referencias se numeran solas.

## Lo que vas a componer

Seis páginas de un boletín epidemiológico semanal en tamaño carta US, que reproducen los dos informes en los que los Centros para el Control de Enfermedades (CDC) describieron por primera vez lo que después se llamó sida: cinco casos de neumonía por *Pneumocystis* en Los Ángeles (5 de junio de 1981) y los casos de sarcoma de Kaposi que vinieron después (3 de julio de 1981). La cabecera es un diseño propio al estilo de un boletín oficial de la época: una banda azul con la marca en una sans condensada sobre dos columnas de Plex Serif. Cada voz del informe tiene su estilo: los casos bajo etiquetas numeradas en negrita, la línea *Reported by* en cursiva pequeña, la *Editorial Note*, las citas entre paréntesis y una lista numerada. El texto, las referencias y las tablas son los que imprimieron los CDC; la cronología y la tabla de casos de la página 2 son de la edición.

**Esta receta responde a:**

- ¿Cómo compongo un informe de boletín semanal, con casos clínicos, nota editorial y referencias numeradas?
- ¿Cómo cito obras y compongo la bibliografía en APA, IEEE u otro estilo de cita?
- ¿Cómo hago una tabla con filas de cabecera, celdas combinadas, anchos de columna y alineación por celda?
- ¿Cómo vuelvo a componer con Postext un artículo de acceso abierto de arXiv o PubMed Central, con sus citas, sus figuras y su línea de licencia?

## La respuesta corta

```js
// script.js, líneas 83–103
// :::paragraphs{style="…"} wraps the blocks of each voice; **Patient 1:** is a run-in label.
const voice = (id, family, size, lead, extra) => ({ id, fontFamily: family, fontSize: pt(size),
  lineHeight: pt(lead), color: col('ink'), boldColor: col('ink'), ...extra });
const aside = { textAlign: 'left', firstLineIndent: pt(0), snapToGrid: false };
const paragraphStyles = [
  // Case histories and the Editorial Note: the body texture, bold labels in the accent.
  voice('case', TEXT, 9.5, LEAD, { boldColor: col('accent'), boldFontWeight: 600 }),
  voice('editorial', TEXT, 9.5, LEAD, { boldColor: col('accent'), boldFontWeight: 600 }),
  // "Reported by …": the authors' line, italic small type in the condensed sans, off the grid.
  voice('reported', LABEL, 7.8, 10.2, { ...aside, italic: true, color: col('muted'),
    hyphenation: false, marginTop: pt(4), marginBottom: pt(6) }),
  // A line the reprint adds, in the label face and the accent: never taken for 1981 text.
  voice('editor', LABEL, 8, 10.6, { ...aside, italic: true, color: col('accent'),
    marginTop: pt(3), marginBottom: pt(5) }),
  voice('colophon', LABEL, 7.4, 9.6, { ...aside, color: col('muted'), marginTop: pt(LEAD) }),
];
// MMWR cited (1) in citation order, and each report (its H1 is a chapter) counted from 1.
registerCitationEngine(createCiteprocEngine({ styles: STYLES, locales: LOCALES }));
const citations = { style: 'american-medical-association', marker: 'parentheses',
  numbering: 'chapter', bibliography: { scope: 'chapter', fontSize: em(0.86),
    lineHeight: pt(10.6), entrySpacing: pt(1.5), labelAlign: 'right' } };
```

## Ingredientes

**Enseña**

- [Estilos de párrafo](https://postext.dev/es/docs/configuration.md#estilos-de-párrafo): Estilos con nombre para grupos de párrafos que se apartan del texto general: versos, epígrafes, dedicatorias, firmas, letra pequeña.
- [Aperturas diseñadas](https://postext.dev/es/docs/configuration.md#span-y-diseño-avanzado): Un título dibujado como composición libre de textos, filetes, cajas e imágenes, que reserva la altura que necesita sobre el texto.
- [Bibliografía a partir de las referencias](https://postext.dev/es/docs/document-format.md#citas-y-bibliografía): La lista de obras citadas, construida a partir de las referencias del documento (front matter o un bloque BibTeX) donde está :::bibliography o tras el último capítulo.

**También usa**

- [Citas en un estilo de cita](https://postext.dev/es/docs/document-format.md#citas-y-bibliografía)
- [Notas al pie](https://postext.dev/es/docs/document-format.md#notas-al-pie)
- [Estilo de tablas](https://postext.dev/es/docs/configuration.md#estilo-de-tablas)
- [Tipos de recurso propios](https://postext.dev/es/docs/configuration.md#tipos-de-recurso)
- [Estilo de los pies](https://postext.dev/es/docs/configuration.md#estilo-de-pies-de-recurso)
- [Colocación de figuras](https://postext.dev/es/docs/document-format.md#colocación)
- [Cabeceras y folios](https://postext.dev/es/docs/configuration.md#encabezados-y-pies)
- [Cabeceras según el tipo de página](https://postext.dev/es/docs/configuration.md#elementos-de-texto)
- [Estilos de título](https://postext.dev/es/docs/configuration.md#estilos-de-encabezado)
- [Atributos de título](https://postext.dev/es/docs/document-format.md#atributos-de-encabezado)
- [Una o dos columnas](https://postext.dev/es/docs/configuration.md#tipos-de-disposición)
- [Formato de página](https://postext.dev/es/docs/configuration.md#tamaños-de-página-predefinidos)
- [Paleta de color semántica](https://postext.dev/es/docs/configuration.md#paleta-de-colores)
- [Exportación a PDF](https://postext.dev/es/docs/configuration.md#generación-de-pdf)
- [Citas que colocan las figuras](https://postext.dev/es/docs/document-format.md#referencia-en-línea-la-forma-principal)
- [Figuras justo aquí](https://postext.dev/es/docs/document-format.md#inserción-en-bloque-opcional-colocación-en-línea-explícita)
- [Figura y Tabla en tu idioma](https://postext.dev/es/docs/configuration.md#tipos-de-recurso)
- [Fuentes incrustadas en el PDF](https://postext.dev/es/docs/configuration.md#por-qué-un-proveedor-de-fuentes)
- [Figuras y tablas como recursos](https://postext.dev/es/docs/document-format.md#recursos)
- [Geometría por sección](https://postext.dev/es/docs/configuration.md#estilos-de-encabezado)
- [Tablas a partir de datos](https://postext.dev/es/docs/document-format.md#inserción-en-bloque-opcional-colocación-en-línea-explícita)
- [Estilos de tabla con nombre](https://postext.dev/es/docs/configuration.md#estilos-de-tabla-con-nombre)

**La configuración de un vistazo**

- [`bodyText`](https://postext.dev/es/docs/configuration.md#texto-de-cuerpo), [`captionStyle`](https://postext.dev/es/docs/configuration.md#estilo-de-pies-de-recurso), [`citations`](https://postext.dev/es/docs/configuration.md#citas), [`colorPalette`](https://postext.dev/es/docs/configuration.md#paleta-de-colores), [`footer`](https://postext.dev/es/docs/configuration.md#encabezados-y-pies), `footnotes`, [`header`](https://postext.dev/es/docs/configuration.md#encabezados-y-pies), [`headingStyles`](https://postext.dev/es/docs/configuration.md#estilos-de-encabezado), [`headings`](https://postext.dev/es/docs/configuration.md#encabezados), [`layout`](https://postext.dev/es/docs/configuration.md#disposición), [`locale`](https://postext.dev/es/docs/configuration.md#separación-silábica), [`page`](https://postext.dev/es/docs/configuration.md#página), [`paragraphStyles`](https://postext.dev/es/docs/configuration.md#estilos-de-párrafo), [`resourceTypes`](https://postext.dev/es/docs/configuration.md#tipos-de-recurso), [`tableStyle`](https://postext.dev/es/docs/configuration.md#estilo-de-tablas), [`tableStyles`](https://postext.dev/es/docs/configuration.md#estilos-de-tabla-con-nombre)

**API**

- [`LOCALES`](https://postext.dev/es/docs/document-format.md#citas-y-bibliografía), [`STYLES`](https://postext.dev/es/docs/document-format.md#citas-y-bibliografía), [`buildDocument`](https://postext.dev/es/docs/configuration.md#construir-un-documento), [`clearMeasurementCache`](https://postext.dev/es/docs/configuration.md#caché-de-medidas), [`createCiteprocEngine`](https://postext.dev/es/docs/document-format.md#citas-y-bibliografía), [`decompressWoff2`](https://postext.dev/es/docs/configuration.md#proveedor-de-fuentes-en-el-navegador-fontsource--woff2), [`defaultResourceTypes`](https://postext.dev/es/docs/configuration.md#tipos-de-recurso), [`mergeCells`](https://postext.dev/es/docs/document-format.md#inserción-en-bloque-opcional-colocación-en-línea-explícita), [`parseTSV`](https://postext.dev/es/docs/document-format.md#inserción-en-bloque-opcional-colocación-en-línea-explícita), [`registerCitationEngine`](https://postext.dev/es/docs/document-format.md#citas-y-bibliografía), [`registerResourceImage`](https://postext.dev/es/docs/architecture.md#superficie-de-api), [`renderPageToCanvas`](https://postext.dev/es/docs/configuration.md#renderizar-una-página-a-un-bitmap), [`renderToPdf`](https://postext.dev/es/docs/configuration.md#generación-de-pdf)

**Tipografías**

- IBM Plex Serif (OFL-1.1), Libre Franklin (OFL-1.1), IBM Plex Sans Condensed (OFL-1.1)

## Elaboración

### 1 · Un estilo de párrafo para cada voz

El código es [la respuesta corta](#la-respuesta-corta) de arriba. Un informe de boletín se escribe en varios registros: los casos, la lista de quienes los comunicaron y el comentario de la redacción. Envolver cada tramo en `:::paragraphs{style="…"}` le da su aspecto sin tocar las palabras: la línea *Reported by* baja a 7,8 pt en cursiva condensada, fuera de la rejilla base, mientras los casos conservan la textura del cuerpo con sus etiquetas `**Patient 1:**` en el color de acento. Las citas se escriben `[@walzer1974]`; `american-medical-association` con `marker: 'parentheses'` las imprime como (1) y ordena la lista por orden de cita, como hacía el boletín, `numbering: 'chapter'` cuenta las citas de cada informe desde 1, y `scope: 'chapter'` pone su lista debajo con esos mismos números.

### 2 · Una cabecera que abre el primer informe

```js
// script.js, líneas 36–66
// Kicker and dateline are attributes of each report's H1; {titleText} read with inlineMarks
// keeps the italic genus. The July report opens where June ends, under a double rule.
const reportHead = (y, size) => [
  text('kicker', '{attr.kicker}', LABEL, 8.5, { ...caps(8.5), color: col('accent'),
    placement: at('container', 'top-left', 0, y, MEASURE) }),
  text('title', '{titleText}', DISPLAY, size, { fontWeight: 800, lineHeight: 1.08,
    inlineMarks: true, placement: at('#kicker', 'below', 0, 2.2, MEASURE) }),
  text('dateline', '{attr.dateline}', LABEL, 9, { fontStyle: 'italic', color: col('muted'),
    placement: at('#title', 'below', 0, 2, MEASURE) }),
];
const masthead = { enabled: true, minHeight: mm(72), slot: { elements: [
  { kind: 'box', id: 'band', style: { backgroundColor: col('accent') }, placement: {
    anchor: { to: 'page', edge: 'top-left' }, size: { width: 'fill', height: mm(49) } } },
  text('series', 'A reprint series in public health history', LABEL, 8,
    { ...caps(8), color: col('paper'), placement: at('page', 'top-left', SIDE, 11, 120) }),
  text('number', 'Reprint No. 1', LABEL, 8, { ...caps(8), color: col('paper'), align: 'right',
    placement: at('page', 'top-right', -SIDE, 11, 50) }),
  text('wordmark', 'Surveillance Notes', DISPLAY, 50, { fontWeight: 800, color: col('paper'),
    letterSpacing: pt(-1), lineHeight: 1, placement: at('page', 'top-left', SIDE - 1, 18) }),
  text('issue', 'Two reports of June 5 and July 3, 1981: the first published accounts of '
    + 'what became known as AIDS, as the Centers for Disease Control printed them', TEXT, 9.5,
  { fontStyle: 'italic', lineHeight: 1.3, placement: at('container', 'top-left', 0, 29, 92) }),
  text('contents', '**1** *Pneumocystis* Pneumonia — Los Angeles\n**3** Kaposi’s Sarcoma '
    + 'and *Pneumocystis* Pneumonia Among Homosexual Men — New York City and California\n'
    + '**6** Notifiable diseases, week ending June 27, 1981',
  LABEL, 8, { inlineMarks: true, lineHeight: 1.3, boldColor: col('accent'),
    placement: at('container', 'top-right', 0, 29, 76), align: 'left' }),
  rule('rule-a', 46.5, 2), rule('rule-b', 48, 0.5), ...reportHead(52, 23),
] } };
const opener = { enabled: true, minHeight: mm(26), slot: { elements: [rule('rule-a', 0, 2),
  rule('rule-b', 1.5, 0.5), ...reportHead(5, 18)] } };
```

La cabecera es el diseño del estilo de título del primer informe, así que se imprime una sola vez, en la página 1, y las cabeceras de página se la saltan (`pages: 'body'`). El antetítulo y la fecha salen de atributos del H1 de cada informe, y el título es `{titleText}`: un elemento de texto con `inlineMarks: true` conserva el género en cursiva del título. El informe de julio se abre con esos tres elementos bajo un filete doble. Su estilo de título ocupa toda la página con `spanBreak: false`, así que empieza donde acaba el informe de junio: las columnas de encima terminan a la misma altura y el texto sigue debajo en las dos, como el boletín encadenaba un informe tras otro.

### 3 · Tres tablas a partir de texto con tabuladores

```js
// script.js, líneas 437–470
const NUMBER = /^[\d,.()% –]*$/; // a column of counts aligns right, its heading centred
const table = (tsv, headerRows, columnWidths) => {
  const model = parseTSV(tsv, { headerRows });
  const numeric = model.rows[0].map((_, c) => model.rows.slice(headerRows)
    .every((row) => NUMBER.test(row[c].content)));
  return { ...model, columnWidths, rows: model.rows.map((cells, r) => cells.map((cell, c) =>
    (numeric[c] ? { ...cell, align: r < headerRows ? 'center' : 'right' } : cell))) };
};
// Two header rows, as the weekly printed them: "25th week ending" spans two columns.
const notifiable = [[0, 0, 1, 0], [0, 1, 0, 2], [0, 3, 1, 3], [0, 4, 0, 6]]
  .reduce((m, [r1, c1, r2, c2]) => mergeCells(m, { start: { row: r1, col: c1 },
    end: { row: r2, col: c2 } }), table(NOTIFIABLE, 2, [3.6, 1, 1, 1, 1.1, 1.1, 1.1]));
const added = 'Compiled for this reprint from the case reports; not part of the 1981 report.';
const res = (id, typeId, kind, placement, more) => ({ id, typeId, kind, placement,
  createdAt: 0, updatedAt: 0, ...more });
const resources = [
  res('fig-timeline', 'figure', 'svg', { position: 'bottom', span: 'page' }, {
    svg: { fileId: 'timeline.svg', width: 1780, height: 490 },
    caption: 'The five patients, September 1980 to May 1981, by month. The illness before '
      + 'the pneumonia is counted back from the month of diagnosis, as each report gives it.',
    note: `Drawn by the editors. ${added}`,
    altText: 'A timeline of five rows, one per patient: Pneumocystis pneumonia diagnosed '
      + 'between February and April 1981, two deaths in March and May.' }),
  res('tbl-cases', 'table', 'table', { position: 'top', span: 'page' }, {
    caption: 'The five case reports at a glance.', note: added,
    table: { model: table(CASES, 1, [0.7, 0.45, 1, 2.2, 2.4, 1.5]) } }),
  res('tbl-complaints', 'table', 'table', { position: 'bottom' }, {
    caption: 'Presenting complaints in 20 patients with Kaposi’s sarcoma',
    table: { model: table(COMPLAINTS, 1, [2, 1.15]) } }),
  res('tbl-notifiable', 'table', 'table', { position: 'here' }, {
    caption: 'Summary — cases of specified notifiable diseases, United States',
    note: 'Cumulative totals include revised and delayed reports through previous weeks.',
    table: { model: notifiable, styleId: 'weekly' } }),
];
```

Cada tabla es una ranura de contenido con texto separado por tabuladores, el formato que copia una hoja de cálculo, y `parseTSV` la convierte en un modelo. Una columna de cifras se alinea a la derecha con su cabecera centrada; cuatro llamadas a `mergeCells` forman la cabecera de dos filas del resumen de enfermedades de declaración obligatoria. El tipo tabla reinicia su contador en cada H1 (`resetOn: 'h1'`), de modo que cada informe tiene su Tabla 1, como en 1981.

### 4 · Un solo azul, enlazado en todas partes

```js
// script.js, líneas 15–19
const palette = { ink: '#1c1f24', accent: '#1f3f74', tint: '#e6eaf1', rule: '#a7b1c2',
  muted: '#566070', paper: '#ffffff' };
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = Object.entries({ ...palette, 'main-color': palette.accent })
  .map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } }));
```

La banda, las etiquetas, los folios, las cabeceras de tabla y el gráfico nombran la misma entrada de la paleta: quien cambie `accent` por el color de su boletín recolorea las seis páginas de una vez.

## La receta completa

Un solo archivo, compuesto a partir de la carpeta de la receta con el texto de ejemplo y el kit común del Recetario ya incluidos; construye su propia página. Para ejecutarlo, ponlo en un `<script type="module">` de una página vacía o pégalo en el panel JS de un pen nuevo de CodePen (como módulo). Importa postext desde esm.sh, así que no hay nada que instalar ni compilar.

- Carpeta de la receta: https://github.com/drnachio/postext/tree/main/cookbook/outbreak-report-bulletin

### script.js

```js
// ═══ Postext Cookbook · Nº 143 · A weekly bulletin report: the first AIDS reports ═══
// https://postext.dev/en/cookbook/outbreak-report-bulletin
// Code: MIT · Text: CDC, MMWR 1981;30:250–252 and 305–308 (public domain) · Chart: original
// Fonts: IBM Plex Serif, Libre Franklin, Plex Sans Condensed (OFL) · Needs postext ≥ 1.19.0
import { buildDocument, renderPageToCanvas, clearMeasurementCache, registerCitationEngine,
  registerResourceImage, defaultResourceTypes, parseTSV, mergeCells } from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';
import { createCiteprocEngine, STYLES, LOCALES } from 'https://esm.sh/postext-citeproc';

const LANG = 'en'; // @lang: the language of the sample document ('en' | 'es')
const RECIPE = 'outbreak-report-bulletin';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: a federal blue on office white, every colour linked by id
const palette = { ink: '#1c1f24', accent: '#1f3f74', tint: '#e6eaf1', rule: '#a7b1c2',
  muted: '#566070', paper: '#ffffff' };
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = Object.entries({ ...palette, 'main-color': palette.accent })
  .map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } }));
// #endregion
const [TEXT, DISPLAY, LABEL] = ['IBM Plex Serif', 'Libre Franklin', 'IBM Plex Sans Condensed'];
const [TRIM_W, TRIM_H, TOP, BOTTOM, SIDE, GUTTER] = [215.9, 279.4, 22, 20, 19, 6.35];
const MEASURE = TRIM_W - 2 * SIDE; // US Letter, two columns of 86 mm
const LEAD = 13; // pt: 9.5 pt Plex Serif, as a bulletin sets two columns of Letter

const text = (id, content, family, size, extra) => ({ kind: 'text', id, content, align: 'left',
  fontFamily: family, fontSize: pt(size), color: col('ink'), overflow: 'wrap', ...extra });
const at = (to, edge, x, y, width) => ({ anchor: { to, edge }, offset: { x: mm(x), y: mm(y) },
  ...(width && { size: { width: mm(width), height: 'auto' } }) });
const caps = (size, extra) => ({ fontFamily: LABEL, fontSize: pt(size), fontWeight: 600,
  letterSpacing: pt(size * 0.18), textTransform: 'uppercase', ...extra });
const rule = (id, y, thickness) => ({ kind: 'rule', id, color: col('accent'),
  thickness: pt(thickness), placement: at('container', 'top-left', 0, y, MEASURE) });

// #region masthead: the bulletin's band, issue strip and contents over the first report
// Kicker and dateline are attributes of each report's H1; {titleText} read with inlineMarks
// keeps the italic genus. The July report opens where June ends, under a double rule.
const reportHead = (y, size) => [
  text('kicker', '{attr.kicker}', LABEL, 8.5, { ...caps(8.5), color: col('accent'),
    placement: at('container', 'top-left', 0, y, MEASURE) }),
  text('title', '{titleText}', DISPLAY, size, { fontWeight: 800, lineHeight: 1.08,
    inlineMarks: true, placement: at('#kicker', 'below', 0, 2.2, MEASURE) }),
  text('dateline', '{attr.dateline}', LABEL, 9, { fontStyle: 'italic', color: col('muted'),
    placement: at('#title', 'below', 0, 2, MEASURE) }),
];
const masthead = { enabled: true, minHeight: mm(72), slot: { elements: [
  { kind: 'box', id: 'band', style: { backgroundColor: col('accent') }, placement: {
    anchor: { to: 'page', edge: 'top-left' }, size: { width: 'fill', height: mm(49) } } },
  text('series', 'A reprint series in public health history', LABEL, 8,
    { ...caps(8), color: col('paper'), placement: at('page', 'top-left', SIDE, 11, 120) }),
  text('number', 'Reprint No. 1', LABEL, 8, { ...caps(8), color: col('paper'), align: 'right',
    placement: at('page', 'top-right', -SIDE, 11, 50) }),
  text('wordmark', 'Surveillance Notes', DISPLAY, 50, { fontWeight: 800, color: col('paper'),
    letterSpacing: pt(-1), lineHeight: 1, placement: at('page', 'top-left', SIDE - 1, 18) }),
  text('issue', 'Two reports of June 5 and July 3, 1981: the first published accounts of '
    + 'what became known as AIDS, as the Centers for Disease Control printed them', TEXT, 9.5,
  { fontStyle: 'italic', lineHeight: 1.3, placement: at('container', 'top-left', 0, 29, 92) }),
  text('contents', '**1** *Pneumocystis* Pneumonia — Los Angeles\n**3** Kaposi’s Sarcoma '
    + 'and *Pneumocystis* Pneumonia Among Homosexual Men — New York City and California\n'
    + '**6** Notifiable diseases, week ending June 27, 1981',
  LABEL, 8, { inlineMarks: true, lineHeight: 1.3, boldColor: col('accent'),
    placement: at('container', 'top-right', 0, 29, 76), align: 'left' }),
  rule('rule-a', 46.5, 2), rule('rule-b', 48, 0.5), ...reportHead(52, 23),
] } };
const opener = { enabled: true, minHeight: mm(26), slot: { elements: [rule('rule-a', 0, 2),
  rule('rule-b', 1.5, 0.5), ...reportHead(5, 18)] } };
// #endregion

const head = (id, content, parity, edge, x, extra) => text(id, content, LABEL, 8, {
  parity, pages: 'body', fontWeight: 500, letterSpacing: pt(0.3), color: col('muted'),
  overflow: 'clip', placement: at('page', edge, x, 12, 150), ...extra });
const folio = { fontWeight: 700, color: col('accent') };
const header = { elements: [
  head('v-folio', '{pageNumber}', 'even', 'top-left', SIDE, folio),
  head('v-title', 'Surveillance Notes · Reprint No. 1', 'even', 'top-left', SIDE + 8),
  head('r-title', '{chapterTitleAtTop}', 'odd', 'top-right', -SIDE - 8, { align: 'right' }),
  head('r-folio', '{pageNumber}', 'odd', 'top-right', -SIDE, { ...folio, align: 'right' }),
] };
const footer = { elements: [head('drop-folio', '{pageNumber}', 'all', 'bottom', 0,
  { ...folio, align: 'center', pages: 'opener', placement: at('page', 'bottom', 0, -11, 20) })] };

// #region answer: case histories, "Reported by" and the Editorial Note as paragraph styles
// :::paragraphs{style="…"} wraps the blocks of each voice; **Patient 1:** is a run-in label.
const voice = (id, family, size, lead, extra) => ({ id, fontFamily: family, fontSize: pt(size),
  lineHeight: pt(lead), color: col('ink'), boldColor: col('ink'), ...extra });
const aside = { textAlign: 'left', firstLineIndent: pt(0), snapToGrid: false };
const paragraphStyles = [
  // Case histories and the Editorial Note: the body texture, bold labels in the accent.
  voice('case', TEXT, 9.5, LEAD, { boldColor: col('accent'), boldFontWeight: 600 }),
  voice('editorial', TEXT, 9.5, LEAD, { boldColor: col('accent'), boldFontWeight: 600 }),
  // "Reported by …": the authors' line, italic small type in the condensed sans, off the grid.
  voice('reported', LABEL, 7.8, 10.2, { ...aside, italic: true, color: col('muted'),
    hyphenation: false, marginTop: pt(4), marginBottom: pt(6) }),
  // A line the reprint adds, in the label face and the accent: never taken for 1981 text.
  voice('editor', LABEL, 8, 10.6, { ...aside, italic: true, color: col('accent'),
    marginTop: pt(3), marginBottom: pt(5) }),
  voice('colophon', LABEL, 7.4, 9.6, { ...aside, color: col('muted'), marginTop: pt(LEAD) }),
];
// MMWR cited (1) in citation order, and each report (its H1 is a chapter) counted from 1.
registerCitationEngine(createCiteprocEngine({ styles: STYLES, locales: LOCALES }));
const citations = { style: 'american-medical-association', marker: 'parentheses',
  numbering: 'chapter', bibliography: { scope: 'chapter', fontSize: em(0.86),
    lineHeight: pt(10.6), entrySpacing: pt(1.5), labelAlign: 'right' } };
// #endregion

const config = () => ({ // a factory: the engine caches resolved configs per object
  locale: 'en-us', colorPalette, citations, paragraphStyles, header, footer,
  resourceTypes: defaultResourceTypes(LANG).map((type) => ({ ...type, shortLabel: type.name,
    resetOn: 'h1', numberingTemplate: '{n}', // each report counts its tables from 1
    ...(type.id === 'table' && { captionStyle: { position: 'above' } }) })),
  headingStyles: [
    { id: 'lead', span: 'page', advancedDesign: masthead },
    { id: 'report', span: 'page', spanBreak: false, advancedDesign: opener },
    { id: 'back', span: 'page', breakBefore: { enabled: true, parity: 'any' }, // one column
      layout: { layoutType: 'single' }, advancedDesign: opener },
  ],
  page: { sizePreset: 'custom', width: mm(TRIM_W), height: mm(TRIM_H), dpi: 150, margins: {
    top: mm(TOP), bottom: mm(BOTTOM), left: mm(SIDE), right: mm(SIDE), mirror: true } },
  layout: { layoutType: 'double', gutterWidth: mm(GUTTER) },
  bodyText: { fontFamily: TEXT, fontSize: pt(9.5), lineHeight: pt(LEAD), color: col('ink'),
    boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
    referenceBold: false, firstLineIndent: mm(4), indentAfterHeading: false,
    maxJustifyTracking: 10 }, // up to 1 % tracking for a line spaces alone would leave loose
  headings: { fontFamily: LABEL, color: col('accent'), fontWeight: 600, levels: [
    { level: 1, breakBefore: { enabled: false } }, // gotcha: headings-drop-h1-break
    { level: 3, ...caps(8), lineHeight: pt(LEAD), marginTop: pt(LEAD / 2), marginBottom: pt(0) },
  ] },
  footnotes: { fontSize: pt(7.6), lineHeight: pt(10), color: col('muted'),
    numberFormat: 'symbols' }, // the 1981 asterisk: *, †, ‡ …
  tableStyle: { rules: 'horizontal', borderColor: col('rule'), borderWidth: pt(0.5),
    headerBackground: col('accent'), headerColor: col('paper'), headerBold: true,
    headerFontFamily: LABEL, headerFontSize: pt(7.8), bodyFontFamily: LABEL,
    bodyFontSize: pt(7.8), bodyColor: col('ink'), cellPadding: mm(1.3) },
  tableStyles: [{ id: 'weekly', bodyFontSize: pt(7.4), headerFontSize: pt(7.2), // set solid
    cellPadding: mm(0.75) }],
  captionStyle: { fontFamily: LABEL, fontSize: pt(8.2), color: col('ink'), labelBold: true,
    labelColor: col('accent'), gap: mm(2), note: { fontSize: pt(7), color: col('muted') } },
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
const june = String.raw`---
title: "Pneumocystis Pneumonia — Los Angeles"
author: "Centers for Disease Control"
---

# *Pneumocystis* Pneumonia — Los Angeles {style="lead" kicker="Epidemiologic Notes and Reports" dateline="June 5, 1981 · Vol. 30, No. 21 · pp. 250–252"}

In the period October 1980-May 1981, 5 young men, all active homosexuals, were treated for biopsy-confirmed *Pneumocystis carinii* pneumonia at 3 different hospitals in Los Angeles, California. Two of the patients died. All 5 patients had laboratory-confirmed previous or current cytomegalovirus (CMV) infection and candidal mucosal infection. Case reports of these patients follow.

:::paragraphs{style="editor"}
Figure 1 and Table 1 were added for this reprint. They restate the dates and findings of the five case reports below and add nothing to them (:ref{id="fig-timeline"}; :ref{id="tbl-cases"}).
:::

:::paragraphs{style="case"}
**Patient 1:** A previously healthy 33-year-old man developed *P. carinii* pneumonia and oral mucosal candidiasis in March 1981 after a 2-month history of fever associated with elevated liver enzymes, leukopenia, and CMV viruria. The serum complement-fixation CMV titer in October 1980 was 256; in May 1981 it was 32.[^paired] The patient’s condition deteriorated despite courses of treatment with trimethoprim-sulfamethoxazole (TMP/SMX), pentamidine, and acyclovir. He died May 3, and postmortem examination showed residual *P. carinii* and CMV pneumonia, but no evidence of neoplasia.

**Patient 2:** A previously healthy 30-year-old man developed *P. carinii* pneumonia in April 1981 after a 5-month history of fever each day and of elevated liver-function tests, CMV viruria, and documented seroconversion to CMV, i.e., an acute-phase titer of 16 and a convalescent-phase titer of 28[^paired] in anticomplement immunofluorescence tests. Other features of his illness included leukopenia and mucosal candidiasis. His pneumonia responded to a course of intravenous TMP/SMX, but, as of the latest reports, he continues to have a fever each day.

**Patient 3:** A 30-year-old man was well until January 1981 when he developed esophageal and oral candidiasis that responded to Amphotericin B treatment. He was hospitalized in February 1981 for *P. carinii* pneumonia that responded to oral TMP/SMX. His esophageal candidiasis recurred after the pneumonia was diagnosed, and he was again given Amphotericin B. The CMV complement-fixation titer in March 1981 was 8. Material from an esophageal biopsy was positive for CMV.

**Patient 4:** A 29-year-old man developed *P. carinii* pneumonia in February 1981. He had had Hodgkins disease 3 years earlier, but had been successfully treated with radiation therapy alone. He did not improve after being given intravenous TMP/SMX and corticosteroids and died in March. Postmortem examination showed no evidence of Hodgkins disease, but *P. carinii* and CMV were found in lung tissue.

**Patient 5:** A previously healthy 36-year-old man with a clinically diagnosed CMV infection in September 1980 was seen in April 1981 because of a 4-month history of fever, dyspnea, and cough. On admission he was found to have *P. carinii* pneumonia, oral candidiasis, and CMV retinitis. A complement-fixation CMV titer in April 1981 was 128. The patient has been treated with 2 short courses of TMP/SMX that have been limited because of a sulfa-induced neutropenia. He is being treated for candidiasis with topical nystatin.
:::

[^paired]: Paired specimens not run in parallel.

The diagnosis of *Pneumocystis* pneumonia was confirmed for all 5 patients antemortem by closed or open lung biopsy. The patients did not know each other and had no known common contacts or knowledge of sexual partners who had had similar illnesses. The 5 did not have comparable histories of sexually transmitted disease. Four had serologic evidence of past hepatitis B infection but had no evidence of current hepatitis B surface antigen. Two of the 5 reported having frequent homosexual contacts with various partners. All 5 reported using inhalant drugs, and 1 reported parenteral drug abuse. Three patients had profoundly depressed numbers of thymus-dependent lymphocyte cells and profoundly depressed *in vitro* proliferative responses to mitogens and antigens. Lymphocyte studies were not performed on the other 2 patients.

:::paragraphs{style="reported"}
Reported by MS Gottlieb, MD, HM Schanker, MD, PT Fan, MD, A Saxon, MD, JD Weisman, DO, Div of Clinical Immunology-Allergy, Dept of Medicine, UCLA School of Medicine; I Pozalski, MD, Cedars-Mt. Sinai Hospital, Los Angeles; Field Services Div, Epidemiology Program Office, CDC.
:::

:::paragraphs{style="editorial"}
**Editorial Note:** *Pneumocystis* pneumonia in the United States is almost exclusively limited to severely immunosuppressed patients [@walzer1974]. The occurrence of pneumocystosis in these 5 previously healthy individuals without a clinically apparent underlying immunodeficiency is unusual. The fact that these patients were all homosexuals suggests an association between some aspect of a homosexual lifestyle or disease acquired through sexual contact and *Pneumocystis* pneumonia in this population. All 5 patients described in this report had laboratory-confirmed CMV disease or virus shedding within 5 months of the diagnosis of *Pneumocystis* pneumonia. CMV infection has been shown to induce transient abnormalities of *in vitro* cellular-immune function in otherwise healthy human hosts [@rinaldo1977; @rinaldo1980]. Although all 3 patients tested had abnormal cellular-immune function, no definitive conclusion regarding the role of CMV infection in these 5 cases can be reached because of the lack of published data on cellular-immune function in healthy homosexual males with and without CMV antibody. In 1 report, 7 (3.6%) of 194 patients with pneumocystosis also had CMV infection; 40 (21%) of the same group had at least 1 other major concurrent infection [@walzer1974]. A high prevalence of CMV infections among homosexual males was recently reported: 179 (94%) of 190 males reported to be exclusively homosexual had serum antibody to CMV, and 14 (7.4%) had CMV viruria; rates for 101 controls of similar age who were reported to be exclusively heterosexual were 54% for seropositivity and zero for viruria [@drew1981]. In another study of 64 males, 4 (6.3%) had positive tests for CMV in semen, but none had CMV recovered from urine. Two of the 4 reported recent homosexual contacts. These findings suggest not only that virus shedding may be more readily detected in seminal fluid than in urine, but also that seminal fluid may be an important vehicle of CMV transmission [@lang1975].

All the above observations suggest the possibility of a cellular-immune dysfunction related to a common exposure that predisposes individuals to opportunistic infections such as pneumocystosis and candidiasis. Although the role of CMV infection in the pathogenesis of pneumocystosis remains unknown, the possibility of *P. carinii* infection must be carefully considered in a differential diagnosis for previously healthy homosexual males with dyspnea and pneumonia.
:::

### References

:::bibliography{title=""}

:::references{format=csl-json}
[
 {
  "id": "walzer1974",
  "type": "article-journal",
  "author": [
   {
    "family": "Walzer",
    "given": "P. D."
   },
   {
    "family": "Perl",
    "given": "D. P."
   },
   {
    "family": "Krogstad",
    "given": "D. J."
   },
   {
    "family": "Rawson",
    "given": "P. G."
   },
   {
    "family": "Schultz",
    "given": "M. G."
   }
  ],
  "title": "<i>Pneumocystis carinii</i> pneumonia in the United States. Epidemiologic, diagnostic, and clinical features",
  "container-title": "Ann Intern Med",
  "issued": {
   "date-parts": [
    [
     1974
    ]
   ]
  },
  "volume": "80",
  "page": "83-93"
 },
 {
  "id": "cdc1981",
  "type": "article-journal",
  "author": [
   {
    "literal": "Centers for Disease Control"
   }
  ],
  "title": "<i>Pneumocystis</i> pneumonia—Los Angeles",
  "container-title": "MMWR",
  "issued": {
   "date-parts": [
    [
     1981
    ]
   ]
  },
  "volume": "30",
  "page": "250"
 }
]
:::

:::references{format=bibtex}
@article{rinaldo1977,
  author = {Rinaldo, Jr., C. R. and Black, P. H. and Hirsch, M. S.},
  title = {Interaction of cytomegalovirus with leukocytes from patients with mononucleosis due to cytomegalovirus},
  journal = {J Infect Dis}, year = 1977, volume = 136, pages = {667--678}}
@article{rinaldo1980,
  author = {Rinaldo, Jr., C. R. and Carney, W. P. and Richter, B. S. and Black, P. H. and Hirsch, M. S.},
  title = {Mechanisms of immunosuppression in cytomegaloviral mononucleosis},
  journal = {J Infect Dis}, year = 1980, volume = 141, pages = {488--495}}
@article{drew1981,
  author = {Drew, W. L. and Mintz, L. and Miner, R. C. and Sands, M. and Ketterer, B.},
  title = {Prevalence of cytomegalovirus infection in homosexual men},
  journal = {J Infect Dis}, year = 1981, volume = 143, pages = {188--192}}
@article{lang1975,
  author = {Lang, D. J. and Kummer, J. F.},
  title = {Cytomegalovirus in semen: observations in selected populations},
  journal = {J Infect Dis}, year = 1975, volume = 132, pages = {472--473}}
:::
`; // MMWR 1981;30(21):250–252
const july = String.raw`# Kaposi’s Sarcoma and *Pneumocystis* Pneumonia Among Homosexual Men — New York City and California {style="report" kicker="Epidemiologic Notes and Reports" dateline="July 3, 1981 · Vol. 30, No. 25 · pp. 305–308"}

During the past 30 months, Kaposi’s sarcoma (KS), an uncommonly reported malignancy in the United States, has been diagnosed in 26 homosexual men (20 in New York City [NYC]; 6 in California). The 26 patients range in age from 26-51 years (mean 39 years). Eight of these patients died (7 in NYC, 1 in California)—all 8 within 24 months after KS was diagnosed. The diagnoses in all 26 cases were based on histopathological examination of skin lesions, lymph nodes, or tumor in other organs. Twenty-five of the 26 patients were white, 1 was black. Presenting complaints from 20 of these patients are shown in :ref{id="tbl-complaints"}.

Skin or mucous membrane lesions, often dark blue to violaceous plaques or nodules, were present in most of the patients on their initial physician visit. However, these lesions were not always present and often were considered benign by the patient and his physician.

A review of the New York University Coordinated Cancer Registry for KS in men under age 50 revealed no cases from 1970-1979 at Bellevue Hospital and 3 cases in this age group at the New York University Hospital from 1961-1979.

Seven KS patients had serious infections diagnosed after their initial physician visit. Six patients had pneumonia (4 biopsy confirmed as due to *Pneumocystis carinii* [PC]), and one had necrotizing toxoplasmosis of the central nervous system. One of the patients with *Pneumocystis* pneumonia also experienced severe, recurrent, herpes simplex infection; extensive candidiasis; and cryptococcal meningitis. The results of tests for cytomegalovirus (CMV) infection were available for 12 patients. All 12 had serological evidence of past or present CMV infection. In 3 patients for whom culture results were available, CMV was isolated from blood, urine and/or lung of all 3. Past infections with amebiasis and hepatitis were commonly reported.

Since the previous report of 5 cases of *Pneumocystis* pneumonia in homosexual men from Los Angeles [@cdc1981], 10 additional cases (4 in Los Angeles and 6 in the San Francisco Bay area) of biopsy-confirmed PC pneumonia have been identified in homosexual men in the state. Two of the 10 patients also have KS. This brings the total number of *Pneumocystis* cases among homosexual men in California to 15 since September 1979. Patients range in age from 25 to 46 years.

:::paragraphs{style="reported"}
Reported by A Friedman-Kien, MD, L Laubenstein, MD, M Marmor, PhD, K Hymes, MD, J Green, MD, A Ragaz, MD, J Gottleib, MD, F Muggia, MD, R Demopoulos, MD, M Weintraub, MD, D Williams, MD, New York University Medical Center, NYC; R Oliveri, MD, J Marmer, MD, NYC; J Wallace, MD, I Halperin, MD, JF Gillooley, MD, St. Vincent’s Hospital and Medical Center, NYC; N Prose, MD, Downstate Medical Center, NYC; E Klein, MD, Roosevelt Hospital, NYC; J Vogel, MD, B Safai, MD, P Myskowski, MD, C Urmacher, MD, B Koziner, MD, L Nisce, MD, M Kris, MD, D Armstrong, MD, J Gold, MD, Sloan-Kettering Memorial Institute, NYC; D Mildran, MD, Beth Israel Hospital, NYC; M Tapper, MD, Lenox Hill Hospital, NYC; JB Weissman, MD, Columbia Presbyterian Hospital, NYC; R Rothenberg, MD, State Epidemiologist, New York State Dept of Health; SM Friedman, MD, Acting Director, Bur of Preventable Diseases, New York City Dept of Health; FP Siegal, MD, Dept of Medicine, Mount Sinai School of Medicine, City College of New York, NYC; J Groundwater, MD, J Gilmore, MD, San Francisco; D Coleman, MD, S Follansbee, MD, J Gullett, MD, SJ Stegman, MD, University of California at San Francisco; C Wofsy, MD, San Francisco General Hospital, San Francisco; D Bush, MD, Franklin Hospital, San Francisco; L Drew, MD, PhD, Mt. Zion Hospital, E Braff, MD, S Dritz, MD, City/County Health Dept, San Francisco; M Klein, MD, Valley Memorial Hospital, Salinas; JK Preiksaitis, MD, Stanford University Medical Center, Palo Alto; MS Gottlieb, MD, University of California at Los Angeles; R Jung, MD, University of Southern California Medical Center, Los Angeles; J Chin, MD, State Epidemiologist, California Dept of Health Services; J Goedert, MD, National Cancer Institute, National Institute of Health; Parasitic Diseases Div, Center for Infectious Diseases, VD Control Division, Center for Prevention Services, Chronic Diseases Div, Center for Environmental Health, CDC.
:::

:::paragraphs{style="editorial"}
**Editorial Note:** KS is a malignant neoplasm manifested primarily by multiple vascular nodules in the skin and other organs. The disease is multifocal, with a course ranging from indolent, with only skin manifestations, to fulminant, with extensive visceral involvement [@safai1981].

Accurate incidence and mortality rates for KS are not available for the United States, but the annual incidence has been estimated between 0.02-0.06 per 100,000; it affects primarily elderly males [@oettle1962; @rothman1962]. In a series of 92 patients treated between 1949 and 1975 at the Memorial Sloan-Kettering Cancer Institute in NYC, 76% were male, and the mean age was 63 years (range 23-90 years) at the time of diagnosis [@safai1980].

The disease in elderly men is usually manifested by skin lesions and a chronic clinical course (mean survival time is 8-13 years) [@safai1981]. Two exceptions to this epidemiologic pattern have been noted previously. The first occurs in an endemic belt across equatorial Africa, where KS commonly affects children and young adults and accounts for up to 9% of all cancers [@oettle1962]. Secondly, the disease appears to have a higher incidence in renal transplant recipients [@harwood1979; @stribling1978; @myers1974; @penn1979] and in others receiving immunosuppressive therapy [@gange1978; @klepp1978; @hoshaw1980].

The occurrence of this number of KS cases during a 30-month period among young, homosexual men is considered highly unusual. No previous association between KS and sexual preference has been reported. The fulminant clinical course reported in many of these patients also differs from that classically described for elderly persons.

The histopathologic diagnosis of KS may be difficult for 2 reasons. Changes in some lesions may be interpreted as nonspecific, and other cutaneous and soft tissue sarcomas, such as angiosarcoma of the skin, may be confused with KS [@girard1970; @rosai1976].

That 10 new cases of *Pneumocystis* pneumonia have been identified in homosexual men suggests that the 5 previously reported cases were not an isolated phenomenon [@cdc1981]. In addition, CDC has a report of 4 homosexual men in NYC who developed severe, progressive, perianal herpes simplex infections and had evidence of cellular immunodeficiencies. Three died, 1 with systemic CMV infection. The fourth patient is currently undergoing therapy. It is not clear if or how the clustering of KS, pneumocystis, and other serious diseases in homosexual men is related. What is known is that the patients with *Pneumocystis* pneumonia described in the previous report showed evidence of impaired cellular immunity and previous or current CMV infection [@cdc1981]. Furthermore, serologic evidence of past CMV infection and active shedding of CMV have been shown to be much more common among homosexual men than heterosexual men attending a sexually transmitted disease clinic [@drew1981]. A specific serologic association with CMV infection has been demonstrated among American and European patients with KS [@giraldo1975; @giraldo1978] and herpes-type virus particles have been demonstrated in tissue culture cell lines from African cases of KS [@giraldo1972]. It has been hypothesized that activation of oncogenic virus during periods of immunosuppression may result in the development of KS [@kapadia1977]. Although immunosuppression often results in CMV infection, it is not yet clear whether CMV infection precedes or follows the above-mentioned disorders.

Although it is not certain that the increase in KS and PC pneumonia is restricted to homosexual men, the vast majority of recent cases have been reported from this group. Physicians should be alert for Kaposi’s sarcoma, PC pneumonia, and other opportunistic infections associated with immunosuppression in homosexual men.
:::

### References

:::bibliography{title=""}

:::references{format=bibtex}
@article{safai1981,
  author = {Safai, B. and Good, R. A.},
  title = {Kaposi's sarcoma: a review and recent developments},
  journal = {CA}, year = 1981, volume = 31, pages = {1--12}}
@article{oettle1962,
  author = {Oettle, A. G.},
  title = {Geographical and racial differences in the frequency of Kaposi's sarcoma as evidence of environmental or genetic causes},
  journal = {Acta Un Int Cancr}, year = 1962, volume = 18, pages = {330--363}}
@article{rothman1962,
  author = {Rothman, S.},
  title = {Remarks on sex, age, and racial distribution of Kaposi's sarcoma and on possible pathogenetic factors},
  journal = {Acta Un Int Cancr}, year = 1962, volume = 18, pages = {326--329}}
@article{safai1980,
  author = {Safai, B. and Mik\'{e}, V. and Giraldo, G. and Beth, E. and Good, R. A.},
  title = {Association of Kaposi's sarcoma with second primary malignancies: possible etiopathogenic implications},
  journal = {Cancer}, year = 1980, volume = 45, pages = {1472--1479}}
@article{harwood1979,
  author = {Harwood, A. R. and Osoba, D. and Hofstader, S. L. and others},
  title = {Kaposi's sarcoma in recipients of renal transplants},
  journal = {Am J Med}, year = 1979, volume = 67, pages = {759--765}}
@article{stribling1978,
  author = {Stribling, J. and Weitzner, S. and Smith, G. V.},
  title = {Kaposi sarcoma in renal allograft recipients},
  journal = {Cancer}, year = 1978, volume = 42, pages = {442--446}}
@article{myers1974,
  author = {Myers, B. D. and Kessler, E. and Levi, J. and Pick, A. and Rosenfeld, J. B. and Tikvah, P.},
  title = {Kaposi sarcoma in kidney transplant recipients},
  journal = {Arch Intern Med}, year = 1974, volume = 133, pages = {307--311}}
@article{penn1979,
  author = {Penn, I.},
  title = {Kaposi's sarcoma in organ transplant recipients: report of 20 cases},
  journal = {Transplantation}, year = 1979, volume = 27, pages = {8--11}}
@article{gange1978,
  author = {Gange, R. W. and Jones, E. W.},
  title = {Kaposi's sarcoma and immunosuppressive therapy: an appraisal},
  journal = {Clin Exp Dermatol}, year = 1978, volume = 3, pages = {135--146}}
@article{klepp1978,
  author = {Klepp, O. and Dahl, O. and Stenwig, J. T.},
  title = {Association of Kaposi's sarcoma and prior immunosuppressive therapy: a 5-year material of Kaposi's sarcoma in {Norway}},
  journal = {Cancer}, year = 1978, volume = 42, pages = {2626--2630}}
@article{hoshaw1980,
  author = {Hoshaw, R. A. and Schwartz, R. A.},
  title = {Kaposi's sarcoma after immunosuppressive therapy with prednisone},
  journal = {Arch Dermatol}, year = 1980, volume = 116, pages = {1280--1282}}
@article{girard1970,
  author = {Girard, C. and Johnson, W. C. and Graham, J. H.},
  title = {Cutaneous angiosarcoma},
  journal = {Cancer}, year = 1970, volume = 26, pages = {868--883}}
@article{rosai1976,
  author = {Rosai, J. and Sumner, H. W. and Kostianovsky, M. and Perez-Mesa, C.},
  title = {Angiosarcoma of the skin. {A} clinicopathologic and fine structural study},
  journal = {Hum Pathol}, year = 1976, volume = 7, pages = {83--109}}
@article{drew1981,
  author = {Drew, W. L. and Mintz, L. and Miner, R. C. and Sands, M. and Ketterer, B.},
  title = {Prevalence of cytomegalovirus infection in homosexual men},
  journal = {J Infect Dis}, year = 1981, volume = 143, pages = {188--192}}
@article{giraldo1975,
  author = {Giraldo, G. and Beth, E. and Kourilsky, F. M. and others},
  title = {Antibody patterns to herpesvirus in Kaposi's sarcoma: serologic association of {European} Kaposi's sarcoma with cytomegalovirus},
  journal = {Int J Cancer}, year = 1975, volume = 15, pages = {839--848}}
@article{giraldo1978,
  author = {Giraldo, G. and Beth, E. and Henle, W. and others},
  title = {Antibody patterns to herpesvirus in Kaposi's sarcoma. {II}. {Serological} association of {American} Kaposi's sarcoma with cytomegalovirus},
  journal = {Int J Cancer}, year = 1978, volume = 22, pages = {126--131}}
@article{giraldo1972,
  author = {Giraldo, G. and Beth, E. and Haguenau, F.},
  title = {Herpes-type virus particles in tissue culture of Kaposi's sarcoma from different geographic regions},
  journal = {J Natl Cancer Inst}, year = 1972, volume = 49, pages = {1509--1526}}
@article{kapadia1977,
  author = {Kapadia, S. B. and Krause, J. R.},
  title = {Kaposi's sarcoma after long-term alkylating agent therapy for multiple myeloma},
  journal = {South Med J}, year = 1977, volume = 70, pages = {1011--1013}}
:::

# Notifiable Diseases — United States {style="back" kicker="From the issue of July 3, 1981" dateline="25th week ending June 27, 1981 · Vol. 30, No. 25 · p. 308"}

:::paragraphs{style="editor"}
Each weekly issue carried the counts of notifiable diseases that the states reported to CDC. The summary table of the July 3 issue is reprinted as it was printed (:ref{id="tbl-notifiable"}).
:::

::resource{id="tbl-notifiable"}

:::paragraphs{style="colophon"}
Surveillance Notes, Reprint No. 1. Re-set from the printed issues of June 5 and July 3, 1981 (Morbidity and Mortality Weekly Report, vol. 30, nos. 21 and 25, Centers for Disease Control, Atlanta), which are in the public domain. The text and the tables keep the wording and figures of 1981, including the terminology of the time. Figure 1 and the case table on page 2 were added by the editors. Set in IBM Plex Serif, Libre Franklin and IBM Plex Sans Condensed (SIL Open Font License).
:::
`; // MMWR 1981;30(25):305–308, and its notifiable diseases
const CASES = String.raw`Patient	Age	Pneumonia	CMV evidence	Other findings	Course
1	33	Mar 1981	CF titer 256 (Oct 1980), 32 (May 1981); viruria	Oral candidiasis; leukopenia; raised liver enzymes	Died May 3
2	30	Apr 1981	Seroconversion (16 to 28); viruria	Mucosal candidiasis; leukopenia	Pneumonia responded; daily fever
3	30	Feb 1981	CF titer 8 (Mar 1981); esophageal biopsy positive	Esophageal and oral candidiasis	Pneumonia responded
4	29	Feb 1981	CMV in lung tissue at postmortem	Hodgkins disease 3 years earlier, treated	Died in March
5	36	Apr 1981	Clinical CMV infection (Sep 1980); retinitis; CF titer 128	Oral candidiasis; sulfa-induced neutropenia	Under treatment
`; // TSV: the five case reports, compiled by the editors
const COMPLAINTS = String.raw`Presenting complaint	Number (percentage) of patients
Skin lesion(s) only	10 (50%)
Skin lesions plus lymphadenopathy	4 (20%)
Oral mucosal lesion only	1 (5%)
Inguinal adenopathy plus perirectal abscess	1 (5%)
Weight loss and fever	2 (10%)
Weight loss, fever, and pneumonia (one due to *Pneumocystis carinii*)	2 (10%)
`; // TSV: Table 1 of the July 3 report
const NOTIFIABLE = String.raw`Disease	25th week ending		Median 1976–1980	Cumulative, first 25 weeks		
	June 27, 1981	June 21, 1980		June 27, 1981	June 21, 1980	Median 1976–1980
Aseptic meningitis	133	107	107	1,859	1,619	1,126
Brucellosis	3	5	6	73	82	82
Chickenpox	3,801	4,577	4,353	157,690	144,465	144,465
Diphtheria	–	–	–	3	2	35
Encephalitis: Primary (arthropod-borne & unspec.)	20	8	18	360	282	287
Encephalitis: Post-infectious	2	4	4	44	98	102
Hepatitis, Viral: Type B	404	364	317	9,425	7,977	7,262
Hepatitis, Viral: Type A	430	579	595	11,981	12,945	14,023
Hepatitis, Viral: Type unspecified	185	214	178	5,367	5,296	4,253
Malaria	43	58	19	634	853	265
Measles (rubeola)	85	463	924	2,292	11,224	20,679
Meningococcal infections: Total	48	50	40	2,021	1,533	1,357
Meningococcal infections: Civilian	46	49	39	2,009	1,522	1,299
Meningococcal infections: Military	2	1	1	12	11	21
Mumps	54	158	422	2,665	6,382	11,698
Pertussis	23	26	26	482	524	524
Rubella (German measles)	30	82	362	1,443	2,756	9,753
Tetanus	4	4	1	27	29	29
Tuberculosis	505	613	689	12,863	12,672	13,778
Tularemia	8	7	4	87	70	62
Typhoid fever	7	10	8	224	171	171
Typhus fever, tick-borne (Rky. Mt. spotted)	57	39	48	436	318	299
Venereal diseases:						
Gonorrhea: Civilian	18,174	20,192	20,192	463,413	452,245	452,245
Gonorrhea: Military	579	368	495	13,731	12,756	12,844
Syphilis, primary & secondary: Civilian	610	488	452	14,248	12,387	11,575
Syphilis, primary & secondary: Military	6	5	5	178	151	146
Rabies in animals	162	136	73	3,479	3,250	1,509
`; // TSV: Table I of the July 3 issue
const markdown = `${june}\n\n${july}`; // one document: the July report runs on

// #region resources: three tables read from TSV, and the chart built from the case reports
const NUMBER = /^[\d,.()% –]*$/; // a column of counts aligns right, its heading centred
const table = (tsv, headerRows, columnWidths) => {
  const model = parseTSV(tsv, { headerRows });
  const numeric = model.rows[0].map((_, c) => model.rows.slice(headerRows)
    .every((row) => NUMBER.test(row[c].content)));
  return { ...model, columnWidths, rows: model.rows.map((cells, r) => cells.map((cell, c) =>
    (numeric[c] ? { ...cell, align: r < headerRows ? 'center' : 'right' } : cell))) };
};
// Two header rows, as the weekly printed them: "25th week ending" spans two columns.
const notifiable = [[0, 0, 1, 0], [0, 1, 0, 2], [0, 3, 1, 3], [0, 4, 0, 6]]
  .reduce((m, [r1, c1, r2, c2]) => mergeCells(m, { start: { row: r1, col: c1 },
    end: { row: r2, col: c2 } }), table(NOTIFIABLE, 2, [3.6, 1, 1, 1, 1.1, 1.1, 1.1]));
const added = 'Compiled for this reprint from the case reports; not part of the 1981 report.';
const res = (id, typeId, kind, placement, more) => ({ id, typeId, kind, placement,
  createdAt: 0, updatedAt: 0, ...more });
const resources = [
  res('fig-timeline', 'figure', 'svg', { position: 'bottom', span: 'page' }, {
    svg: { fileId: 'timeline.svg', width: 1780, height: 490 },
    caption: 'The five patients, September 1980 to May 1981, by month. The illness before '
      + 'the pneumonia is counted back from the month of diagnosis, as each report gives it.',
    note: `Drawn by the editors. ${added}`,
    altText: 'A timeline of five rows, one per patient: Pneumocystis pneumonia diagnosed '
      + 'between February and April 1981, two deaths in March and May.' }),
  res('tbl-cases', 'table', 'table', { position: 'top', span: 'page' }, {
    caption: 'The five case reports at a glance.', note: added,
    table: { model: table(CASES, 1, [0.7, 0.45, 1, 2.2, 2.4, 1.5]) } }),
  res('tbl-complaints', 'table', 'table', { position: 'bottom' }, {
    caption: 'Presenting complaints in 20 patients with Kaposi’s sarcoma',
    table: { model: table(COMPLAINTS, 1, [2, 1.15]) } }),
  res('tbl-notifiable', 'table', 'table', { position: 'here' }, {
    caption: 'Summary — cases of specified notifiable diseases, United States',
    note: 'Cumulative totals include revised and delayed reports through previous weeks.',
    table: { model: notifiable, styleId: 'weekly' } }),
];
// #endregion

// #region art: the timeline, drawn from the dates in the case reports
// Months counted from September 1980 (0) to May 1981 (8). `ill`: the months of illness
// before the pneumonia that the report gives; `pcp`: the month of diagnosis; `cmv`: a dated
// CMV finding; `died`: the month of death.
const PATIENTS = [
  { label: 'Patient 1 · 33', ill: [4, 6], pcp: 6, cmv: [1], died: 8 },
  { label: 'Patient 2 · 30', ill: [2, 7], pcp: 7, cmv: [] },
  { label: 'Patient 3 · 30', ill: [4, 5], pcp: 5, cmv: [6] },
  { label: 'Patient 4 · 29', pcp: 5, cmv: [], died: 6 },
  { label: 'Patient 5 · 36', ill: [3, 7], pcp: 7, cmv: [0] },
];
const MONTHS = ['Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May'];
const r2 = (v) => +v.toFixed(2);
// An SVG drawn as an image cannot see the page's web fonts (gotcha: svg-no-webfonts), so the
// chart carries its faces inline, as data URLs of the Fontsource files.
async function inlineFace(family, weight) {
  const id = family.toLowerCase().replace(/\s+/g, '-');
  const url = `https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-latin-${weight}`
    + '-normal.woff2';
  const bytes = new Uint8Array(await (await fetch(url)).arrayBuffer());
  let bin = '';
  for (const b of bytes) bin += String.fromCharCode(b);
  return `<style>@font-face{font-family:F;font-weight:${weight};src:url(data:font/woff2;`
    + `base64,${btoa(bin)}) format('woff2')}text{font-family:F}</style>`;
}
function timeline(faces) { // 178 × 47 mm: the width of the page's two columns
  const [W, H, L, R, T, ROW] = [178, 49, 26, 2, 9.5, 6.2];
  const step = (W - L - R) / MONTHS.length;
  const x = (m) => L + m * step;
  const label = (tx, ty, s, size = 2.75, anchor = 'start', weight = 400, fill = palette.ink) =>
    `<text x="${r2(tx)}" y="${r2(ty)}" font-size="${size}" font-weight="${weight}" `
    + `text-anchor="${anchor}" fill="${fill}">${s}</text>`;
  const cross = (cx, cy) => `<path d="M${r2(cx - 1.3)} ${r2(cy - 1.3)}l2.6 2.6M${r2(cx + 1.3)} `
    + `${r2(cy - 1.3)}l-2.6 2.6" stroke="${palette.ink}" stroke-width="0.6"/>`;
  let out = '';
  MONTHS.forEach((m, i) => {
    if (i % 2 === 0) out += `<rect x="${r2(x(i))}" y="${T - 1}" width="${r2(step)}" `
      + `height="${PATIENTS.length * ROW + 1}" fill="${palette.tint}"/>`;
    out += label(x(i) + step / 2, T - 2.4, m, 2.6, 'middle', 600, palette.muted);
  });
  out += label(x(0), T - 5.6, '1980', 2.6, 'start', 600, palette.accent)
    + label(x(4), T - 5.6, '1981', 2.6, 'start', 600, palette.accent);
  PATIENTS.forEach((p, i) => {
    const cy = T + i * ROW + ROW / 2;
    out += label(0, cy + 1, p.label, 2.9, 'start', 600);
    if (p.ill) out += `<rect x="${r2(x(p.ill[0]) + 0.6)}" y="${r2(cy - 1.1)}" `
      + `width="${r2((p.ill[1] - p.ill[0]) * step - 1.2)}" height="2.2" rx="1.1" `
      + `fill="${palette.rule}"/>`;
    for (const c of p.cmv) {
      const cx = x(c) + step / 2;
      out += `<path d="M${r2(cx)} ${r2(cy - 1.5)}l1.5 1.5l-1.5 1.5l-1.5-1.5Z" fill="#fff" `
        + `stroke="${palette.ink}" stroke-width="0.35"/>`;
    }
    out += `<circle cx="${r2(x(p.pcp) + step / 2)}" cy="${r2(cy)}" r="1.7" `
      + `fill="${palette.accent}"/>`;
    if (p.died !== undefined) {
      const cx = x(p.died) + step / 2;
      out += cross(cx, cy);
    }
  });
  const ly = H - 2.2;
  out += `<rect x="${L}" y="${ly - 2}" width="8" height="2.2" rx="1.1" fill="${palette.rule}"/>`
    + label(L + 10, ly, 'illness before the pneumonia')
    + `<circle cx="${L + 52}" cy="${ly - 0.9}" r="1.7" fill="${palette.accent}"/>`
    + label(L + 55, ly, '<tspan font-style="italic">Pneumocystis</tspan> pneumonia diagnosed')
    + `<path d="M${L + 109} ${ly - 2.4}l1.5 1.5l-1.5 1.5l-1.5-1.5Z" fill="#fff" `
    + `stroke="${palette.ink}" stroke-width="0.35"/>` + label(L + 112, ly, 'dated CMV finding')
    + cross(L + 139, ly - 0.9) + label(L + 142, ly, 'died');
  return `<svg xmlns="http://www.w3.org/2000/svg" width="1780" height="490" `
    + `viewBox="0 0 ${W} ${H}">${faces}${out}</svg>`;
}
// #endregion

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
const FONTS = { 'IBM Plex Serif': ['400', '400i', '600', '600i'], 'Libre Franklin': ['800', '800i'],
  'IBM Plex Sans Condensed': ['400', '400i', '500', '600', '600i', '700'] };

// ─── 4 · Build & show ───────────────────────────────────────────────────────
await loadFonts(FONTS, markdown);
const faces = await inlineFace(LABEL, 400) + await inlineFace(LABEL, 600);
await loadSvg('timeline.svg', timeline(faces));
const doc = await buildWithFonts(() => buildDocument({ markdown, resources }, config()), markdown);
showPages(doc, { title: 'Surveillance Notes · Reprint No. 1' });
offerPdf(() => renderToPdf(doc, { fontProvider: fontsourceProvider,
  resourceBytes: imageBytes }), `${RECIPE}.pdf`);

// ─── Kit ── helpers shared by every Cookbook recipe · postext.dev/cookbook ─────

// ─── Kit · core v1 ── the same in every recipe · postext.dev/cookbook ─────────
function mm(value) { return { value, unit: 'mm' }; }
function pt(value) { return { value, unit: 'pt' }; }
function em(value) { return { value, unit: 'em' }; }
/** The sample language's string: t({ en: 'Figure', es: 'Figura' }). */
function t(strings) { return strings[LANG] ?? Object.values(strings)[0]; }
/** A file in this recipe's assets folder, served from the Postext repo by jsDelivr. */
function asset(file) { return `https://cdn.jsdelivr.net/gh/drnachio/postext@main/cookbook/${RECIPE}/assets/${file}`; }

// ─── Kit · fonts v1 ── the same in every recipe · postext.dev/cookbook ────────
// Postext measures text with the faces the browser has loaded, and caches the
// widths, so every face must be ready before the first build. Faces come from
// Fontsource: the same static files the PDF embeds, so screen and PDF agree.

/** faces = { 'Family Name': ['400', '400i', '700'] }. `text` is the sample:
 *  letters beyond Latin-1 (č, ł, ő…) also load the latin-ext files. With
 *  `optional`, a face Fontsource does not ship is skipped instead of failing.
 *  Resolves to the number of faces added. */
async function loadFonts(faces, text = '', { optional = false } = {}) {
  kitStatus('Loading fonts…');
  const ranges = {
    latin: 'U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,'
      + 'U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD',
    'latin-ext': 'U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,'
      + 'U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF',
  };
  const subsets = /[Ā-˿Ḁ-ỿ]/.test(text) ? ['latin', 'latin-ext'] : ['latin'];
  const jobs = [];
  let added = 0;
  for (const [family, specs] of Object.entries(faces)) {
    const id = fontsourceId(family);
    const meta = optional ? await fontsourceMeta(family) : null;
    for (const spec of new Set(specs)) {
      const weight = parseInt(spec, 10);
      const style = spec.endsWith('i') ? 'italic' : 'normal';
      if (hasFace(family, weight, style)) continue;
      if (optional && !(meta?.weights.includes(weight) && meta.styles.includes(style))) continue;
      for (const subset of subsets) {
        const url = `https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-${subset}-${weight}-${style}.woff2`;
        const face = new FontFace(family, `url(${url}) format('woff2')`,
          { weight: String(weight), style, unicodeRange: ranges[subset] });
        jobs.push(face.load().then((ready) => { document.fonts.add(ready); added++; }, () => {
          if (subset === 'latin' && !optional) throw new Error(`Fontsource has no ${family} ${weight} ${style}`);
        }));
      }
    }
  }
  await Promise.all(jobs).catch((error) => { kitFail(error); throw error; });
  return added;
}

/** Runs `build` (a buildDocument or buildBundle call) and checks the faces
 *  the pages use. A regular face missing from FONTS is loaded with a warning;
 *  bold and italic variants are loaded when the family ships them. Then the
 *  measurement caches are cleared and the build runs again. */
async function buildWithFonts(build, text = '') {
  const tried = new Set();
  for (let round = 0; round < 3; round++) {
    kitStatus('Laying out…');
    await new Promise(requestAnimationFrame);          // let the status paint first
    const result = await Promise.resolve().then(build).catch((error) => { kitFail(error); throw error; });
    const wanted = { base: {}, variants: {} };
    for (const { font, base } of [result].flat().flatMap(fontStringsOf)) {
      const { family, weight, style } = parseFont(font);
      const key = `${family}|${weight}|${style}`;
      if (tried.has(key) || hasFace(family, weight, style)) continue;
      tried.add(key);
      (wanted[base ? 'base' : 'variants'][family] ??= []).push(`${weight}${style === 'italic' ? 'i' : ''}`);
    }
    if (Object.keys(wanted.base).length) {
      console.warn(`[cookbook] FONTS does not list ${JSON.stringify(wanted.base)}: loading them.`);
    }
    const added = await loadFonts(wanted.base, text) + await loadFonts(wanted.variants, text, { optional: true });
    if (added === 0) return result;
    clearMeasurementCache();
  }
  throw new Error('The fonts did not settle after three builds.');
}

/** Every font string of the layout. `base` marks a block's own face; its
 *  bold, italic and bold-italic variants are listed whether or not used. */
function fontStringsOf(doc) {
  const found = new Map();
  const walk = (node) => {
    if (!node || typeof node !== 'object') return;
    if (Array.isArray(node)) { node.forEach(walk); return; }
    for (const [key, value] of Object.entries(node)) {
      if (typeof value === 'string' && /fontString$/i.test(key)) {
        found.set(value, found.get(value) || key === 'fontString');
      } else if (value && typeof value === 'object') walk(value);
    }
  };
  walk(doc.pages);
  walk(doc.blocks);
  return [...found].map(([font, base]) => ({ font, base }));
}

/** '700 37.5px Open Sans' / 'italic 400 13px "Source Serif 4"' → { family, weight, style }.
 *  A string with no weight ('95.8px Young Serif', from a design text) is 400. */
function parseFont(font) {
  const m = /^(?:(italic|oblique)\s+)?(?:small-caps\s+)?(?:(\d+|bold|normal)\s+)?[\d.]+px\s+(.+)$/.exec(font.trim());
  if (!m) throw new Error(`Unexpected font string: ${font}`);
  const weight = m[2] === 'bold' ? 700 : !m[2] || m[2] === 'normal' ? 400 : Number(m[2]);
  return { family: m[3].replace(/^["']|["']$/g, ''), weight, style: m[1] ? 'italic' : 'normal' };
}

/** True when a loaded FontFace covers exactly this family, weight and style
 *  (document.fonts.check() is also true for families nobody declared). */
function hasFace(family, weight, style) {
  for (const face of document.fonts) {
    if (face.status !== 'loaded' || face.style !== style) continue;
    if (face.family.replace(/^["']|["']$/g, '') !== family) continue;
    const [low, high = low] = face.weight.split(' ').map(Number);
    if (weight >= low && weight <= high) return true;
  }
  return false;
}

/** Fontsource's id for a family: 'Source Serif 4' → 'source-serif-4'. */
function fontsourceId(family) { return family.toLowerCase().replace(/\s+/g, '-'); }

/** The weights and styles a family ships ({ weights: [400, 700], styles: ['normal', 'italic'] }), or null. */
function fontsourceMeta(family) {
  fontsourceMeta.cache ??= new Map();
  const id = fontsourceId(family);
  if (!fontsourceMeta.cache.has(id)) {
    fontsourceMeta.cache.set(id, fetch(`https://api.fontsource.org/v1/fonts/${id}`)
      .then((res) => (res.ok ? res.json() : null), () => null));
  }
  return fontsourceMeta.cache.get(id);
}

// ─── Kit · viewer v1 ── the same in every recipe · postext.dev/cookbook ───────
/** Shows the pages as facing spreads on a dark desk: the first page is a
 *  recto on its own, then verso | recto pairs, as in a bound book. Pages
 *  are painted when they scroll near the screen. */
function showPages(docs, { title, width = 460 } = {}) {
  const root = viewer(title);
  const pages = [docs].flat().flatMap((doc) =>
    doc.pages.map((page) => ({ doc, page, n: (doc.pageIndexOffset ?? 0) + page.index })));
  const spreads = [];
  let verso = null;
  for (const p of pages) {
    if (p.n % 2 === 1) { if (verso) spreads.push([verso, null]); verso = p; }
    else { spreads.push([verso, p]); verso = null; }
  }
  if (verso) spreads.push([verso, null]);
  const density = Math.min(window.devicePixelRatio || 1, 2);
  showPages.painter?.disconnect();
  const painter = new IntersectionObserver((entries) => {
    for (const { isIntersecting, target } of entries) {
      if (!isIntersecting) continue;
      painter.unobserve(target);
      const { doc, page } = target.postext;
      renderPageToCanvas(page, doc, target, { scale: (width * density) / page.width });
    }
  }, { rootMargin: '800px' });
  showPages.painter = painter;
  root.replaceChildren(...spreads.map((pair) => {
    const spread = document.createElement('div');
    spread.className = 'pt-spread';
    for (const p of pair) {
      const figure = document.createElement('figure');
      if (p) {
        const label = p.page.pageLabel || String(p.n + 1);
        const canvas = document.createElement('canvas');
        canvas.postext = p;
        canvas.style.aspectRatio = `${p.page.width} / ${p.page.height}`;
        canvas.setAttribute('role', 'img');
        canvas.setAttribute('aria-label', `Page ${label}`);
        const folio = document.createElement('figcaption');
        folio.textContent = label;
        figure.append(canvas, folio);
        painter.observe(canvas);
      } else figure.className = 'pt-blank';
      spread.append(figure);
    }
    return spread;
  }));
  kitStatus(`${pages.length} ${pages.length === 1 ? 'page' : 'pages'}`);
  document.documentElement.dataset.postext = 'ready';
  return pages.length;
}

/** The desk, the bar and the error reporting, created once. */
function viewer(title) {
  if (!document.getElementById('pt-kit')) {
    document.head.insertAdjacentHTML('beforeend', `<style id="pt-kit">
      :root { color-scheme: dark; }
      body { margin: 0; background: #0e1014; color: #b9bcc4; font: 13px/1.45 system-ui, sans-serif; }
      #pt-bar { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center;
        gap: 6px 16px; padding: 10px 16px; background: rgb(14 16 20 / .92); backdrop-filter: blur(6px);
        border-bottom: 1px solid #23262d; }
      #pt-bar strong { color: #f4f1ea; font-weight: 600; }
      #pt-actions { display: flex; gap: 12px; margin-left: auto; }
      #pt-actions a, #pt-actions button { color: #d8a21a; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
      #pages { display: grid; justify-items: center; gap: 48px; padding: 32px 16px 72px; }
      .pt-spread { display: flex; }
      .pt-spread figure { margin: 0; width: min(460px, 44vw); }
      .pt-spread canvas { display: block; width: 100%; background: #fff;
        box-shadow: 0 1px 2px rgb(0 0 0 / .5), 0 22px 44px -16px rgb(0 0 0 / .8); }
      .pt-spread figure:first-child canvas { box-shadow: inset -14px 0 14px -14px rgb(0 0 0 / .18), 0 1px 2px rgb(0 0 0 / .5), 0 22px 44px -16px rgb(0 0 0 / .8); }
      .pt-spread figcaption { margin-top: 10px; text-align: center; font: 600 10px/1 system-ui, sans-serif;
        letter-spacing: .18em; text-transform: uppercase; color: #6c7079; }
      .pt-blank { visibility: hidden; }
      @media (max-width: 760px) {
        .pt-spread { flex-direction: column; gap: 32px; }
        .pt-spread figure { width: min(460px, 92vw); }
        .pt-blank { display: none; }
      }
    </style>`);
    document.body.insertAdjacentHTML('afterbegin',
      '<header id="pt-bar"><strong id="pt-title"></strong><span id="pt-status" role="status"></span><span id="pt-actions"></span></header>');
    document.getElementById('pt-title').textContent = document.title || 'Postext';
    addEventListener('error', (event) => kitFail(event.error ?? event.message));
    addEventListener('unhandledrejection', (event) => kitFail(event.reason));
  }
  if (title) document.getElementById('pt-title').textContent = title;
  return document.getElementById('pages')
    ?? document.body.appendChild(Object.assign(document.createElement('main'), { id: 'pages' }));
}

function kitStatus(text) {
  viewer();
  document.getElementById('pt-status').textContent = text;
}

function kitFail(error) {
  document.documentElement.dataset.postext = 'error';
  kitStatus(`Error: ${error?.message ?? error}`);
}

// ─── Kit · pdf v1 ── the same in every recipe that exports a PDF ──────────────
/** postext-pdf embeds TrueType bytes. Fetch the Fontsource file the screen
 *  used, snapping to a weight the family ships and falling back to upright
 *  when it has no italic: the PDF asks for every face a block could use. */
async function fontsourceProvider(family, weight, style) {
  const id = fontsourceId(family);
  const meta = await fontsourceMeta(family);
  const weights = meta?.weights?.length ? meta.weights : [400, 700];
  const w = weights.reduce((a, b) => (Math.abs(b - weight) < Math.abs(a - weight) ? b : a));
  const s = style === 'italic' && meta && !meta.styles.includes('italic') ? 'normal' : style;
  const res = await fetch(`https://cdn.jsdelivr.net/npm/@fontsource/${id}@5/files/${id}-latin-${w}-${s}.woff2`);
  if (!res.ok) throw new Error(`Fontsource has no ${family} ${w} ${s} (${res.status})`);
  return decompressWoff2(new Uint8Array(await res.arrayBuffer()));
}

/** A "Build the PDF" button in the bar. Once built: "Open the PDF" (a new
 *  tab, since CodePen's preview frame cannot show PDFs) and a download link. */
function offerPdf(makePdf, filename) {
  viewer();
  const button = Object.assign(document.createElement('button'), { type: 'button', textContent: 'Build the PDF' });
  button.dataset.postextPdf = filename;
  button.addEventListener('click', async () => {
    button.disabled = true;
    button.textContent = 'Building the PDF…';
    try {
      const bytes = await makePdf();
      const url = URL.createObjectURL(new Blob([bytes], { type: 'application/pdf' }));
      const size = `${Math.max(1, Math.round(bytes.length / 1024))} KB`;
      button.replaceWith(
        Object.assign(document.createElement('a'), { href: url, target: '_blank', rel: 'noopener', textContent: 'Open the PDF ↗' }),
        Object.assign(document.createElement('a'), { href: url, download: filename, textContent: `Download ${filename} · ${size}` }));
    } catch (error) {
      button.disabled = false;
      button.textContent = 'Build the PDF';
      kitFail(error);
    }
  });
  document.getElementById('pt-actions').append(button);
}

// ─── Kit · images v1 ── recipes with pictures · postext.dev/cookbook ──────────
/** Registers a photo or PNG for the canvas and keeps its bytes for the PDF.
 *  fetch → ImageBitmap never taints the canvas (a plain cross-origin <img> would). */
async function loadImage(fileId, url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`Image not found (${res.status}): ${url}`);
  const bytes = new Uint8Array(await res.arrayBuffer());
  registerResourceImage(fileId, await createImageBitmap(new Blob([bytes])));
  (loadImage.bytes ??= new Map()).set(fileId, bytes);
}

/** Registers SVG markup (drawn in code, or fetched) as a vector image. */
async function loadSvg(fileId, svg) {
  const img = new Image();
  img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
  await img.decode();
  registerResourceImage(fileId, img);
  (loadImage.bytes ??= new Map()).set(fileId, new TextEncoder().encode(svg));
}

/** renderToPdf({ resourceBytes: imageBytes }) */
function imageBytes(fileId) { return loadImage.bytes?.get(fileId); }

/** renderToHtml({ resourceImageUrl: imageUrl }) */
function imageUrl(fileId) {
  const bytes = imageBytes(fileId);
  if (!bytes) return undefined;
  imageUrl.urls ??= new Map();
  if (!imageUrl.urls.has(fileId)) {
    const type = /\.svg$/i.test(fileId) ? 'image/svg+xml' : /\.png$/i.test(fileId) ? 'image/png' : 'image/jpeg';
    imageUrl.urls.set(fileId, URL.createObjectURL(new Blob([bytes], { type })));
  }
  return imageUrl.urls.get(fileId);
}

// ─── /Kit ───────────────────────────────────────────────────────────────────────
```

## Variantes

### Números de referencia volados

Casi todas las revistas médicas suben los números en vez de ponerlos entre paréntesis.

```diff
-const citations = { style: 'american-medical-association', marker: 'parentheses',
+const citations = { style: 'american-medical-association', marker: 'superscript',
```

### Cada informe en página nueva

Una serie de reimpresiones que archiva los informes por separado abre cada uno en página nueva.

```diff
-    { id: 'report', span: 'page', spanBreak: false, advancedDesign: opener },
+    { id: 'report', span: 'page', advancedDesign: opener },
```

### La lista al modo Vancouver

[Un artículo médico en estilo Vancouver](https://postext.dev/es/cookbook/medical-article-vancouver.md) retoca el estilo `elsevier-vancouver` incluido para seguir la forma de referencia de la NLM.

## Errores frecuentes

- **Cualquier objeto headings desactiva el salto de página del H1.** Por defecto un H1 salta a una página impar (always-odd), pero cualquier objeto headings anula ese valor, así que los capítulos van seguidos y span: 'page' no hace nada. Vuelve a declarar headings.levels[0].breakBefore: { enabled: true, parity } en cada configuración.
- **El texto dentro de un SVG <img> no puede usar fuentes web.** Un SVG se dibuja como imagen, y una imagen no tiene acceso a las fuentes web de la página, así que sus rótulos salen con una fuente del sistema. Convierte el texto en trazados, incrusta un subconjunto @font-face en el SVG o lleva los rótulos al pie.
- **Carga todas las fuentes antes de componer.** La composición mide el texto con las fuentes que el navegador ha cargado y guarda los anchos, así que una fuente que llega después de la primera composición deja cortes de línea erróneos y un PDF que ya no coincide con la pantalla. Carga antes todos los pesos y estilos, y llama a clearMeasurementCache() antes de recomponer si alguna llega tarde.
- **Una configuración se cachea por identidad: crea un objeto nuevo.** El motor guarda en caché las configuraciones resueltas según la identidad del objeto, así que modificar el mismo objeto y volver a componer reutiliza el resultado anterior. Crea un objeto nuevo en cada composición: por eso la configuración de una receta es una función, config().

- Sin `numbering: 'chapter'` los números de referencia siguen en todo el documento y `scope: 'chapter'` solo separa las listas: el informe de julio citaría las obras 4 y de 6 a 23, donde el boletín imprimió de 1 a 19.
- La nota de 1981 *Paired specimens not run in parallel* se llama con un asterisco: `footnotes.numberFormat: 'symbols'` pone *, †, ‡ y vuelve a empezar en cada página. De esas marcas, solo el asterisco está en el archivo latin de una fuente de Fontsource (la cruz está en latin-ext y la doble cruz en ninguno), así que una página con dos o tres notas necesita una fuente que las tenga, o `symbols: ['*', '§', '¶']`.
- El texto de 1981 queda como se imprimió, con la terminología de la época, y el colofón lo dice. Una reimpresión no corrige el texto que reproduce; lo que añade la edición (la cronología, la tabla de casos, la línea en cursiva azul bajo el primer párrafo) va en su propio estilo y rotulado.

## Créditos

- Receta: Ignacio Ferro ([@drnachio](https://github.com/drnachio))
- Texto: «Pneumocystis Pneumonia — Los Angeles», MMWR 1981;30(21):250-252, y «Kaposi's Sarcoma and Pneumocystis Pneumonia Among Homosexual Men — New York City and California», MMWR 1981;30(25):305-308, recompuestos completos a partir de los números impresos; la Tabla 1 del primer informe y la Figura 1 las añade la edición a partir de los casos. Todo el material de la serie MMWR es de dominio público y puede reproducirse sin permiso; se agradece la cita de la fuente.: Centers for Disease Control (CDC) ([fuente](https://stacks.cdc.gov/view/cdc/50022)), dominio público
- Imágenes: Figura 1, cronología de los cinco casos, dibujada en código con las fechas de los informes: Ignacio Ferro, original
- Tipografías: IBM Plex Serif (OFL-1.1), Libre Franklin (OFL-1.1), IBM Plex Sans Condensed (OFL-1.1)
- Código: MIT · Contenido de ejemplo: CC-BY-4.0

## Relacionadas

- [N.º 095 · Un artículo médico en estilo Vancouver](https://postext.dev/es/cookbook/medical-article-vancouver.md): Un ensayo clínico en A4 a dos columnas: números de cita volados, una bibliografía numerada al modo Vancouver y DOI que se abren como enlaces en el PDF. · Nivel 2 (Intermedio) · Artículos y trabajos académicos
- [N.º 098 · Una obra colectiva con bibliografía en cada capítulo](https://postext.dev/es/cookbook/edited-volume-chapter-bibliographies.md): Tres ensayos de tres autores, cada uno un documento propio en buildBundle, y cada uno cerrado por una lista Chicago autor-fecha con solo las obras que cita. · Nivel 3 (Avanzado) · Artículos y trabajos académicos, Libros de texto
- [N.º 093 · Un mismo texto en cuatro estilos de cita](https://postext.dev/es/cookbook/one-text-four-citation-styles.md): Un ensayo breve con seis citas, compuesto en APA 7, Chicago autor-año, IEEE e ISO 690: el ajuste del estilo es lo único que cambia. · Nivel 2 (Intermedio) · Artículos y trabajos académicos, Informes y memorias