# Configuración: cómics

> Los ajustes de comics: el marco y las calles de las páginas de cómic, los estilos de viñeta, la rotulación, los estilos de bocadillo y el reparto

- Versión HTML: https://postext.dev/es/docs/configuration-comics
- Última actualización: 2026-10-10
- Tiempo de lectura: 3 min
- Otros idiomas: [en](https://postext.dev/en/docs/configuration-comics.md), [ca](https://postext.dev/ca/docs/configuration-comics.md), [pt](https://postext.dev/pt/docs/configuration-comics.md), [zh](https://postext.dev/zh/docs/configuration-comics.md), [ja](https://postext.dev/ja/docs/configuration-comics.md), [ar](https://postext.dev/ar/docs/configuration-comics.md)

## En pocas palabras

Esta página reúne los ajustes de las páginas de cómic. Fijas el marco de la página y el espacio entre viñetas. Eliges la tipografía y el tamaño de la rotulación. Defines cómo se dibujan los bocadillos, las cartelas y las onomatopeyas. También puedes dar la lista de personajes, para que cada uno hable con su propio estilo. La guía de cómics explica cómo escribir las páginas.

## Cómics

La propiedad `comics` configura las páginas de cómic (`:::page`), las tiras (`:::strip`) y las dobles páginas: el marco y las calles de los que se cortan las viñetas, los estilos de viñeta, la rotulación, los estilos de bocadillo y el reparto. Solo la leen los documentos que tienen cómics; un documento sin ellos se compone exactamente igual que antes, y un documento con cómics y sin sección `comics` toma los valores por defecto de su idioma. El marcado y la manera de rotular las páginas se explican en [Cómics](https://postext.dev/es/docs/comics.md).

```ts
const config: PostextConfig = {
  comics: {
    readingDirection: 'auto',
    gutter: { horizontal: { value: 5, unit: 'mm' }, vertical: { value: 2.5, unit: 'mm' } },
    panel: { borderWidth: { value: 0.8, unit: 'pt' }, borderStyle: 'rough' },
    panelStyles: [{ id: 'night', background: { hex: '#14142b', model: 'hex' }, borderColor: { hex: '#ffffff', model: 'hex' } }],
    lettering: { fontSize: { value: 8.5, unit: 'pt' }, textTransform: 'uppercase' },
    balloonStyles: [{ id: 'eerie', shape: 'wavy', italic: true }],
    cast: [{ id: 'maya', name: 'Maya' }, { id: 'tomas', name: 'El abuelo Tomás' }],
  },
};
```

| Propiedad | Tipo | Por defecto | Descripción |
| --- | --- | --- | --- |
| `readingDirection` | `'auto' \| 'ltr' \| 'rtl'` | `'auto'` | El orden de las viñetas en una tira. `'auto'` lee de derecha a izquierda en un documento de derecha a izquierda, en uno vertical y en japonés y chino tradicional y, si no, en el sentido de `artDirection` (también en chino simplificado y coreano). El atributo `direction` de una página lo sustituye. Con `page.binding: 'auto'`, un libro cuyos cómics se leen de derecha a izquierda se encuaderna por la derecha. |
| `artDirection` | `'ltr' \| 'rtl'` | `'ltr'` | El sentido de lectura para el que se dibujó el arte: `'rtl'` para el manga. |
| `mirrorArt` | `boolean` | `false` | Voltea los dibujos de una página que se lee en el sentido contrario a `artDirection`. Una viñeta conserva su dibujo tal como se hizo con `mirror=false`. |
| `frame.margins` | `PageMargins` | los márgenes de la página | Márgenes propios para las páginas de cómic (`top`, `bottom`, `left`, `right`, `mirror`). Las viñetas se cortan de la caja que dejan; sin ellos, de la caja de texto de la página. |
| `gutter.horizontal` | `Dimension` | `4mm` | El espacio entre tiras. El atributo `gutter` de una página lo sustituye. |
| `gutter.vertical` | `Dimension` | `2mm` | El espacio entre viñetas contiguas de una tira. |
| `panel` | `PanelStyleConfig` | véase más abajo | El estilo de viñeta por defecto. |
| `panelStyles` | `NamedPanelStyleConfig[]` | `[]` | Estilos de viñeta con nombre, que se eligen con `:::page{style=…}` o `::panel{style=…}`. Cada uno tiene un `id`, un `name` opcional (solo para las interfaces de edición) y los campos de un estilo de viñeta; los campos sin fijar siguen a `panel`. |
| `lettering` | `LetteringConfig` | véase más abajo | La letra, el tamaño y las normas de la casa de todos los bocadillos del libro. |
| `balloonStyles` | `BalloonStyleConfig[]` | los nueve estilos integrados | Estilos de bocadillo por clase. Los integrados están siempre; una entrada con uno de sus ids lo modifica, y una entrada con un id nuevo añade un estilo superpuesto a `speech`. |
| `cast` | `ComicCastMember[]` | `[]` | Los personajes (véase [Reparto](https://postext.dev/es/docs/configuration-comics.md#reparto)). |
| `runningHeads` | `boolean` | `false` | Imprime las cornisas y los folios en las páginas de cómic. Desactivado, una página de cómic es toda viñetas y su número sigue contando. |
| `viewerLeaf` | `ComicViewerLeafConfig` | sin fijar | Para los anfitriones cuyas páginas no son hojas: compone las páginas de cómic sobre una hoja impresa (`width`, `height`, `margins`) escalada a `fitWidth` px (y de `fitHeight` px de alto como mucho) en lo alto de la página. Lo fija el visor HTML del Sandbox; nunca se guarda con un documento. |

### Estilos de viñeta

`comics.panel` y cada entrada de `comics.panelStyles`:

| Propiedad | Tipo | Por defecto | Descripción |
| --- | --- | --- | --- |
| `borderWidth` | `Dimension` | `1pt` | Grosor del borde; `0` no dibuja ninguno. El borde se traza sobre el contorno de la viñeta. |
| `borderColor` | `ColorValue` | negro | Color del borde (puede enlazarse a la paleta). |
| `borderRadius` | `Dimension` | `0` | Radio de las esquinas de una viñeta rectangular, limitado a la mitad de su lado más corto. Una viñeta cortada por una línea inclinada conserva las esquinas vivas. |
| `borderStyle` | `'solid' \| 'rough' \| 'none'` | `'solid'` | Una línea limpia, una línea hecha a mano que tiembla un poco (con una semilla tomada de la viñeta, así que es igual en cada composición) o ninguna. |
| `background` | `ColorValue` | blanco | El relleno bajo el dibujo: el color de una viñeta vacía y de las bandas que rodean un dibujo mostrado entero. |
| `fit` | `'cover' \| 'contain'` | `'cover'` | `cover` recorta el dibujo para llenar la viñeta, nunca dentro de su zona segura; `contain` lo muestra entero. |
| `bleed` | `boolean` | `false` | Las viñetas de este estilo rebasan el marco hasta el corte y el sangrado por todos los lados que tocan el marco. |

### Rotulación

`comics.lettering` rige todos los bocadillos del libro. Hay un solo tamaño: un estilo de bocadillo puede escalarlo (`fontScale`), y el texto nunca se reduce para caber en un bocadillo.

| Propiedad | Tipo | Por defecto | Descripción |
| --- | --- | --- | --- |
| `fontFamily` | `string` | según el idioma | La letra de rotulación. Sin fijar: `Comic Neue`; `Zen Antique` en japonés, `Noto Sans SC` en chino simplificado, `LXGW WenKai TC` en chino tradicional, `Playpen Sans Arabic` en árabe, persa y urdu (`defaultComicFont(locale)`). |
| `fontSize` | `Dimension` | `7.5pt` | El tamaño del texto de los bocadillos. Los cómics suelen rotularse a entre 7 y 9 pt en la página impresa. |
| `lineHeight` | `number` | `1.15` | Distancia entre líneas, como múltiplo del tamaño. Con el valor por defecto, los bocadillos verticales, chinos y japoneses toman 1,5 y los árabes 1,45. |
| `color` | `ColorValue` | negro | Color del texto. |
| `bold`, `italic` | `boolean` | `false` | Compone toda la rotulación en negrita o en cursiva. La rotulación en chino, en japonés y en árabe nunca se inclina. |
| `letterSpacing` | `Dimension` | `0` | Espacio extra entre letras; `em` es relativo al tamaño del texto. Nunca se aplica al árabe. |
| `writingMode` | `'auto' \| 'horizontal' \| 'vertical'` | `'auto'` | `'auto'` rotula en columnas verticales el japonés y el chino tradicional, y cualquier documento compuesto en escritura vertical, y todo lo demás en horizontal. Las marcas `vertical` u `horizontal` de una línea de guion componen esa línea de otro modo (véase [Cómics › Rotulación](https://postext.dev/es/docs/comics.md#rotulación)). |
| `textTransform` | `'none' \| 'uppercase'` | `'none'` | Todo en mayúsculas, el aspecto clásico de la rotulación estadounidense y europea. Las escrituras sin mayúsculas quedan como están. |
| `dropFinalStop` | `'auto' \| boolean` | `'auto'` | Quita el punto que cierra un bocadillo (`。` en el manga). `'auto'`: solo en japonés y en chino. |
| `doubleDash` | `boolean` | `false` | Rotula la raya como `--`, una costumbre de la rotulación estadounidense. |
| `inset` | `Dimension` | `1.5mm` | Espacio que se deja entre un bocadillo y el borde de su viñeta. Una cartela pegada al borde no lo respeta. |
| `joinSameSpeaker` | `'butt' \| 'connector' \| 'none'` | `'butt'` | Dos bocadillos seguidos del mismo personaje: cuerpos fundidos en un solo contorno, enlazados por un cuello estrecho, o separados. Una línea de guion pide lo suyo con `join` o `join=false`. |
| `maxColumnChars` | `number` | `8` | Rotulación vertical: el máximo de caracteres en una columna de un bocadillo. Las onomatopeyas se cortan tras cinco. |

### Estilos de bocadillo

Cada entrada de `comics.balloonStyles` se superpone al estilo integrado del mismo id (`speech`, `thought`, `whisper`, `shout`, `radio`, `caption`, `inner`, `note`, `sfx`), o a `speech` si el id es nuevo. Los valores por defecto de abajo son los de `speech`; la [página de Cómics](https://postext.dev/es/docs/comics.md#estilos-de-bocadillo) enumera lo que cambia cada estilo integrado. Las longitudes en `em` son relativas al tamaño del texto del bocadillo.

| Propiedad | Tipo | Por defecto | Descripción |
| --- | --- | --- | --- |
| `id` | `string` | obligatorio | La palabra con la que una línea de guion nombra el estilo: `ben{whisper}: …` o `style=whisper`. |
| `name` | `string` | `id` | Nombre legible, solo para las interfaces de edición. |
| `shape` | `'oval' \| 'rounded' \| 'rectangle' \| 'cloud' \| 'burst' \| 'wavy' \| 'electric' \| 'none'` | `'oval'` | El contorno que rodea el texto. `'none'` pone el texto directamente sobre el dibujo. |
| `fill` | `ColorValue` | blanco | Relleno del bocadillo. |
| `stroke` | `ColorValue` | negro | Color del contorno. |
| `strokeWidth` | `Dimension` | `0.6pt` | Grosor del contorno. |
| `dash` | `boolean` | `false` | Un contorno discontinuo (un susurro). |
| `double` | `boolean` | `false` | Un contorno doble. |
| `wobble` | `number` | `0` | Temblor de mano del contorno, de 0 a 1, con una semilla tomada del bocadillo para que nunca cambie de una composición a otra. |
| `roundness` | `number` | `2.2` | El exponente de superelipse de un óvalo: 2 es una elipse, y los valores mayores lo hacen más cuadrado. |
| `burstPoints` | `number` | `14` | Los picos de una explosión; `0` los cuenta a partir del perímetro. |
| `burstDepth` | `number` | `0.22` | La profundidad de los picos de una explosión, como fracción del radio del cuerpo. |
| `padding` | `Dimension` | `0.55em` | El aire entre el texto y el contorno. |
| `aspect` | `number` | `1.6` | La anchura dividida por la altura a la que el corte de líneas lleva el bloque de texto (rotulación horizontal). |
| `tail` | `'curved' \| 'wedge' \| 'bubbles' \| 'zigzag' \| 'none'` | `'curved'` | El rabillo. |
| `tailWidth` | `Dimension` | `0.9em` | El ancho del rabillo donde sale del contorno. |
| `tailReach` | `number` | `0.55` | Hasta dónde llega el rabillo hacia su personaje, como fracción de la distancia entre el contorno y la boca. |
| `target` | `'mouth' \| 'head'` | `'mouth'` | Adónde apunta el rabillo: a la boca del ancla o a su cabeza (bocadillos de pensamiento). |
| `position` | `'auto' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'top' \| 'bottom'` | `'auto'` | Dónde va el bocadillo cuando la línea no lo fija: donde lo coloque la rotulación, o en una esquina o un borde de la viñeta. |
| `butt` | `boolean` | `false` | Pega al borde de la viñeta un bocadillo de esquina o de borde (cartelas). |
| `fontFamily` | `string` | la letra de rotulación | La letra de este estilo. `sfx` toma por defecto la letra de onomatopeyas del idioma: `Bangers`, `Dela Gothic One` en japonés, `ZCOOL KuaiLe` en chino simplificado, `LXGW WenKai TC` en chino tradicional, `Lalezar` en árabe (`defaultComicSfxFont(locale)`). |
| `fontScale` | `number` | `1` | El tamaño del texto, como múltiplo del tamaño de la rotulación. |
| `bold`, `italic` | `boolean` | los de la rotulación | Texto en negrita o en cursiva. |
| `color` | `ColorValue` | el de la rotulación | Color del texto. |
| `textTransform` | `'none' \| 'uppercase'` | el de la rotulación | Todo en mayúsculas para este estilo. |
| `letterSpacing` | `Dimension` | el de la rotulación | Espacio extra entre letras. |
| `align` | `'center' \| 'start'` | `'center'` | Alineación de las líneas dentro del bocadillo. |
| `halo` | `Dimension` | ninguno | Un contorno alrededor de las letras, de ese grosor, para que el texto se lea sobre el dibujo (onomatopeyas). |
| `haloColor` | `ColorValue` | blanco | El color del halo. |
| `rotate` | `number` | `0` | Giro en grados, en el sentido de las agujas del reloj. Manda el atributo `rotate` de la línea. |

### Reparto

Cada entrada de `comics.cast` describe un personaje:

| Propiedad | Tipo | Por defecto | Descripción |
| --- | --- | --- | --- |
| `id` | `string` | obligatorio | La clave de personaje del guion y de las anclas de los dibujos. |
| `name` | `string` | `id` | El nombre que la salida HTML y el EPUB adaptable imprimen delante de las líneas del personaje, y que muestran los editores. |
| `balloonStyle` | `string` | `speech` | El estilo de las líneas del personaje que no nombran ninguno. |
| `color` | `ColorValue` | el del estilo | Color del texto de los bocadillos del personaje. |
| `fill` | `ColorValue` | el del estilo | Relleno de los bocadillos del personaje. |
| `fontFamily` | `string` | la del estilo | La letra de los bocadillos del personaje. |

El `color` y el `font` propios de una línea mandan sobre el reparto, y el reparto sobre el estilo de bocadillo. Cualquier color de los cómics puede ser una entrada de la paleta, que sigue a la paleta como cualquier color enlazado.

```ts
const resolved = resolveComicsConfig(config.comics, 'ja');
// => todos los campos rellenos; Zen Antique y Dela Gothic One como letras

const minimal = stripComicsDefaults(config.comics, 'ja');
// => undefined cuando todo tiene el valor por defecto

const shout = pickBalloonStyle(resolved, 'shout'); // el grito integrado con los cambios del libro
const night = pickPanelStyle(resolved, 'night');   // un estilo de viñeta con nombre o, si no, la viñeta por defecto
```