In short

The 2016 letter that announced the first gravitational waves, shortened and set again on US Letter pages. The signal of both detectors, drawn from the public data, runs across page 1; references are numbered in brackets.

What you'll build

Five pages of the letter that announced the first gravitational waves, Observation of Gravitational Waves from a Binary Black Hole Merger (Abbott et al., 2016), abridged and re-set on US Letter in two columns. Page 1 opens with the evidence: the strain recorded at Hanford and Livingston, redrawn from the open data files of the Gravitational Wave Open Science Center, runs across both columns under the title. Below it come the collaboration byline with its footnote, the abstract across the page and the text, with citations numbered [1,2] and [25–27] as the APS journals print them. The chirp mass is equation (1). Table I sets its asymmetric errors as stacked super- and subscripts, drawn by MathJax inside the cells. Bring your own BibTeX and data files, and the same script sets your letter.

This recipe answers

How do I set a physics letter: a collaboration byline, the abstract across both columns and a data figure across the top?
How do I control where a figure goes: top of page, across both columns, exactly here, or in the margin?
How do I typeset maths (inline, display, equations) and keep it vector in the PDF?
How do I re-set an open-access paper from arXiv or PubMed Central with Postext, keeping its citations, figures and licence line?

The short answer

script.js · lines 32–60in full code

// [@key] numbers works by first citation. APS journals print [1,2] and [2–4] in one pair of
// brackets and list "A. Einstein, Sitzungsber. K. Preuss. Akad. Wiss. 1, 688 (1916).": no
// title, volume bold. No APS style is bundled: four edits turn the IEEE file into one.
registerCitationEngine(createCiteprocEngine({ styles: STYLES, locales: LOCALES }));
const ARTICLE = '<group delimiter=" "><text variable="container-title"/><text '
  + 'variable="volume" font-weight="bold" suffix=","/><text variable="page"/><date '
  + 'variable="issued" prefix="(" suffix=")"><date-part name="year"/></date></group>';
const BOOK = '<group delimiter=" "><group delimiter=", "><choose><if type="chapter"><text '
  + 'variable="container-title" prefix="in " font-style="italic"/></if><else><text variable='
  + '"title" font-style="italic"/></else></choose><names variable="editor" prefix="edited by ">'
  + '<name and="text" initialize-with=". "/></names><text variable="collection-title"/><text '
  + 'variable="volume" prefix="Vol. "/></group><group prefix="(" suffix=")" delimiter=", ">'
  + '<text variable="publisher"/><text variable="publisher-place"/><date variable="issued">'
  + '<date-part name="year"/></date></group></group><text variable="page" prefix="pp. "/>';
const aps = STYLES.ieee
  .replace('<citation>', '<citation collapse="citation-number">') // [2–4], not [2], [3], [4]
  .replace(/<layout delimiter=", ">\s*<group prefix="\[" suffix="\]" delimiter=", ">/,
    '<layout prefix="[" suffix="]" delimiter=","><group delimiter=", ">') // [1,2]
  .replace('et-al-min="7"', 'et-al-min="11"') // ten authors are listed, as in the letter
  .replace(/<bibliography[\s\S]*<\/bibliography>/, '<bibliography second-field-align="flush">'
    + '<layout suffix="."><text variable="citation-number" prefix="[" suffix="]"/><text '
    + 'macro="author"/><choose><if type="manuscript"><text variable="note" prefix=" "/></if>'
    + `<else><group prefix=", " delimiter=", "><choose><if type="article-journal">${ARTICLE}`
    + `</if><else-if type="book chapter" match="any">${BOOK}</else-if><else><text variable=`
    + '"URL"/><text variable="note"/></else></choose></group></else></choose></layout>'
    + '</bibliography>');
const citations = { style: 'custom', customStyle: aps, link: true,
  bibliography: { fontSize: em(0.84), lineHeight: pt(9.5), entrySpacing: pt(0.4),
    labelWidth: mm(6.2) } }; // the [64] column: turnovers line up after the widest label

Physics citations [1] and [2–4], from the bundled IEEE style

Ingredients

Features: Figures exactly here Figure placement Citations in a citation style Mathematics Pictures in table cells Numbered captions Custom resource types Caption style Source and credit lines Footnotes Boxes across the page Callout boxes Heading styles Numbered headings Heading attributes Designed openers Running heads and folios Bibliography from the references Paragraph styles PDF export
Also uses: Citations that place figures Figure and Table in your language Heads by page role Fonts embedded in the PDF Figures and tables as resources Superscripts and subscripts Line breaks in titles Unnumbered chapters
Type: Gelasio, Albert Sans (SIL OFL 1.1)
Assets: None: every picture is drawn in code
API: LOCALESSTYLESbuildDocumentclearMeasurementCachecreateCiteprocEnginedecompressWoff2defaultResourceTypesinitMathEngineregisterCitationEngineregisterResourceImagerenderPageToCanvasrenderToPdf

Method

#1 · Numbered physics citations from the IEEE file

The code is the short answer above. postext-citeproc bundles no APS style, and the bundled ieee style is the nearest: citation order, numbers in brackets, initials before the family name. Four string replacements on STYLES.ieee close the gap. collapse="citation-number" joins runs ([25–27]), one pair of brackets on the layout prints [1,2], et-al-min rises to eleven so a list of ten authors stays whole, and a new <bibliography> block prints the reference the way Physical Review does, with the journal, the volume in bold, the page and the year: Phys. Rev. Lett. 74, 3515 (1995). The 43 works come in a :::references{format=bibtex} block of their own; a name in double braces such as {{J. Aasi et al.}} is printed as written, which is how the letter cites its own collaboration's long author lists. See Citations and bibliography.

#2 · Figure 1 under the title, across both columns

script.js · lines 64–91in full code

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) => ({ fontWeight: 700, letterSpacing: pt(size * 0.2),
  textTransform: 'uppercase', color: col('accent') });
const letter = { id: 'letter', numbered: false, span: 'page', marginBottom: pt(0),
  advancedDesign: { enabled: true, minHeight: mm(21), slot: { elements: [
    text('kicker', '{attr.kicker}', SANS, 7.5, { ...caps(7.5),
      placement: at('container', 'top-left', 0, 2, MEASURE) }),
    text('title', '{titleText}', SANS, 23, { fontWeight: 700, lineHeight: 1.08,
      placement: at('#kicker', 'below', 0, 2.2, MEASURE) }),
  ] } } };
const box = { padding: { top: mm(2.6), right: mm(12), bottom: mm(2.4), left: mm(12) },
  background: col('tint'), marginTop: pt(0), marginBottom: pt(LEAD), span: 'page',
  body: { fontSize: pt(9.3), lineHeight: pt(12.6), firstLineIndent: pt(0) } };
// A 'here' figure inside a page-wide box spans the page: ::resource{id="fig1"} in the box
// sets Figure 1 under the title, on page 1, where a float could only follow its citation.
const plate = { id: 'plate', span: 'page', backgroundEnabled: false, border: { enabled: false },
  padding: mm(0), marginTop: pt(0), marginBottom: pt(LEAD / 2) };
const paragraphStyles = [
  { id: 'byline', fontFamily: SANS, fontSize: pt(10), lineHeight: pt(12.6), fontWeight: 600,
    textAlign: 'center', firstLineIndent: pt(0) },
  { id: 'dates', fontFamily: SANS, fontSize: pt(7.6), lineHeight: pt(12.6), textAlign: 'center',
    color: col('muted'), firstLineIndent: pt(0) },
  { id: 'colophon', fontFamily: SANS, fontSize: pt(7), lineHeight: pt(9.4), color: col('muted'),
    textAlign: 'left', firstLineIndent: pt(0), marginTop: pt(LEAD) },
];

A float can never stand above the line that cites it, and a heading with span: 'page' always opens a fresh page, so Figure 1 cannot float to the head of page 1. The letter puts it there directly: ::resource{id="fig1"}, with placement.position: 'here', sits inside the plate box, which spans the page, right after the title. The byline and the abstract follow in a second page-wide box, front, whose :::paragraphs blocks centre the byline and set the dates small. The footnote marker after et al. sends its note to the foot of the first column, as the APS journals print the author note, and footnotes.numberFormat: 'lower-alpha' letters the notes so they never read as references. See Block embed and Footnotes.

#3 · Table I, with maths in its cells

script.js · lines 349–366in full code

// Cells take no maths: each value is an SVG of MathJax paths at 9 pt, its width given as a
// fraction of the cell's inner width.
const CELL_PAD = 0.9; // mm
const VALUE_W = COLUMN * (1 / 2.3) - 2 * CELL_PAD; // the value column: weights [1.3, 1]
const VALUES = [['Primary black hole mass', '36^{+5}_{-4}\\,M_\\odot'],
  ['Secondary black hole mass', '29^{+4}_{-4}\\,M_\\odot'],
  ['Final black hole mass', '62^{+4}_{-4}\\,M_\\odot'],
  ['Final black hole spin', '0.67^{+0.05}_{-0.07}'],
  ['Luminosity distance', '410^{+160}_{-180}\\;\\mathrm{Mpc}'],
  ['Source redshift *z*', '0.09^{+0.03}_{-0.04}']];
const valueSvg = (tex) => { // 9 pt maths: 1000 MathJax units to the em
  const r = renderMath(tex, false, 100);
  const k = (9 * 25.4) / 72 / 1000; // mm per unit
  const [w, h] = [r.viewBox.width * k, r.viewBox.height * k];
  return { w, h, svg: svg(w, h, `<g transform="scale(${k}) translate(${-r.viewBox.minX} `
    + `${-r.viewBox.minY})" fill="${palette.ink}">${r.paths.map((p) => `<path d="${p.d}"/>`)
      .join('')}</g>`) };
};

Table cells are not parsed for maths, and ^+5^~−4~ would print the two errors one after the other. Each value is set by renderMath instead, written into an SVG as paths and drawn in its cell through TableCell.image; the cell's width is the formula's width as a fraction of the cell, so every value prints at 9 pt whatever the column. The resource types print FIG. 1 and TABLE I in the captions and Fig. 1 and Table I in the text: a captionPrefix, and counterFormat: 'upper-roman' for tables. Captions take no maths either, and neither face carries Greek, so the captions keep to letters with ^sup^ and ~sub~.

#4 · Figures drawn from the open data

script.js · lines 17–22in full code

const palette = { ink: '#171a21', accent: '#25578a', tint: '#eef2f6', rule: '#b7c0ca',
  muted: '#5a636e', paper: '#ffffff' };
const data = { hanford: '#cf5f24', livingston: palette.accent, purple: '#74519c' }; // figures
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' } }));

The four figures are drawn in code from the data files GWOSC publishes with the letter, under CC BY 4.0. Each trace keeps every eighth sample, 430 points for the 0.21 s of Figure 1, and stored as one base-64 character per point for its change from the previous one, which keeps the five traces under 3 KB inside the script. The residual row is the data less the waveform, as published. Hanford is orange and Livingston blue in every figure, and the text keeps the page's ink and one blue. The labels are MathJax paths in its sans-serif face (\textsf), since an SVG drawn as an image cannot use the page's fonts, and the PDF keeps every line and label as vectors.

The whole recipe

Sandbox

// ═══ Postext Cookbook · Nº 140 · A physics letter with a data figure across the top ═══
// https://postext.dev/en/cookbook/physics-letter-two-columns
// Code: MIT · Text: Abbott et al., PRL 116, 061102 (CC BY 3.0) · Data: GWOSC (CC BY 4.0)
// Fonts: Gelasio, Albert Sans (SIL OFL 1.1) · Needs postext ≥ 1.18.0
import {
  buildDocument, renderPageToCanvas, clearMeasurementCache, registerResourceImage,
  registerCitationEngine, defaultResourceTypes, initMathEngine, renderMath,
} from 'https://esm.sh/postext?bundle';
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 = 'physics-letter-two-columns';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: ink and one blue for the text; the detectors' colours for the data
const palette = { ink: '#171a21', accent: '#25578a', tint: '#eef2f6', rule: '#b7c0ca',
  muted: '#5a636e', paper: '#ffffff' };
const data = { hanford: '#cf5f24', livingston: palette.accent, purple: '#74519c' }; // figures
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 [SERIF, SANS] = ['Gelasio', 'Albert Sans'];
// mm: US Letter, head, foot and side margins, gutter; then the measure and one column
const [TRIM_W, TRIM_H, TOP, BOTTOM, SIDE, GUTTER] = [215.9, 279.4, 21, 21, 16, 7];
const MEASURE = TRIM_W - 2 * SIDE;
const COLUMN = (MEASURE - GUTTER) / 2;
const [BODY, LEAD] = [9.3, 12.4]; // pt: a letter journal's density, two columns of 88 mm

// #region answer: physics citations [1] and [2–4], from the bundled IEEE style
// [@key] numbers works by first citation. APS journals print [1,2] and [2–4] in one pair of
// brackets and list "A. Einstein, Sitzungsber. K. Preuss. Akad. Wiss. 1, 688 (1916).": no
// title, volume bold. No APS style is bundled: four edits turn the IEEE file into one.
registerCitationEngine(createCiteprocEngine({ styles: STYLES, locales: LOCALES }));
const ARTICLE = '<group delimiter=" "><text variable="container-title"/><text '
  + 'variable="volume" font-weight="bold" suffix=","/><text variable="page"/><date '
  + 'variable="issued" prefix="(" suffix=")"><date-part name="year"/></date></group>';
const BOOK = '<group delimiter=" "><group delimiter=", "><choose><if type="chapter"><text '
  + 'variable="container-title" prefix="in " font-style="italic"/></if><else><text variable='
  + '"title" font-style="italic"/></else></choose><names variable="editor" prefix="edited by ">'
  + '<name and="text" initialize-with=". "/></names><text variable="collection-title"/><text '
  + 'variable="volume" prefix="Vol. "/></group><group prefix="(" suffix=")" delimiter=", ">'
  + '<text variable="publisher"/><text variable="publisher-place"/><date variable="issued">'
  + '<date-part name="year"/></date></group></group><text variable="page" prefix="pp. "/>';
const aps = STYLES.ieee
  .replace('<citation>', '<citation collapse="citation-number">') // [2–4], not [2], [3], [4]
  .replace(/<layout delimiter=", ">\s*<group prefix="\[" suffix="\]" delimiter=", ">/,
    '<layout prefix="[" suffix="]" delimiter=","><group delimiter=", ">') // [1,2]
  .replace('et-al-min="7"', 'et-al-min="11"') // ten authors are listed, as in the letter
  .replace(/<bibliography[\s\S]*<\/bibliography>/, '<bibliography second-field-align="flush">'
    + '<layout suffix="."><text variable="citation-number" prefix="[" suffix="]"/><text '
    + 'macro="author"/><choose><if type="manuscript"><text variable="note" prefix=" "/></if>'
    + `<else><group prefix=", " delimiter=", "><choose><if type="article-journal">${ARTICLE}`
    + `</if><else-if type="book chapter" match="any">${BOOK}</else-if><else><text variable=`
    + '"URL"/><text variable="note"/></else></choose></group></else></choose></layout>'
    + '</bibliography>');
const citations = { style: 'custom', customStyle: aps, link: true,
  bibliography: { fontSize: em(0.84), lineHeight: pt(9.5), entrySpacing: pt(0.4),
    labelWidth: mm(6.2) } }; // the [64] column: turnovers line up after the widest label
// #endregion

// #region title: the title, Figure 1 in a page-wide box, then the byline and the abstract
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) => ({ fontWeight: 700, letterSpacing: pt(size * 0.2),
  textTransform: 'uppercase', color: col('accent') });
const letter = { id: 'letter', numbered: false, span: 'page', marginBottom: pt(0),
  advancedDesign: { enabled: true, minHeight: mm(21), slot: { elements: [
    text('kicker', '{attr.kicker}', SANS, 7.5, { ...caps(7.5),
      placement: at('container', 'top-left', 0, 2, MEASURE) }),
    text('title', '{titleText}', SANS, 23, { fontWeight: 700, lineHeight: 1.08,
      placement: at('#kicker', 'below', 0, 2.2, MEASURE) }),
  ] } } };
const box = { padding: { top: mm(2.6), right: mm(12), bottom: mm(2.4), left: mm(12) },
  background: col('tint'), marginTop: pt(0), marginBottom: pt(LEAD), span: 'page',
  body: { fontSize: pt(9.3), lineHeight: pt(12.6), firstLineIndent: pt(0) } };
// A 'here' figure inside a page-wide box spans the page: ::resource{id="fig1"} in the box
// sets Figure 1 under the title, on page 1, where a float could only follow its citation.
const plate = { id: 'plate', span: 'page', backgroundEnabled: false, border: { enabled: false },
  padding: mm(0), marginTop: pt(0), marginBottom: pt(LEAD / 2) };
const paragraphStyles = [
  { id: 'byline', fontFamily: SANS, fontSize: pt(10), lineHeight: pt(12.6), fontWeight: 600,
    textAlign: 'center', firstLineIndent: pt(0) },
  { id: 'dates', fontFamily: SANS, fontSize: pt(7.6), lineHeight: pt(12.6), textAlign: 'center',
    color: col('muted'), firstLineIndent: pt(0) },
  { id: 'colophon', fontFamily: SANS, fontSize: pt(7), lineHeight: pt(9.4), color: col('muted'),
    textAlign: 'left', firstLineIndent: pt(0), marginTop: pt(LEAD) },
];
// #endregion

// Running heads 12 mm from the trim; the opener has the source line at its foot.
const head = (id, content, parity, edge, x, extra) => text(id, content, SANS, 7.5, {
  parity, pages: 'body', fontWeight: 500, color: col('muted'), overflow: 'clip',
  placement: at('page', edge, x, 12, 120), ...extra });
const folio = { fontWeight: 700, color: col('accent') };
const right = { align: 'right' };
const header = { elements: [
  head('v-folio', '{pageNumber}', 'even', 'top-left', SIDE, folio),
  head('v-title', 'B. P. Abbott et al. · Observation of gravitational waves', 'even',
    'top-left', SIDE + 7),
  head('r-title', 'GW150914 · a binary black hole merger', 'odd', 'top-right', -SIDE - 7,
    right),
  head('r-folio', '{pageNumber}', 'odd', 'top-right', -SIDE, { ...folio, ...right }),
] };
const footer = { elements: [
  head('source', 'Re-set from Phys. Rev. Lett. 116, 061102 (2016) · CC BY 3.0 · '
    + 'doi:10.1103/PhysRevLett.116.061102', 'all', 'bottom-left', SIDE,
  { pages: 'opener', placement: at('page', 'bottom-left', SIDE, -12, 160) }),
  head('drop-folio', '{pageNumber}', 'all', 'bottom-right', -SIDE, { ...folio, ...right,
    pages: 'opener', placement: at('page', 'bottom-right', -SIDE, -12, 10) }),
] };

const sans = (size, weight) => ({ fontFamily: SANS, fontSize: pt(size), fontWeight: weight });
const config = () => ({ // a factory (gotcha: config-cache-identity)
  locale: 'en-us', colorPalette, citations, header, footer, paragraphStyles,
  // FIG. 1 and TABLE I in the captions, Fig. 1 and Table I in the text: the APS convention
  resourceTypes: defaultResourceTypes(LANG).map((type) => ({ ...type, numberingTemplate: '{n}',
    resetOn: 'never', ...(type.id === 'figure' ? { captionPrefix: 'FIG.' }
      : { captionPrefix: 'TABLE', counterFormat: 'upper-roman', shortLabel: 'Table',
        captionStyle: { position: 'above' } }) })),
  calloutStyles: [{ id: 'front', ...box }, plate],
  headingStyles: [letter, { id: 'back', numbered: false, ...sans(8, 700),
    textTransform: 'uppercase', color: col('ink') }],
  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: SERIF, fontSize: pt(BODY), lineHeight: pt(LEAD), color: col('ink'),
    boldColor: col('ink'), italicColor: col('ink'), referenceColor: col('ink'),
    referenceBold: false, textAlign: 'justify', firstLineIndent: mm(3.5),
    indentAfterHeading: false, hyphenation: { enabled: true }, optimalLineBreaking: true,
    avoidWidows: true, avoidOrphans: true, avoidRunts: true },
  math: { marginTop: pt(LEAD / 2), marginBottom: pt(LEAD / 2) },
  // Notes lettered a, b: the numbers in brackets belong to the references.
  footnotes: { numberFormat: 'lower-alpha', fontSize: pt(7.8), lineHeight: pt(10),
    separator: { color: col('rule') } },
  headings: { fontFamily: SANS, color: col('accent'), fontWeight: 700, levels: [
    { level: 1, breakBefore: { enabled: true, parity: 'any' } }, // gotcha: headings-drop-h1-break
    { level: 2, numberingTemplate: '{2:I}.', ...sans(11.5, 700), lineHeight: pt(LEAD * 1.5),
      marginTop: pt(LEAD / 2), marginBottom: pt(0) },
    { level: 3, numberingTemplate: '{3:A}.', ...sans(10, 600), color: col('ink'),
      lineHeight: pt(LEAD), marginTop: pt(LEAD / 2), marginBottom: pt(0) },
  ] },
  tableStyle: { rules: 'horizontal', borderColor: col('rule'), borderWidth: pt(0.5),
    headerBackgroundEnabled: false, bodyFontFamily: SANS, bodyFontSize: pt(8.2),
    bodyColor: col('ink'), cellPadding: mm(CELL_PAD) },
  captionStyle: { fontFamily: SANS, fontSize: pt(7.6), lineHeight: pt(10), color: col('ink'),
    labelBold: true, labelColor: col('accent'), gap: mm(2),
    note: { fontSize: pt(6.8), color: col('muted') } },
});

// ─── 2 · Content ────────────────────────────────────────────────────────────
const markdown = String.raw`---
Markdown sample · 53 lines · content.en.md
title: "Observation of Gravitational Waves from a Binary Black Hole Merger"
author: "B. P. Abbott et al. (LIGO Scientific Collaboration and Virgo Collaboration)"
---

# Observation of Gravitational Waves \\ from a Binary Black Hole Merger {style="letter" kicker="Letter · Gravitational-wave astronomy"}

:::callout{type="plate"}
::resource{id="fig1"}
:::

:::callout{type="front"}
:::paragraphs{style="byline"}
B. P. Abbott *et al.*[^authors]

(LIGO Scientific Collaboration and Virgo Collaboration)
:::

:::paragraphs{style="dates"}
(Received 21 January 2016; published 11 February 2016) · DOI: 10.1103/PhysRevLett.116.061102
:::

On September 14, 2015 at 09:50:45 UTC the two detectors of the Laser Interferometer Gravitational-Wave Observatory simultaneously observed a transient gravitational-wave signal. The signal sweeps upwards in frequency from 35 to 250 Hz with a peak gravitational-wave strain of $1.0\times10^{-21}$. It matches the waveform predicted by general relativity for the inspiral and merger of a pair of black holes and the ringdown of the resulting single black hole. The signal was observed with a matched-filter signal-to-noise ratio of 24 and a false alarm rate estimated to be less than 1 event per 203 000 years, equivalent to a significance greater than $5.1\sigma$. The source lies at a luminosity distance of $410^{+160}_{-180}$ Mpc corresponding to a redshift $z = 0.09^{+0.03}_{-0.04}$. In the source frame, the initial black hole masses are $36^{+5}_{-4}\,M_\odot$ and $29^{+4}_{-4}\,M_\odot$, and the final black hole mass is $62^{+4}_{-4}\,M_\odot$, with $3.0^{+0.5}_{-0.5}\,M_\odot c^2$ radiated in gravitational waves. All uncertainties define 90% credible intervals. These observations demonstrate the existence of binary stellar-mass black hole systems. This is the first direct detection of gravitational waves and the first observation of a binary black hole merger.
:::

[^authors]: Full author list given at the end of the published article; this abridged re-setting does not reproduce it.

## Introduction

In 1916, the year after the final formulation of the field equations of general relativity, Albert Einstein predicted the existence of gravitational waves. He found that the linearized weak-field equations had wave solutions: transverse waves of spatial strain that travel at the speed of light, generated by time variations of the mass quadrupole moment of the source [@einstein1916; @einstein1918]. Einstein understood that gravitational-wave amplitudes would be remarkably small; moreover, until the Chapel Hill conference in 1957 there was significant debate about the physical reality of gravitational waves [@saulson2011].

The discovery of the binary pulsar system PSR B1913+16 by Hulse and Taylor [@hulse1975] and subsequent observations of its energy loss by Taylor and Weisberg [@taylor1982] demonstrated the existence of gravitational waves. This discovery, along with emerging astrophysical understanding [@press1972], led to the recognition that direct observations of the amplitude and phase of gravitational waves would enable studies of additional relativistic systems and provide new tests of general relativity, especially in the dynamic strong-field regime.

A century after the fundamental predictions of Einstein and Schwarzschild, we report the first direct detection of gravitational waves and the first direct observation of a binary black hole system merging to form a single black hole. Our observations provide unique access to the properties of space-time in the strong-field, high-velocity regime and confirm predictions of general relativity for the nonlinear dynamics of highly disturbed black holes.[^abridged]

[^abridged]: Abridged here: Sections IV (Detector validation) and VII (Outlook), parts of Sections I, III, V and VI, some figure panels and most acknowledgments are left out; sections and references are renumbered.

## Observation

On September 14, 2015 at 09:50:45 UTC, the LIGO Hanford, WA, and Livingston, LA, observatories detected the coincident signal GW150914 shown in :ref{id="fig1"}. The initial detection was made by low-latency searches for generic gravitational-wave transients [@ligo-p1500229] and was reported within three minutes of data acquisition [@klimenko2016]. Subsequently, matched-filter analyses that use relativistic models of compact binary waveforms [@ligo-p1500269] recovered GW150914 as the most significant event from each detector for the observations reported here. Occurring within the 10-ms intersite propagation time, the events have a combined signal-to-noise ratio (SNR) of 24 [@usman2015].

Only the LIGO detectors were observing at the time of GW150914. The Virgo detector was being upgraded, and GEO 600, though not sufficiently sensitive to detect this event, was operating but not in observational mode. With only two detectors the source position is primarily determined by the relative arrival time and localized to an area of approximately 600 deg^2^ (90% credible region) [@ligo-p1500218; @ligo-p1500227].

The basic features of GW150914 point to it being produced by the coalescence of two black holes—i.e., their orbital inspiral and merger, and subsequent final black hole ringdown. Over 0.2 s, the signal increases in frequency and amplitude in about 8 cycles from 35 to 150 Hz, where the amplitude reaches a maximum. The most plausible explanation for this evolution is the inspiral of two orbiting masses, $m_1$ and $m_2$, due to gravitational-wave emission. At the lower frequencies, such evolution is characterized by the chirp mass [@blanchet1995]
$$\mathcal{M} = \frac{(m_1 m_2)^{3/5}}{(m_1+m_2)^{1/5}} = \frac{c^3}{G}\left[\frac{5}{96}\,\pi^{-8/3} f^{-11/3}\,\dot f\,\right]^{3/5} , \tag{1}$$
where $f$ and $\dot f$ are the observed frequency and its time derivative and $G$ and $c$ are the gravitational constant and speed of light. Estimating $f$ and $\dot f$ from the data in :ref{id="fig1"}, we obtain a chirp mass of $\mathcal{M} \simeq 30\,M_\odot$, implying that the total mass $M = m_1 + m_2$ is $\gtrsim 70\,M_\odot$ in the detector frame. This bounds the sum of the Schwarzschild radii of the binary components to $2GM/c^2 \gtrsim 210$ km. To reach an orbital frequency of 75 Hz (half the gravitational-wave frequency) the objects must have been very close and very compact; equal Newtonian point masses orbiting at this frequency would be only $\simeq 350$ km apart. A pair of neutron stars, while compact, would not have the required mass, while a black hole neutron star binary with the deduced chirp mass would have a very large total mass, and would thus merge at much lower frequency. This leaves black holes as the only known objects compact enough to reach an orbital frequency of 75 Hz without contact. Furthermore, the decay of the waveform after it peaks is consistent with the damped oscillations of a black hole relaxing to a final stationary Kerr configuration.

Below, we present a general-relativistic analysis of GW150914; :ref{id="fig2"} shows the calculated waveform using the resulting source parameters.

## Detectors

Gravitational-wave astronomy exploits multiple, widely separated detectors to distinguish gravitational waves from local instrumental and environmental noise, to provide source sky localization, and to measure wave polarizations. The LIGO sites each operate a single Advanced LIGO detector [@aasi2015], a modified Michelson interferometer (see :ref{id="fig3"}) that measures gravitational-wave strain as a difference in length of its orthogonal arms. Each arm is formed by two mirrors, acting as test masses, separated by $L_x = L_y = L = 4$ km. A passing gravitational wave effectively alters the arm lengths such that the measured difference is $\Delta L(t) = \delta L_x - \delta L_y = h(t)L$, where $h$ is the gravitational-wave strain amplitude projected onto the detector. This differential length variation alters the phase difference between the two light fields returning to the beam splitter, transmitting an optical signal proportional to the gravitational-wave strain to the output photodetector.

To achieve sufficient sensitivity to measure gravitational waves, the detectors include several enhancements to the basic Michelson interferometer. First, each arm contains a resonant optical cavity, formed by its two test mass mirrors, that multiplies the effect of a gravitational wave on the light phase by a factor of 300 [@drever1991]. Second, a partially transmissive power-recycling mirror at the input provides additional resonant buildup of the laser light in the interferometer as a whole [@drever1983; @schilling]: 20 W of laser input is increased to 700 W incident on the beam splitter, which is further increased to 100 kW circulating in each arm cavity. Third, a partially transmissive signal-recycling mirror at the output optimizes the gravitational-wave signal extraction by broadening the bandwidth of the arm cavities [@meers1988; @mizuno1993].
`; // title, abstract, sections I–III
const results = String.raw`## Searches
Markdown sample · 50 lines · content.results.en.md

We present the analysis of 16 days of coincident observations between the two LIGO detectors from September 12 to October 20, 2015. This is a subset of the data from Advanced LIGO’s first observational period that ended on January 12, 2016.

GW150914 is confidently detected by two different types of searches. One aims to recover signals from the coalescence of compact objects, using optimal matched filtering with waveforms predicted by general relativity. The other search targets a broad range of generic transient signals, with minimal assumptions about waveforms. These searches use independent methods, and their response to detector noise consists of different, uncorrelated, events. However, strong signals from binary black hole mergers are expected to be detected by both searches.

### Generic transient search

Designed to operate without a specific waveform model, this search identifies coincident excess power in time-frequency representations of the detector strain data [@klimenko2016; @klimenko2008], for signal frequencies up to 1 kHz and durations up to a few seconds.

The search reconstructs signal waveforms consistent with a common gravitational-wave signal in both detectors using a multidetector maximum likelihood method. Each event is ranked according to the detection statistic
$$\eta_c = \sqrt{2E_c/(1+E_n/E_c)} ,$$
where $E_c$ is the dimensionless coherent signal energy obtained by cross-correlating the two reconstructed waveforms, and $E_n$ is the dimensionless residual noise energy after the reconstructed signal is subtracted from the data. The statistic $\eta_c$ thus quantifies the SNR of the event and the consistency of the data between the two detectors.

Based on their time-frequency morphology, the events are divided into three mutually exclusive search classes, as described in [@ligo-p1500229]: events with time-frequency morphology of known populations of noise transients (class C1), events with frequency that increases with time (class C3), and all remaining events (class C2).

Detected with $\eta_c = 20.0$, GW150914 is the strongest event of the entire search. Consistent with its coalescence signal signature, it is found in the search class C3 of events with increasing time-frequency evolution. Measured on a background equivalent to over 67 400 years of data and including a trials factor of 3 to account for the search classes, its false alarm rate is lower than 1 in 22 500 years. This corresponds to a probability $< 2\times10^{-6}$ of observing one or more noise events as strong as GW150914 during the analysis time, equivalent to $4.6\sigma$. The left panel of :ref{id="fig4"} shows the C3 class results and background.

### Binary coalescence search

This search targets gravitational-wave emission from binary systems with individual masses from 1 to $99\,M_\odot$, total mass less than $100\,M_\odot$, and dimensionless spins up to 0.99 [@ligo-p1500269]. To model systems with total mass larger than $4\,M_\odot$, we use the effective-one-body formalism [@buonanno2000], which combines results from the post-Newtonian approach [@blanchet1995; @blanchet2004] with results from black hole perturbation theory and numerical relativity. The waveform model [@taracchini2014; @purrer2014] assumes that the spins of the merging objects are aligned with the orbital angular momentum, but the resulting templates can, nonetheless, effectively recover systems with misaligned spins in the parameter region of GW150914 [@ligo-p1500269]. Approximately 250 000 template waveforms are used to cover this parameter space.

The search calculates the matched-filter signal-to-noise ratio $\rho(t)$ for each template in each detector and identifies maxima of $\rho(t)$ with respect to the time of arrival of the signal [@allen2012; @sathyaprakash1991; @owen1999]. For each maximum we calculate a chi-squared statistic $\chi^2_r$ to test whether the data in several different frequency bands are consistent with the matching template [@allen2005]. Values of $\chi^2_r$ near unity indicate that the signal is consistent with a coalescence. If $\chi^2_r$ is greater than unity, $\rho(t)$ is reweighted as $\hat\rho = \rho/\{[1+(\chi^2_r)^3]/2\}^{1/6}$ [@abadie2012; @babak2013]. The final step enforces coincidence between detectors by selecting event pairs that occur within a 15-ms window and come from the same template. The 15-ms window is determined by the 10-ms intersite propagation time plus 5 ms for uncertainty in arrival time of weak signals. We rank coincident events based on the quadrature sum $\hat\rho_c$ of the $\hat\rho$ from both detectors [@usman2015].

To produce background data for this search the SNR maxima of one detector are time shifted and a new set of coincident events is computed. Repeating this procedure $\sim 10^7$ times produces a noise background analysis time equivalent to 608 000 years.

To account for the search background noise varying across the target signal space, candidate and background events are divided into three search classes based on template length. The right panel of :ref{id="fig4"} shows the background for the search class of GW150914. The GW150914 detection-statistic value of $\hat\rho_c = 23.6$ is larger than any background event, so only an upper bound can be placed on its false alarm rate. Across the three search classes this bound is 1 in 203 000 years. This translates to a false alarm probability $< 2\times10^{-7}$, corresponding to $5.1\sigma$.

When an event is confidently identified as a real gravitational-wave signal, as for GW150914, the background used to determine the significance of other events is reestimated without the contribution of this event. This is the background distribution shown as a purple line in the right panel of :ref{id="fig4"}. Based on this, the second most significant event has a false alarm rate of 1 per 2.3 years and corresponding Poissonian false alarm probability of 0.02. Waveform analysis of this event indicates that if it is astrophysical in origin it is also a binary black hole merger [@ligo-p1500269].

## Source discussion

The matched-filter search is optimized for detecting signals, but it provides only approximate estimates of the source parameters. To refine them we use general relativity-based models [@taracchini2014; @purrer2014; @hannam2014; @khan2016], some of which include spin precession, and for each model perform a coherent Bayesian analysis to derive posterior distributions of the source parameters [@veitch2015]. The initial and final masses, final spin, distance, and redshift of the source are shown in :ref{id="tab1"}. The spin of the primary black hole is constrained to be $< 0.7$ (90% credible interval) indicating it is not maximally spinning, while the spin of the secondary is only weakly constrained. These source parameters are discussed in detail in [@ligo-p1500218]. The parameter uncertainties include statistical errors and systematic errors from averaging the results of different waveform models.

Using the fits to numerical simulations of binary black hole mergers in [@healy2014; @husa2016], we provide estimates of the mass and spin of the final black hole, the total energy radiated in gravitational waves, and the peak gravitational-wave luminosity [@ligo-p1500218]. The estimated total energy radiated in gravitational waves is $3.0^{+0.5}_{-0.5}\,M_\odot c^2$. The system reached a peak gravitational-wave luminosity of $3.6^{+0.5}_{-0.4}\times10^{56}$ erg/s, equivalent to $200^{+30}_{-20}\,M_\odot c^2/\mathrm{s}$.

GW150914 demonstrates the existence of stellar-mass black holes more massive than $\simeq 25\,M_\odot$, and establishes that binary black holes can form in nature and merge within a Hubble time. Binary black holes have been predicted to form both in isolated binaries [@tutukov1973; @lipunov1997; @belczynski2016] and in dense environments by dynamical interactions [@sigurdsson1993; @portegieszwart2000; @rodriguez2015]. The formation of such massive black holes from stellar evolution requires weak massive-star winds, which are possible in stellar environments with metallicity lower than $\simeq 1/2$ the solar value [@belczynski2010; @spera2015].

## Conclusion

The LIGO detectors have observed gravitational waves from the merger of two stellar-mass black holes. The detected waveform matches the predictions of general relativity for the inspiral and merger of a pair of black holes and the ringdown of the resulting single black hole. These observations demonstrate the existence of binary stellar-mass black hole systems. This is the first direct detection of gravitational waves and the first observation of a binary black hole merger.

## Acknowledgments {style="back"}

The authors gratefully acknowledge the support of the United States National Science Foundation (NSF) for the construction and operation of the LIGO Laboratory and Advanced LIGO as well as the Science and Technology Facilities Council (STFC) of the United Kingdom, the Max-Planck Society (MPS), and the State of Niedersachsen, Germany, for support of the construction of Advanced LIGO and construction and operation of the GEO600 detector.

:::bibliography{title=""}

:::paragraphs{style="colophon"}
Abridged from B. P. Abbott et al. (LIGO Scientific Collaboration and Virgo Collaboration), Phys. Rev. Lett. 116, 061102 (2016), doi:10.1103/PhysRevLett.116.061102, CC BY 3.0: sections and references renumbered, figures redrawn, captions shortened. Figure data from the Gravitational Wave Open Science Center (gwosc.org), a service of the LIGO Scientific Collaboration, the Virgo Collaboration and KAGRA (CC BY 4.0). Set in Gelasio and Albert Sans (SIL OFL); formulas by MathJax.
:::
`; // sections IV–VI, acknowledgments, colophon
const refs = `:::references{format=bibtex}
Markdown sample · 49 lines · content.refs.en.md
@string{spaw={Sitzungsber. K. Preuss. Akad. Wiss.}}
@string{cqg={Classical Quantum Gravity}}
@string{prd={Phys. Rev. D}}
@string{prl={Phys. Rev. Lett.}}
@string{apj={Astrophys. J.}}
@article{einstein1916,author={Einstein, A.},journal=spaw,volume=1,pages={688},year=1916}
@article{einstein1918,author={Einstein, A.},journal=spaw,volume=1,pages={154},year=1918}
@article{saulson2011,author={Saulson, P. R.},journal={Gen. Relativ. Gravit.},volume=43,pages={3289},year=2011}
@article{blanchet1995,author={Blanchet, L. and Damour, T. and Iyer, B. R. and Will, C. M. and Wiseman, A. G.},journal=prl,volume=74,pages={3515},year=1995}
@article{hulse1975,author={Hulse, R. A. and Taylor, J. H.},journal=apj,volume=195,pages={L51},year=1975}
@article{taylor1982,author={Taylor, J. H. and Weisberg, J. M.},journal=apj,volume=253,pages={908},year=1982}
@article{press1972,author={Press, W. and Thorne, K.},journal={Annu. Rev. Astron. Astrophys.},volume=10,pages={335},year=1972}
@article{aasi2015,author={{J. Aasi et al.}},journal=cqg,volume=32,pages={074001},year=2015}
@misc{ligo-p1500218,author={{B. Abbott et al.}},url={https://dcc.ligo.org/LIGO-P1500218/public/main}}
@misc{ligo-p1500229,author={{B. Abbott et al.}},url={https://dcc.ligo.org/LIGO-P1500229/public/main}}
@misc{klimenko2016,author={{S. Klimenko et al.}},note={arXiv:1511.05999 [Phys. Rev. D (to be published)]}}
@misc{ligo-p1500269,author={{B. Abbott et al.}},url={https://dcc.ligo.org/LIGO-P1500269/public/main}}
@misc{usman2015,author={{S. A. Usman et al.}},note={arXiv:1508.02357}}
@misc{ligo-p1500227,author={{B. Abbott et al.}},url={https://dcc.ligo.org/LIGO-P1500227/public/main}}
@book{drever1991,author={Drever, R. W. P.},title={The Detection of Gravitational Waves},editor={Blair, D. G.},publisher={Cambridge University Press},address={Cambridge, England},year={1991}}
@incollection{drever1983,author={{R. W. P. Drever et al.}},booktitle={Quantum Optics, Experimental Gravity, and Measurement Theory},editor={Meystre, P. and Scully, M. O.},series={NATO ASI, Ser. B},volume={94},publisher={Plenum Press},address={New York},year={1983},pages={503--514}}
@unpublished{schilling,author={Schilling, R.},note={(unpublished)}}
@article{meers1988,author={Meers, B. J.},journal=prd,volume=38,pages={2317},year=1988}
@article{mizuno1993,author={Mizuno, J. and Strain, K. A. and Nelson, P. G. and Chen, J. M. and Schilling, R. and R{\\"u}diger, A. and Winkler, W. and Danzmann, K.},journal={Phys. Lett. A},volume=175,pages={273},year=1993}
@article{klimenko2008,author={Klimenko, S. and Yakushin, I. and Mercer, A. and Mitselmakher, G.},journal=cqg,volume=25,pages={114029},year=2008}
@article{buonanno2000,author={Buonanno, A. and Damour, T.},journal=prd,volume=62,pages={064015},year=2000}
@article{blanchet2004,author={Blanchet, L. and Damour, T. and Esposito-Far{\\\`e}se, G. and Iyer, B. R.},journal=prl,volume=93,pages={091101},year=2004}
@article{taracchini2014,author={{A. Taracchini et al.}},journal=prd,volume=89,pages={061502},year=2014}
@article{purrer2014,author={P{\\"u}rrer, M.},journal=cqg,volume=31,pages={195010},year=2014}
@article{allen2012,author={Allen, B. and Anderson, W. G. and Brady, P. R. and Brown, D. A. and Creighton, J. D. E.},journal=prd,volume=85,pages={122006},year=2012}
@article{sathyaprakash1991,author={Sathyaprakash, B. S. and Dhurandhar, S. V.},journal=prd,volume=44,pages={3819},year=1991}
@article{owen1999,author={Owen, B. J. and Sathyaprakash, B. S.},journal=prd,volume=60,pages={022002},year=1999}
@article{allen2005,author={Allen, B.},journal=prd,volume=71,pages={062001},year=2005}
@article{abadie2012,author={{J. Abadie et al.}},journal=prd,volume=85,pages={082002},year=2012}
@article{babak2013,author={{S. Babak et al.}},journal=prd,volume=87,pages={024033},year=2013}
@article{hannam2014,author={Hannam, M. and Schmidt, P. and Boh{\\'e}, A. and Haegel, L. and Husa, S. and Ohme, F. and Pratten, G. and P{\\"u}rrer, M.},journal=prl,volume=113,pages={151101},year=2014}
@article{khan2016,author={Khan, S. and Husa, S. and Hannam, M. and Ohme, F. and P{\\"u}rrer, M. and Jim{\\'e}nez Forteza, X. and Boh{\\'e}, A.},journal=prd,volume=93,pages={044007},year=2016}
@article{veitch2015,author={{J. Veitch et al.}},journal=prd,volume=91,pages={042003},year=2015}
@article{healy2014,author={Healy, J. and Lousto, C. O. and Zlochower, Y.},journal=prd,volume=90,pages={104004},year=2014}
@article{husa2016,author={Husa, S. and Khan, S. and Hannam, M. and P{\\"u}rrer, M. and Ohme, F. and Jim{\\'e}nez Forteza, X. and Boh{\\'e}, A.},journal=prd,volume=93,pages={044006},year=2016}
@article{tutukov1973,author={Tutukov, A. and Yungelson, L.},journal={Nauchnye Informatsii},volume=27,pages={70},year=1973}
@article{lipunov1997,author={Lipunov, V. M. and Postnov, K. A. and Prokhorov, M. E.},journal={Mon. Not. R. Astron. Soc.},volume=288,pages={245},year=1997}
@misc{belczynski2016,author={Belczynski, K. and Repetto, S. and Holz, D. and O'Shaughnessy, R. and Bulik, T. and Berti, E. and Fryer, C. and Dominik, M.},note={arXiv:1510.04615 [Astrophys. J. (to be published)]}}
@article{sigurdsson1993,author={Sigurdsson, S. and Hernquist, L.},journal={Nature (London)},volume=364,pages={423},year=1993}
@article{portegieszwart2000,author={Portegies Zwart, S. F. and McMillan, S. L. W.},journal={Astrophys. J. Lett.},volume=528,pages={L17},year=2000}
@article{rodriguez2015,author={Rodriguez, C. L. and Morscher, M. and Pattabiraman, B. and Chatterjee, S. and Haster, C.-J. and Rasio, F. A.},journal=prl,volume=115,pages={051101},year=2015}
@article{belczynski2010,author={Belczynski, K. and Bulik, T. and Fryer, C. L. and Ruiter, A. and Valsecchi, F. and Vink, J. S. and Hurley, J. R.},journal=apj,volume=714,pages={1217},year=2010}
@article{spera2015,author={Spera, M. and Mapelli, M. and Bressan, A.},journal={Mon. Not. R. Astron. Soc.},volume=451,pages={4086},year=2015}
:::
`; // BibTeX of the works the kept text cites
const captions = String.raw`fig1
Markdown sample · 28 lines · content.captions.en.md
The gravitational-wave event GW150914 observed by the LIGO Hanford (H1, left column panels) and Livingston (L1, right column panels) detectors. Times are shown relative to September 14, 2015 at 09:50:45 UTC. For visualization, all time series are filtered with a 35–350 Hz bandpass filter to suppress large fluctuations outside the detectors’ most sensitive frequency band, and band-reject filters to remove the strong instrumental spectral lines. Top row, left: H1 strain. Top row, right: L1 strain. GW150914 arrived first at L1 and 6.9^+0.5^~−0.4~ ms later at H1; for a visual comparison, the H1 data are also shown, shifted in time by this amount and inverted (to account for the detectors’ relative orientations). Second row: Gravitational-wave strain projected onto each detector in the 35–350 Hz band. Solid lines show a numerical relativity waveform for a system with parameters consistent with those recovered from GW150914 confirmed to 99.9% by an independent calculation. Third row: Residuals after subtracting the filtered numerical relativity waveform from the filtered detector time series.

fig1.note
Redrawn from GWOSC open data (LIGO and Virgo Collaborations, CC BY 4.0); reconstructions and time–frequency row omitted.

fig2
Top: Estimated gravitational-wave strain amplitude from GW150914 projected onto H1. This shows the full bandwidth of the waveforms, without the filtering used for :ref{id="fig1"}. Bottom: The Keplerian effective black hole separation in units of Schwarzschild radii (*R*~S~ = 2*GM*/*c*^2^) and the effective relative velocity given by the post-Newtonian parameter *v*/*c*.

fig2.note
Redrawn from GWOSC data (CC BY 4.0); insets omitted; the panel prints the velocity formula of the published caption.

fig3
Simplified diagram of an Advanced LIGO detector (not to scale). A gravitational wave propagating orthogonally to the detector plane and linearly polarized parallel to the 4-km optical cavities will have the effect of lengthening one 4-km arm and shortening the other during one half-cycle of the wave; these length changes are reversed during the other half-cycle.

fig3.note
Redrawn after the published diagram; its insets (a) and (b) are omitted.

fig4
Search results from the generic transient search (left) and the binary coalescence search (right). These histograms show the number of candidate events (orange markers) and the mean number of background events (black lines) in the search class where GW150914 was found as a function of the search detection statistic and with a bin width of 0.2. Right: The tail in the black-line background of the binary coalescence search is due to random coincidences of GW150914 in one detector with noise in the other detector. (This type of event is practically absent in the generic transient search background because they do not pass the time-frequency consistency requirements used in that search.) The purple curve is the background excluding those coincidences, which is used to assess the significance of the second strongest event.

fig4.note
Redrawn from GWOSC data (CC BY 4.0); the C2 + C3 search and the significance scales omitted.

tab1
Source parameters for GW150914. We report median values with 90% credible intervals that include statistical errors, and systematic errors from averaging the results of different waveform models. Masses are given in the source frame; to convert to the detector frame multiply by (1 + *z*). The source redshift assumes standard cosmology.

tab1.note
Values as published. The citations in the caption are omitted.
`; // "fig1" on a line, then its caption
const source = [markdown, results, refs].join('\n\n');
const caption = Object.fromEntries(captions.trim().split(/\n\s*\n/)
  .map((part) => [part.slice(0, part.indexOf('\n')), part.slice(part.indexOf('\n') + 1)]));

// #region table: Table I, its asymmetric errors set by MathJax and drawn into the cells
// Cells take no maths: each value is an SVG of MathJax paths at 9 pt, its width given as a
// fraction of the cell's inner width.
const CELL_PAD = 0.9; // mm
const VALUE_W = COLUMN * (1 / 2.3) - 2 * CELL_PAD; // the value column: weights [1.3, 1]
const VALUES = [['Primary black hole mass', '36^{+5}_{-4}\\,M_\\odot'],
  ['Secondary black hole mass', '29^{+4}_{-4}\\,M_\\odot'],
  ['Final black hole mass', '62^{+4}_{-4}\\,M_\\odot'],
  ['Final black hole spin', '0.67^{+0.05}_{-0.07}'],
  ['Luminosity distance', '410^{+160}_{-180}\\;\\mathrm{Mpc}'],
  ['Source redshift *z*', '0.09^{+0.03}_{-0.04}']];
const valueSvg = (tex) => { // 9 pt maths: 1000 MathJax units to the em
  const r = renderMath(tex, false, 100);
  const k = (9 * 25.4) / 72 / 1000; // mm per unit
  const [w, h] = [r.viewBox.width * k, r.viewBox.height * k];
  return { w, h, svg: svg(w, h, `<g transform="scale(${k}) translate(${-r.viewBox.minX} `
    + `${-r.viewBox.minY})" fill="${palette.ink}">${r.paths.map((p) => `<path d="${p.d}"/>`)
      .join('')}</g>`) };
};
// #endregion

// #region art: the four figures, drawn from GWOSC's open data in the page's palette
// GWOSC's Fig. 1, 2 and 4 files (strain in 10^-21, log10 of counts) on a regular grid, each
// sample written as its change from the one before: a base-64 digit, 32 for none.
const SERIES = { // [first value, step, one character per sample]
  hObs: [0.025, 0.03,
    'eghgfegiigddfkmkeaaeijhgfhjhgdcdimplfXWZionhbadkmkfdglnjcZZgjjebdhlkdZZfjmiijmlhcbfjkgdaZa'
    + 'dgkkigefhijiihifedefhhhggfhihhfefghhiijifeddddgkjhddgjifbdfjkhdcdhiihgefghjjhedeghihhjkjhf'
    + 'fgihgfegfeeeggeedghhcabgijjiijjihgeeghggffhihhimnjecdgigecddfecacdfgghiggfgikkjhijkljihihg'
    + 'ffghgeccbehhfbWWbinmhbcglmjgeehloomgefkpohXUVaeecaZbfiiijjmmjijnppkfaZaYXWXZfjnqrtsojaSNOV'
    + 'hszynaQRalqpibbchiijjjgdbdhkkgdcdfijifecdehjkmjfdegheccfjmkigfffeghih'],
  lObs: [-0.119, 0.03,
    'deghhhfgklifdegjihddgjjgdcdhjjgdcehlmjgdeikkhbaafhggfghhhgefgiigedeghiijiiijhedceiiigeeffg'
    + 'hiihggeddgihgeddfhihikjgdbbfkomhdbdfgjlljhecdghgeeghiigeddffeeehiifdcfhfffhjmmkifffddehjkg'
    + 'dcfijjhhihgghiigdceggdcbcfigfdeijjiffhihedgmpoicXYeknnjhgikieZYadfhhhfedefffdfgjjihhfhhjln'
    + 'mjfddghggfeeegffaYYchjihgihiiiiilmnlifdefdcbbbccbbdhjknnnmllljfZVSWbfgjnuxtjVMOZmuuofZXafg'
    + 'ggggefefhkmlhebcfhigddfjmnjfddfiigfefihgffhigfedefghhgffgghhfefghgghi'],
  hNR: [0.0, 0.03,
    'ggghgggfgfgggggghggfgfggfggggggggghghhghggggggghghghggfgffggfgggfggggghghgggfggggghghgggff'
    + 'gfgfgfggfggggghghghgggggghhhhhgggggggfgggggfggggggggfgffffgggggggfgfgfggggghghghhhihihhhgg'
    + 'gghghggggfffeefefeffefffggghhghhghhhhiiiiihighggggfgffffefefffeffeefefgggihhiihihiiiiiiiih'
    + 'hghggfgeeddccdcddeeffffghhijjkklklkkkjjihffdcaaaaabbddffhiklmnonnljhebZXVVWZcgmrvxwriYPLPX'
    + 'lvyvkaSSYgopmhcacfikkifedffhiihhfgfggfgffgfgfgggfhgghhhggfggggghhhhhg'],
  lNR: [0.031, 0.03,
    'gfgghgghggggggggggfgfgfgfggghggfggfgggghghghggghgggggggfgfggghggggggfgggghghghgghgggggggfg'
    + 'fgfggggggfgffgfgggghggghgggghggggggghghghhghgfggggghggghfggfgfgffffffffgfgghggggfhgghihhih'
    + 'highhhghgggffffgfffgffefeeffgfghghghhghihhihhhhghhhhhhgggeffeefeffeffeefffgggghhhhiiijjjjj'
    + 'ihhhhgfgffeeddccdcddeeefggiikkllllkkjhhgfedcbbaabcdfhjlnnponkheaWUTUZgnuxuncURTclssngaYafj'
    + 'lkhedcfgiiigffefgghhgghghghgggghgggfgffggggghgfgffgfggghhgghgggggghgf'],
  hFull: [0.436, 0.03,
    'fgffffeffefefefeffefffffgfgfggghghhghhihhihihihiihhihhhhhhghggggfgfffffeffeefeefeefeffffff'
    + 'ggfhgghghhihhihiiihiiihihihhhhghgggfgffffefeeeeeefeeeeffefgfgfghghhhhihiiiiiiiiiiiihhhhhgg'
    + 'ggfffefeeeeedeedeeefeffgfgghhhhihijijijijiiiiihhghgffffeeededdddedeeeeffgghhhiijijkjjjjjji'
    + 'iihggffeeedcdcccdcdeeefghhijjklklklkjjiigfeddbbaababcdegijkmnooonlkhebZWVUVYbgmrwxwqiXOKNX'
    + 'lw1wlZRSZhppnhcabeijkhgeeeghihgfgfggghgggfggghgggfgggghggfgggggghfggg'],
  sep: [4.705, 0.01,
    'ffeffeffefffeffefefefefefefefeefeeefeeeeeeeeeedeeedededdedddddcddccccccbbbaaaZZYXWVUSQNL'],
  vel: [0.326, 0.001,
    'ghghghghgghghghghhghghghghhghhghhghhhghhhhhhhhhhhhhhhhihhihihiiihjiiijjjjjkkklmmnppsuy28'],
  pyBg: [0.453, 0.1,
    'lihdcccbcbccccdeeefeeeheggdihhdiiggfWkcijOweVU3hRXggggg-icStiPU-iVUXggggggggggggg'],
  pyBgEx: [0.453, 0.1,
    'lihdcccbcbccccddedfdffcZfdZXpgXgggggggggggggggggggggggggggggggggggggggggggggggggg'],
  cwbBg3: [1.247, 0.1,
    'ededdeddddeddddddddddeecgZOyOygOgggggggggggggggggggggggggggggggggggggggggggggggggggggg'],
};
const B64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_';
const decode = (key) => { const [first, step, s] = SERIES[key]; const out = [first];
  for (const c of s) out.push(out.at(-1) + step * (B64.indexOf(c) - 32));
  return out; };
const PX_PER_MM = 10; // drawn in mm, declared at 10 px to the mm
const R = (x) => Math.round(x * 100) / 100;
const svg = (w, h, body) => `<svg xmlns="http://www.w3.org/2000/svg" width="${R(w * PX_PER_MM)}" `
  + `height="${R(h * PX_PER_MM)}" viewBox="0 0 ${R(w)} ${R(h)}">${body}</svg>`;
const line = (x1, y1, x2, y2, color, width, extra = '') => `<path d="M${R(x1)} ${R(y1)}L${R(x2)} `
  + `${R(y2)}" stroke="${color}" stroke-width="${width}" fill="none" ${extra}/>`;
const poly = (pts, color, width, extra = '') => `<path d="${pts.map(([x, y], i) =>
  `${i ? 'L' : 'M'}${R(x)} ${R(y)}`).join('')}" fill="none" `
  + `stroke="${color}" stroke-width="${width}" stroke-linejoin="round" ${extra}/>`;
// Labels are MathJax paths, \textsf for words: an SVG drawn as an image cannot use the
// page's web fonts (gotcha: svg-no-webfonts), and paths stay vector in the PDF.
function tex(markup, x, y, size, anchor = 0, color = palette.ink, rotate = false) {
  const r = renderMath(markup, false, 100);
  const k = size / 1000;
  const dx = -anchor * r.viewBox.width * k;
  return `<g transform="translate(${R(x)} ${R(y)})${rotate ? ' rotate(-90)' : ''} `
    + `translate(${R(dx)} 0) scale(${k})" fill="${color}">`
    + `${r.paths.map((p) => `<path d="${p.d}"/>`).join('')}</g>`;
}
const sf = (s) => `\\textsf{${s}}`;
function panel(x, y, w, h, [t0, t1], [v0, v1], series) {
  const X = (t) => x + ((t - t0) / (t1 - t0)) * w;
  const Y = (v) => y + h - ((Math.max(v0, Math.min(v1, v)) - v0) / (v1 - v0)) * h;
  let out = `<rect x="${R(x)}" y="${R(y)}" width="${R(w)}" height="${R(h)}" fill="none" `
    + `stroke="${palette.rule}" stroke-width="0.2"/>`;
  if (v0 < 0) out += line(x, Y(0), x + w, Y(0), palette.rule, 0.15);
  for (const [values, start, step, color, width] of series) {
    const pts = values.map((v, i) => [start + i * step, v]).filter(([t]) => t >= t0 && t <= t1);
    out += poly(pts.map(([t, v]) => [X(t), Y(v)]), color, width);
  }
  return { out, X, Y };
}
const residual = (d) => { // the published residual is the data less the waveform
  const nr = decode(`${d}NR`);
  return decode(`${d}Obs`).map((v, i) => v - nr[i]);
};
const DT = 8 / 16384; // s: every eighth sample of the 16 384 Hz files

function figure1(W) { // the hero: three rows, Hanford left, Livingston right
  const [LM, GAP, TOPR, RH, RG] = [12, 5, 6, 14, 2];
  const PW = (W - LM - GAP - 1) / 2;
  const H = TOPR + 3 * RH + 2 * RG + 8.4;
  const T = [0.25, 0.46];
  const V = [-1.35, 1.35];
  const hObs = decode('hObs');
  const flipped = hObs.map((v) => -v); // H1 inverted, and moved 6.9 ms earlier below
  const rowsOf = [[[[hObs, 0.25, DT, data.hanford, 0.32]],
    [[decode('lObs'), 0.25, DT, data.livingston, 0.32], [flipped, 0.25 - 0.0069, DT,
      data.hanford, 0.22]]],
  [[[decode('hNR'), 0.25, DT, data.hanford, 0.38]], [[decode('lNR'), 0.25, DT,
    data.livingston, 0.38]]],
  [[[residual('h'), 0.25, DT, palette.muted, 0.28]], [[residual('l'), 0.25, DT,
    palette.muted, 0.28]]]];
  const labels = [['H1 observed', 'L1 observed'], ['Numerical relativity',
    'Numerical relativity'], ['Residual', 'Residual']];
  let out = tex(sf('Hanford, Washington (H1)'), LM, 3.8, 3.1, 0, data.hanford)
    + tex(sf('Livingston, Louisiana (L1)'), LM + PW + GAP, 3.8, 3.1, 0, data.livingston)
    + tex(sf('with H1 shifted and inverted'), W - 1, 3.8, 2.5, 1, data.hanford);
  rowsOf.forEach((row, r) => row.forEach((series, c) => {
    const x = LM + c * (PW + GAP);
    const y = TOPR + r * (RH + RG);
    const p = panel(x, y, PW, RH, T, V, series);
    out += p.out + tex(sf(labels[r][c]), x + 1.6, y + 3.2, 2.5, 0, palette.muted);
    if (c === 0) {
      for (const v of [-1, 0, 1]) out += tex(v.toFixed(1), x - 1.2,
        p.Y(v) + 0.9, 2.4, 1, palette.muted);
    }
    if (r === 2) {
      for (const t of [0.3, 0.35, 0.4, 0.45]) {
        out += line(p.X(t), y + RH, p.X(t), y + RH + 0.9, palette.muted, 0.2)
          + tex(t.toFixed(2), p.X(t), y + RH + 4, 2.4, 0.5, palette.muted);
      }
      out += tex(sf('Time (s)'), x + PW / 2, y + RH + 7.8, 2.6, 0.5, palette.muted);
    }
  }));
  out += tex(`${sf('Strain (')}10^{-21}${sf(')')}`, 3.2, TOPR + (3 * RH + 2 * RG) / 2, 2.7, 0.5,
    palette.muted, true);
  return svg(W, H, out);
}

function figure2(W) { // one column: the full-band strain, then separation and velocity
  const [LM, RM, PH] = [10, 10, 20];
  const PW = W - LM - RM;
  const H = 6 + PH + 4 + PH + 11;
  const T = [0.25, 0.46];
  const top = panel(LM, 6, PW, PH, T, [-1.4, 1.4],
    [[decode('hFull'), 0.25, DT, data.hanford, 0.32]]);
  const y2 = 6 + PH + 4;
  const sep = panel(LM, y2, PW, PH, T, [0, 5],
    [[decode('sep'), 0.25, 32 / 16384, palette.ink, 0.38]]);
  const vel = panel(LM, y2, PW, PH, T, [0.3, 0.6],
    [[decode('vel'), 0.25, 32 / 16384, data.livingston, 0.38]]);
  let out = top.out + sep.out + vel.out
    + tex(`${sf('Strain (')}10^{-21}${sf(')')}`, 3, 6 + PH / 2, 2.5, 0.5, palette.muted, true)
    + tex(`${sf('Separation (')}R_S${sf(')')}`, 3, y2 + PH / 2, 2.5, 0.5, palette.ink, true)
    + tex(`${sf('Velocity (')}c${sf(')')}`, W - 1.2, y2 + PH / 2, 2.5, 0.5, data.livingston,
      true)
    + tex('v/c = (GM\\pi f/c^3)^{1/3}', LM + 2, vel.Y(0.36), 2.6, 0, data.livingston)
    + tex(sf('Separation'), LM + 2, sep.Y(3.9), 2.5, 0, palette.ink);
  const tick = (v, y) => tex(String(v), LM - 1.2, y + 0.9, 2.3, 1, palette.muted);
  for (const v of [-1, 0, 1]) out += tick(v, top.Y(v));
  for (const v of [1, 2, 3, 4]) out += tick(v, sep.Y(v));
  for (const v of [0.3, 0.4, 0.5]) {
    out += tex(v.toFixed(1), LM + PW + 1.2, vel.Y(v) + 0.9, 2.3, 0, data.livingston);
  }
  for (const t of [0.3, 0.35, 0.4, 0.45]) {
    out += tex(t.toFixed(2), top.X(t), y2 + PH + 4, 2.3, 0.5, palette.muted);
  }
  return svg(W, H, out + tex(sf('Time (s)'), LM + PW / 2, H - 1.4, 2.5, 0.5, palette.muted));
}

function figure3(W) { // the interferometer, after the published diagram (not to scale)
  const [H, bx, by, iy, sy] = [57, 28, 40, 27, 46]; // height; beam splitter; mirror heights
  const beam = (x1, y1, x2, y2, w = 0.9) => line(x1, y1, x2, y2, data.hanford, w,
    'stroke-opacity="0.55"');
  const mirror = (x, y, vertical, color = palette.ink) => (vertical
    ? `<rect x="${x - 0.7}" y="${y - 3}" width="1.4" height="6" fill="${color}"/>`
    : `<rect x="${x - 3}" y="${y - 0.7}" width="6" height="1.4" fill="${color}"/>`);
  const label = (s, x, y, anchor = 0) => tex(sf(s), x, y, 2.4, anchor, palette.ink);
  const small = (s, x, y, anchor = 0) => tex(sf(s), x, y, 2.2, anchor, palette.muted);
  const mid = (40 + W - 6) / 2; // the middle of the inline arm
  return svg(W, H, beam(9, by, bx, by) + beam(bx, by, W - 6, by, 1.6) + beam(bx, by, bx, 4, 1.6)
    + beam(bx, by, bx, 51, 0.6)
    + `<rect x="1" y="${by - 3}" width="8" height="6" rx="0.6" fill="${palette.ink}"/>`
    + mirror(17, by, true) + mirror(40, by, true, palette.accent)
    + mirror(W - 6, by, true, palette.accent) + mirror(bx, iy, false, palette.accent)
    + mirror(bx, 4, false, palette.accent) + mirror(bx, sy, false)
    + line(bx - 3, by + 3, bx + 3, by - 3, palette.ink, 0.8)
    + `<rect x="${bx - 2.2}" y="51" width="4.4" height="3.4" fill="${palette.muted}"/>`
    + label('Laser source', 1, by + 6.4) + small('20 W', 5, by - 4.2, 0.5)
    + label('Power recycling', 17, by - 7.4, 0.5) + small('700 W', 22.5, by - 1.4, 0.5)
    + label('Beam splitter', bx + 2.4, by + 4.4) + label('Signal recycling', bx + 4, sy + 1.2)
    + label('Photodetector', bx + 4, 54) + label('Input test mass', 41.6, by - 4.2)
    + label('End test mass', W - 7.6, by - 4.2, 1) + label('Input test mass', bx + 4, iy + 1.2)
    + label('End test mass', bx + 4, 5.2) + small('4 km', mid, by + 4.4, 0.5)
    + small('4 km', bx - 2, (4 + iy) / 2 + 1, 1) + small('100 kW', mid, by - 1.4, 0.5)
    + line(40, by + 2, W - 6, by + 2, palette.muted, 0.15)
    + line(bx - 1.2, 4, bx - 1.2, iy, palette.muted, 0.15));
}

function figure4(W) { // two histograms on a log scale, from GWOSC's Fig. 4 data
  const [LM, GAP, PH] = [12, 9, 44];
  const PW = (W - LM - GAP - 2) / 2;
  const H = 4 + PH + 9.4;
  const X = [7, 24.5];
  const LV = [-7, 2.6]; // 10^-7 to 400 events
  const stairs = (logs, first, p) => { // one step per 0.2-wide bin, broken where it is empty
    const pts = [];
    logs.forEach((v, i) => {
      if (v <= LV[0]) { if (pts.length && pts[pts.length - 1]) pts.push(null); return; }
      const [a, b] = [first + 0.2 * i, first + 0.2 * (i + 1)];
      pts.push([p.X(a), p.Y(v)], [p.X(b), p.Y(v)]);
    });
    return pts.reduce((acc, q) => {
      if (q) acc[acc.length - 1].push(q); else acc.push([]);
      return acc;
    }, [[]]).filter((run) => run.length);
  };
  const marks = (list, p, color) => list.map(([x, n]) => `<circle cx="${R(p.X(x + 0.1))}" `
    + `cy="${R(p.Y(Math.log10(n)))}" r="0.75" fill="${color}"/>`).join('');
  const sides = [
    { x: LM, label: '\\eta_c', lines: [['cwbBg3', 7.0724, palette.ink]],
      dots: [[C3, data.hanford]] },
    { x: LM + PW + GAP, label: '\\hat\\rho_c', lines: [['pyBg', 7.2159, palette.ink],
      ['pyBgEx', 7.2159, data.purple]], dots: [[PYCBC, data.hanford]] },
  ];
  let out = '';
  for (const side of sides) {
    const p = panel(side.x, 4, PW, PH, X, LV, []);
    out += p.out;
    for (const [key, first, color] of side.lines) {
      for (const run of stairs(decode(key), first, p)) out += poly(run, color, 0.35);
    }
    for (const [list, color] of side.dots) out += marks(list, p, color);
    for (const e of [-6, -4, -2, 0, 2]) {
      out += line(side.x, p.Y(e), side.x + 0.9, p.Y(e), palette.muted, 0.2)
        + tex(`10^{${e}}`, side.x - 1.2, p.Y(e) + 0.9, 2.3, 1, palette.muted);
    }
    for (const x of [8, 12, 16, 20, 24]) {
      out += line(p.X(x), 4 + PH, p.X(x), 4 + PH - 0.9, palette.muted, 0.2)
        + tex(String(x), p.X(x), 4 + PH + 3.8, 2.3, 0.5, palette.muted);
    }
    out += tex(`${sf('Detection statistic')}\\ ${side.label}`, side.x + PW / 2, H - 0.8, 2.6,
      0.5, palette.muted)
      + tex(sf('GW150914'), p.X(side.dots[0][0].at(-1)[0] + 0.1) - 1.4, p.Y(0) - 2.2, 2.4, 1,
        data.hanford);
  }
  return svg(W, H, out + tex(sf('Number of events'), 3, 4 + PH / 2, 2.6, 0.5, palette.muted,
    true));
}
// Candidate events [statistic, count]: the nonzero bins of the same files.
const C3 = [[7.07, 11], [7.27, 8], [7.47, 7], [7.67, 3], [7.87, 3], [8.07, 1], [19.97, 1]];
const PYCBC = [[7.22, 4], [7.42, 14], [7.62, 12], [7.82, 16], [8.02, 7], [8.22, 3], [8.42, 1],
  [8.82, 1], [9.42, 1], [23.42, 1]]; // left edges of the 0.2-wide bins, as in the files
// #endregion

// ─── 3 · Fonts ──────────────────────────────────────────────────────────────
const FONTS = { // every face the pages paint (gotcha: fonts-first)
  Gelasio: ['400', '400i', '700', '700i'],
  'Albert Sans': ['400', '400i', '500', '600', '700', '700i'],
};

// ─── 4 · Build & show ───────────────────────────────────────────────────────
await initMathEngine(); // gotcha: math-bundle. Unawaited, every formula is a grey box
await loadFonts(FONTS, source);
const figures = { // width, drawing, placement, alt text
  fig1: [MEASURE, figure1, { position: 'here', span: 'page' }, 'One chirp in both detectors.'],
  fig2: [COLUMN, figure2, { position: 'top' }, 'Strain; separation falls, speed rises.'],
  fig3: [COLUMN, figure3, { position: 'auto' }, 'A Michelson interferometer with arm cavities.'],
  fig4: [MEASURE, figure4, { position: 'top', span: 'page' }, 'GW150914 far beyond the noise.'] };
const resources = [];
for (const [id, [width, draw, placement, altText]] of Object.entries(figures)) {
  const markup = draw(width);
  const height = Number(/height="([\d.]+)"/.exec(markup)[1]) / PX_PER_MM;
  await loadSvg(`${id}.svg`, markup);
  resources.push({ id, typeId: 'figure', kind: 'svg', createdAt: 0, updatedAt: 0, placement,
    svg: { fileId: `${id}.svg`, width: width * PX_PER_MM, height: height * PX_PER_MM },
    caption: caption[id], note: caption[`${id}.note`], altText });
}
const rows = [];
for (const [i, [label, tex]] of VALUES.entries()) {
  const { w, h, svg: markup } = valueSvg(tex);
  await loadSvg(`v${i}.svg`, markup);
  resources.push({ id: `v${i}`, typeId: 'figure', kind: 'svg', createdAt: 0, updatedAt: 0,
    svg: { fileId: `v${i}.svg`, width: w * PX_PER_MM, height: h * PX_PER_MM }, altText: tex });
  rows.push([{ content: label, verticalAlign: 'middle' },
    { content: '', image: { resourceId: `v${i}`, width: Math.min(1, w / VALUE_W) } }]);
}
resources.push({ id: 'tab1', typeId: 'table', kind: 'table', createdAt: 0, updatedAt: 0,
  placement: { position: 'auto' }, caption: caption.tab1, note: caption['tab1.note'],
  table: { model: { columnWidths: [1.3, 1], rows } } });
const doc = await buildWithFonts(
  () => buildDocument({ markdown: source, resources }, config()), source);
showPages(doc, { title: 'A physics letter with its figure across both columns' });
offerPdf(() => renderToPdf(doc, { fontProvider: fontsourceProvider, resourceBytes: imageBytes }),
  `${RECIPE}.pdf`); // formulas and figures stay vector paths

Kit · core, fonts, viewer, pdf, images: the same in every recipe · 310 lines
// ─── 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 ───────────────────────────────────────────────────────────────────────

The composed script.js runs as it is: paste it into any page’s module script, or open the recipe on CodePen. Recipe folder on GitHub ↗ (opens in a new tab)

Variations

#Use the bundled IEEE style as it ships

Drop the edits and the references read [2], [3], [4] in the text and A. Einstein, “title”, journal… in the list.

-const citations = { style: 'custom', customStyle: aps, link: true,
+const citations = { style: 'ieee', link: true,

#Raise the numbers as Nature does

Nature's style sets superscript numbers and lists titles; it is bundled.

-const citations = { style: 'custom', customStyle: aps, link: true,
+const citations = { style: 'nature', link: true,

#Set it on A4

Change the trim; the measure, the columns and every figure follow from it.

-const [TRIM_W, TRIM_H, TOP, BOTTOM, SIDE, GUTTER] = [215.9, 279.4, 21, 21, 16, 7];
+const [TRIM_W, TRIM_H, TOP, BOTTOM, SIDE, GUTTER] = [210, 297, 22, 22, 15, 7];

Pitfalls

Pitfall

Maths needs https://esm.sh/postext?bundle and initMathEngine()

Formulas from https://esm.sh/postext paint grey boxes without an error. Import every symbol from https://esm.sh/postext?bundle, never mixing the two URLs, and await initMathEngine() before the first build. Mathematics →

Pitfall

Text inside an SVG <img> cannot use web fonts

An SVG is drawn as an image, and an image has no access to the page's web fonts, so its labels fall back to a system face. Outline the text, embed an @font-face subset in the SVG, or move the labels to the caption. Figures and tables as resources →

Pitfall

Any headings object switches off the H1 page break

By default an H1 breaks to a recto (always-odd), but passing any headings object resets that default, so chapters run on and span: 'page' does nothing. Restate headings.levels[0].breakBefore: { enabled: true, parity } in every config. Chapters that open on a recto →

Pitfall

Load every face before layout

Layout measures text with the faces the browser has loaded and caches the widths, so a face that arrives after the first build leaves wrong line breaks and a PDF that no longer matches the screen. Load every weight and style first, and call clearMeasurementCache() before rebuilding when one arrives late. Fonts before layout →

Pitfall

Quote every frontmatter value

YAML reads title: 1984 as a number and a date as a Date object, and non-string values print empty in placeholders and leave the PDF without a title. Quote every value: title: "1984". Document metadata →

Pitfall

A config is cached by identity: build a fresh object

The engine caches resolved configs by object identity, so changing a config in place and building again reuses the old result. Build a fresh object for every build, which is why a recipe's config is a factory: config(). Pages on a canvas →

A 'here' resource with span: 'page' in a two-column flow is set one column wide. Put it in a box whose style has span: 'page', as the plate box does here.
A Greek letter, ⊙ or ≃ in a caption or a table cell falls back to a system face on screen and is missing from the PDF, which embeds the Latin files of each face. Write those symbols as maths in the text, and draw them in figures and cells.
A list of hundreds of authors does not belong in a BibTeX file. Write the name as the journal prints it, in double braces: author={{B. Abbott et al.}}.
Keep the licence line of the paper and of the data. Here a footnote and the colophon say what was cut, and each caption's note names the data and what the redrawn figure leaves out.

Credits

Recipe: Ignacio Ferro
Text: Text: B. P. Abbott et al. (LIGO Scientific Collaboration and Virgo Collaboration), “Observation of Gravitational Waves from a Binary Black Hole Merger”, Phys. Rev. Lett. 116, 061102 (2016), doi:10.1103/PhysRevLett.116.061102. Abridged from the published letter (Sections IV and VII, parts of Sections I, III, V and VI and most of the acknowledgments cut; sections and references renumbered); figures redrawn; figure captions shortened. Licence: CC BY 3.0, https://creativecommons.org/licenses/by/3.0/ · LIGO Scientific Collaboration and Virgo Collaboration · CC BY 3.0
Data for Figures 1, 2 and 4: the GW150914 data files released by the Gravitational Wave Open Science Center (gwosc.org), a service of the LIGO Scientific Collaboration, the Virgo Collaboration and KAGRA; redrawn in code · LIGO Scientific Collaboration and Virgo Collaboration, GWOSC · CC BY 4.0
Fonts: Gelasio (SIL OFL 1.1) · Albert Sans (SIL OFL 1.1)
Code: MIT, like Postext

Edit this write-up ↗ (opens in a new tab)Recipe folder on GitHub ↗ (opens in a new tab)

In short

#What you'll build

#The short answer

#Ingredients

#Method

#1 · Numbered physics citations from the IEEE file

#2 · Figure 1 under the title, across both columns

#3 · Table I, with maths in its cells

#4 · Figures drawn from the open data

#The whole recipe

#Variations

#Use the bundled IEEE style as it ships

#Raise the numbers as Nature does

#Set it on A4

#Pitfalls

#Credits

More from the Cookbook

Two-column paper with numbered equations

A two-column conference paper in IEEE style

A medical article in Vancouver style

What you'll build

The short answer

Ingredients

Method

The whole recipe

Variations

Pitfalls

Credits