Kurz gesagt

Ein Kapitel eines Musiktheoriebuchs darüber, wie musikalische Phrasen enden. Die Notenbeispiele stehen als kurze Textzeilen im Kapitel, und Postext zeichnet daraus Notenlinien und Noten; das längste geht auf der nächsten Seite weiter.

Was Sie setzen

Kapitel 5 eines Kurses in Harmonielehre am Klavier, 180 × 250 mm in der Libre Caslon, über die fünf Kadenzen: vollkommener und unvollkommener Ganzschluss, Halbschluss, plagaler Schluss und Trugschluss. Jede Kadenz bekommt zwei kurze Absätze und ein dreistimmiges Notenbeispiel mit seinen Stufenziffern unter der Notenzeile, in ABC direkt im Markdown geschrieben. Das Kapitel endet mit Greensleeves in a-Moll, über jedem Takt eine Stufenziffer, und diese Melodie ist zu lang für den Platz, der auf Seite 3 bleibt: Sie setzt dort drei Systeme und die letzten zwei oben auf Seite 4, zwischen Systemen umbrochen, so wie ein Absatz zwischen Zeilen umbricht. Größe der Notenzeile, Notenschrift und Abstände werden einmal in der Konfiguration festgelegt, sodass die fünf Beispiele und die Melodie gleich aussehen.

Dieses Rezept beantwortet

Wie setze ich Notenbeispiele, als Notation geschrieben, in den Text eines Lehrbuchs?

Die kurze Antwort

script.js · Zeilen 36–51im vollständigen Code

// Each ```abc fence in the chapter is engraved at the width of the text column and cut
// into systems. The style is set once here; the Markdown only holds the notation.
const scoreStyle = {
  staffSize: mm(5.5), // a textbook's rastral: examples read at arm's length on a desk
  musicFont: 'Bravura', // the traditional engraved look, heavy enough beside Caslon
  textFont: 'Libre Caslon Text', // the Roman numerals of `w:` lines, in the text face
  spacing: 1.6, // air between the chords: an example reads as a progression, not a cluster
  barNumbers: 'system',
  systemGap: mm(4),
  marginTop: pt(LEAD / 2),
  marginBottom: pt(LEAD / 2),
  color: col('ink'),
  // A long example runs on into the next page between two systems, never leaving one
  // system alone at the foot of a page or at the head of the next.
  minSystemsAtBreak: 2,
};

Zutaten

Funktionen: Notensatz Notenstil Gestaltete Auftakte Überschriftenattribute Kolumnentitel und Seitenzahlen Gespiegelte Ränder Kopfzeilen nach Seitenrolle Kästen Absatzformate Semantische Farbpalette Witwen, Waisen und kurze Ausgangszeilen PDF-Export
Nutzt außerdem: Code-Listings Im PDF eingebettete Schriften Hoch- und Tiefstellung
Schrift: Libre Caslon Text, Libre Caslon Display, Libre Franklin (SIL OFL 1.1)
Dateien: Keine: Jedes Bild wird im Code gezeichnet
API: buildDocumentWithFontsdecompressWoff2initMusicEnginerenderPageToCanvasrenderToPdf

Zubereitung

#1 · Das Beispiel dort schreiben, wo der Text es braucht

Ein mit abc markierter Block enthält die Noten, und der Text läuft danach weiter. L:1/2 macht jeden Akkord ohne Längenangabe zur Halben, [Bdg] stapelt drei Noten in einer Stimme, und eine w:-Zeile setzt ein Wort unter jeden Akkord, hier die Stufenziffern. Das Attribut alt ist das, was ein Screenreader und das getaggte PDF anstelle des Bildes sagen.

```abc {alt="Ganzschluss in G-Dur: I, IV, V, I"}
X:1
M:4/4
L:1/2
K:G
[Bdg] [ceg] | [Adf] [Bdg] |]
w: I IV V I
```

#2 · Jeder Partitur das Aussehen des Buchs geben

Die kurze Antwort ist die ganze Gestaltung der Noten: eine Notenzeile von 5,5 mm, wie Harmonielehrbücher sie für Beispiele verwenden, die am Klavier gelesen werden, die Bravura neben dem Text in der Caslon, und die Ziffern in der Textschrift statt in der Times des Notenstechers. spacing: 1.6 verteilt vier Akkorde in Halben über ein Drittel der Satzbreite, sodass sich eine Akkordfolge Akkord für Akkord liest. Dieselbe Einstellung entscheidet, wie viele Takte von Greensleeves auf ein System passen: drei, bei 125 mm Satzbreite.

#3 · Ein langes Beispiel weiterlaufen lassen

minSystemsAtBreak: 2 hält Greensleeves über das Umblättern hinweg lesbar. Die Melodie ergibt fünf Systeme; drei passen an den Fuß von Seite 3, also gehen zwei auf Seite 4, und keine Seite bleibt mit einem einzelnen System zurück. Eine Partitur mit weniger als vier Systemen wandert ganz auf die nächste Seite, wie es die kurzen Kadenzbeispiele täten.

#4 · Den Notenstecher vor dem Build starten

script.js · Zeilen 264–270im vollständigen Code

// The engraver (Verovio) loads only for books with music: start it before the build,
// or every score is laid out as a grey placeholder box.
await initMusicEngine();
const doc = await buildDocumentWithFonts({ markdown }, config, kitFonts(FONTS));
showPages(doc, { title: t({ en: 'Harmony textbook', es: 'Manual de armonía' }) });
// The PDF draws every system as vector paths, the numerals in the embedded text face.
offerPdf(() => renderToPdf(doc, { fontProvider: fontsourceProvider }), `${RECIPE}.pdf`);

Verovio umfasst etwa 3,7 MB WebAssembly, deshalb lädt die Engine es nur, wenn Sie danach fragen. Ohne initMusicEngine() läuft das Layout trotzdem, und jede Partitur ist ein grauer Kasten in der richtigen Größe. renderToPdf braucht nichts weiter: Das PDF zeichnet jedes System als Vektorpfade und setzt die Ziffern in der eingebetteten Caslon.

#5 · Das Kapitel mit einem abgesenkten Titel eröffnen

script.js · Zeilen 55–72im vollständigen Code

const opener = {
  enabled: true,
  minHeight: mm(48),
  slot: { elements: [
    { kind: 'text', id: 'kicker', content: '{attr.kicker}', fontFamily: LABEL, fontSize: pt(8.5),
      fontWeight: 700, letterSpacing: pt(1.7), textTransform: 'uppercase', color: col('accent'),
      align: 'left', placement: { anchor: { to: 'container', edge: 'top-left' },
        offset: { x: mm(0), y: mm(12) } } },
    { kind: 'text', id: 'title', content: '{titleText}', fontFamily: 'Libre Caslon Display',
      fontSize: pt(34), lineHeight: 1.05, color: col('ink'), align: 'left', overflow: 'wrap',
      placement: { anchor: { to: '#kicker', edge: 'below' }, offset: { x: mm(0), y: mm(3) },
        size: { width: mm(110), height: 'auto' } } },
    { kind: 'rule', id: 'rule', direction: 'horizontal', thickness: pt(1.5),
      color: col('accent'),
      placement: { anchor: { to: '#title', edge: 'below' }, offset: { x: mm(0), y: mm(5) },
        size: { width: mm(16) } } },
  ] },
};

Der Auftakt nimmt seine Dachzeile aus dem Attribut kicker der Überschrift und reserviert 48 mm, genug für den Titel und seine Linie, während das erste Beispiel noch auf Seite 1 steht.

Das ganze Rezept

Sandbox

// ═══ Postext Cookbook · Nº 163 · Harmony textbook with ABC examples ═════════════
// https://postext.dev/en/cookbook/harmony-textbook-abc-examples
// Code: MIT · Text: original (CC BY 4.0) · Music: Greensleeves (traditional, PD)
// Fonts: Libre Caslon Text & Display, Libre Franklin (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 = 'harmony-textbook-abc-examples';

// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: a conservatory green for the accents, warm ink for text and notes
const palette = {
  ink: '#1f1c19', // text and notation: a warm near-black
  accent: '#2f5d4f', // kickers, rules, Roman numerals in the table
  tint: '#edf2ef', // the box of key terms
  rule: '#c3cfc9', // hairlines
  muted: '#5c6863', // running heads, colophon
  paper: '#ffffff',
};
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.accent, model: 'hex' } },
];
// #endregion
const TRIM = { width: 180, height: 250 };
const MARGIN = { top: 22, bottom: 24, inner: 22, outer: 33 }; // a 125 mm measure
const LEAD = 14.5; // body leading in pt: the baseline grid
const LABEL = 'Libre Franklin';

// #region answer: one score style for every example in the text
// Each ```abc fence in the chapter is engraved at the width of the text column and cut
// into systems. The style is set once here; the Markdown only holds the notation.
const scoreStyle = {
  staffSize: mm(5.5), // a textbook's rastral: examples read at arm's length on a desk
  musicFont: 'Bravura', // the traditional engraved look, heavy enough beside Caslon
  textFont: 'Libre Caslon Text', // the Roman numerals of `w:` lines, in the text face
  spacing: 1.6, // air between the chords: an example reads as a progression, not a cluster
  barNumbers: 'system',
  systemGap: mm(4),
  marginTop: pt(LEAD / 2),
  marginBottom: pt(LEAD / 2),
  color: col('ink'),
  // A long example runs on into the next page between two systems, never leaving one

Das zusammengesetzte script.js läuft unverändert: Fügen Sie es in das Modulskript einer beliebigen Seite ein, oder öffnen Sie das Rezept auf CodePen. Ordner des Rezepts auf GitHub ↗ (öffnet sich in einem neuen Tab)

Varianten

#Leland für eine leichtere Seite nehmen

Leland, die Notenschrift von MuseScore, hat dünnere Hälse und kleinere Notenköpfe als Bravura; sie passt zu einem Buch, das in einer leichten Textschrift gesetzt ist.

-  musicFont: 'Bravura',
+  musicFont: 'Leland',

#Eine zweite Stimme in einem anderen Format schreiben

Der ABC-Leser nimmt nur eine Stimme. Für Sopran und Bass auf getrennten Notenzeilen schreiben Sie das Beispiel in Humdrum oder MusicXML; die Konservatoriumsschule setzt vierstimmige Choräle auf diese Weise.

Häufige Fehler

Schreiben Sie die Länge eines Akkords in die Klammern, [B2d2g2], oder stellen Sie L: auf den Wert des Akkords: Eine Länge nach der Klammer, [Bdg]2, wird als Standardlänge gelesen.
Verovios ABC-Leser gibt jede Silbe einer w:-Zeile der nächsten Note und ignoriert * und _, sodass eine w:-Zeile keine Noten überspringen kann. Um einige Takte zu kennzeichnen, schreiben Sie die Zeichen als Akkordsymbole über die Notenzeile, wie es das Beispiel mit Greensleeves tut.
Eine Textschrift hat selten die Zeichen ♯ und ♭: Schreiben Sie „Fis“ in den Fließtext, sonst setzt der Browser das Zeichen aus einer Systemschrift.

Nachweise

Rezept: Ignacio Ferro
Text: The chapter on cadences and its examples, written for this recipe · Ignacio Ferro · CC BY 4.0
Greensleeves, English tune of the sixteenth century, in its common modern form · Traditional · gemeinfrei
Schriften: Libre Caslon Text (SIL OFL 1.1) · Libre Caslon Display (SIL OFL 1.1) · Libre Franklin (SIL OFL 1.1)
Code: MIT, wie Postext

Diesen Text bearbeiten ↗ (öffnet sich in einem neuen Tab)Ordner des Rezepts auf GitHub ↗ (öffnet sich in einem neuen Tab)

Kurz gesagt

#Was Sie setzen

#Die kurze Antwort

#Zutaten

#Zubereitung

#1 · Das Beispiel dort schreiben, wo der Text es braucht

#2 · Jeder Partitur das Aussehen des Buchs geben

#3 · Ein langes Beispiel weiterlaufen lassen

#4 · Den Notenstecher vor dem Build starten

#5 · Das Kapitel mit einem abgesenkten Titel eröffnen

#Das ganze Rezept

#Varianten

#Leland für eine leichtere Seite nehmen

#Eine zweite Stimme in einem anderen Format schreiben

#Häufige Fehler

#Nachweise

Weitere Rezepte

Eine farbcodierte Familie von Lehrbuchkästen

Lehrbuch mit Randspalte

Ein Schullesebuch mit Furigana über jedem Kanji