Kurz gesagt
Ein Lesetext für die Schule über die Geschichte des Buchdrucks. Fachbegriffe sind grün markiert, Jahreszahlen bernsteinfarben, Personen und Orte blau, und eine Legende auf der ersten Seite sagt, was jede Farbe bedeutet.
Was Sie setzen
Lesetext 2 einer Unterrichtseinheit in einem Geschichtslesebuch, Readings in Early Modern History: vier Seiten darüber, wie sich der Buchdruck zwischen 1450 und 1550 von Mainz aus über Europa verbreitete, auf einer Seite von 170 × 240 mm. Die Herausgeber haben den Text markiert, wie es eine sorgfältige Schülerin täte, mit einem Code, der im ganzen Buch gleich bleibt: Fachbegriffe auf einem grünen Band, Jahreszahlen auf Bernstein, Personen und Orte auf Hellblau. Eine Legende unter dem Titel erklärt den Code mit den drei Farben selbst, und das Glossar auf der letzten Seite beginnt jeden Eintrag mit seinem grünen Begriff. Die Markierungen sind Bänder unter gewöhnlichem Text, also brechen, trennen und füllen sich die Zeilen, als gäbe es die Bänder nicht.
Dieses Rezept beantwortet
- Wie hebe ich die Schlüsselwörter eines Lerntexts in Farben hervor, die jeweils etwas bedeuten (Begriffe, Daten, Namen)?
Die kurze Antwort
// :mark[Mainz]{style="name"} in the text picks a style by id. The band is painted under
// words that stay ordinary text, so the lines break, hyphenate and justify as if the
// mark were not there, and a mark that runs over a line end gets a band on each line.
const band = (id, name) => ({
id, name,
background: col(id), // pale enough for ink at full contrast on top
color: col('ink'), // the words keep the colour of the text
// borderRadius: 0 is the default (square ends, as a highlighter pen leaves them)
paddingX: em(0.12), // the band reaches a little past the first and the last letter
paddingTop: em(0.04), paddingBottom: em(0.1), // and down past the descenders
});
const markStyles = [
band('term', t({ en: 'Key term', es: 'Término clave' })),
band('date', t({ en: 'Date', es: 'Fecha' })),
band('name', t({ en: 'Name', es: 'Nombre' })),
];
Zutaten
- Funktionen
- HervorhebungenKästenSemantische FarbpaletteGestaltete AuftakteBilder in SeitengestaltungenÜberschriftenattributeKolumnentitel und SeitenzahlenKopfzeilen nach SeitenrolleGespiegelte RänderAbsatzformateWitwen, Waisen und kurze Ausgangszeilen
- Nutzt außerdem
- Literaturverzeichnisse und GlossareAbbildung und Tabelle in Ihrer SpracheEigene RessourcentypenAbbildungen und Tabellen als Ressourcen
- Schrift
- Source Serif 4, Source Sans 3 (SIL OFL 1.1)
- Dateien
press-1400.jpg- The printing workshop on the opening page, a painting (Generated With Diffusion Models, eigener Text)
Zubereitung
#1 · Ein Stil für jede Art von Wort
Der Code steht in der kurzen Antwort oben. markStyles deklariert drei benannte Stile, und der Text wählt für jede Markierung einen: :mark[Johann Fust]{style="name"}, :mark[1455]{style="date"}, :mark[colophon]{style="term"} (Hervorhebungen). Jeder Stil sagt, was er bedeutet (name sieht, wer den Text bearbeitet), also hält das Markdown fest, warum ein Wort markiert ist, nicht welche Farbe es trägt. Ändern Sie die Farbe eines Stils, ändern sich alle Jahreszahlen des Buchs mit. Die Enden sind gerade, wie seit postext 1.52 voreingestellt (Hervorhebungsstile): Ein Textmarker hinterlässt gerade Enden, ein abgerundetes Band liest sich wie ein Chip.
#2 · Drei Töne aus der Palette
const palette = {
ink: '#1f1c19', // text: a warm near-black
accent: '#8a3220', // kickers, rules, numbers: an iron-gall red
tint: '#f5f0e7', // the key's background
rule: '#d3cabc', // hairlines
muted: '#6b645b', // running heads, colophon
paper: '#ffffff',
term: '#cce8c8', // key terms: a pale green
date: '#fbe0a1', // dates: amber
name: '#cfe0f4', // people and places: a pale blue
};
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' } })),
{ id: 'main-color', name: 'accent (defaults)', value: { hex: palette.accent, model: 'hex' } },
];
Die drei Bänder sind Einträge der Palette wie die Schrift- und die Akzentfarbe, also kann, wer das Buch im Sandbox öffnet, den Code an einem einzigen Farbfeld umfärben. Sie sind hell, etwa so hell wie der Fond des Kastens, und die Schrift darauf behält einen Kontrast von 12,6:1 oder mehr; die drei bleiben unterscheidbar, wo sie in einer Zeile aufeinandertreffen, wie bei „In 1517 Martin Luther“ auf Seite 3. Eine Markierung braucht keinen Platz: paddingX reicht 0,12 em in den Wortzwischenraum, paddingBottom zieht das Band unter die Unterlängen, beides in Raum, der schon da war.
#3 · Der Auftakt: ein Gemälde über dem Titel
const opener = {
enabled: true,
minHeight: mm(122), // the floor of the opener: the key starts on the same line
marginBottom: pt(0),
slot: {
elements: [
{ kind: 'image', id: 'press', resourceId: 'press', fit: 'cover',
placement: { anchor: { to: 'page', edge: 'top-left' },
size: { width: mm(170), height: mm(96) } } },
{ kind: 'text', id: 'kicker', content: '{attr.kicker}', fontFamily: SANS,
fontSize: pt(8.5), fontWeight: 700, letterSpacing: pt(1.6),
textTransform: 'uppercase', color: col('accent'), align: 'left',
placement: { anchor: { to: 'container', edge: 'top-left' },
offset: { x: mm(0), y: mm(82) } } },
{ kind: 'text', id: 'title', content: '{titleText}', fontFamily: SERIF,
fontSize: pt(26), lineHeight: 1.08, fontWeight: 700, color: col('ink'), align: 'left',
placement: { anchor: { to: '#kicker', edge: 'below' }, offset: { x: mm(0), y: mm(2) },
size: { width: mm(126), height: 'auto' } } },
{ kind: 'text', id: 'standfirst', content: '{attr.standfirst}', fontFamily: SERIF,
italic: true, fontSize: pt(10.5), lineHeight: LEAD / 10.5, color: col('ink'),
align: 'left',
placement: { anchor: { to: '#title', edge: 'below' }, offset: { x: mm(0), y: mm(3) },
size: { width: mm(118), height: 'auto' } } },
],
},
};
Die Überschrift erster Ebene druckt ein Design. Das Gemälde ist an der Seite verankert und läuft oben und an beiden Seiten in den Anschnitt, 170 mal 96 mm, mit fit: 'cover'. Dachzeile und Vorspann kommen aus Attributen der Überschriftenzeile (Attribute von Überschriften), und die Legende folgt als gewöhnlicher :::callout, dessen Listenpunkte mit den drei Markierungen beginnen. minHeight legt die Tiefe fest: Die Legende beginnt auf derselben Zeile, wie lang der Titel auch ist.
#4 · Kolumnentitel nach Seitenparität
const head = (id, content, parity, edge, x, extra = {}) => ({
kind: 'text', id, content, parity, pages: 'body',
fontFamily: SANS, fontSize: pt(7.5), fontWeight: 600, letterSpacing: pt(1.2),
textTransform: 'uppercase', color: col('muted'),
placement: { anchor: { to: 'page', edge }, offset: { x: mm(x), y: mm(13) } },
...extra,
});
const folio = { fontWeight: 700, color: col('ink') };
const header = {
elements: [
head('verso-folio', '{pageNumber}', 'even', 'top-left', OUTER, folio),
head('verso-title', '{title}', 'even', 'top-left', OUTER + 9),
head('recto-title', '{chapterTitle}', 'odd', 'top-right', -(OUTER + 9)),
head('recto-folio', '{pageNumber}', 'odd', 'top-right', -OUTER, folio),
],
};
const footer = {
elements: [head('drop-folio', '{pageNumber}', 'all', 'top', 0, {
...folio, pages: 'opener',
placement: { anchor: { to: 'container', edge: 'top' }, offset: { x: mm(0), y: mm(9) } },
})],
};
Die linke Seite trägt den Titel der Reihe, die rechte den des Lesetexts, beide gefiltert mit parity und durch pages: 'body' vom Auftakt ferngehalten (Textelemente). Der Auftakt trägt seine Seitenzahl am Fuß.
Das ganze Rezept
// ═══ Postext Cookbook · Nº 180 · Colour-coded highlights in a study reader ════════
// https://postext.dev/en/cookbook/colour-coded-study-highlights
// Code: MIT · Text: original (CC BY 4.0) · Picture: painting made for the recipe
// Fonts: Source Serif 4, Source Sans 3 (SIL OFL 1.1) · Needs postext ≥ 1.65.0
import {
buildDocumentWithFonts, renderPageToCanvas, registerResourceImage, defaultResourceTypes,
} from 'https://esm.sh/postext';
const LANG = 'en'; // @lang: the language of the sample document ('en' | 'es')
const RECIPE = 'colour-coded-study-highlights';
// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: semantic colours, three of them for the highlighter
const palette = {
ink: '#1f1c19', // text: a warm near-black
accent: '#8a3220', // kickers, rules, numbers: an iron-gall red
tint: '#f5f0e7', // the key's background
rule: '#d3cabc', // hairlines
muted: '#6b645b', // running heads, colophon
paper: '#ffffff',
term: '#cce8c8', // key terms: a pale green
date: '#fbe0a1', // dates: amber
name: '#cfe0f4', // people and places: a pale blue
};
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' } })),
{ id: 'main-color', name: 'accent (defaults)', value: { hex: palette.accent, model: 'hex' } },
];
// #endregion
const OUTER = 20; // outer margin in mm: the running heads align to it
const LEAD = 14.5; // body leading in pt
const SANS = 'Source Sans 3';
const SERIF = 'Source Serif 4';
// #region answer: three highlight styles, one per kind of word, linked to the palette
// :mark[Mainz]{style="name"} in the text picks a style by id. The band is painted under
// words that stay ordinary text, so the lines break, hyphenate and justify as if the
// mark were not there, and a mark that runs over a line end gets a band on each line.
const band = (id, name) => ({
id, name,
background: col(id), // pale enough for ink at full contrast on top
color: col('ink'), // the words keep the colour of the text
// borderRadius: 0 is the default (square ends, as a highlighter pen leaves them)
paddingX: em(0.12), // the band reaches a little past the first and the last letter
paddingTop: em(0.04), paddingBottom: em(0.1), // and down past the descenders
});
const markStyles = [
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
#Die Enden der Bänder runden
Ein Radius von einem Fünftel des Schriftgrads gibt die weichen Enden eines Filzstifts.
- // borderRadius: 0 is the default (square ends, as a highlighter pen leaves them)
+ borderRadius: em(0.2), // soft ends, as a felt-tip pen leaves them#Jeder Zeile ein eigenes Band geben
Mit decorationBreak: 'clone' bekommt eine Markierung, die umbricht, an beiden Enden jedes Stücks ihren Überstand, wie auf Seite 3, wo „pamphlets“ nach „pam-“ getrennt wird.
paddingX: em(0.12), // the band reaches a little past the first and the last letter
+ decorationBreak: 'clone', // each line piece gets a whole bandHäufige Fehler
- Farbe allein übersteht keine Schwarzweißkopie, und so kommen viele Lesetexte ins Klassenzimmer. Das Glossar setzt die Begriffe zusätzlich fett; wenn Ihre Leser die Seiten kopieren, geben Sie einer der drei Arten ein zweites, eigenes Zeichen.
- Eine Stil-ID, die
markStylesnicht deklariert, nimmt den ersten Stil, ohne Fehler auf der Seite (das Sandbox meldet sie). Halten Sie die IDs kurz und prüfen Sie ihre Schreibung im Text.
Nachweise
- Rezept
- Ignacio Ferro
- Text
- The reading, its key, the review questions and the colophon · Ignacio Ferro · CC BY 4.0
- Bilder
- The printing workshop on the opening page, a painting · Generated With Diffusion Models · eigener Text
- Schriften
- Source Serif 4 (SIL OFL 1.1) · Source Sans 3 (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)
