# Manga de dreta a esquerra amb retolació vertical > Dues pàgines de manga dibuixades per llegir-se de dreta a esquerra: artDirection rtl conserva l'ordre de les vinyetes a cada edició; el japonès va en columnes. - Versió HTML: https://postext.dev/ca/cookbook/manga-right-to-left - Recepta Núm. 149 · Còmic i manga · Nivell 2 (Intermedi) · Sortides: Canvas, PDF - Gèneres: Còmics - Requereix postext ≥ 1.21.0, postext-pdf ≥ 1.21.0 · provada amb 1.21.0, postext-pdf 1.21.0 el 2026-10-07 - Pàgines: [1](https://postext.dev/cookbook/manga-right-to-left/ca/p01.webp?v=6529983b), [2](https://postext.dev/cookbook/manga-right-to-left/ca/p02.webp?v=6529983b), [1](https://postext.dev/cookbook/manga-right-to-left/ca/p03.webp?v=6529983b), [2](https://postext.dev/cookbook/manga-right-to-left/ca/p04.webp?v=6529983b) - PDF: https://postext.dev/cookbook/manga-right-to-left/ca/manga-right-to-left.pdf?v=6529983b - Obre al Sandbox: https://postext.dev/ca/sandbox#recipe=manga-right-to-left&lang=ca (.postext: https://postext.dev/cookbook/manga-right-to-left/ca/manga-right-to-left.postext) - Última actualització: 2026-10-07 - Altres idiomes: [en](https://postext.dev/en/cookbook/manga-right-to-left.md), [es](https://postext.dev/es/cookbook/manga-right-to-left.md), [pt](https://postext.dev/pt/cookbook/manga-right-to-left.md), [zh](https://postext.dev/zh/cookbook/manga-right-to-left.md), [ja](https://postext.dev/ja/cookbook/manga-right-to-left.md), [ar](https://postext.dev/ar/cookbook/manga-right-to-left.md) ## En poques paraules Dues pàgines d'un còmic japonès. Les japoneses porten el text de dalt a baix en columnes estretes; les altres edicions mantenen l'ordre japonès de les vinyetes, començant a dalt a la dreta. ## Què compondràs Les dues primeres pàgines d'un manga de kendo, 前の晩 (*La nit abans*), escrit per a aquesta recepta i dibuixat en blanc i negre: la Hana entrena sola la vigília del torneig de la prefectura, en Sora li porta un amulet del santuari i l'entrenador els envia a casa. Primer va l'original japonès, retolat com en una revista setmanal: lletra antiga (kana de tall Mincho, kanji de tall Gothic), bafarades altes en lloc d'amples i sense punt al final. Al davant, les mateixes dues pàgines en la llengua d'aquesta pàgina (en anglès a la pàgina japonesa), començant també per la vinyeta de dalt a la dreta, com es publica el manga amb llicència des de principis dels 2000. El format és B6, 128 × 182 mm, el del tankōbon. **Aquesta recepta respon a:** - Com maqueto un manga que es llegeix de dreta a esquerra, amb el japonès en vertical dins de les bafarades? - Com retolo japonès en vertical dins de les bafarades? ## La resposta curta ```js // script.js, línies 44–60 const comics = (lang) => ({ // The pages were drawn for right-to-left reading: panel 1 sits top right. The // reading direction stays 'auto', which follows the art in a left-to-right // language too: the English page keeps the Japanese panel order. artDirection: 'rtl', mirrorArt: false, // never flop the art: Hana's grip on the sword, the kimono's fold gutter: { horizontal: mm(4.5), vertical: mm(2) }, // a tier gap twice the panel gap panel: { borderWidth: pt(0.9), borderColor: col('ink'), background: col('paper') }, lettering: { fontFamily: EDITIONS[lang].faces[0], color: col('ink'), fontSize: pt(['ja', 'zh'].includes(lang) ? 8.5 : 7.5), // one size per edition // 'auto' sets Japanese in columns of 8 characters at most and drops the final 。. // Chinese goes in columns too: a book bound on the right never mixes the two. writingMode: lang === 'zh' ? 'vertical' : 'auto', }, balloonStyles: balloons(), }); ``` ## Ingredients **Ensenya** - [Sentit de lectura i ordre del manga](https://postext.dev/ca/docs/comics.md#sentit-de-lectura): Les vinyetes omplen les cel·les en ordre de lectura: d'esquerra a dreta, o de dreta a esquerra en el manga i en les llengües que s'escriuen de dreta a esquerra; comics.artDirection i mirrorArt decideixen quan s'inverteix la imatge perquè coincideixi. - [Retolació de còmic](https://postext.dev/ca/docs/comics.md#retolació): Cada línia sota una vinyeta és una bafarada, personatge: text. Primer es compon el text, amb un sol cos de retolació per a tot el llibre, i després es dibuixa la bafarada al voltant. La lletra depèn de la llengua: Comic Neue, Zen Antique per al japonès. **També fa servir** - [Retolar en altres llengües](https://postext.dev/ca/docs/comics.md#retolació) - [Text vertical](https://postext.dev/ca/docs/configuration.md#escriptura-vertical) - [Fonts xineses, japoneses i coreanes](https://postext.dev/ca/docs/configuration.md#fonts-xineses-japoneses-i-coreanes) - [Llibres enquadernats per la dreta](https://postext.dev/ca/docs/configuration.md#enquadernació) - [Divisió en vinyetes](https://postext.dev/ca/docs/comics.md#dividir-la-pàgina) - [Imatge i retall de la vinyeta](https://postext.dev/ca/docs/comics.md#vinyetes-i-imatges) - [Personatges i àncores](https://postext.dev/ca/docs/comics.md#personatges-i-àncores) - [Pàgines de còmic](https://postext.dev/ca/docs/comics.md#pàgines-de-còmic) - [Estils de bafarada](https://postext.dev/ca/docs/comics.md#estils-de-bafarada) - [Onomatopeies](https://postext.dev/ca/docs/comics.md#estils-de-bafarada) - [Paleta de color semàntica](https://postext.dev/ca/docs/configuration.md#paleta-de-colors) - [Pàgines en un canvas](https://postext.dev/ca/docs/configuration.md#renderitzar-una-pàgina-a-un-bitmap) - [Exportació a PDF](https://postext.dev/ca/docs/configuration.md#generació-de-pdf) - [Tall de línies en xinès](https://postext.dev/ca/docs/configuration.md#tipografia-de-làsia-oriental) - [Vores i separacions de les vinyetes](https://postext.dev/ca/docs/comics.md#vinyetes-i-imatges) - [Furigana: lectures en kana sobre els kanji](https://postext.dev/ca/docs/japanese-layout.md#furigana) - [Color del paper](https://postext.dev/ca/docs/configuration.md#pàgina) - [Fonts incrustades al PDF](https://postext.dev/ca/docs/configuration.md#per-què-un-proveïdor-de-fonts) - [Figures i taules com a recursos](https://postext.dev/ca/docs/document-format.md#recursos) - [Ruby: lectures en pinyin i zhuyin](https://postext.dev/ca/docs/document-format.md#marques-xineses-ruby-i-warichu) - [Números drets en text vertical](https://postext.dev/ca/docs/configuration.md#nombres-en-text-vertical) **La configuració d'un cop d'ull** - [`bodyText`](https://postext.dev/ca/docs/configuration.md#text-de-cos), [`colorPalette`](https://postext.dev/ca/docs/configuration.md#paleta-de-colors), [`comics`](https://postext.dev/ca/docs/comics.md#pàgines-de-còmic), [`footer`](https://postext.dev/ca/docs/configuration.md#capçaleres-i-peus), [`header`](https://postext.dev/ca/docs/configuration.md#capçaleres-i-peus), [`headings`](https://postext.dev/ca/docs/configuration.md#encapçalaments), [`locale`](https://postext.dev/ca/docs/configuration.md#partició-de-mots), [`page`](https://postext.dev/ca/docs/configuration.md#pàgina) **API** - [`buildDocument`](https://postext.dev/ca/docs/configuration.md#construir-un-document), [`clearMeasurementCache`](https://postext.dev/ca/docs/configuration.md#memòria-cau-de-mesures), [`decompressWoff2`](https://postext.dev/ca/docs/configuration.md#proveïdor-de-fonts-al-navegador-fontsource--woff2), `loadVerticalAlternates`, [`registerResourceImage`](https://postext.dev/ca/docs/architecture.md#superfície-dapi), [`renderPageToCanvas`](https://postext.dev/ca/docs/configuration.md#renderitzar-una-pàgina-a-un-bitmap), [`renderToPdf`](https://postext.dev/ca/docs/configuration.md#generació-de-pdf) **Tipus de lletra** - Zen Antique (OFL-1.1), Dela Gothic One (OFL-1.1), Comic Neue (OFL-1.1), Bangers (OFL-1.1), Noto Sans SC (OFL-1.1), ZCOOL KuaiLe (OFL-1.1), Playpen Sans Arabic (OFL-1.1), Lalezar (OFL-1.1) ## Elaboració ### 1 · Llegeix en el sentit en què es va dibuixar El codi és [la resposta curta](https://postext.dev/ca/cookbook/manga-right-to-left.md#la-resposta-curta) de més amunt. Un mangaka compon cada pàgina des de dalt a la dreta: la primera vinyeta, el primer personatge que parla i el recorregut de la mirada per cada franja comencen allà. `artDirection: 'rtl'` li ho diu al motor, i amb el sentit de lectura en `'auto'` totes les edicions segueixen el dibuix; una edició àrab es llegiria de dreta a esquerra igualment. El dibuix no es reflecteix mai. Les editorials occidentals invertien el manga fins al 2002, aproximadament, i els lectors veien tots els espadatxins tornar-se esquerrans i els quimonos creuar-se al revés: deixar les pàgines com es van dibuixar costa al lector un costum, i invertir-les costa el dibuix. Cada `:::page` porta la seva divisió, `30 / 34 [46 | *] / * [44 | *]`, i la primera cel·la de cada franja es col·loca a la dreta ([sentit de lectura](https://postext.dev/ca/docs/comics.md#sentit-de-lectura)). ### 2 · Marca cada personatge un sol cop, sobre el dibuix ```js // script.js, línies 235–355 const ART = { // fractions of the picture: the same in every language dojo: { alt: t({ en: 'The old wooden kendo dojo at dusk, its doors open and lit.', es: 'El viejo dojo de madera al anochecer, con las puertas abiertas e iluminadas.', ca: 'L’antic dojo de fusta al capvespre, amb les portes obertes i il·luminades.', pt: 'O velho dojô de madeira ao anoitecer, com as portas abertas e iluminadas.', zh: '黄昏时分的老木造剑道场，门敞开着，里面亮着灯。', ar: 'قاعة الكندو الخشبية القديمة عند الغسق، أبوابها مفتوحة ومضاءة.', ja: '夕暮れの古い木造の剣道場。戸が開いて、中に明かりがともっている。' }), safeArea: { x: 0.45, y: 0.32, width: 0.5, height: 0.51 }, anchors: [{ id: 'dojo', x: 0.66, y: 0.63 }] }, swing: { alt: t({ en: 'Hana, alone in the dojo, swings her bamboo sword overhead.', es: 'Hana, sola en el dojo, alza la espada de bambú sobre la cabeza.', ca: 'La Hana, sola al dojo, aixeca l’espasa de bambú per sobre del cap.', pt: 'Hana, sozinha no dojô, ergue a espada de bambu acima da cabeça.', zh: '花独自在道场里，把竹剑高举过头。', ar: 'هانا وحدها في القاعة ترفع سيف الخيزران فوق رأسها.', ja: 'ひとり道場で、竹刀を頭上に振りかぶる花。' }), safeArea: { x: 0.36, y: 0, width: 0.31, height: 0.5 }, avoid: [{ x: 0.43, y: 0, width: 0.17, height: 0.12 }], anchors: [{ id: 'hana', x: 0.535, y: 0.28, head: { x: 0.53, y: 0.22 }, face: { x: 0.49, y: 0.14, width: 0.11, height: 0.17 } }] }, doorway: { alt: t({ en: 'Sora peeks round the sliding door, holding a shrine charm.', es: 'Sora se asoma por la puerta corredera con un amuleto en la mano.', ca: 'En Sora treu el cap per la porta corredissa amb un amulet a la mà.', pt: 'Sora espia pela porta de correr com um amuleto na mão.', zh: '空从拉门后探出头，手里攥着护身符。', ar: 'سورا يطلّ من وراء الباب المنزلق وفي يده تميمة.', ja: 'お守りを手に、引き戸の陰からのぞく空。' }), safeArea: { x: 0.37, y: 0.09, width: 0.34, height: 0.5 }, avoid: [{ x: 0.49, y: 0.41, width: 0.08, height: 0.1 }], anchors: [{ id: 'sora', x: 0.545, y: 0.31, head: { x: 0.55, y: 0.22 }, face: { x: 0.47, y: 0.16, width: 0.2, height: 0.18 } }] }, closeup: { alt: t({ en: "Close-up of Hana's sweating, startled face.", es: 'Primer plano del rostro sudoroso y sobresaltado de Hana.', ca: 'Primer pla de la cara suada i sobresaltada de la Hana.', pt: 'Primeiro plano do rosto suado e assustado de Hana.', zh: '花满脸是汗、吃了一惊的特写。', ar: 'لقطة قريبة لوجه هانا المتعرّق المذعور.', ja: '汗をかき、はっとした花の顔のアップ。' }), safeArea: { x: 0.27, y: 0.28, width: 0.43, height: 0.51 }, anchors: [{ id: 'hana', x: 0.475, y: 0.665, head: { x: 0.45, y: 0.35 }, face: { x: 0.3, y: 0.3, width: 0.4, height: 0.45 } }] }, charm: { alt: t({ en: 'Sora holds out the charm; Hana looks at it, sword on her shoulder.', es: 'Sora le tiende el amuleto; Hana lo mira con la espada al hombro.', ca: 'En Sora li allarga l’amulet; la Hana el mira amb l’espasa a l’espatlla.', pt: 'Sora estende o amuleto; Hana olha para ele com a espada no ombro.', zh: '空递出护身符，花扛着竹剑看着它。', ar: 'سورا يمدّ التميمة، وهانا تنظر إليها والسيف على كتفها.', ja: '空がお守りを差し出し、竹刀を肩にかついだ花がそれを見る。' }), safeArea: { x: 0.21, y: 0.09, width: 0.56, height: 0.53 }, avoid: [{ x: 0.43, y: 0.47, width: 0.06, height: 0.09 }], anchors: [{ id: 'sora', x: 0.325, y: 0.335, head: { x: 0.29, y: 0.22 }, face: { x: 0.26, y: 0.17, width: 0.11, height: 0.2 } }, { id: 'hana', x: 0.675, y: 0.335, head: { x: 0.665, y: 0.22 }, face: { x: 0.62, y: 0.17, width: 0.11, height: 0.2 } }] }, coach: { alt: t({ en: 'Coach Mori in the doorway, backlit, arms crossed.', es: 'El entrenador Mori en la puerta, a contraluz, de brazos cruzados.', ca: 'L’entrenador Mori a la porta, a contrallum, de braços plegats.', pt: 'O treinador Mori na porta, contra a luz, de braços cruzados.', zh: '森老师站在门口，背着光，双臂抱在胸前。', ar: 'المدرّب موري عند الباب، والضوء خلفه، عاقدًا ذراعيه.', ja: '逆光の戸口で腕を組んで立つ森先生。' }), safeArea: { x: 0.33, y: 0.13, width: 0.3, height: 0.32 }, anchors: [{ id: 'mori', x: 0.425, y: 0.215, head: { x: 0.42, y: 0.17 }, face: { x: 0.37, y: 0.13, width: 0.1, height: 0.11 } }] }, smile: { alt: t({ en: "Close-up of Mori's stern face breaking into a small smile.", es: 'Primer plano del rostro severo de Mori, que esboza una sonrisa.', ca: 'Primer pla de la cara severa d’en Mori, que esbossa un somriure.', pt: 'Primeiro plano do rosto severo de Mori, que esboça um sorriso.', zh: '森老师严肃的脸上露出一丝笑意的特写。', ar: 'لقطة قريبة لوجه موري الصارم وقد ارتسمت عليه ابتسامة.', ja: '厳しい顔がふっとゆるむ森先生のアップ。' }), safeArea: { x: 0.43, y: 0.21, width: 0.51, height: 0.53 }, anchors: [{ id: 'mori', x: 0.69, y: 0.52, head: { x: 0.6, y: 0.25 }, face: { x: 0.45, y: 0.28, width: 0.45, height: 0.32 } }] }, kneel: { alt: t({ en: 'Kneeling, Hana ties the charm to her armour; Sora scratches his head.', es: 'De rodillas, Hana se ata el amuleto a la armadura; Sora se rasca la cabeza.', ca: 'De genolls, la Hana es lliga l’amulet a l’armadura; en Sora es grata el cap.', pt: 'De joelhos, Hana amarra o amuleto na armadura; Sora coça a cabeça.', zh: '花跪坐着把护身符系在护具上，空挠着头。', ar: 'هانا جاثية تربط التميمة بدرعها، وسورا يحكّ رأسه.', ja: '正座してお守りを防具に結ぶ花と、頭をかく空。' }), safeArea: { x: 0.21, y: 0.08, width: 0.61, height: 0.48 }, avoid: [{ x: 0.27, y: 0.43, width: 0.06, height: 0.12 }], anchors: [{ id: 'hana', x: 0.305, y: 0.245, head: { x: 0.3, y: 0.17 }, face: { x: 0.25, y: 0.1, width: 0.11, height: 0.17 } }, { id: 'sora', x: 0.7, y: 0.25, head: { x: 0.71, y: 0.15 }, face: { x: 0.64, y: 0.1, width: 0.13, height: 0.18 } }] }, roof: { alt: t({ en: 'Seen from behind, Hana and Sora sit on the school roof at sunset.', es: 'De espaldas, Hana y Sora sentados en la azotea del instituto al atardecer.', ca: 'D’esquena, la Hana i en Sora asseguts al terrat de l’institut a la posta.', pt: 'De costas, Hana e Sora sentados no terraço da escola ao pôr do sol.', zh: '夕阳下，花和空坐在学校楼顶的背影。', ar: 'هانا وسورا جالسان على سطح المدرسة عند الغروب، من الخلف.', ja: '夕焼けの屋上に並んで座る花と空の後ろ姿。' }), safeArea: { x: 0.24, y: 0.41, width: 0.47, height: 0.31 }, anchors: [{ id: 'hana', x: 0.36, y: 0.52, head: { x: 0.36, y: 0.48 }, face: { x: 0.31, y: 0.43, width: 0.11, height: 0.14 } }, { id: 'sora', x: 0.63, y: 0.52, head: { x: 0.625, y: 0.47 }, face: { x: 0.58, y: 0.41, width: 0.1, height: 0.15 } }] }, }; const panels = () => Promise.all([ comicPanel('dojo', asset('kendo-dojo.jpg'), ART.dojo), comicPanel('swing', asset('kendo-swing.jpg'), ART.swing), comicPanel('doorway', asset('kendo-doorway.jpg'), ART.doorway), comicPanel('closeup', asset('kendo-closeup.jpg'), ART.closeup), comicPanel('charm', asset('kendo-charm.jpg'), ART.charm), comicPanel('coach', asset('kendo-coach.jpg'), ART.coach), comicPanel('smile', asset('kendo-smile.jpg'), ART.smile), comicPanel('kneel', asset('kendo-kneel.jpg'), ART.kneel), comicPanel('roof', asset('kendo-roof.jpg'), ART.roof), ]); ``` Les paraules canvien amb la llengua; el dibuix, no. Cada imatge porta una zona segura que tot retall respecta i, per a cada personatge, una boca (on apunta el rabet), un cap (per a les bafarades de pensament) i una cara que cap bafarada no pot tapar, tot en fraccions de la imatge. Cada línia del guió anomena qui parla, `sora: …`, i el motor col·loca la bafarada al costat d'aquest personatge en qualsevol llengua. Si qui parla no surt a la vinyeta, com en Sora quan l'entrenador apareix a la porta, el rabet va cap a la vora: `sora{tail=bottom}`. ### 3 · Deixa que cada llengua posi les seves bafarades ```js // script.js, línies 64–71 const balloons = () => [ { id: 'speech', fill: col('paper'), stroke: col('ink'), strokeWidth: pt(0.6), roundness: 2 }, { id: 'whisper', fill: col('paper'), stroke: col('ink'), roundness: 2 }, { id: 'thought', fill: col('paper'), stroke: col('ink') }, { id: 'inner', fill: col('tone'), stroke: col('tone'), strokeWidth: pt(0), italic: false }, { id: 'caption', fill: col('paper'), stroke: col('ink'), strokeWidth: pt(0.5) }, { id: 'sfx', color: col('ink'), haloColor: col('paper') }, ]; ``` Els estils diuen quina mena de veu porta cada bafarada: un oval per parlar, un contorn discontinu per xiuxiuejar, un núvol per pensar i un requadre gris per a la veu interior de la Hana. Com es col·loquen les paraules a dins és cosa de cada edició. En japonès, el motor compon columnes de vuit caràcters com a màxim, treu el 。 que tanca una bafarada i conserva el 、, posa dretes en un sol quadratí les dues xifres de 第42回 (`:tcy[42]`) i ajunta `!?` en una sola cel·la. El guió dona la lectura de cada nom la primera vegada que surt, `{一ノ瀬|いちのせ}`, com fa el manga amb el furigana sobre els noms. En català, les mateixes bafarades esdevenen ovals amb línies horitzontals, i el seu ordre continua començant per la dreta. ### 4 · Carrega les fonts de cada edició amb les seves paraules ```js // script.js, línies 359–371 const SFX = /^sfx[^:：\n]*[:：](.*)$/gm; // sound-effect lines: the second face sets them async function loadEdition(lang) { const text = TEXT[lang]; const [face, sfx] = EDITIONS[lang].faces; const faces = { [face]: FONTS[face], [sfx]: FONTS[sfx] }; if (['ja', 'zh'].includes(lang)) { // CJK: only the files that hold these characters const effects = [...text.matchAll(SFX)].map((m) => m[1]).join(''); await loadCjkFonts({ [face]: FONTS[face] }, text.replace(SFX, ''), { vertical: true }); await loadCjkFonts({ [sfx]: FONTS[sfx] }, effects, { vertical: true }); } if (lang === 'ar') await loadArabicFonts(faces, text); await loadComicFonts(faces, text); // the bold and italic the faces do not ship } ``` Zen Antique i Dela Gothic One es publiquen en un centenar d'arxius cadascuna, un per bloc de caràcters: cada font es carrega amb les paraules que compon, les bafarades la primera i les onomatopeies la segona, i la pàgina només baixa els arxius que necessita. `loadComicFonts` declara la negreta d'un crit i la cursiva d'una veu interior a partir dels arxius que aquestes fonts sí que tenen, de manera que la pantalla i el PDF dibuixen les mateixes lletres. ### 5 · Posa l'original al costat de cada edició ```js // script.js, línies 376–385 const FACING = LANG === 'ja' ? 'en' : LANG; // Japanese readers see the English edition const TEXT = { ja: original, [FACING]: LANG === 'ja' ? english : markdown }; await loadFonts(FONTS, Object.values(TEXT).join('\n')); const resources = await panels(); const build = async (lang) => { // the same pictures and page; this language's lettering await loadEdition(lang); return buildWithFonts(() => buildDocument({ markdown: TEXT[lang], resources, continuation: { pageIndexOffset: 1 } }, edition(lang)), TEXT[lang]); }; const docs = [await build('ja'), await build(FACING)]; ``` Cada llengua d'aquest lloc té la seva edició de les dues pàgines, escrita al seu `content..md`, i cada edició queda davant de l'original japonès: `/* @content@ja */` inclou `content.ja.md` a totes les edicions, i la pàgina japonesa aparella l'original amb la retolació anglesa. L'edició xinesa també va en columnes, perquè un llibre que s'obre per la dreta no barreja bafarades verticals i horitzontals; l'àrab es llegeix de dreta a esquerra pel seu propi sentit. ## La recepta completa Un sol fitxer, compost a partir de la carpeta de la recepta amb el text d'exemple i el kit comú del Receptari ja inclosos; construeix la seva pròpia pàgina. Per executar-lo, posa'l en un `