En pocas palabras
Un cuadernillo sobre tres astrolabios antiguos, impreso en inglés, español y árabe. Las tres ediciones comparten el diseño; solo la árabe cambia sus fuentes y tamaños.
Lo que vas a componer
Un cuadernillo de cuatro páginas A5 sobre tres astrolabios del Metropolitan Museum of Art: uno hecho en Yemen en 1291, otro en Irán en 1654 y otro en Europa en 1462. La editorial lo publica en inglés, español y árabe, y las tres ediciones son un solo diseño. La foto de cubierta, los títulos en latón, el recuadro con su filete, las figuras con el texto al lado y la cabecera oscura de la tabla salen de unos mismos ajustes. La edición árabe cambia lo que es de su escritura: Amiri e IBM Plex Sans Arabic en lugar de Source Serif y Source Sans, un cuerpo mayor y etiquetas sin mayúsculas ni espaciado. Se lee desde la derecha y se encuaderna por la derecha sin una sola coordenada propia.
Esta receta responde a
- ¿Cómo comparto un diseño entre las ediciones de un libro en varios idiomas y cambio solo las fuentes, la división de palabras, las comillas y las etiquetas de cada idioma?
- ¿Cómo publico el mismo libro en dos idiomas desde un solo proyecto?
La respuesta corta
const ARABIC_LABEL = { fontFamily: 'IBM Plex Sans Arabic', letterSpacing: pt(0),
textTransform: 'none' }; // Arabic letters join: never tracked, and they have no capitals
// English and Spanish need nothing more than their locale: it picks the hyphenation patterns
// and the words of the figure and table labels. Arabic sets the faces of its script.
const overrides = {
ar: {
bodyText: { fontFamily: 'Amiri', fontSize: pt(12), lineHeight: pt(19),
firstLineIndent: em(1.5) },
headings: { fontFamily: 'Amiri', fontWeight: 700,
levels: [{ level: 2, fontSize: pt(15), lineHeight: pt(24) }] },
// Lists keyed by id merge entry by entry: only these fields of these elements change.
headingStyles: [{ id: 'cover', advancedDesign: { slot: { elements: [
{ id: 'kicker', ...ARABIC_LABEL, fontSize: pt(10) },
{ id: 'title', fontFamily: 'Amiri', fontWeight: 700, fontSize: pt(50), lineHeight: 1.25 },
{ id: 'facts', ...ARABIC_LABEL, fontSize: pt(9.5) },
] } } }],
header: { elements: ['verso-folio', 'verso-title', 'recto-title', 'recto-folio']
.map((id) => ({ id, ...ARABIC_LABEL, fontSize: pt(9) })) },
calloutStyles: [{ id: 'note', titleStyle: { ...ARABIC_LABEL, fontSize: pt(10) },
body: { fontSize: pt(11.5), lineHeight: pt(19) } }],
tableStyle: { headerFontFamily: 'IBM Plex Sans Arabic', headerFontSize: pt(9),
bodyFontFamily: 'IBM Plex Sans Arabic', bodyFontSize: pt(9.4) },
captionStyle: { fontFamily: 'IBM Plex Sans Arabic', fontSize: pt(9) },
paragraphStyles: [{ id: 'colophon', fontFamily: 'IBM Plex Sans Arabic', fontSize: pt(8.4),
lineHeight: pt(13) }],
},
};
const edition = mergeConfigLayers(config, overrides[LANG]); // config itself for en and es
Ingredientes
- Funciones
- Ajustes propios de cada idiomaTexto de derecha a izquierdaFuentes árabesLibros encuadernados por la derechaCifras de los números generadosSeparación silábica e idioma del documentoFigura y Tabla en tu idiomaCubiertas, portadas y colofonesEstilos de títuloAtributos de títuloImágenes en los diseños de páginaCabeceras y foliosTexto alrededor de imágenes y cajasRecuadrosEstilo de tablasEstilo de los piesPaleta de color semánticaExportación a PDF
- También usa
- Figuras justo aquíBanda de capítulo a todo el anchoAperturas diseñadasCabeceras según el tipo de páginaEstilos de párrafoFuentes incrustadas en el PDFFiguras y tablas como recursosSaltos de línea en los títulos
- Tipografía
- Source Serif 4, Source Sans 3, Amiri, IBM Plex Sans Arabic (SIL OFL 1.1)
- Recursos
mashhad-800.jpgrasulid-cover-1400.jpgregiomontanus-800.jpg- Astrolabio de ʿUmar ibn Yusuf, Yemen, 1291 (la portada; fondo prolongado por arriba y oscurecido) (The Metropolitan Museum of Art, CC0 1.0)
- Muhammad Zaman, astrolabio planisférico, Irán, 1654-1655 (recortado) (The Metropolitan Museum of Art, CC0 1.0)
- Astrolabio atribuido a Regiomontano, 1462 (recortado) (The Metropolitan Museum of Art, CC0 1.0)
Elaboración
#1 · Unos ajustes generales y tres ajustes de idioma pequeños
El código está en la respuesta corta. config guarda los ajustes generales; mergeConfigLayers pone encima los de una edición campo a campo. El inglés y el español no tienen ajustes propios: su locale elige los patrones de separación silábica y las palabras Figure y Table, Figura y Tabla. Los ajustes árabes nombran solo campos sueltos: bodyText.fontFamily cambia la fuente y conserva el color, la alineación y la separación silábica, y el elemento kicker de la cubierta cambia su fuente y su espaciado y conserva su ancla, su color y su tamaño. Un cambio en la paleta o en los márgenes de config llega a las tres ediciones.
#2 · Lados nombrados según la dirección del texto
// An even page's outer edge is its start side in either direction (the left of an English
// verso, the right of an Arabic one), an odd page's its end side.
const head = (id, content, parity, edge, x, extra = {}) => ({ kind: 'text', id, content,
parity, pages: 'body', fontFamily: LABEL, fontSize: pt(7.5), fontWeight: 600,
letterSpacing: pt(1.1), textTransform: 'uppercase', color: col('muted'),
align: edge.endsWith('start') ? 'start' : 'end',
placement: { anchor: { to: 'page', edge }, offset: { x: mm(x), y: mm(12) } }, ...extra });
const folio = { fontWeight: 700, color: col('brass') };
const header = { elements: [
head('verso-folio', '{pageNumber}', 'even', 'top-start', 16, folio),
head('verso-title', '{title}', 'even', 'top-start', 24),
head('recto-title', '{subtitle}', 'odd', 'top-end', -24),
head('recto-folio', '{pageNumber}', 'odd', 'top-end', -16, folio),
] };
El borde exterior de una página par es el lado donde empiezan sus líneas en las dos direcciones, y el de una impar, el lado donde acaban; por eso top-start y top-end llevan los folios al exterior tanto en una página par inglesa como en una árabe. El filete del recuadro es side: 'start' y el texto de la cubierta se ancla a top-start: ninguno necesita un ajuste propio.
#3 · Figuras al final de la línea, con el texto al lado
const photo = (id, file, w, h, extra = {}) => ({ id, typeId: 'figure', kind: 'bitmap',
createdAt: 0, updatedAt: 0, ...extra,
bitmap: { fileId: file, format: 'jpeg', width: w, height: h } });
// 'end' is the right of an English column and the left of an Arabic one.
const wrapped = { position: 'here', wrap: 'end', width: 0.38 };
const note = (n) => `The Met, ${n}, CC0`;
const resources = [
photo('rasulid', 'rasulid-cover-1400.jpg', 1400, 1985),
photo('mashhad', 'mashhad-800.jpg', 800, 1187, { placement: wrapped, note: note('63.166a–j'),
caption: t({ en: 'Planispheric astrolabe, Iran, 1654–55. Brass and steel.',
es: 'Astrolabio planisférico, Irán, 1654-1655. Latón y acero.',
ar: 'أسطرلاب مسطّح، إيران، ١٠٦٥\u00a0هـ / ١٦٥٤–١٦٥٥\u00a0م. نحاس أصفر وفولاذ.' }),
altText: t({ en: 'A brass astrolabe whose rete is a lattice of leaves and scrolls',
es: 'Un astrolabio de latón cuya red es un enrejado de hojas y volutas',
ar: 'أسطرلاب من النحاس الأصفر عنكبوته شبكة من الأوراق والأغصان الملتفّة' }) }),
photo('regiomontanus', 'regiomontanus-800.jpg', 800, 1083,
{ placement: wrapped,
note: note('2025.347a–j'),
caption: t({ en: 'Astrolabe attributed to Regiomontanus, 1462. Copper alloy.',
es: 'Astrolabio atribuido a Regiomontano, 1462. Aleación de cobre.',
ar: 'أسطرلاب يُنسب إلى ريجيومونتانوس، ١٤٦٢\u00a0م. سبيكة نحاسية.' }),
altText: t({ en: 'A round brass astrolabe with Latin star names on its rete',
es: 'Un astrolabio redondo de latón con nombres latinos de estrellas en la red',
ar: 'أسطرلاب مستدير من النحاس عليه أسماء نجوم لاتينية' }) }),
];
wrap: 'end' pone cada fotografía a la derecha de una columna inglesa y a la izquierda de una árabe, y el texto corre a su lado. Los pies y los textos alternativos van en el idioma de cada edición; los pies árabes dan primero la fecha de la hégira.
#4 · La tabla con las palabras y las cifras de cada edición
const row = (...cells) => cells.map((content) => ({ content }));
const head2 = (...cells) => cells.map((content) => ({ content, isHeader: true }));
resources.push({ id: 'three', typeId: 'table', kind: 'table', createdAt: 0, updatedAt: 0,
placement: { position: 'here' },
caption: t({ en: 'The three instruments.', es: 'Los tres instrumentos.',
ar: 'الأدوات الثلاث.' }),
table: { model: { headerRowCount: 1, columnWidths: [1.15, 1.1, 1.2, 1.1], rows: t({
en: [head2('Made', 'Where', 'Maker', 'Size'),
row('1291', 'Yemen', 'ʿUmar ibn Yūsuf', '15.6 cm wide'),
row('1654–55', 'Iran, Mashhad?', 'Muhammad Zaman', '21.6 cm high'),
row('1462', 'Germany or Italy', 'Regiomontanus', '13.5 cm high')],
es: [head2('Fecha', 'Lugar', 'Autor', 'Tamaño'),
row('1291', 'Yemen', 'ʿUmar ibn Yūsuf', '15,6 cm de ancho'),
row('1654-1655', 'Irán, ¿Mashhad?', 'Muhammad Zaman', '21,6 cm de alto'),
row('1462', 'Alemania o Italia', 'Regiomontano', '13,5 cm de alto')],
ar: [head2('التاريخ', 'المكان', 'الصانع', 'المقاس'),
row('٦٩٠\u00a0هـ / ١٢٩١\u00a0م', 'اليمن', 'عمر بن يوسف', 'عرضه ١٥٫٦\u00a0سم'),
row('١٠٦٥\u00a0هـ / ١٦٥٤\u00a0م', 'إيران، مشهد؟', 'محمد زمان', 'ارتفاعه ٢١٫٦\u00a0سم'),
row('١٤٦٢\u00a0م', 'ألمانيا أو إيطاليا', 'ريجيومونتانوس', 'ارتفاعه ١٣٫٥\u00a0سم')] }) } } });
Los datos de la tabla son contenido y cambian con la edición: cifras arábigo-índicas y el separador decimal árabe en la edición árabe, coma decimal en la española. Su estilo es general: el ajuste árabe solo pone la fuente y el cuerpo.
La receta completa
// ═══ Postext Cookbook · Nº 178 · One design for three language editions ═══════════
// https://postext.dev/en/cookbook/shared-design-per-language
// Code: MIT · Text: original (CC BY 4.0) · Photographs: The Met, Open Access (CC0)
// Fonts: Source Serif 4, Source Sans 3, Amiri, IBM Plex Sans Arabic (OFL) · Needs postext ≥ 1.65.0
import {
buildDocument, withLoadedFonts, renderPageToCanvas, registerResourceImage, mergeConfigLayers,
} from 'https://esm.sh/postext';
import { renderToPdf, decompressWoff2 } from 'https://esm.sh/postext-pdf';
const LANG = 'es'; // @lang: the edition: 'en' | 'es' | 'ar'
const RECIPE = 'shared-design-per-language';
// ─── 1 · Design ─────────────────────────────────────────────────────────────
// #region palette: night ink, the brass of the instruments, a parchment tint
const palette = {
ink: '#1f2230', // text: a blue near-black
brass: '#80561c', // the one accent: kickers, rules, the box stripe (6.2:1 on paper)
tint: '#f4eee2', // the box ground
rule: '#cfc5b2', // hairlines
muted: '#6a655c', // running heads, credits
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' } })),
{ id: 'main-color', name: 'brass (defaults)', value: { hex: palette.brass, model: 'hex' } },
];
// #endregion
const [TEXT, LABEL] = ['Source Serif 4', 'Source Sans 3'];
const PAGE = { w: 148, h: 210 }; // mm: an A5 booklet
const LEAD = 14; // pt
// #region cover: the photograph to the trim, the title on its dark head
const at = (edge, x, y, width) => ({ anchor: { to: 'page', edge },
offset: { x: mm(x), y: mm(y) }, ...(width ? { size: { width: mm(width) } } : {}) });
const caps = { fontFamily: LABEL, fontWeight: 700, textTransform: 'uppercase',
letterSpacing: pt(1.6) };
// Every side is named by the direction of the text: 'top-start' is the left of an English
// page and the right of an Arabic one, so the cover needs no override to turn round.
const cover = { id: 'cover',
advancedDesign: { enabled: true, slot: { elements: [
{ kind: 'image', id: 'photo', resourceId: 'rasulid', decorative: true, fit: 'cover',
placement: { anchor: { to: 'page', edge: 'top-left' },
size: { width: mm(PAGE.w), height: mm(PAGE.h) } } },
{ kind: 'text', id: 'kicker', content: '{attr.kicker}', fontSize: pt(8.5), align: 'start',
color: col('paper'), ...caps, placement: at('top-start', 17, 18) },
{ kind: 'rule', id: 'rule', direction: 'horizontal', thickness: pt(1.5), color: col('tint'),
placement: { anchor: { to: '#kicker', edge: 'below' }, offset: { x: mm(0), y: mm(3) },
El script.js compuesto funciona tal cual: pégalo como script de módulo en cualquier página o abre la receta en CodePen. Carpeta de la receta en GitHub ↗ (se abre en una nueva pestaña)
Variantes
#Guarda los ajustes de cada idioma en un paquete
El viaje de ida y vuelta del .postext guarda un libro en dos idiomas en un archivo. Desde postext 1.58, createBundle escribe una vez los ajustes generales y, junto a los capítulos de cada idioma, sus ajustes propios, tal como los lee aquí mergeConfigLayers. El libro de esta receta en el Sandbox se abre así: cambia el panel de diseño entre Todos los idiomas y la edición árabe para ver qué campos fija la edición árabe.
#Imprime la edición árabe para el Magreb
ar-MA conserva la dirección y la encuadernación y escribe en cifras europeas los números generados: los folios y los números de las figuras. Vuelve a escribir también las cifras de la tabla.
- locale: t({ en: 'en-gb', es: 'es', ar: 'ar' }), // ar: right to left, bound on the right
+ locale: t({ en: 'en-gb', es: 'es', ar: 'ar-MA' }), // ar-MA: European digitsErrores frecuentes
Error frecuente
Las fuentes árabes necesitan su archivo arabic, con el bloque arabic
Fontsource sirve Amiri, Noto Naskh Arabic o Scheherazade New en un archivo por subconjunto, y las letras árabes están en el archivo arabic. loadFonts solo descarga latin (y latin-ext), así que en pantalla el árabe sale de una fuente del sistema y se mide mal, y fontsourceProvider entrega al PDF ese archivo latin, que imprime cajas vacías. Añade el bloque arabic del kit, llama a loadArabicFonts(FONTS, markdown) después de loadFonts, con todos los pesos que las páginas usan en árabe listados en FONTS, y pasa a renderToPdf fontProvider: arabicPdfProvider. Fuentes árabes →
- Las letras árabes van enlazadas, así que una etiqueta espaciada en los ajustes generales debe perder su
letterSpacingen los ajustes árabes; si no, el motor da un avisojoiningScriptLetterSpacing. Con él vatextTransform: 'none': el árabe no tiene mayúsculas. - Las líneas de una edición árabe son más altas y sus páginas cortan en otros sitios. Cada edición se ha ajustado por su cuenta: el recuadro árabe flota al pie de su página (
placement="bottom") y sus frases de cierre corren junto a la última fotografía.
Créditos
- Receta
- Ignacio Ferro
- Texto
- Texto original, CC BY 4.0
- Imágenes
- Astrolabio de ʿUmar ibn Yusuf, Yemen, 1291 (la portada; fondo prolongado por arriba y oscurecido) · The Metropolitan Museum of Art · CC0 1.0
- Muhammad Zaman, astrolabio planisférico, Irán, 1654-1655 (recortado) · The Metropolitan Museum of Art · CC0 1.0
- Astrolabio atribuido a Regiomontano, 1462 (recortado) · The Metropolitan Museum of Art · CC0 1.0
- Fuentes
- Source Serif 4 (SIL OFL 1.1) · Source Sans 3 (SIL OFL 1.1) · Amiri (SIL OFL 1.1) · IBM Plex Sans Arabic (SIL OFL 1.1)
- Código
- MIT, como Postext
Editar este texto ↗ (se abre en una nueva pestaña)Carpeta de la receta en GitHub ↗ (se abre en una nueva pestaña)


