باختصار
قراءة مدرسية عن تاريخ الطباعة. تُظلَّل المصطلحات بالأخضر والتواريخ بالكهرماني والأشخاص والأماكن بالأزرق، ويشرح مفتاح في الصفحة الأولى معنى كل لون.
ما الذي ستنضده
القراءة الثانية من وحدة في كتاب مدرسي للتاريخ، Readings in Early Modern History: أربع صفحات عن انتشار الطباعة من ماينتس في أنحاء أوروبا بين 1450 و1550، على صفحة قياسها 170 × 240 مم. علّم المحرّرون النص كما يفعل طالب مجتهد، برمز لا يتغيّر في الكتاب كله: المصطلحات المفتاحية على شريط أخضر، والتواريخ على الكهرماني، والأشخاص والأماكن على الأزرق الفاتح. ويشرح مفتاح تحت العنوان هذا الرمز بالألوان الثلاثة نفسها، ويبدأ المسرد في الصفحة الأخيرة كل مدخل بمصطلحه الأخضر. العلامات أشرطة تحت نص عادي، فتنكسر الأسطر وتُقسَّم الكلمات وتُضبط الأطراف كأن الأشرطة غير موجودة.
تجيب هذه الوصفة عن
- كيف أظلّل الكلمات المفتاحية في نص دراسي بألوان لكل منها معنى (المصطلحات والتواريخ والأسماء)؟
الجواب المختصر
// :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' })),
];
المكونات
- الميزات
- علامات التظليلإطارات التنبيهلوحة ألوان دلاليةصفحات افتتاح مصمَّمةالصور في تصاميم الصفحةسمات العنوانالترويسات وأرقام الصفحاتالترويسات بحسب دور الصفحةهوامش متناظرةأنماط الفقراتالأسطر الأرامل والأسطر اليتيمة والكلمات المعزولة
- تستخدم أيضًا
- قوائم المراجع ومسارد المصطلحات«شكل» و«جدول» بلغتكأنواع موارد مخصّصةالأشكال والجداول بوصفها موارد
- الخطوط
- Source Serif 4, Source Sans 3 (SIL OFL 1.1)
- الأصول
press-1400.jpg- The printing workshop on the opening page, a painting (Generated With Diffusion Models, أصلي)
طريقة التحضير
#1 · نمط لكل نوع من الكلمات
الشيفرة في الجواب المختصر أعلاه. تعلن markStyles ثلاثة أنماط مسمّاة، ويختار النص واحدًا منها لكل علامة: :mark[Johann Fust]{style="name"} و:mark[1455]{style="date"} و:mark[colophon]{style="term"} (علامات التظليل). كل نمط يدلّ على معنى (name هو ما يراه المحرّر)، فيحفظ Markdown سبب تعليم الكلمة لا لونها. غيّر لون نمط تتغيّر معه كل تواريخ الكتاب. أطراف الأشرطة مربّعة، وهذا هو الافتراضي منذ postext 1.52 (أنماط التظليل): قلم التظليل يترك أطرافًا مربّعة، والشريط المستدير الطرفين يُقرأ كأنه شارة.
#2 · ثلاث درجات فاتحة من اللوحة
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' } },
];
الأشرطة الثلاثة مداخل في لوحة الألوان مثل لون الحبر ولون التمييز، فمن يفتح الكتاب في Sandbox يغيّر الرمز من عيّنة لون واحدة. وهي فاتحة، قريبة من إضاءة خلفية الإطار، فيحتفظ النص فوقها بتباين 12.6:1 أو أكثر، وتبقى الألوان الثلاثة متمايزة حين تتجاور في سطر واحد، كما في «In 1517 Martin Luther» في الصفحة 3. العلامة لا تأخذ مكانًا: يمتد paddingX مسافة 0.12 em في الفراغ بجوار العبارة، وينزل paddingBottom بالشريط تحت الأذيال السفلية، وكلاهما يُرسم في فراغ كان موجودًا.
#3 · الافتتاح: لوحة فوق العنوان
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' } } },
],
},
};
يطبع عنوان المستوى الأول تصميمًا. اللوحة مثبّتة إلى الصفحة، فتمتد حتى حافة القصّ من أعلى ومن الجانبين، بقياس 170 × 96 مم، مع fit: 'cover'. ويأتي العنوان الفرعي والمقدمة من سمات في سطر العنوان (سمات العناوين)، ثم يليهما المفتاح في :::callout عادي تبدأ بنود قائمته بالعلامات الثلاث. ويحدّد minHeight عمق الافتتاح: يبدأ المفتاح في السطر نفسه مهما طال العنوان.
#4 · ترويسات بحسب زوجية الصفحة
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) } },
})],
};
تحمل الصفحة الزوجية اسم السلسلة والفردية عنوان القراءة، وكلاهما مرشَّح بـparity ومُبعد عن صفحة الافتتاح بـpages: 'body' (عناصر النص). وتحمل صفحة الافتتاح رقمها في أسفلها.
الوصفة كاملة
// ═══ 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 = [
يعمل ملف script.js المجمّع كما هو: الصقه في سكربت الوحدة (module) لأي صفحة، أو افتح الوصفة على CodePen. مجلد الوصفة على GitHub ↗ (يفتح في تبويب جديد)
تنويعات
#دوّر أطراف الأشرطة
نصف قطر يساوي خُمس حجم الخط يعطي الأطراف الناعمة لقلم اللبّاد.
- // 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#أعطِ كل سطر شريطه
مع decorationBreak: 'clone' تأخذ العلامة التي تنتقل إلى سطر جديد الحشوة في طرفَي كل قطعة، كما في الصفحة 3 حيث تنقسم «pamphlets» بعد «pam-».
paddingX: em(0.12), // the band reaches a little past the first and the last letter
+ decorationBreak: 'clone', // each line piece gets a whole bandأخطاء شائعة
- اللون وحده لا ينجو من نسخة مصوَّرة بالأبيض والأسود، وهكذا تصل قراءات كثيرة إلى الصف. يضع المسرد المصطلحات بخط عريض أيضًا؛ وإن كان قرّاؤك سيصوّرون الصفحات فأعطِ أحد الأنواع الثلاثة علامة ثانية خاصة به.
- معرّف النمط الذي لا تعلنه
markStylesيأخذ النمط الأول، بلا خطأ على الصفحة (ينبّه إليه Sandbox). اجعل المعرّفات قصيرة وتحقّق من كتابتها في النص.
الحقوق
- الوصفة
- Ignacio Ferro
- النص
- The reading, its key, the review questions and the colophon · Ignacio Ferro · CC BY 4.0
- الصور
- The printing workshop on the opening page, a painting · Generated With Diffusion Models · أصلي
- الخطوط
- Source Serif 4 (SIL OFL 1.1) · Source Sans 3 (SIL OFL 1.1)
- الشيفرة
- MIT، مثل Postext
حرّر هذا الشرح ↗ (يفتح في تبويب جديد)مجلد الوصفة على GitHub ↗ (يفتح في تبويب جديد)
