postext-epub 0.49.6 → 0.49.8

package/dist/reflowable/css.js

@@ -3,80 +3,15 @@
 // override. Sizes are in ems of the body text (the reader's chosen size),
 // line heights are ratios, colours come from the resolved palette, and no
 // rule sets a width the screen would have to honour.
-import { dimensionToPx, featureFamilyParts, fontVariantNumeric, isCornerRadii, primaryFontFamily, resolvedCodeStyle, uniformRadius } from 'postext';
-import { cssString } from '../shared/assets.js';
-import { idOf, round } from './inline.js';
-/** CSS `line-break` for a Japanese kinsoku level (`cjk.lineBreak`, #417):
- *  JLReq's strictest rules are CSS `strict` (no small kana, ー or 々 at a
- *  line start), the general books' rules CSS `normal` (they may), the
- *  newspapers' CSS `loose`. Chinese levels write none, as before. */
-const LINE_BREAK = { 'ja-very-strict': 'strict', 'ja-strict': 'normal', 'ja-loose': 'loose' };
-/** The declarations of the Japanese text of a book (#428): kinsoku and,
- *  with burasagari (`cjk.hangingPunctuation`, on by default in Japan),
- *  、。，． hanging past the line end; and, in any book that asks for it,
- *  lines broken only between phrases (`cjk.wordBreak: 'keep-all'`, #463).
- *  None for other books. */
-function japaneseDecls(cjk) {
-    const out = [];
-    if (cjk.wordBreak === 'keep-all')
-        out.push('word-break: keep-all');
-    const lineBreak = LINE_BREAK[cjk.lineBreak];
-    if (lineBreak)
-        out.push(`line-break: ${lineBreak}`, `-epub-line-break: ${lineBreak}`, `-webkit-line-break: ${lineBreak}`);
-    if (cjk.region === 'japan' && cjk.hangingPunctuation !== 'none') {
-        out.push(`hanging-punctuation: ${cjk.hangingPunctuation === 'force' ? 'force-end' : 'allow-end'}`);
-    }
-    return out;
-}
-/** The emphasis-mark rule of a class `dotsClasses` gives: a shape and fill
- *  (`pt-dots-filled-sesame`), or a side (`pt-dots-over`: over horizontal
- *  text and right of vertical text; `pt-dots-under`: under and left). */
-function dotsRule(cls) {
-    const side = /^pt-dots-(over|under)$/.exec(cls);
-    if (side) {
-        const pos = side[1] === 'over' ? 'over right' : 'under left';
-        return rule(`.pt-dots.${cls}`, [`text-emphasis-position: ${pos}`, `-webkit-text-emphasis-position: ${pos}`]);
-    }
-    const shape = /^pt-dots-(filled|open)-(dot|circle|sesame)$/.exec(cls);
-    if (!shape)
-        return '';
-    const style = `${shape[1]} ${shape[2]}`;
-    return rule(`.pt-dots.${cls}`, [`text-emphasis-style: ${style}`, `-epub-text-emphasis-style: ${style}`, `-webkit-text-emphasis-style: ${style}`]);
-}
-const SANS = /\b(sans|grotesk|grotesque|gothic|helvetica|arial|inter|roboto|lato|montserrat|open sans|source sans|fira sans|heiti|hei\b|黑)/i;
-const MONO = /\b(mono|code|courier|consol)/i;
-/** A family as a CSS value: the family quoted, then a generic fallback. A
- *  feature family (#1237, `Lora@onum`) is its base family's. */
-export function familyStack(family) {
-    const name = familyName(family);
-    const generic = MONO.test(name) ? 'monospace' : SANS.test(name) ? 'sans-serif' : 'serif';
-    return `${cssString(name)}, ${generic}`;
-}
-/** The family names the stylesheet asks for (to warn about missing
- *  faces). */
-export function familyName(family) {
-    return featureFamilyParts(primaryFontFamily(family).trim().replace(/^['"]|['"]$/g, '')).family;
-}
-/** Whether a configuration sets any style's figures (#1237): a family of
- *  it is a feature family. */
-function setsFigures(config) {
-    return /"[^"]*@(?:onum|lnum|pnum|tnum)(?:\+(?:onum|lnum|pnum|tnum))*"/.test(JSON.stringify(config));
-}
-const ALIGN = { left: 'start', right: 'end', center: 'center', justify: 'justify' };
-/** Beside every `letter-spacing` (#703): letter-spacing never changes the
- *  glyphs. A reading system turns the common ligatures off where the
- *  letter-spacing is not zero; asked for as features they stay, as in the
- *  print layout, the fixed-layout pages and the PDF. */
-const TRACKED_LIGATURES = "font-feature-settings: 'liga' 1, 'clig' 1";
-/** A rule from its declarations (the falsy ones left out); none when it
- *  declares nothing. */
-function rule(selector, decls) {
-    const body = decls.filter((d) => typeof d === 'string' && d.length > 0);
-    return body.length > 0 ? { selector, decls: body } : '';
-}
-function ruleText(r) {
-    return `${r.selector} {\n${r.decls.map((d) => `  ${d};`).join('\n')}\n}\n`;
-}
+import { dimensionToPx, fontVariantNumeric, featureFamilyParts, primaryFontFamily } from 'postext';
+import { round } from './inline.js';
+import { setsFigures, familyName, familyStack, ruleText } from './css/helpers.js';
+import { createTextRules } from './css/text.js';
+import { createFigureRules } from './css/figures.js';
+import { createBoxRules } from './css/boxes.js';
+import { createApparatusRules } from './css/apparatus.js';
+import { createVerseRules } from './css/verse.js';
+export { familyStack, familyName } from './css/helpers.js';
 export function bookStylesheet(config, fontFaces, options) {
     const dpi = config.page.dpi;
     const body = config.bodyText;
@@ -118,668 +53,21 @@ export function bookStylesheet(config, fontFaces, options) {
     out.push('@charset "UTF-8";\n');
     if (fontFaces)
         out.push(fontFaces);
-    // --- body text -----------------------------------------------------------
-    const hyphens = body.hyphenation.enabled;
-    if (options.vertical) {
-        out.push(rule('html', ['writing-mode: vertical-rl', '-epub-writing-mode: vertical-rl', '-webkit-writing-mode: vertical-rl']));
-    }
-    out.push(rule('body', [
-        fam(body.fontFamily),
-        lh(body.lineHeight, bodyPx),
-        color(body.color),
-        `text-align: ${ALIGN[body.textAlign] ?? 'start'}`,
-        hyphens && 'hyphens: auto',
-        hyphens && '-epub-hyphens: auto',
-        hyphens && '-webkit-hyphens: auto',
-        body.fontWeight !== 400 && `font-weight: ${body.fontWeight}`,
-        // CSS names the two rules the other way round (#717): `orphans` is
-        // the lines a paragraph keeps at the foot of a page (the engine's
-        // `avoidWidows`), `widows` the lines at the head of the next (its
-        // `avoidOrphans`). A rule that is off writes 1: the initial value of
-        // both properties is 2, so leaving one out would keep the rule.
-        `orphans: ${body.avoidWidows ? Math.max(1, body.widowMinLines) : 1}`,
-        `widows: ${body.avoidOrphans ? Math.max(1, body.orphanMinLines) : 1}`,
-        'margin: 0',
-        'padding: 0 1em',
-        ...japaneseDecls(config.cjk),
-    ]));
-    const indent = px(body.firstLineIndent);
-    const ratio = round(dimensionToPx(body.lineHeight, dpi, bodyPx) / bodyPx);
-    const spacing = spacingEm(body.paragraphSpacing, body.lineHeight);
-    out.push(rule('p', [
-        'margin: 0',
-        spacing === 0 && indent > 0 && `text-indent: ${round(indent / bodyPx)}em`,
-        spacing > 0 && `margin-block-end: ${spacing}em`,
-    ]));
-    if (spacing === 0 && indent > 0) {
-        // The first paragraph after a heading, a list, a figure… is not
-        // indented (unless the book indents after headings).
-        const after = ['ul', 'ol', 'blockquote', 'figure', 'div', 'aside', 'nav', 'section > p:first-child'];
-        if (!body.indentAfterHeading)
-            after.unshift('h1', 'h2', 'h3', 'h4', 'h5', 'h6');
-        out.push(rule(after.map((s) => (s.includes(' ') ? s : `${s} + p`)).join(', '), ['text-indent: 0']));
-    }
-    out.push(rule('strong, b', [`font-weight: ${body.boldFontWeight}`, color(body.boldColor)]));
-    out.push(rule('em, i', [color(body.italicColor)]));
-    out.push(rule('a', ['color: inherit', 'text-decoration: underline']));
-    out.push(rule('a.pt-ref', [
-        color(body.referenceColor),
-        'text-decoration: none',
-        body.referenceBold && `font-weight: ${body.boldFontWeight}`,
-        body.referenceItalic && 'font-style: italic',
-    ]));
-    out.push(rule('a.pt-pageref', ['text-decoration: none']));
-    out.push(rule('sup, sub', ['line-height: 0', 'font-size: 0.7em']));
-    // --- headings ------------------------------------------------------------
-    const headings = config.headings;
-    /** The body's line pitch, px: a 行取り heading (`lineSpan`, #424) takes
-     *  whole numbers of it. */
-    const bodyLinePx = body.lineHeight.unit === 'em' || body.lineHeight.unit === 'rem'
-        ? body.lineHeight.value * bodyPx
-        : px(body.lineHeight);
-    for (const level of headings.levels) {
-        if (level.level < 1 || level.level > 6)
-            continue;
-        const hPx = px(level.fontSize);
-        // 行取り: the heading's line centred in N body lines, its margins the
-        // rest of them (a reflowable book has no grid to keep).
-        const lineSpanMargin = level.lineSpan !== undefined
-            ? Math.max(0, (level.lineSpan * bodyLinePx - (level.lineHeight.unit === 'em' || level.lineHeight.unit === 'rem' ? level.lineHeight.value * hPx : px(level.lineHeight, hPx))) / 2)
-            : undefined;
-        out.push(rule(`h${level.level}`, [
-            fam(level.fontFamily || headings.fontFamily),
-            `font-size: ${round(hPx / bodyPx)}em`,
-            lh(level.lineHeight, hPx),
-            `font-weight: ${level.fontWeight}`,
-            `font-style: ${level.italic ? 'italic' : 'normal'}`,
-            color(level.color),
-            `text-align: ${ALIGN[headings.textAlign] ?? 'start'}`,
-            level.letterSpacing.value !== 0 && `letter-spacing: ${em(level.letterSpacing, hPx)}`,
-            level.letterSpacing.value !== 0 && TRACKED_LIGATURES,
-            level.textTransform === 'uppercase' && 'text-transform: uppercase',
-            lineSpanMargin !== undefined
-                ? `margin: ${round(lineSpanMargin / hPx)}em 0`
-                : `margin: ${round(px(level.marginTop, hPx) / hPx)}em 0 ${round(px(level.marginBottom, hPx) / hPx)}em`,
-            // 字下げ: the indent counts body characters.
-            level.indent && px(level.indent) > 0 && `margin-inline-start: ${round(px(level.indent) / hPx)}em`,
-            'hyphens: manual',
-            '-epub-hyphens: manual',
-            'page-break-after: avoid',
-            'break-after: avoid',
-        ]));
-    }
-    for (const style of config.headingStyles) {
-        const o = style.overrides;
-        const sPx = o.fontSize ? px(o.fontSize) : undefined;
-        out.push(rule(`.${idOf('hs-', style.id)}`, [
-            o.fontFamily && fam(o.fontFamily),
-            sPx !== undefined && `font-size: ${round(sPx / bodyPx)}em`,
-            o.fontWeight !== undefined && `font-weight: ${o.fontWeight}`,
-            o.italic !== undefined && `font-style: ${o.italic ? 'italic' : 'normal'}`,
-            o.color && color(o.color),
-            o.textTransform && `text-transform: ${o.textTransform === 'uppercase' ? 'uppercase' : 'none'}`,
-        ]));
-    }
-    out.push(rule('.pt-part-title', ['text-align: center', 'margin-block-start: 3em']));
-    out.push(rule('.pt-part-number', ['display: block', 'font-size: 0.6em', 'margin-block-end: 0.5em']));
-    out.push(rule('.pt-hidden', [
-        'position: absolute',
-        'width: 1px',
-        'height: 1px',
-        'overflow: hidden',
-        'clip: rect(0 0 0 0)',
-        'white-space: nowrap',
-    ]));
-    // --- quotations, lists ---------------------------------------------------
-    const bq = body.blockquote;
-    out.push(rule('blockquote', [
-        `margin: ${ratio / 2}em 0`,
-        `margin-inline-start: ${em(bq.indent)}`,
-        color(bq.color),
-        bq.italic && 'font-style: italic',
-    ]));
-    if (bq.italic)
-        out.push(rule('blockquote em', ['font-style: normal']));
-    const ul = config.unorderedLists;
-    const ol = config.orderedLists;
-    out.push(rule('ul, ol', [
-        'list-style: none',
-        `margin: ${em(ol.marginTop)} 0 ${em(ol.marginBottom)}`,
-        'padding-inline-start: 1.6em',
-        'text-indent: 0',
-    ]));
-    out.push(rule('li', [ol.itemSpacing.value > 0 && `margin-block-start: ${em(ol.itemSpacing)}`]));
-    out.push(rule('li li', ['margin-block-start: 0']));
-    out.push(rule('li > .pt-lbl:first-child', [
-        'display: inline-block',
-        'min-width: 1.6em',
-        'margin-inline-start: -1.6em',
-        'text-indent: 0',
-    ]));
-    out.push(rule('ul > li > .pt-lbl:first-child', [color(ul.color), ul.fontWeight !== body.fontWeight && `font-weight: ${ul.fontWeight}`]));
-    out.push(rule('ol > li > .pt-lbl:first-child', [color(ol.color), ol.fontWeight !== body.fontWeight && `font-weight: ${ol.fontWeight}`]));
-    out.push(rule('.pt-done', ['text-decoration: line-through']));
-    // --- figures, tables, captions ------------------------------------------
-    const cap = config.captionStyle;
-    const capPx = px(cap.fontSize);
-    out.push(rule('figure', ['margin: 1em 0', 'text-align: center', 'page-break-inside: avoid', 'break-inside: avoid']));
-    out.push(rule('figure img', ['max-width: 100%', 'height: auto']));
-    // The labels drawn over a picture (#955): a box as wide as the image,
-    // the SVG laid over all of it.
-    if (options.labelLayers) {
-        out.push(rule('.pt-labelled', ['display: inline-block', 'position: relative', 'max-width: 100%', 'line-height: 0']));
-        out.push(rule('.pt-label-layer', ['position: absolute', 'left: 0', 'top: 0', 'width: 100%', 'height: 100%', 'pointer-events: none']));
-    }
-    out.push(rule('figure video', ['width: 100%', 'height: auto', 'background-color: #000']));
-    // Comic pages (#565): each panel's picture as wide as the text at most,
-    // its lettering under it as plain lines.
-    out.push(rule('.pt-comic', ['margin: 1em 0']));
-    out.push(rule('.pt-comic-panel', ['margin: 1em 0 0.5em']));
-    out.push(rule('.pt-comic-panel svg', ['display: block', 'max-width: 100%', 'height: auto', 'margin: 0 auto']));
-    out.push(rule('.pt-comic p', ['text-indent: 0', 'margin: 0.25em 0']));
-    out.push(rule('a.pt-video-link', ['display: block']));
-    out.push(rule('figcaption, caption', [
-        fam(cap.fontFamily),
-        `font-size: ${round(capPx / bodyPx)}em`,
-        color(cap.color),
-        `text-align: ${ALIGN[cap.align] ?? 'start'}`,
-        cap.descriptionItalic && 'font-style: italic',
-        cap.backgroundEnabled && color(cap.background, 'background-color'),
-        cap.backgroundEnabled && `padding: ${round(px(cap.padding, capPx) / capPx)}em`,
-        `margin: ${round(px(cap.gap, capPx) / capPx)}em 0`,
-        'hyphens: manual',
-    ]));
-    out.push(rule('caption.pt-caption-below', ['caption-side: bottom']));
-    out.push(rule('.pt-label', [
-        color(cap.labelColor),
-        cap.labelBold ? 'font-weight: bold' : undefined,
-        `font-style: ${cap.labelItalic ? 'italic' : 'normal'}`,
-    ]));
-    const note = cap.note;
-    out.push(rule('.pt-note', [
-        `font-size: ${em(note.fontSize)}`,
-        color(note.color),
-        `font-style: ${note.italic ? 'italic' : 'normal'}`,
-        `text-align: ${ALIGN[note.align] ?? 'start'}`,
-        'text-indent: 0',
-    ]));
-    out.push(rule('figcaption .pt-note', ['display: block', `margin-block-start: ${em(note.gap, px(cap.fontSize))}`]));
-    out.push(rule('.pt-missing', ['border: 1px dashed currentColor', 'padding: 1em', 'font-style: italic']));
-    const ts = config.tableStyle;
-    /** A rule `widthPx` (at the page dpi) wide, in CSS px. */
-    const line = (widthPx, c) => `${round(Math.max(0.5, widthPx * (96 / dpi)))}px solid ${c.hex}`;
-    /** What a table style decides, by element: on `table` for the document's
-     *  style; on `table.pt-table-<id>` for a named one (#625), which then
-     *  also undoes what the document's style (`reset`) sets and it does not. */
-    const tableStyleDecls = (st, reset) => {
-        const cellPx = px(st.bodyFontSize);
-        const booktabs = st.borders && st.rules === 'booktabs';
-        const border = st.borders && st.rules !== 'none' && !booktabs && px(st.borderWidth) > 0
-            ? line(px(st.borderWidth), st.borderColor)
-            : undefined;
-        const tableBorder = border !== undefined && (st.rules === 'outer' || st.rules === 'grid');
-        // Booktabs: a heavy rule above and under the table, a light one under
-        // the header and, under a head spanning columns above the last header
-        // row, a span rule, trimmed at both ends by a background line (a CSS
-        // border cannot be).
-        const width = (d) => {
-            const v = px(d, cellPx);
-            return booktabs && v > 0 ? Math.max(0.25, v) : 0;
-        };
-        const heavy = width(st.heavyRuleWidth);
-        const light = width(st.lightRuleWidth);
-        const span = st.spanRules !== 'none' ? width(st.spanRuleWidth) : 0;
-        const wasBooktabs = reset?.borders === true && reset.rules === 'booktabs';
-        const extra = [];
-        if (light > 0)
-            extra.push(['thead', [`border-bottom: ${line(light, st.borderColor)}`]]);
-        else if (wasBooktabs)
-            extra.push(['thead', ['border-bottom: none']]);
-        const spanSel = 'thead > tr:not(:last-child) > th[colspan]';
-        if (span > 0 && st.spanRules === 'trimmed') {
-            extra.push([spanSel, [
-                    `background-image: linear-gradient(${st.borderColor.hex}, ${st.borderColor.hex})`,
-                    'background-repeat: no-repeat',
-                    'background-position: center bottom',
-                    `background-size: calc(100% - ${round(2 * (px(st.spanRuleTrim, cellPx) / cellPx))}em) ${round(Math.max(0.5, span * (96 / dpi)))}px`,
-                ]]);
-        }
-        else {
-            if (span > 0)
-                extra.push([spanSel, [`border-bottom: ${line(span, st.borderColor)}`]]);
-            if (wasBooktabs && reset.spanRules === 'trimmed')
-                extra.push([spanSel, ['background-image: none']]);
-        }
-        if (st.groupRules && light > 0) {
-            extra.push(['tbody > tr.pt-group:not(:first-child) > *', [`border-top: ${line(light, st.borderColor)}`]]);
-        }
-        return {
-            table: [
-                reset && fam(st.bodyFontFamily),
-                reset && `font-size: ${round(cellPx / bodyPx)}em`,
-                reset && color(st.bodyColor),
-                tableBorder ? `border: ${border}` : reset && 'border: none',
-                heavy > 0 && `border-top: ${line(heavy, st.borderColor)}`,
-                heavy > 0 && `border-bottom: ${line(heavy, st.borderColor)}`,
-            ],
-            cells: [
-                reset && `padding: ${round(px(st.cellPadding, cellPx) / cellPx)}em`,
-                border && st.rules === 'grid' ? `border: ${border}` : undefined,
-                border && st.rules === 'horizontal' ? `border-block: ${border}` : undefined,
-                reset && !(border && (st.rules === 'grid' || st.rules === 'horizontal')) && 'border: none',
-            ],
-            td: [st.bodyBackgroundEnabled ? color(st.bodyBackground, 'background-color') : reset && 'background-color: transparent'],
-            alt: st.bodyAlternateBackgroundEnabled ? [color(st.bodyAlternateBackground, 'background-color')] : undefined,
-            th: [
-                fam(st.headerFontFamily),
-                `font-size: ${round(px(st.headerFontSize) / cellPx)}em`,
-                color(st.headerColor),
-                `font-weight: ${st.headerBold ? 'bold' : 'normal'}`,
-                st.headerItalic ? 'font-style: italic' : reset && 'font-style: normal',
-                st.headerTextTransform === 'uppercase' ? 'text-transform: uppercase' : reset && 'text-transform: none',
-                st.headerLetterSpacing.value !== 0 ? `letter-spacing: ${round(px(st.headerLetterSpacing, cellPx) / cellPx)}em` : reset && 'letter-spacing: normal',
-                st.headerLetterSpacing.value !== 0 && TRACKED_LIGATURES,
-                st.headerBackgroundEnabled ? color(st.headerBackground, 'background-color') : reset && 'background-color: transparent',
-            ],
-            extra,
-        };
-    };
-    const bodyCellPx = px(ts.bodyFontSize);
-    const base = tableStyleDecls(ts, undefined);
-    out.push(rule('.pt-table', ['margin: 1em 0', 'overflow-x: auto']));
-    out.push(rule('table', [
-        'border-collapse: collapse',
-        'margin: 0 auto',
-        'max-width: 100%',
-        fam(ts.bodyFontFamily),
-        `font-size: ${round(bodyCellPx / bodyPx)}em`,
-        color(ts.bodyColor),
-        'text-indent: 0',
-        'hyphens: manual',
-        ...base.table,
-    ]));
-    out.push(rule('th, td', [
-        `padding: ${round(px(ts.cellPadding, bodyCellPx) / bodyCellPx)}em`,
-        'vertical-align: top',
-        'text-align: start',
-        ...base.cells,
-    ]));
-    out.push(rule('td', base.td));
-    if (base.alt)
-        out.push(rule('td.pt-alt', base.alt));
-    out.push(rule('th', base.th));
-    for (const [sel, decls] of base.extra)
-        out.push(rule(sel, decls));
-    for (const st of config.tableStyles ?? []) {
-        const table = `table.${idOf('pt-table-', st.id)}`;
-        const sub = (sel) => sel.split(', ').map((x) => `${table} ${x}`).join(', ');
-        const d = tableStyleDecls(st, ts);
-        out.push(rule(table, d.table));
-        out.push(rule(sub('th, td'), d.cells));
-        out.push(rule(sub('td'), d.td));
-        if (d.alt)
-            out.push(rule(sub('td.pt-alt'), d.alt));
-        out.push(rule(sub('th'), d.th));
-        for (const [sel, decls] of d.extra)
-            out.push(rule(sub(sel), decls));
-    }
-    out.push(rule('td img, th img', ['max-width: 100%', 'height: auto', 'display: block', 'margin: 0 auto']));
-    // --- callouts ------------------------------------------------------------
-    out.push(rule('aside.pt-callout', ['margin: 1em 0', 'padding: 0.75em 1em', 'page-break-inside: avoid']));
-    out.push(rule('.pt-callout-title', ['font-weight: bold', 'text-indent: 0', 'margin-block-end: 0.4em']));
-    // A composed page's frames (#862): blocks of its section, in Markdown
-    // order; a frame set in a callout style is drawn as its box.
-    if (options.composed) {
-        out.push(rule('section.pt-composed', ['margin-block: 1em']));
-        out.push(rule('div.pt-frame', ['margin: 0 0 1em']));
-        // A frame set in a writing mode of its own (#960): its lines run along
-        // the length written on the box (`height` for a vertical frame).
-        out.push(rule('div.pt-frame-vertical', ['writing-mode: vertical-rl', '-epub-writing-mode: vertical-rl', '-webkit-writing-mode: vertical-rl']));
-        out.push(rule('div.pt-frame-horizontal', ['writing-mode: horizontal-tb', '-epub-writing-mode: horizontal-tb', '-webkit-writing-mode: horizontal-tb']));
-        out.push(rule('div.pt-frame.pt-callout', ['padding: 0.75em 1em', 'page-break-inside: avoid']));
-    }
-    const frameStyles = new Set(options.composed?.frameStyles ?? []);
-    // The boxes an exercise is set in (#1244): its own frameless one, or the
-    // box style its exercise style names. An exercise is a `div` group.
-    const exerciseFrames = new Set((config.exerciseSettings?.styles ?? []).flatMap((st) => (st.box ? [st.box] : [])));
-    for (const s of config.calloutStyles) {
-        const cls = idOf('pt-callout-', s.id);
-        // The box's selector, and the frames' set in its style (#862).
-        const sels = frameStyles.has(s.id) ? [`aside.${cls}`, `div.pt-frame.${cls}`] : [`aside.${cls}`];
-        if (exerciseFrames.has(s.id) || s.id.startsWith('__postext-ex'))
-            sels.push(`div.pt-exercise.${cls}`);
-        const sel = sels.join(', ');
-        const under = (rest) => sels.map((x) => `${x} ${rest}`).join(', ');
-        const bPx = px(s.body.fontSize);
-        const pad = s.padding;
-        const stripe = s.stripe.enabled && px(s.stripe.width) > 0 ? `${round(px(s.stripe.width) * (96 / dpi))}px solid ${s.stripe.color.hex}` : undefined;
-        const side = s.stripe.side === 'top' ? 'border-block-start' : s.stripe.side === 'right' ? 'border-inline-end' : 'border-inline-start';
-        // A box's sides are the body flow's (#371): in a right-to-left book,
-        // whose flow is mirrored, its left padding is on the page's right.
-        const [padRight, padLeft] = rtl ? [pad.left, pad.right] : [pad.right, pad.left];
-        // Corners of their own and a border per side (#1059); a joined tab
-        // reflows as a plain tab.
-        const radius = isCornerRadii(s.borderRadius)
-            ? (() => {
-                const r = s.borderRadius;
-                const one = (d) => (d ? em(d) : '0');
-                // The corners of the body flow's sides, as the padding's.
-                const [tl, tr, br, bl] = rtl ? [r.topRight, r.topLeft, r.bottomLeft, r.bottomRight] : [r.topLeft, r.topRight, r.bottomRight, r.bottomLeft];
-                return [tl, tr, br, bl].some((d) => d && px(d) > 0)
-                    ? `border-radius: ${one(tl)} ${one(tr)} ${one(br)} ${one(bl)}`
-                    : undefined;
-            })()
-            : px(uniformRadius(s.borderRadius)) > 0 && `border-radius: ${em(uniformRadius(s.borderRadius))}`;
-        const sideBorders = s.border.sides
-            ? ['top', 'right', 'bottom', 'left'].map((k) => {
-                const b = s.border.sides[rtl && k === 'left' ? 'right' : rtl && k === 'right' ? 'left' : k];
-                return b.enabled && px(b.width) > 0 ? `border-${k}: ${round(px(b.width) * (96 / dpi))}px solid ${b.color.hex}` : `border-${k}: none`;
-            })
-            : [];
-        out.push(rule(sel, [
-            s.backgroundEnabled && color(s.background, 'background-color'),
-            !s.border.sides && s.border.enabled && px(s.border.width) > 0 && `border: ${round(px(s.border.width) * (96 / dpi))}px solid ${s.border.color.hex}`,
-            ...sideBorders,
-            stripe && `${side}: ${stripe}`,
-            radius,
-            `padding: ${em(pad.top)} ${em(padRight)} ${em(pad.bottom)} ${em(padLeft)}`,
-            `margin: ${em(s.marginTop)} 0 ${em(s.marginBottom)}`,
-            fam(s.body.fontFamily),
-            `font-size: ${round(bPx / bodyPx)}em`,
-            color(s.body.color),
-            s.body.italic && 'font-style: italic',
-            s.body.smallCaps && 'font-variant: small-caps',
-            `text-align: ${ALIGN[s.body.textAlign] ?? 'start'}`,
-        ]));
-        out.push(rule(under('p'), [
-            `text-indent: ${round(px(s.body.firstLineIndent, bPx) / bPx)}em`,
-            spacingEm(s.body.paragraphSpacing, s.body.lineHeight, bPx) > 0 && `margin-block-end: ${spacingEm(s.body.paragraphSpacing, s.body.lineHeight, bPx)}em`,
-            lh(s.body.lineHeight, bPx),
-        ]));
-        const t = s.titleStyle;
-        const tPx = px(t.fontSize);
-        out.push(rule(under('> .pt-callout-title'), [
-            fam(t.fontFamily),
-            `font-size: ${round(tPx / bPx)}em`,
-            `font-weight: ${t.fontWeight}`,
-            `font-style: ${t.italic ? 'italic' : 'normal'}`,
-            color(t.color),
-            t.textTransform === 'uppercase' && 'text-transform: uppercase',
-            t.letterSpacing.value !== 0 && `letter-spacing: ${round(px(t.letterSpacing, tPx) / tPx)}em`,
-            t.letterSpacing.value !== 0 && TRACKED_LIGATURES,
-            `margin-block-end: ${round(px(t.gap, tPx) / tPx)}em`,
-            'text-indent: 0',
-        ]));
-        out.push(rule(under('li > .pt-lbl:first-child'), [color(s.lists.color)]));
-    }
-    // --- paragraph styles ----------------------------------------------------
-    for (const s of config.paragraphStyles) {
-        const sPx = px(s.fontSize);
-        const cls = idOf('ps-', s.id);
-        out.push(rule(`p.${cls}, div.pt-verse.${cls}, div.pt-stanza.${cls}`, [
-            fam(s.fontFamily),
-            `font-size: ${round(sPx / bodyPx)}em`,
-            lh(s.lineHeight, sPx),
-            color(s.color),
-            `text-align: ${ALIGN[s.textAlign] ?? 'start'}`,
-            s.fontWeight !== body.fontWeight && `font-weight: ${s.fontWeight}`,
-            s.italic && 'font-style: italic',
-            s.smallCaps && 'font-variant: small-caps',
-            !s.hyphenation && 'hyphens: manual',
-            s.textTransform === 'uppercase' && 'text-transform: uppercase',
-            // The style's own tracking (#907), in its own ems.
-            s.letterSpacing && s.letterSpacing.value !== 0 && `letter-spacing: ${round(px(s.letterSpacing, sPx) / sPx)}em`,
-            s.letterSpacing && s.letterSpacing.value !== 0 && TRACKED_LIGATURES,
-            // The style's own line breaking between CJK characters (#463).
-            s.wordBreak && `word-break: ${s.wordBreak}`,
-            px(s.indent, sPx) > 0 && `margin-inline-start: ${round(px(s.indent, sPx) / sPx)}em`,
-            // 地からN字上げ (#424).
-            s.endIndent && px(s.endIndent, sPx) > 0 && `margin-inline-end: ${round(px(s.endIndent, sPx) / sPx)}em`,
-            `text-indent: ${round(px(s.firstLineIndent, sPx) / sPx)}em`,
-            px(s.marginTop, sPx) > 0 && `margin-block-start: ${round(px(s.marginTop, sPx) / sPx)}em`,
-            px(s.marginBottom, sPx) > 0 && `margin-block-end: ${round(px(s.marginBottom, sPx) / sPx)}em`,
-        ]));
-        // A hanging indent: the paragraph's turnovers padded in, its first line
-        // taken back to its own indent (the style's, when it sets one, #620).
-        // A poem's lines hang on their own (`.pt-verse-line`).
-        const hang = px(s.hangingIndent, sPx);
-        if (hang > 0) {
-            const first = s.ownFirstLineIndent ? px(s.firstLineIndent, sPx) : 0;
-            out.push(rule(`p.${cls}`, [`padding-inline-start: ${round(hang / sPx)}em`, `text-indent: ${round((first - hang) / sPx)}em`]));
-        }
-    }
-    // --- notes, contents, bibliography, index -------------------------------
-    const fn = config.footnotes;
-    const fnPx = px(fn.fontSize);
-    out.push(rule('.pt-footnotes', ['margin-block-start: 2em', 'border-block-start: 1px solid currentColor', 'padding-block-start: 0.5em']));
-    out.push(rule('aside.pt-footnote', [
-        `font-size: ${round(fnPx / bodyPx)}em`,
-        lh(fn.lineHeight, fnPx),
-        color(fn.color),
-        fn.textAlign && `text-align: ${ALIGN[fn.textAlign] ?? 'start'}`,
-        `margin-block-end: ${round(px(fn.spaceBetween, fnPx) / fnPx)}em`,
-    ]));
-    out.push(rule('aside.pt-footnote p', ['text-indent: 0']));
-    out.push(rule('a.pt-noteref', ['text-decoration: none', color(body.referenceColor)]));
-    out.push(rule('a[role="doc-backlink"]', ['text-decoration: none']));
-    out.push(rule('nav.pt-toc ol', ['list-style: none', 'padding-inline-start: 0']));
-    out.push(rule('nav.pt-toc li', ['margin-block-start: 0.3em']));
-    out.push(rule('nav.pt-toc a', ['text-decoration: none', 'color: inherit']));
-    out.push(rule('nav.pt-toc li > .pt-lbl:first-child', ['margin-inline-start: 0', 'min-width: 2em']));
-    out.push(rule('.pt-toc-part', ['font-weight: bold', 'margin-block-start: 0.8em']));
-    out.push(rule('.pt-toc-subtitle', ['font-style: italic', 'font-size: 0.9em']));
-    out.push(rule('p.pt-bib', ['padding-inline-start: 2em', 'text-indent: -2em', 'margin-block-end: 0.3em']));
-    out.push(rule('p.pt-index-group', ['font-weight: bold', 'text-indent: 0', 'margin-block-start: 1em', 'page-break-after: avoid', 'break-after: avoid']));
-    // Index entries hang their turnover lines, and a sub-entry sits one
-    // indent in per level, both in the index's own em.
-    const ix = config.index;
-    const ixPx = px(ix.fontSize);
-    const turnover = round(px(ix.turnoverIndent, ixPx) / ixPx);
-    const step = round(px(ix.indent, ixPx) / ixPx);
-    out.push(rule('p.pt-index-entry', [
-        ixPx !== bodyPx && `font-size: ${round(ixPx / bodyPx)}em`,
-        `padding-inline-start: ${turnover}em`,
-        `text-indent: -${turnover}em`,
-        'text-align: start',
-        'hyphens: manual',
-    ]));
-    for (const level of [1, 2, 3]) {
-        out.push(rule(`p.pt-index-l${level}`, [`margin-inline-start: ${round(step * level)}em`]));
-    }
-    // --- maths, chips, swatches, Chinese marks ------------------------------
-    out.push(rule('.pt-math-display', ['text-align: center', 'margin: 0.5em 0', 'text-indent: 0', 'overflow-x: auto']));
-    // Music scores (#1172): systems as wide as the column, a little air
-    // between two.
-    out.push(rule('.pt-score', ['margin: 0.75em 0', 'text-indent: 0']));
-    out.push(rule('.pt-score-system', ['display: block', 'width: 100%', 'height: auto', 'margin: 0 0 0.4em']));
-    out.push(rule('.pt-math svg', ['display: inline']));
-    out.push(rule('.pt-swatch', ['display: inline-block', 'width: 0.8em', 'height: 0.8em', 'border: 1px solid currentColor', 'vertical-align: baseline']));
-    out.push(rule('.pt-chip', ['display: inline-block', 'padding: 0 0.3em', 'border-radius: 0.2em', 'text-indent: 0', 'line-height: 1.2']));
-    for (const c of config.chipStyles) {
-        const cPx = c.fontSize ? px(c.fontSize) : bodyPx;
-        out.push(rule(`.${idOf('pt-chip-', c.id)}`, [
-            c.backgroundEnabled && color(c.background, 'background-color'),
-            // A blank to write on (#1227) is underlined, not boxed.
-            px(c.borderWidth) > 0 && `${c.underline ? 'border-bottom' : 'border'}: ${round(px(c.borderWidth) * (96 / dpi))}px ${c.underline ?? 'solid'} ${c.borderColor.hex}`,
-            px(c.borderRadius) > 0 && `border-radius: ${round(px(c.borderRadius, cPx) / cPx)}em`,
-            `padding: ${round(px(c.paddingY, cPx) / cPx)}em ${round(px(c.paddingX, cPx) / cPx)}em`,
-            c.fontFamily && fam(c.fontFamily),
-            c.fontSize && `font-size: ${round(cPx / bodyPx)}em`,
-            c.color && color(c.color),
-            c.bold && 'font-weight: bold',
-            c.italic && 'font-style: italic',
-        ]));
-    }
-    // Exercises (#1231): a blank holds its input, a drawn box its picture
-    // (and, the script running, the controls laid over it); the answer key
-    // for a reader with no script follows the exercise.
-    out.push(rule('.pt-ex-slot', ['position: relative']));
-    out.push(rule('.pt-ex-blank', ['height: 1.2em', 'vertical-align: -0.25em']));
-    out.push(rule('.pt-ex-blank > input', ['box-sizing: border-box', 'width: 100%', 'height: 100%', 'margin: 0', 'padding: 0', 'border: 0', 'background: transparent', 'color: inherit', 'font: inherit', 'text-align: center']));
-    out.push(rule('.pt-ex-drawn', ['position: relative', 'margin: 0.4em 0', 'text-indent: 0', 'max-width: 100%']));
-    out.push(rule('.pt-ex-drawn > svg', ['display: block', 'overflow: visible', 'width: 100%', 'height: auto']));
-    out.push(rule('.pt-ex-static', ['margin: 0.6em 0 0', 'font-size: 0.9em', 'text-indent: 0']));
-    out.push(rule('.pt-ex-static > summary', ['cursor: pointer']));
-    out.push(rule('.pt-sc', ['font-variant: small-caps']));
-    out.push(rule('.pt-dots', ['font-style: normal', 'text-emphasis: filled dot', '-epub-text-emphasis-style: filled dot', '-webkit-text-emphasis-style: filled dot', 'text-emphasis-position: under right', '-webkit-text-emphasis-position: under right']));
-    // Other shapes and sides (the Japanese sesame over the text, #428),
-    // sorted so the stylesheet is the same whatever order they were read in.
-    for (const cls of [...(options.dots ?? [])].sort())
-        out.push(dotsRule(cls));
-    out.push(rule('.pt-proper', ['text-decoration: underline']));
-    out.push(rule('.pt-book', ['text-decoration: underline wavy']));
-    // Side lines (傍線): under horizontal text and left of vertical text, or
-    // over and right of it; one unbroken line, descenders and all.
-    const underSide = ['text-underline-position: under left', '-epub-text-underline-position: under left', '-webkit-text-underline-position: under left'];
-    out.push(rule('.pt-side', ['text-decoration-line: underline', 'text-decoration-skip-ink: none', ...underSide]));
-    out.push(rule('.pt-side.pt-side-over', ['text-decoration-line: overline']));
-    for (const style of ['double', 'wavy', 'dotted'])
-        out.push(rule(`.pt-side.pt-side-${style}`, [`text-decoration-style: ${style}`]));
-    out.push(rule('.pt-tcy', ['text-combine-upright: all', '-epub-text-combine: horizontal', '-webkit-text-combine: horizontal']));
-    out.push(rule('.pt-upright', ['text-orientation: upright', '-epub-text-orientation: upright', '-webkit-text-orientation: upright']));
-    out.push(rule('.pt-sideways', ['text-orientation: sideways', '-epub-text-orientation: sideways', '-webkit-text-orientation: sideways']));
-    out.push(rule('.pt-warichu', ['font-size: 0.6em']));
-    out.push(rule('ruby.pt-ruby-under', ['ruby-position: under', '-epub-ruby-position: under', '-webkit-ruby-position: after']));
-    out.push(rule('ruby.pt-ruby-right', ['ruby-position: inter-character']));
-    // Kanbun marks (訓点): half size, the 送り仮名 raised (right of vertical
-    // text) and the 返り点 lowered (left of it), after their character.
-    out.push(rule('.pt-okuri, .pt-kaeri', ['font-size: 0.5em', 'line-height: 0']));
-    out.push(rule('.pt-okuri', ['vertical-align: super']));
-    out.push(rule('.pt-kaeri', ['vertical-align: sub']));
-    out.push(rule('.pt-marker', ['height: 0']));
-    // Japanese note markers (JLReq §4.2.3), only in a book that sets them.
-    // In the line gap: a box of no advance, its text running back from it
-    // (right to left, inline-start being the end), its baseline raised past
-    // the text's em box (0.88 em over its baseline) without growing the
-    // line. Right of a vertical line: reduced, its box against
-    // the line's right side.
-    const marker = config.footnotes.markerPosition;
-    if (marker === 'side' || marker === 'right') {
-        const size = config.footnotes.markerSize;
-        const em = size.unit === 'em' || size.unit === 'rem' ? size.value : px(size) / bodyPx;
-        if (marker === 'side') {
-            out.push(rule('.pt-note-side', ['display: inline-block', 'inline-size: 0', 'direction: rtl', 'white-space: nowrap', 'line-height: 0', `font-size: ${round(em)}em`, `vertical-align: ${round(0.88 / em + 0.12)}em`]));
-            out.push(rule('.pt-note-side > span', ['direction: ltr', 'unicode-bidi: isolate']));
-        }
-        else {
-            out.push(rule('.pt-note-right', [`font-size: ${round(em)}em`, 'vertical-align: text-top', 'line-height: 0']));
-        }
-    }
-    // --- classical verse -----------------------------------------------------
-    // A bayt is a row of two equal hemistich columns (and the ornament's,
-    // empty without one): the ṣadr from the start side, the ʿajuz flush
-    // with the end side, so the rhymes stand in one column as in print. On
-    // a narrow screen the two halves stagger, the ʿajuz on its own line
-    // flush with the end, as the print does when they do not fit.
-    // A stanza set line by line (#620): its lines of verse, a blank line
-    // between stanzas, never hyphenated; each line's hang is on its own
-    // element.
-    if (options.stanzas) {
-        out.push(rule('.pt-stanza', ['margin: 0 0 1em', 'text-indent: 0', 'text-align: start', 'hyphens: manual']));
-        out.push(rule('.pt-verse-line', ['display: block']));
-    }
-    // Line numbers (#621): a poem's every Nth line carries its number in a
-    // margin on the start side of the stanza, out of the reading order.
-    if (options.stanzas && options.lineNumbers) {
-        out.push(rule('.pt-stanza', ['padding-left: 3em']));
-        out.push(rule('.pt-verse-line', ['position: relative']));
-        out.push(rule('.pt-line-number', [
-            'position: absolute', 'right: 100%', 'margin-right: 0.8em', 'text-indent: 0', 'font-size: 0.8em',
-            'white-space: nowrap', '-webkit-user-select: none', 'user-select: none',
-        ]));
-        out.push(rule('[dir="rtl"] .pt-stanza, .pt-stanza[dir="rtl"]', ['padding-left: 0', 'padding-right: 3em']));
-        out.push(rule('[dir="rtl"] .pt-line-number, .pt-stanza[dir="rtl"] .pt-line-number', ['right: auto', 'left: 100%', 'margin-right: 0', 'margin-left: 0.8em']));
-    }
-    // Tab stops (#622): a line holding tabs is a row of its parts; a filler
-    // (with its leader as a border on the baseline) pushes the part after it
-    // to the row's end, a start stop's part keeps its printed width.
-    if (options.tabs) {
-        out.push(rule('.pt-tab-row', ['display: flex', 'align-items: baseline', 'text-indent: 0']));
-        out.push(rule('.pt-tab-part', ['flex: 0 1 auto']));
-        out.push(rule('.pt-tab-rest', ['flex: 1 1 0']));
-        out.push(rule('.pt-tab-fill', ['flex: 1 1 auto', 'min-width: 1em', 'margin: 0 0.5em']));
-        out.push(rule('.pt-tab-gap', ['flex: 0 0 0.5em']));
-        out.push(rule('.pt-leader-dots', ['border-bottom: 0.12em dotted currentColor']));
-        out.push(rule('.pt-leader-rule', ['border-bottom: 0.06em solid currentColor']));
-    }
-    // Code listings (#624): the box of `codeStyle` around `<pre><code>`, the
-    // lines as written in the code face, turned over by the reading system
-    // when the screen is narrow (`pre-wrap`); numbers and wrap left out of a
-    // selection; the highlighted lines tinted.
-    if (options.code) {
-        const cs = resolvedCodeStyle(config);
-        const codePx = dimensionToPx(cs.fontSize, dpi, bodyPx);
-        const bodyLead = body.lineHeight.unit === 'em' || body.lineHeight.unit === 'rem' ? body.lineHeight.value * bodyPx : px(body.lineHeight);
-        const codeLead = cs.lineHeight ? lh(cs.lineHeight, codePx) : `line-height: ${round(bodyLead / codePx)}`;
-        const len = (d) => em(d, codePx);
-        out.push(rule('.pt-code-box', [
-            'display: block',
-            `margin: ${em(cs.marginTop, codePx)} 0 ${em(cs.marginBottom, codePx)}`,
-            `font-size: ${round(codePx / bodyPx)}em`,
-            cs.backgroundEnabled && color(cs.background, 'background-color'),
-            cs.border.enabled && `border: ${round(px(cs.border.width) / codePx)}em solid ${cs.border.color.hex}`,
-            px(cs.borderRadius, codePx) > 0 && `border-radius: ${len(cs.borderRadius)}`,
-            `padding: ${len(cs.padding.top)} ${len(cs.padding.right)} ${len(cs.padding.bottom)} ${len(cs.padding.left)}`,
-            'text-indent: 0',
-        ]));
-        out.push(rule('.pt-code-title', [fam(cs.titleStyle?.fontFamily ?? cs.fontFamily), 'font-weight: bold', 'margin: 0 0 0.4em', 'text-indent: 0']));
-        out.push(rule('pre.pt-code', [
-            fam(cs.fontFamily), 'font-size: 1em', codeLead, 'margin: 0', color(cs.color),
-            'white-space: pre-wrap', 'overflow-wrap: anywhere', `tab-size: ${cs.tabSize}`, `-moz-tab-size: ${cs.tabSize}`,
-            'text-align: left', 'hyphens: none',
-        ]));
-        out.push(rule('pre.pt-code code', ['font: inherit', 'background: none']));
-        out.push(rule('.pt-code-num', [color(cs.lineNumberColor), 'margin-right: 1em', '-webkit-user-select: none', 'user-select: none']));
-        out.push(rule('mark.pt-code-hl', [color(cs.highlightBackground, 'background-color'), 'color: inherit']));
-    }
-    // Drop caps (#623): CSS initial letters, `lines` tall, sunk `sink`
-    // lines; a reading system without `initial-letter` floats the letter,
-    // about as tall, on the start side.
-    if (options.dropCaps && options.dropCaps.length > 0) {
-        out.push(rule('.pt-has-dropcap', ['text-indent: 0']));
-        out.push(rule('.pt-dropcap', ['float: left', 'line-height: 0.85', 'margin: 0.05em 0.08em 0 0', 'text-indent: 0']));
-        out.push(rule('[dir="rtl"] .pt-dropcap, p[dir="rtl"] .pt-dropcap', ['float: right', 'margin: 0.05em 0 0 0.08em']));
-        for (const shape of options.dropCaps) {
-            const [lines, sink] = shape.split('-').map(Number);
-            out.push(rule(`.pt-dropcap-${shape}`, [`font-size: ${round(lines * 1.25)}em`]));
-            out.push(`@supports (initial-letter: 1) or (-webkit-initial-letter: 1) {\n  .pt-dropcap-${shape} { float: none; margin: 0 0.08em 0 0; font-size: 1em; line-height: inherit; -webkit-initial-letter: ${lines} ${sink}; initial-letter: ${lines} ${sink}; }\n}\n`);
-        }
-    }
-    // Text wrap (#627): a figure or a box floated to its side; what cannot
-    // run beside it in print (headings, other figures, tables, boxes,
-    // formulas, poems) clears it.
-    if (options.wraps) {
-        out.push(rule('.pt-wrap', ['margin-top: 0', 'margin-bottom: 1em']));
-        out.push(rule('.pt-wrap-left', ['float: left', 'clear: left']));
-        out.push(rule('.pt-wrap-right', ['float: right', 'clear: right']));
-        out.push(rule('.pt-wrap img', ['max-width: 100%', 'height: auto']));
-        out.push(rule('h1, h2, h3, h4, h5, h6, figure:not(.pt-wrap), table, aside:not(.pt-wrap), .pt-math-display, .pt-stanza, .pt-verse', ['clear: both']));
-    }
-    if (options.verse) {
-        // The poem as wide as its widest bayt, centred: its hemistichs share
-        // one width, as in print, instead of drifting to the screen's edges.
-        out.push(rule('.pt-verse', ['width: fit-content', 'max-width: 100%', 'margin: 0.5em auto', 'text-indent: 0']));
-        out.push(rule('.pt-bayt', [
-            'display: grid',
-            'grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr)',
-            'column-gap: 1em',
-            'margin: 0',
-            'text-indent: 0',
-            'text-align: start',
-            'hyphens: manual',
-            'page-break-inside: avoid',
-            'break-inside: avoid',
-        ]));
-        out.push(rule('.pt-sadr', ['grid-column: 1', 'text-align: start']));
-        out.push(rule('.pt-verse-ornament', ['grid-column: 2', 'text-align: center']));
-        out.push(rule('.pt-ajuz', ['grid-column: 3', 'text-align: end']));
-        out.push(rule('.pt-bayt-single .pt-sadr', ['grid-column: 1 / -1', 'text-align: center']));
-        out.push('@media (max-width: 30em) {\n' +
-            '  .pt-bayt { display: block; }\n' +
-            '  .pt-sadr, .pt-ajuz { display: block; }\n' +
-            '  .pt-verse-ornament { display: none; }\n' +
-            '}\n');
-    }
+    createTextRules({
+        config, options, dpi, body, bodyPx, fam, em, lh, color, px, spacingEm, out
+    });
+    createFigureRules({
+        config, options, dpi, bodyPx, fam, em, color, px, out
+    });
+    createBoxRules({
+        config, options, dpi, body, bodyPx, fam, em, lh, color, px, spacingEm, rtl, out
+    });
+    createApparatusRules({
+        config, options, dpi, body, bodyPx, fam, lh, color, px, out
+    });
+    createVerseRules({
+        config, options, dpi, body, bodyPx, fam, em, lh, color, px, out
+    });
     return {
         css: out.filter(Boolean).map((r) => (typeof r === 'string' ? r : ruleText(r))).join('\n'),
         families,