# Una pagina di quotidiano arabo a due colonne
> Un quotidiano arabo con locale 'ar': la prima colonna è quella di destra, i titoli coprono le due colonne e la fascia In breve compone tre colonne da destra.
- Versione HTML: https://postext.dev/it/cookbook/arabic-newspaper-two-columns
- Ricetta Nº 108 · Pagina e griglia · Livello 2 (Intermedio) · Output: Canvas, PDF
- Generi: Giornali e newsletter
- Richiede postext ≥ 1.25.0, postext-pdf ≥ 1.25.0 · provata con 1.31.0, postext-pdf 1.31.0 il 2026-10-13
- Pagine: [١](https://postext.dev/cookbook/arabic-newspaper-two-columns/en/p01.webp?v=6b5b30ae), [٢](https://postext.dev/cookbook/arabic-newspaper-two-columns/en/p02.webp?v=6b5b30ae)
- PDF: https://postext.dev/cookbook/arabic-newspaper-two-columns/en/arabic-newspaper-two-columns.pdf?v=6b5b30ae
- Apri nella Sandbox: https://postext.dev/it/sandbox#recipe=arabic-newspaper-two-columns&lang=en (.postext: https://postext.dev/cookbook/arabic-newspaper-two-columns/en/arabic-newspaper-two-columns.postext)
- Ultimo aggiornamento: 2026-10-10
- Altre lingue: [en](https://postext.dev/en/cookbook/arabic-newspaper-two-columns.md), [es](https://postext.dev/es/cookbook/arabic-newspaper-two-columns.md), [ca](https://postext.dev/ca/cookbook/arabic-newspaper-two-columns.md), [de](https://postext.dev/de/cookbook/arabic-newspaper-two-columns.md), [fr](https://postext.dev/fr/cookbook/arabic-newspaper-two-columns.md), [pt](https://postext.dev/pt/cookbook/arabic-newspaper-two-columns.md), [zh](https://postext.dev/zh/cookbook/arabic-newspaper-two-columns.md), [ja](https://postext.dev/ja/cookbook/arabic-newspaper-two-columns.md), [ar](https://postext.dev/ar/cookbook/arabic-newspaper-two-columns.md)
## In breve
La prima pagina e una pagina interna di un giornale arabo. L’articolo comincia nella colonna di destra e prosegue in quella di sinistra, come un lettore arabo legge la pagina.
## Che cosa comporrai
Due pagine di *الساحل*, un quotidiano immaginario di una città portuale immaginaria, in formato tabloid compatto di 246 × 328 mm. La prima pagina porta il nome del giornale in Aref Ruqaa a 84 pt, l’articolo di apertura sul nuovo tram della città sotto un titolo su tutta la larghezza e una mappa disegnata nel codice, e al piede una fascia di tre brevi. La pagina 2 apre la cronaca locale sotto una bandella blu, con quattro articoli e gli orari di preghiera del giorno. Tutto si legge da destra: la prima colonna di testo, le brevi, le colonne della tabella, le manchette della testata. [La prima pagina in inglese](https://postext.dev/it/cookbook/newspaper-front-page.md) compone gli stessi elementi da sinistra a destra.
**Questa ricetta risponde a:**
- Quale colonna viene prima in una pagina araba, e come compongo un giornale a due colonne?
## La risposta breve
```js
// script.js, righe 38–48
// locale 'ar' mirrors the page: the body's first column is the right one, the story runs down
// it and on at the top of the left one, and the column rule sits between them as before.
const layout = { layoutType: 'double', gutterWidth: mm(6),
columnRule: { enabled: true, color: col('rule'), lineWidth: pt(0.5) } };
// A headline over both columns is a page-span box without a frame: the columns under it start
// level, right then left, and a box with placement="bottom" closes the page the same way.
const banner = { id: 'banner', backgroundEnabled: false, span: 'page',
padding: { top: pt(0), right: pt(0), bottom: pt(0), left: pt(0) },
titleStyle: { ...kufi(9, 700, 'sea'), gap: mm(1.2) }, // the kicker, from the fence's title
marginTop: pt(0), marginBottom: pt(LEAD / 2),
body: { fontFamily: TEXT, fontSize: pt(13), lineHeight: pt(21), textAlign: 'right' } };
```
## Ingredienti
**Insegna**
- [Una o due colonne](https://postext.dev/it/docs/configuration-page-layout.md#tipi-di-impaginazione): Una sola colonna o due colonne uguali con il loro intercolonna; due colonne è il valore predefinito, quindi un romanzo deve chiederne una.
- [Testo da destra a sinistra](https://postext.dev/it/docs/arabic-layout.md#direzione-e-algoritmo-bidirezionale): direction imposta la direzione di base del documento: 'auto' (il valore predefinito) la ricava dalla scrittura di locale, quindi 'ar', 'fa' o 'he' vanno da destra a sinistra; l’algoritmo bidirezionale (UAX #9) ordina le parole latine e i numeri dentro ogni riga, e il libro si rilega a destra.
**Usa anche**
- [Filetto tra le colonne](https://postext.dev/it/docs/configuration-page-layout.md#filetto-tra-le-colonne)
- [Riquadri a tutta larghezza](https://postext.dev/it/docs/configuration-styles.md#il-contenitore-callout)
- [Colonne in un riquadro o nel testo](https://postext.dev/it/docs/document-format.md#columns)
- [Riquadri flottanti](https://postext.dev/it/docs/configuration-styles.md#il-contenitore-callout)
- [Aperture progettate](https://postext.dev/it/docs/configuration-text.md#estensione-e-progetto-grafico-avanzato)
- [Stili di titolo](https://postext.dev/it/docs/configuration-styles.md#stili-dei-titoli)
- [Attributi dei titoli](https://postext.dev/it/docs/document-format.md#attributi-dei-titoli)
- [Testo, filetti e riquadri nei progetti di pagina](https://postext.dev/it/docs/configuration-page-layout.md#intestazioni-e-piè-di-pagina)
- [Font arabi](https://postext.dev/it/docs/arabic-layout.md#font)
- [L’arabo come lingua del documento](https://postext.dev/it/docs/arabic-layout.md#iniziare-un-libro-arabo)
- [Cifre dei numeri generati](https://postext.dev/it/docs/configuration-text.md#lingua-del-documento)
- [Testatine e folio](https://postext.dev/it/docs/configuration-page-layout.md#intestazioni-e-piè-di-pagina)
- [Tavolozza di colori semantica](https://postext.dev/it/docs/configuration-fonts-colors-viewers.md#tavolozza-dei-colori)
- [Riquadri](https://postext.dev/it/docs/configuration-styles.md#stili-dei-riquadri)
- [Stili di paragrafo](https://postext.dev/it/docs/configuration-styles.md#stili-di-paragrafo)
- [Esportazione in PDF](https://postext.dev/it/docs/configuration-programmatic-usage.md#generare-pdf)
- [Paragrafi nell’altra direzione](https://postext.dev/it/docs/arabic-layout.md#direzione-del-documento-del-blocco-e-in-linea)
- [Figure proprio qui](https://postext.dev/it/docs/document-format.md#inserimento-di-blocco-facoltativo-collocazione-in-linea-esplicita)
- [Fascia di capitolo a tutta larghezza](https://postext.dev/it/docs/configuration-text.md#estensione-e-progetto-grafico-avanzato)
- [Colore della carta](https://postext.dev/it/docs/configuration-page-layout.md#pagina)
- [Font incorporati nel PDF](https://postext.dev/it/docs/configuration-programmatic-usage.md#perché-un-provider-di-font)
- [Tipi di risorsa personalizzati](https://postext.dev/it/docs/configuration-resources.md#tipi-di-risorsa)
- [Figure e tabelle come risorse](https://postext.dev/it/docs/document-format.md#risorse)
- [Libri rilegati a destra](https://postext.dev/it/docs/configuration-page-layout.md#rilegatura)
- [Testatine per sezione](https://postext.dev/it/docs/configuration-styles.md#stili-dei-titoli)
**La configurazione in breve**
- [`bodyText`](https://postext.dev/it/docs/configuration-text.md#testo-corrente), [`calloutStyles`](https://postext.dev/it/docs/configuration-styles.md#stili-dei-riquadri), [`captionStyle`](https://postext.dev/it/docs/configuration-resources.md#stile-delle-didascalie), [`colorPalette`](https://postext.dev/it/docs/configuration-fonts-colors-viewers.md#tavolozza-dei-colori), [`footer`](https://postext.dev/it/docs/configuration-page-layout.md#intestazioni-e-piè-di-pagina), [`header`](https://postext.dev/it/docs/configuration-page-layout.md#intestazioni-e-piè-di-pagina), [`headingStyles`](https://postext.dev/it/docs/configuration-styles.md#stili-dei-titoli), [`headings`](https://postext.dev/it/docs/configuration-text.md#titoli), [`layout`](https://postext.dev/it/docs/configuration-page-layout.md#impaginazione), [`locale`](https://postext.dev/it/docs/configuration-text.md#sillabazione), [`page`](https://postext.dev/it/docs/configuration-page-layout.md#pagina), [`paragraphStyles`](https://postext.dev/it/docs/configuration-styles.md#stili-di-paragrafo), [`resourceTypes`](https://postext.dev/it/docs/configuration-resources.md#tipi-di-risorsa), [`tableStyle`](https://postext.dev/it/docs/configuration-resources.md#stile-delle-tabelle)
**API**
- [`buildDocument`](https://postext.dev/it/docs/configuration-programmatic-usage.md#costruire-un-documento), [`decompressWoff2`](https://postext.dev/it/docs/configuration-programmatic-usage.md#provider-di-font-per-il-browser-fontsource--woff2), [`registerResourceImage`](https://postext.dev/it/docs/architecture.md#superficie-dellapi), [`renderPageToCanvas`](https://postext.dev/it/docs/configuration-programmatic-usage.md#rendere-una-pagina-come-bitmap), [`renderToPdf`](https://postext.dev/it/docs/configuration-programmatic-usage.md#generare-pdf), [`withLoadedFonts`](https://postext.dev/it/docs/configuration-programmatic-usage.md#caricare-i-font-prima-dellimpaginazione)
**Caratteri**
- Aref Ruqaa (OFL-1.1), Noto Kufi Arabic (OFL-1.1), Noto Naskh Arabic (OFL-1.1)
## Preparazione
### 1 · Due colonne, la prima a destra
Il codice è [la risposta breve](https://postext.dev/it/cookbook/arabic-newspaper-two-columns.md#la-risposta-breve) qui sopra. `layoutType: 'double'` e il filetto tra le colonne sono le stesse impostazioni di un giornale inglese; `locale: 'ar'` gira la pagina, così l’articolo riempie prima la colonna di destra e prosegue in testa a quella di sinistra ([ordine delle pagine e rilegatura a destra](https://postext.dev/it/docs/arabic-layout.md#ordine-delle-pagine-e-rilegatura-a-destra)). Un titolo sulle due colonne è un riquadro a tutta larghezza senza cornice, e le colonne sotto di esso partono alla stessa altezza. La fascia In breve è un riquadro a tutta larghezza fatto flottare al piede con dentro `:::columns{count=3}`, e anche le sue colonne vanno da destra a sinistra, come la tabella degli orari di preghiera a pagina 2: una tabella composta nella direzione del documento mette la prima colonna a destra.
### 2 · Una testata tra due manchette
```js
// script.js, righe 52–68
const ear = (id, side, lines) => lines.map(([key, content, look], i) => text(`${id}-${key}`,
content, { ...look, align: side }, { ...(i === 0 ? at('container', `top-${side}`, 0, 4)
: at(`#${id}-${lines[i - 1][0]}`, 'below', 0, 1)), size: { width: mm(48) } }));
const nameplate = { enabled: true, minHeight: mm(46), slot: { elements: [
text('name', '{titleText}', { fontFamily: NAME, fontSize: pt(84), fontWeight: 700,
lineHeight: 1.1, color: col('sea'), align: 'center' },
{ ...at('container', 'top', 0, -3), size: { width: 'fill' } }),
// In the mirrored page, 'right' is the start of the line: issue and date there, price opposite.
...ear('start', 'right', [['k', '{attr.issue}', kufi(8, 700, 'sea')],
['d', '{publishDate}', kufi(9, 400)]]),
...ear('end', 'left', [['k', '{attr.city}', kufi(8, 700, 'sea')],
['p', '{attr.price}', kufi(9, 400)]]),
{ kind: 'rule', id: 'thick', thickness: pt(2.5), color: col('ink'),
placement: { ...at('container', 'top-left', 0, 40), size: { width: 'fill' } } },
{ kind: 'rule', id: 'thin', thickness: pt(0.5), color: col('ink'),
placement: { ...at('#thick', 'below', 0, 0.8), size: { width: 'fill' } } },
] } };
```
Il titolo di primo livello della prima pagina è il nome del giornale, dipinto da uno stile di titolo. Il suo disegno è tracciato nella pagina specchiata, quindi `top-right` è l’inizio della riga: lì vanno il numero e la data, la città e il prezzo all’altra estremità ([che cosa significano sinistra, destra, inizio e fine](https://postext.dev/it/docs/arabic-layout.md#che-cosa-significano-left-right-start-ed-end)). Il ruqʿa è una scrittura da titolo per poche parole in corpo grande; non ha kashida e il testo corrente non lo usa mai.
### 3 · Bandelle di sezione e righe del folio
```js
// script.js, righe 72–86
const flag = { enabled: true, minHeight: mm(13), slot: { elements: [
{ kind: 'rule', id: 'bar', thickness: pt(3), color: col('ink'),
placement: { ...at('container', 'top-left', 0, 9), size: { width: 'fill' } } },
text('flag', '{titleText}', { ...kufi(12, 700, 'paper'), align: 'right',
box: { backgroundColor: col('sea'), padding: { top: mm(1), right: mm(3), bottom: mm(1.4),
left: mm(3) } } }, at('#bar', 'above')),
] } };
// The folio line keeps its physical sides: the number at the outer corner of each page.
const folio = (parity, edge, x) => ({ kind: 'text', id: `n-${parity}`, parity,
content: '{pageNumber} · {title} · {publishDate}', ...kufi(8, 600, 'muted'),
align: edge, placement: at('page', `top-${edge}`, x, 7) });
const header = { elements: [folio('even', 'right', -SIDE), folio('odd', 'left', SIDE),
{ kind: 'rule', id: 'folio-rule', thickness: pt(0.5), color: col('rule'),
placement: { ...at('page', 'top-left', SIDE, 11.5),
size: { width: mm(TRIM.width - 2 * SIDE) } } }] };
```
Una pagina interna si apre con un titolo di primo livello disegnato come bandella su un filetto spesso. La riga del folio è un’intestazione, quindi mantiene i suoi lati fisici: la pagina 2, una pagina pari, ha il numero nell’angolo destro, quello esterno in un giornale che si apre da destra. La prima pagina toglie l’intestazione nel suo stile di titolo.
### 4 · Una mappa disegnata nel codice
```js
// script.js, righe 250–280
function routeSvg() { // 222 × 44 mm, 1 unit = 1 mm
const [W, H] = [222, 44];
const coast = 'M0 36C30 33 52 40 80 35S128 24 152 28S196 37 222 31V44H0Z';
// Eighteen stations along a line that leaves the port (east, on the right) for the university.
const line = 'M210 22C186 17 170 13 150 16S112 25 92 20S56 9 34 12S14 19 10 17';
const stops = Array.from({ length: 18 }, (_, i) => i / 17);
const pointAt = (t) => { // the line as three cubic pieces, sampled per piece
const seg = [[210, 22, 186, 17, 170, 13, 150, 16], [150, 16, 130, 19, 112, 25, 92, 20],
[92, 20, 72, 15, 56, 9, 34, 12], [34, 12, 22, 14, 14, 19, 10, 17]];
const k = Math.min(3, Math.floor(t * 4));
const u = t * 4 - k;
const [x0, y0, x1, y1, x2, y2, x3, y3] = seg[k];
const b = (a, c, d, e) => (1 - u) ** 3 * a + 3 * (1 - u) ** 2 * u * c + 3 * (1 - u) * u * u * d
+ u ** 3 * e;
return [b(x0, x1, x2, x3), b(y0, y1, y2, y3)];
};
const rings = stops.map((t, i) => {
const [x, y] = pointAt(t);
const big = i === 0 || i === 17 || i === 8;
return ``;
}).join('');
let grid = '';
for (let x = 6; x < W; x += 12) grid += `M${x} 0V${H}`;
for (let y = 6; y < H; y += 12) grid += `M0 ${y}H${W}`;
return ``;
}
```
La mappa del tram è un SVG di tracciati e cerchi nei colori della tavolozza, senza testo: i nomi dei luoghi restano nella didascalia, nel carattere della pagina. Il tipo di immagine non ha contatore né etichetta, perché i giornali non numerano le loro immagini.
## La ricetta completa
Un unico file, composto a partire dalla cartella della ricetta con il testo di esempio e il kit comune del Ricettario già inclusi; costruisce la propria pagina. Per eseguirlo, mettilo in uno `