跳到主要内容
食谱编号165

排版食谱 · 第6章 · 框与注释

MEI谱例与脚注中的校勘记

MEI 5代码块以5毫米谱表刻印在正文中,异文用app、lem和rdg编码,校勘记按小节和音符排在脚注里。

本页内容
输出
Canvas · PDF
难度
中级
Postext
已用Postext 1.54.0测试
需要≥ 1.54.0 · postext-pdf ≥ 1.54.0
许可证
更新于2026年10月22日
代码MIT · 文本CC BY 4.0

第2–3页,共5页

  • 英文样例:尚无中文版本
  • 成品尺寸156 × 234 mm
  • 1栏
  • Crimson Pro 11/14.5
  • Cormorant Garamond
  • Source Sans 3
  • 5页
  • 难度
  • Postext 1.54.0
  • 排版用时24 ms
  • 145行代码

简单来说

一部中世纪音乐研究著作中的一章。一首十三世纪英国轮唱曲的几个短小段落以乐谱形式印在正文里,每页底部的注释逐小节记下旧版本之间的出入。

成品一览

一部研究英国古物学家如何阅读中世纪音乐的学术著作中的第3章:五页,开本156 × 234毫米,讨论雷丁轮唱曲 Sumer is icumen in,以及1776年至1889年间为它编写总谱的各位编者。轮唱曲的三个段落用Leipzig字体、5毫米谱表刻印在正文中,小节号沿用W. S. Rockstro总谱的编号;每段讨论都在页脚引出自己的校勘记:“b. 40, n. 2 A ] G Hw, Bu”。注释简短紧凑,正是校勘记的样子;乐谱占满正文的版心宽度。每条异文都出自Rockstro为Grove《音乐与音乐家辞典》所写的条目,本章在第二段就交代了这一点。

这道食谱解答

  • 怎样用脚注为谱例加上记录各版本异文的校勘记?
  • 脚注怎么做?

简短回答

script.js · 第36–60行在完整代码中
// In the Markdown each example is a ```mei fence. A variant is encoded where it stands,
// <app><lem>…</lem><rdg source="#Hw #Bu">…</rdg></app>: the staff shows the lemma, and
// the file keeps the reading for anyone who opens the encoding. The apparatus entry is a
// footnote cited from the paragraph that discusses the bar: `[^b40]: **b. 40, n. 2** A ] G`.
const scoreStyle = {
  staffSize: mm(5), // running-text examples: 4.5–5.5 mm
  musicFont: 'Leipzig', // lighter than Bravura, close to a 19th-century plate
  textFont: 'Crimson Pro', // the underlay in the book's own face
  barNumbers: 'system', // the apparatus is keyed by bar: number every system
  spacing: 0.95,
  systemGap: mm(4),
  marginTop: pt(4),
  marginBottom: pt(LEAD / 2),
  color: col('ink'),
  minSystemsAtBreak: 2, // never leave one system of an example alone at a page foot
};
const footnotes = {
  placement: 'column', // the foot of the page in one column
  numbering: 'chapter',
  fontSize: pt(8.5),
  lineHeight: pt(10.75),
  hangingIndent: em(1.2), // turnover lines align past the number
  spaceBetween: pt(2),
  separator: { width: 0.2, lineWidth: pt(0.5), color: col('rubric') },
};

用料

类型
Crimson Pro, Cormorant Garamond, Source Sans 3(SIL OFL 1.1)
素材
无:所有图片都用代码绘制

做法

#1 · 把每个谱例写成MEI,异文一并写入

设置见上方的简短回答;音乐写在Markdown里,每个谱例一个 ```mei 代码块。两个来源不一致的地方,小节里放一个 <app>:采用的读法放在 <lem>,另一种放在 <rdg source="#Hw #Bu">。刻印的是 <lem>,所以谱例3.3第40小节印的是A,而Hawkins和Burney的G留在文件里,供打开编码的人查看。给每个代码块一个页面语言的 alt:屏幕阅读器和带标签的PDF读的就是它。

#2 · 让校勘记对准读者看到的小节

barNumbers: 'system' 在每行谱的第一个小节标号;每个代码块的 <measure n="37"> 从所依据版本中该段的起点开始计数,所以谱例3.3从37开始,注释里写“b. 40”,读者就能找到那个小节。校勘条目是普通的脚注,从讨论该小节的段落中引出:先写采用的读法,接右方括号,再写异文和斜体的版本代号。乐谱内部无法插入注码,所以注码放在说出这一读法的句子上。

#3 · 按正文的尺寸安排乐谱

5毫米的Leipzig谱表放在116毫米的版心里,每行容纳五到六个3/2拍的小节,谱例3.3的十一个小节正好排成两行。textFont 让歌词用正文字体Crimson Pro排印;minSystemsAtBreak: 2 避免一页只留下某个谱例的一行谱而其余转到下一页。每个谱例的标题是三级标题,因此不会脱离乐谱单独留在页底。

#4 · 允许带注释的页面提前结束

script.js · 第64–78行在完整代码中
const opener = {
  enabled: true,
  minHeight: mm(50), // every chapter's text starts on the same grid line
  slot: { elements: [
    { kind: 'text', id: 'kicker', content: '{attr.kicker}', ...label, fontSize: pt(8.5),
      letterSpacing: pt(1.8), color: col('rubric'), align: 'left',
      placement: at('container', 'top-left', 0, 8) },
    { kind: 'text', id: 'title', content: '{titleText}', fontFamily: 'Cormorant Garamond',
      italic: true, fontWeight: 500, fontSize: pt(29), lineHeight: 1.05, color: col('ink'),
      align: 'left', overflow: 'wrap', // design text ends in an ellipsis by default
      placement: { ...at('#kicker', 'below', 0, 3), size: { width: mm(100), height: 'auto' } } },
    { kind: 'rule', id: 'rule', direction: 'horizontal', thickness: pt(1), color: col('rubric'),
      placement: { ...at('#title', 'below', 0, 5), size: { width: mm(14) } } },
  ] },
};

章首页把正文下沉50毫米,上方是Cormorant斜体标题。后面若某页的下一行会带来一条较长的注释,这一页就提前几行结束;balancing: { maxLinesPerHeading: 1 } 防止分栏平衡把这段空白挪到下一节标题的上方,那样会像论述中断了一样。

#5 · 左页印书名,右页印章名

script.js · 第82–99行在完整代码中
const head = (id, content, parity, edge, x, extra = {}) => ({
  kind: 'text', id, content, parity, pages: 'body', // never on the opener
  ...label, fontSize: pt(7.5), letterSpacing: pt(1.3), color: col('muted'),
  placement: at('page', edge, x, 13), ...extra,
});
const folio = { color: col('rubric'), fontWeight: 700 };
const header = { elements: [
  head('verso-folio', '{pageNumber}', 'even', 'top-left', MARGIN.outer,
    { ...folio, align: 'left' }),
  head('verso-title', '{title}', 'even', 'top-left', MARGIN.outer + 8, { align: 'left' }),
  head('recto-title', '{chapterTitle}', 'odd', 'top-right', -(MARGIN.outer + 8),
    { align: 'right', overflow: 'ellipsis' }),
  head('recto-folio', '{pageNumber}', 'odd', 'top-right', -MARGIN.outer,
    { ...folio, align: 'right' }),
] };
// The opener carries a drop folio instead, centred under the text block.
const footer = { elements: [{ ...head('drop-folio', '{pageNumber}', 'all', 'bottom', 0,
  { ...folio, align: 'center', placement: at('page', 'bottom', 0, -11) }), pages: 'opener' }] };

页码用朱红色印在外侧,左页是书名,右页是章名;pages: 'body' 让它们不出现在章首页,章首页在页底居中印页码。

完整食谱

沙盒
// ═══ Postext Cookbook · Nº 165 · MEI music examples with a critical apparatus ═════
// https://postext.dev/en/cookbook/musicology-mei-apparatus
// Code: MIT · Text: original (CC BY 4.0) · Music: Sumer is icumen in, after Rockstro (PD)
// Fonts: Crimson Pro, Cormorant Garamond, Source Sans 3 (SIL OFL 1.1) · Needs postext ≥ 1.54.0
import {
  buildDocumentWithFonts, renderPageToCanvas, initMusicEngine,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';

const LANG = 'en'; // @lang: the language of the sample document ('en' | 'es')
const RECIPE = 'musicology-mei-apparatus';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: a rubric red for kickers, labels and the notes' rule; ink on cream
const palette = {
  ink: '#211d1a', // text and notation: a warm near-black
  rubric: '#8c2f1f', // the one accent, the red of the manuscript's rubrics
  muted: '#6c645b', // running heads, colophon
  rule: '#cbbfae', // hairlines
  paper: '#fcfaf6',
};
// col(id): a colour linked to its palette entry, with the entry's hex beside the id.
const col = (id) => ({ hex: palette[id], model: 'hex', paletteId: id });
const colorPalette = [
  ...Object.entries(palette).map(([id, hex]) => ({ id, name: id, value: { hex, model: 'hex' } })),
  // The engine's defaults link to main-color: point it at the accent, never the default blue.
  { id: 'main-color', name: 'accent (defaults)', value: { hex: palette.rubric, model: 'hex' } },
];
// #endregion
const MARGIN = { top: 22, bottom: 22, inner: 19, outer: 21 }; // 156 × 234 mm, mirrored
const LEAD = 14.5; // body leading in pt: the baseline grid
const at = (to, edge, x = 0, y = 0) => ({ anchor: { to, edge }, offset: { x: mm(x), y: mm(y) } });
const label = { fontFamily: 'Source Sans 3', fontWeight: 600, textTransform: 'uppercase' };

// #region answer: MEI examples engraved in the text, their apparatus in footnotes
// In the Markdown each example is a ```mei fence. A variant is encoded where it stands,
// <app><lem>…</lem><rdg source="#Hw #Bu">…</rdg></app>: the staff shows the lemma, and
// the file keeps the reading for anyone who opens the encoding. The apparatus entry is a
// footnote cited from the paragraph that discusses the bar: `[^b40]: **b. 40, n. 2** A ] G`.
const scoreStyle = {
  staffSize: mm(5), // running-text examples: 4.5–5.5 mm
  musicFont: 'Leipzig', // lighter than Bravura, close to a 19th-century plate
  textFont: 'Crimson Pro', // the underlay in the book's own face
  barNumbers: 'system', // the apparatus is keyed by bar: number every system
  spacing: 0.95,
  systemGap: mm(4),
  marginTop: pt(4),
  marginBottom: pt(LEAD / 2),

组合好的script.js可以直接运行:把它粘贴到任何页面的模块脚本中,或在CodePen上打开这道食谱。 GitHub上的食谱文件夹 ↗ (在新标签页中打开)

变化

#每个小节都标号

每行谱上有很多校勘条目时,每个小节都有号码更便于查找。

-  barNumbers: 'system', // the apparatus is keyed by bar: number every system
+  barNumbers: 'every',

#改用Bravura刻印谱例

Bravura的符头更粗,适合铜版刻印风格的出版社。

-  musicFont: 'Leipzig', // lighter than Bravura, close to a 19th-century plate
+  musicFont: 'Bravura',

常见问题

  • MEI 5的调号写成 scoreDef 或 staffDef 上的 keysig="1f"。MEI 4的属性 key.sig 会被悄悄忽略,降号随之消失。
  • 每个 staffDef 都要写 lines="5":没有它,音符和谱号会刻在没有谱线的空白上。
  • 刻印的是 <app> 中的 <lem>,不是 <rdg>。需要读者在页面上看到的异文,应写进校勘注或另立一个谱例。

致谢

文本
  • The chapter text and the apparatus notes, in English and Spanish · Ignacio Ferro · CC BY 4.0
  • Sumer is icumen in (13th century), the music examples transcribed from W. S. Rockstro's score and the readings his article reports, in A Dictionary of Music and Musicians, ed. George Grove, vol. 3, pp. 765–768, and vol. 4, pp. 1–3 (Macmillan, 1900 printing), as transcribed on Wikisource · Anonymous; William Smyth Rockstro · 公有领域
  • The Latin rubric of Harley MS 978, f. 11v, and the folio, as quoted in the Wikipedia article (fact check) · Wikipedia contributors · CC BY-SA 4.0
字体
Crimson Pro (SIL OFL 1.1) · Cormorant Garamond (SIL OFL 1.1) · Source Sans 3 (SIL OFL 1.1)
沙盒PDF