In breve

Un capitolo di un manuale di teoria musicale su come finiscono le frasi. Gli esempi si scrivono come brevi righe di testo nel capitolo e Postext li disegna come pentagrammi e note; il più lungo prosegue nella pagina seguente.

Che cosa comporrai

Il capitolo 5 di un corso di armonia alla tastiera, 180 × 250 mm in Libre Caslon, sulle cinque cadenze: perfetta e imperfetta, sospesa, plagale e d’inganno. Ogni cadenza ha due brevi paragrafi e un esempio a tre voci con i numeri romani sotto il pentagramma, scritto in ABC direttamente nel Markdown. Il capitolo termina con Greensleeves in la minore, con un numero sopra ogni battuta, e quella melodia è troppo lunga per lo spazio che resta a pagina 3: lì mette tre sistemi e gli ultimi due in cima a pagina 4, divisa tra un sistema e l’altro come un paragrafo si divide tra le righe. Dimensione del pentagramma, font musicale e spaziatura si impostano una volta sola nella configurazione, così i cinque esempi e la melodia hanno lo stesso aspetto.

Questa ricetta risponde a

Come inserisco esempi musicali nel testo di un manuale, scritti come notazione?

La risposta breve

script.js · righe 36–51nel codice completo

// 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,
};

Ingredienti

Funzionalità: Notazione musicale Stile di partitura Aperture progettate Attributi dei titoli Testatine e folio Margini speculari Testatine secondo il ruolo della pagina Riquadri Stili di paragrafo Tavolozza di colori semantica Vedove, orfane e righe corte Esportazione in PDF
Usa anche: Listati di codice Font incorporati nel PDF Apici e pedici
Tipo: Libre Caslon Text, Libre Caslon Display, Libre Franklin (SIL OFL 1.1)
Risorse: Nessuna: ogni immagine è disegnata nel codice
API: buildDocumentWithFontsdecompressWoff2initMusicEnginerenderPageToCanvasrenderToPdf

Preparazione

#1 · Scrivi l’esempio dove serve al testo

Un blocco marcato abc contiene la notazione, e il testo riprende dopo. L:1/2 fa di ogni accordo senza durata una minima, [Bdg] impila tre note in una sola voce e una riga w: mette una parola sotto ogni accordo, qui i numeri romani. L’attributo alt è ciò che dicono uno screen reader e il PDF taggato al posto dell’immagine.

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

#2 · Dai a ogni partitura l’aspetto del libro

La risposta breve è tutto il progetto grafico della musica: un pentagramma di 5,5 mm, come nei manuali di armonia per esempi letti alla tastiera, Bravura accanto al testo in Caslon e i numeri nel carattere del testo invece del Times dell’incisore. spacing: 1.6 distribuisce quattro accordi di minima su un terzo della giustezza, così la progressione si legge accordo per accordo. La stessa impostazione decide quante battute di Greensleeves stanno in un sistema: tre, in una giustezza di 125 mm.

#3 · Lascia proseguire un esempio lungo

minSystemsAtBreak: 2 è ciò che tiene leggibile Greensleeves al cambio di pagina. La melodia risulta di cinque sistemi; tre stanno al piede di pagina 3, quindi due passano a pagina 4, e nessuna pagina resta con un sistema solo. Una partitura con meno di quattro sistemi passa intera alla pagina seguente, come farebbero i brevi esempi di cadenze.

#4 · Avvia l’incisore prima della composizione

script.js · righe 264–270nel codice completo

// 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 occupa circa 3,7 MB di WebAssembly, quindi il motore lo carica solo quando lo chiedi. Senza initMusicEngine() l’impaginazione si fa comunque e ogni partitura è un riquadro grigio della misura giusta. renderToPdf non ha bisogno d’altro: il PDF disegna ogni sistema come tracciati vettoriali e compone i numeri nel Caslon incorporato.

#5 · Apri il capitolo con un titolo abbassato

script.js · righe 55–72nel codice completo

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) } } },
  ] },
};

L’apertura prende l’occhiello dall’attributo kicker del titolo e riserva 48 mm, abbastanza per il titolo e il suo filetto con il primo esempio ancora a pagina 1.

La ricetta completa

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

Lo script.js composto funziona così com’è: incollalo nello script modulo di qualsiasi pagina, oppure apri la ricetta su CodePen. Cartella della ricetta su GitHub ↗ (si apre in una nuova scheda)

Varianti

#Usa Leland per una pagina più leggera

Leland, il font di MuseScore, ha gambi più sottili e teste più piccole di Bravura; si adatta a un libro composto in un carattere di testo leggero.

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

#Scrivi una seconda voce in un altro formato

Il lettore ABC accetta una sola voce. Per soprano e basso su pentagrammi separati, scrivi l’esempio in Humdrum o in MusicXML; il metodo da conservatorio compone così corali a quattro voci.

Errori frequenti

Scrivi la durata di un accordo dentro le parentesi quadre, [B2d2g2], oppure imposta L: sul valore dell’accordo: una durata dopo la parentesi, [Bdg]2, viene letta come la durata predefinita.
Il lettore ABC di Verovio assegna ogni sillaba di una riga w: alla nota successiva e ignora * e _, quindi una riga w: non può saltare note. Per segnare poche battute, scrivi i segni come sigle degli accordi sopra il pentagramma, come fa l’esempio di Greensleeves.
Un carattere di testo ha di rado i segni ♯ e ♭: scrivi «fa diesis» nel testo, altrimenti il browser prende il segno da un font di sistema.

Crediti

Ricetta: Ignacio Ferro
Testo: 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 · pubblico dominio
Font: Libre Caslon Text (SIL OFL 1.1) · Libre Caslon Display (SIL OFL 1.1) · Libre Franklin (SIL OFL 1.1)
Codice: MIT, come Postext

Modifica questo testo ↗ (si apre in una nuova scheda)Cartella della ricetta su GitHub ↗ (si apre in una nuova scheda)

In breve

#Che cosa comporrai

#La risposta breve

#Ingredienti

#Preparazione

#1 · Scrivi l’esempio dove serve al testo

#2 · Dai a ogni partitura l’aspetto del libro

#3 · Lascia proseguire un esempio lungo

#4 · Avvia l’incisore prima della composizione

#5 · Apri il capitolo con un titolo abbassato

#La ricetta completa

#Varianti

#Usa Leland per una pagina più leggera

#Scrivi una seconda voce in un altro formato

#Errori frequenti

#Crediti

Altro dal Ricettario

Una famiglia di riquadri da manuale, distinti per colore

Libro di testo con una colonna a margine

Un libro di lettura scolastico con furigana su ogni kanji