En poques paraules

Un capítol d'un manual de teoria musical sobre com acaben les frases. Els exemples s'escriuen com a text dins del capítol i Postext els dibuixa com a pentagrames; el més llarg continua a la pàgina següent.

Què compondràs

El capítol 5 d'un curs d'harmonia al teclat, de 180 × 250 mm en Libre Caslon, sobre les cinc cadències: perfecta, imperfecta, semicadència, plagal i trencada. Cada cadència porta dos paràgrafs breus i un exemple a tres veus amb les seves xifres romanes sota el pentagrama, escrit en ABC dins del mateix Markdown. El capítol acaba amb Greensleeves en la menor, amb una xifra romana sobre cada compàs, i aquesta melodia no cap en el que queda de la pàgina 3: hi posa tres sistemes i els dos últims al capdamunt de la pàgina 4, partida entre sistemes igual que un paràgraf es parteix entre línies. La mida del pentagrama, la font musical i l'espaiat es fixen una sola vegada a la configuració, de manera que els cinc exemples i la melodia comparteixen el mateix aspecte.

Aquesta recepta respon a

Com poso exemples musicals dins del text d'un llibre de text, escrits com a notació?

La resposta curta

script.js · línies 36–51al codi complet

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

Ingredients

Funcions: Notació musical Estil de partitura Obertures dissenyades Atributs de títol Capçaleres i folis Marges simètrics Capçaleres segons el tipus de pàgina Requadres Estils de paràgraf Paleta de color semàntica Vídues, òrfenes i línies curtes Exportació a PDF
També fa servir: Llistats de codi Fonts incrustades al PDF Superíndexs i subíndexs
Tipografia: Libre Caslon Text, Libre Caslon Display, Libre Franklin (SIL OFL 1.1)
Recursos: Cap: totes les imatges es dibuixen en codi
API: buildDocumentWithFontsdecompressWoff2initMusicEnginerenderPageToCanvasrenderToPdf

Elaboració

#1 · Escriu l'exemple on el demana el text

Un bloc marcat abc conté la notació, i el text continua després. L:1/2 fa de cada acord sense durada una blanca, [Bdg] apila tres notes en una sola veu i una línia w: posa una paraula sota cada acord, aquí les xifres romanes. L'atribut alt és el que llegeixen un lector de pantalla i el PDF etiquetat en lloc de la imatge.

```abc {alt="Cadència perfecta en sol major: I, IV, V, I"}
X:1
M:4/4
L:1/2
K:G
[Bdg] [ceg] | [Adf] [Bdg] |]
w: I IV V I
```

#2 · Dona a cada partitura l'aspecte del llibre

La resposta curta és tot el disseny de la música: un pentagrama de 5,5 mm, el que fan servir els manuals d'harmonia per a exemples que es llegeixen assegut al piano, Bravura al costat del text en Caslon i les xifres en la lletra del text en lloc de la Times del gravador. spacing: 1.6 reparteix quatre acords de blanca per un terç de la caixa, de manera que la progressió es llegeix acord per acord. El mateix ajust decideix quants compassos de Greensleeves caben en un sistema: tres, en una caixa de 125 mm.

#3 · Deixa que un exemple llarg continuï

minSystemsAtBreak: 2 és el que manté llegible Greensleeves en passar la pàgina. La melodia surt en cinc sistemes; tres caben al peu de la pàgina 3, així que dos passen a la 4, i cap pàgina no es queda amb un sistema solt. Una partitura de menys de quatre sistemes passa sencera a la pàgina següent, com farien els exemples breus de cadències.

#4 · Engega el gravador abans de compondre

script.js · línies 263–269al codi complet

// 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 ocupa uns 3,7 MB de WebAssembly, així que el motor només el carrega quan l'hi demanes. Sense initMusicEngine() la composició es fa igualment i cada partitura és un recuadre gris de la mida correcta. renderToPdf no necessita res més: el PDF dibuixa cada sistema com a traçats vectorials i posa les xifres en la Caslon incrustada.

#5 · Obre el capítol amb el títol enfonsat

script.js · línies 55–72al codi complet

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'obertura pren l'avanttítol de l'atribut kicker del títol i reserva 48 mm, just el que cal per al títol i el seu filet amb el primer exemple encara a la pàgina 1.

La recepta 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 = 'es'; // @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

L'script.js compost funciona tal com és: enganxa'l com a script de mòdul en qualsevol pàgina o obre la recepta a CodePen. Carpeta de la recepta a GitHub ↗ (s'obre en una pestanya nova)

Variants

#Fes servir Leland per a una pàgina més lleugera

Leland, la font de MuseScore, té pals més prims i caps més petits que Bravura; va bé amb un llibre compost en una lletra de text lleugera.

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

#Escriu una segona veu en un altre format

El lector d'ABC pren una sola veu. Per a un soprano i un baix en pentagrames diferents, escriu l'exemple en Humdrum o en MusicXML; el mètode de conservatori compon així corals a quatre veus.

Errors freqüents

Escriu la durada d'un acord dins dels claudàtors, [B2d2g2], o ajusta L: al valor de l'acord: una durada després del claudàtor, [Bdg]2, es llegeix com la durada per defecte.
El lector d'ABC de Verovio dona cada síl·laba d'una línia w: a la nota següent i ignora * i _, així que una línia w: no pot saltar-se notes. Per assenyalar uns quants compassos, escriu les marques com a xifrats sobre el pentagrama, com fa l'exemple de Greensleeves.
Una lletra de text rarament porta els signes ♯ i ♭: escriu «fa sostingut» a la prosa, o el navegador posarà el signe amb una font del sistema.

Crèdits

Recepta: 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 · domini públic
Fonts: Libre Caslon Text (SIL OFL 1.1) · Libre Caslon Display (SIL OFL 1.1) · Libre Franklin (SIL OFL 1.1)
Codi: MIT, com Postext

Editar aquest text ↗ (s'obre en una pestanya nova)Carpeta de la recepta a GitHub ↗ (s'obre en una pestanya nova)

En poques paraules

#Què compondràs

#La resposta curta

#Ingredients

#Elaboració

#1 · Escriu l'exemple on el demana el text

#2 · Dona a cada partitura l'aspecte del llibre

#3 · Deixa que un exemple llarg continuï

#4 · Engega el gravador abans de compondre

#5 · Obre el capítol amb el títol enfonsat

#La recepta completa

#Variants

#Fes servir Leland per a una pàgina més lleugera

#Escriu una segona veu en un altre format

#Errors freqüents

#Crèdits

Més del Receptari

Requadres de llibre de text amb codi de colors

Llibre de text amb columna al marge

Un llibre de lectura escolar amb furigana a cada kanji