# Configuração: quadrinhos

> Os ajustes de comics: o quadro e as sarjetas das páginas de quadrinhos, os estilos de requadro, o letreiramento, os estilos de balão e o elenco

- Versão HTML: https://postext.dev/pt/docs/configuration-comics
- Última atualização: 2026-10-10
- Tempo de leitura: 3 min
- Outros idiomas: [en](https://postext.dev/en/docs/configuration-comics.md), [es](https://postext.dev/es/docs/configuration-comics.md), [ca](https://postext.dev/ca/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)

## Em poucas palavras

Esta página reúne os ajustes das páginas de quadrinhos. Você define a moldura da página e o espaço entre os quadros. Escolhe a fonte e o tamanho do letreiramento. Define como são desenhados os balões, os recordatórios e as onomatopeias. Também pode listar os personagens, para que cada um fale com seu próprio estilo. O guia de quadrinhos explica como escrever as páginas.

## Quadrinhos

A propriedade `comics` configura as páginas de quadrinhos (`:::page`), as tiras (`:::strip`) e as páginas duplas: a moldura e as sarjetas de onde os quadros são recortados, os estilos de quadro, o letreiramento, os estilos de balão e o elenco. Só os documentos com quadrinhos a leem; um documento sem eles é diagramado exatamente como antes, e um documento com quadrinhos e sem a seção `comics` usa os padrões do seu idioma. A marcação e a forma como as páginas são letreiradas estão explicadas em [Quadrinhos](https://postext.dev/pt/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: 'Grandpa Tomás' }],
  },
};
```

| Propriedade | Tipo | Padrão | Descrição |
| --- | --- | --- | --- |
| `readingDirection` | `'auto' \| 'ltr' \| 'rtl'` | `'auto'` | A ordem dos quadros numa fileira. `'auto'` lê da direita para a esquerda num documento da direita para a esquerda, num documento vertical e em japonês e chinês tradicional e, nos demais casos, no sentido de `artDirection` (incluídos o chinês simplificado e o coreano). O atributo `direction` de uma página tem prioridade. Com `page.binding: 'auto'`, um livro cujos quadrinhos são lidos da direita para a esquerda é encadernado à direita. |
| `artDirection` | `'ltr' \| 'rtl'` | `'ltr'` | O sentido de leitura para o qual a arte foi desenhada: `'rtl'` para mangá. |
| `mirrorArt` | `boolean` | `false` | Espelha os desenhos de uma página lida no sentido contrário ao de `artDirection`. Um quadro mantém o desenho como foi feito com `mirror=false`. |
| `frame.margins` | `PageMargins` | as margens da página | Margens próprias para as páginas de quadrinhos (`top`, `bottom`, `left`, `right`, `mirror`). Os quadros são recortados da caixa que elas deixam; sem valor, da área de texto da página. |
| `gutter.horizontal` | `Dimension` | `4mm` | O espaço entre fileiras. O atributo `gutter` de uma página tem prioridade. |
| `gutter.vertical` | `Dimension` | `2mm` | O espaço entre quadros lado a lado numa fileira. |
| `panel` | `PanelStyleConfig` | veja abaixo | O estilo de quadro padrão. |
| `panelStyles` | `NamedPanelStyleConfig[]` | `[]` | Estilos de quadro nomeados, escolhidos com `:::page{style=…}` ou `::panel{style=…}`. Cada um tem um `id`, um `name` opcional (só nas interfaces de editor) e os campos de um estilo de quadro; os campos sem valor seguem `panel`. |
| `lettering` | `LetteringConfig` | veja abaixo | A fonte, o corpo e as regras da casa de todos os balões do livro. |
| `balloonStyles` | `BalloonStyleConfig[]` | os nove estilos integrados | Estilos de balão por tipo. Os integrados estão sempre presentes; uma entrada com o id de um deles o altera, e uma entrada com um id novo acrescenta um estilo aplicado sobre `speech`. |
| `cast` | `ComicCastMember[]` | `[]` | Os personagens (veja [Elenco](https://postext.dev/pt/docs/configuration-comics.md#elenco)). |
| `runningHeads` | `boolean` | `false` | Imprime os cabeços e os fólios nas páginas de quadrinhos. Desligado, uma página de quadrinhos é só quadros, e o seu número continua contando. |
| `viewerLeaf` | `ComicViewerLeafConfig` | sem valor | Para hosts cujas páginas não são folhas: diagrama as páginas de quadrinhos numa folha impressa (`width`, `height`, `margins`) escalada para `fitWidth` px (e no máximo `fitHeight` px de altura) no topo da página. O visualizador HTML do Sandbox a define; ela nunca é salva com um documento. |

### Estilos de quadro

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

| Propriedade | Tipo | Padrão | Descrição |
| --- | --- | --- | --- |
| `borderWidth` | `Dimension` | `1pt` | Espessura da borda; `0` não desenha nenhuma. A borda é traçada sobre o contorno do quadro. |
| `borderColor` | `ColorValue` | preto | Cor da borda (pode ser vinculada à paleta). |
| `borderRadius` | `Dimension` | `0` | Raio dos cantos de um quadro retangular, limitado à metade do seu lado menor. Um quadro cortado por uma linha inclinada mantém os cantos vivos. |
| `borderStyle` | `'solid' \| 'rough' \| 'none'` | `'solid'` | Uma linha limpa, uma linha à mão que treme um pouco (com semente tirada do quadro, então sai igual em toda construção) ou nenhuma. |
| `background` | `ColorValue` | branco | O preenchimento sob o desenho: a cor de um quadro vazio e das faixas em volta de um desenho mostrado inteiro. |
| `fit` | `'cover' \| 'contain'` | `'cover'` | `cover` recorta o desenho para preencher o quadro, nunca dentro da área segura; `contain` o mostra inteiro. |
| `bleed` | `boolean` | `false` | Os quadros deste estilo passam da moldura até o refile e a sangria em todos os lados que tocam a moldura. |

### Letreiramento

`comics.lettering` define todos os balões do livro. Há um único corpo: um estilo de balão pode escalá-lo (`fontScale`), e o texto nunca é reduzido para caber num balão.

| Propriedade | Tipo | Padrão | Descrição |
| --- | --- | --- | --- |
| `fontFamily` | `string` | conforme o idioma | A fonte do letreiramento. Sem valor: `Comic Neue`; `Zen Antique` em japonês, `Noto Sans SC` em chinês simplificado, `LXGW WenKai TC` em chinês tradicional, `Playpen Sans Arabic` em árabe, persa e urdu (`defaultComicFont(locale)`). |
| `fontSize` | `Dimension` | `7.5pt` | O corpo do texto dos balões. Os quadrinhos costumam ser letreirados em 7 a 9 pt na página impressa. |
| `lineHeight` | `number` | `1.15` | Distância entre as linhas, um múltiplo do corpo. Deixado no padrão, os balões verticais, chineses e japoneses usam 1,5 e os árabes 1,45. |
| `color` | `ColorValue` | preto | Cor do texto. |
| `bold`, `italic` | `boolean` | `false` | Compõe todo o letreiramento em negrito ou em itálico. O letreiramento em chinês, japonês e árabe nunca é inclinado. |
| `letterSpacing` | `Dimension` | `0` | Espaço extra entre as letras; `em` é relativo ao corpo do texto. Nunca se aplica ao árabe. |
| `writingMode` | `'auto' \| 'horizontal' \| 'vertical'` | `'auto'` | `'auto'` letreira o japonês e o chinês tradicional, e qualquer documento composto em escrita vertical, em colunas verticais, e todo o resto na horizontal. A marca `vertical` ou `horizontal` de uma linha do roteiro compõe essa linha de outro modo (veja [Quadrinhos › Letreiramento](https://postext.dev/pt/docs/comics.md#letreiramento)). |
| `textTransform` | `'none' \| 'uppercase'` | `'none'` | Tudo em maiúsculas, o visual clássico do letreiramento americano e europeu. As escritas sem caixa ficam como estão. |
| `dropFinalStop` | `'auto' \| boolean` | `'auto'` | Omite o ponto final que fecha um balão (`。` no mangá). `'auto'`: só em japonês e chinês. |
| `doubleDash` | `boolean` | `false` | Letreira um travessão como `--`, um costume do letreiramento americano. |
| `inset` | `Dimension` | `1.5mm` | Espaço mantido entre um balão e a borda do seu quadro. Um recordatório encostado na borda o ignora. |
| `joinSameSpeaker` | `'butt' \| 'connector' \| 'none'` | `'butt'` | Dois balões seguidos do mesmo personagem: corpos fundidos num só contorno, ligados por um gargalo estreito, ou mantidos separados. Uma linha do roteiro pede o seu próprio comportamento com `join` ou `join=false`. |
| `maxColumnChars` | `number` | `8` | Letreiramento vertical: o máximo de caracteres numa coluna de um balão. As onomatopeias quebram depois de cinco. |

### Estilos de balão

Cada entrada de `comics.balloonStyles` se sobrepõe ao estilo embutido de mesmo id (`speech`, `thought`, `whisper`, `shout`, `radio`, `caption`, `inner`, `note`, `sfx`), ou a `speech` quando o id é novo. Os valores padrão abaixo são os de `speech`; a [página de Quadrinhos](https://postext.dev/pt/docs/comics.md#estilos-de-balão) lista o que cada estilo embutido muda. Os comprimentos em `em` são relativos ao tamanho do texto do balão.

| Propriedade | Tipo | Padrão | Descrição |
| --- | --- | --- | --- |
| `id` | `string` | obrigatório | A palavra com que uma linha do roteiro nomeia o estilo: `ben{whisper}: …` ou `style=whisper`. |
| `name` | `string` | `id` | Nome legível, só para as interfaces de edição. |
| `shape` | `'oval' \| 'rounded' \| 'rectangle' \| 'cloud' \| 'burst' \| 'wavy' \| 'electric' \| 'none'` | `'oval'` | O contorno em volta do texto. `'none'` põe o texto direto sobre o desenho. |
| `fill` | `ColorValue` | branco | Preenchimento do balão. |
| `stroke` | `ColorValue` | preto | Cor do contorno. |
| `strokeWidth` | `Dimension` | `0.6pt` | Espessura do contorno. |
| `dash` | `boolean` | `false` | Um contorno tracejado (um sussurro). |
| `double` | `boolean` | `false` | Um contorno duplo. |
| `wobble` | `number` | `0` | Tremor de traço feito à mão no contorno, de 0 a 1, com uma semente tirada do balão para que nunca mude de uma composição para outra. |
| `roundness` | `number` | `2.2` | O expoente de superelipse de um oval: 2 é uma elipse, e valores maiores o deixam mais quadrado. |
| `burstPoints` | `number` | `14` | As pontas de uma explosão; `0` as conta a partir do perímetro. |
| `burstDepth` | `number` | `0.22` | A profundidade das pontas de uma explosão, como fração do raio do corpo. |
| `padding` | `Dimension` | `0.55em` | O respiro entre o texto e o contorno. |
| `aspect` | `number` | `1.6` | A razão entre largura e altura que a quebra de linhas busca para o bloco de texto (letreiramento horizontal). |
| `tail` | `'curved' \| 'wedge' \| 'bubbles' \| 'zigzag' \| 'none'` | `'curved'` | O rabicho. |
| `tailWidth` | `Dimension` | `0.9em` | A largura do rabicho no ponto em que sai do contorno. |
| `tailReach` | `number` | `0.55` | Até onde o rabicho avança em direção a quem fala, como fração da distância entre o contorno e a boca. |
| `target` | `'mouth' \| 'head'` | `'mouth'` | Para onde o rabicho aponta: a boca da âncora ou a cabeça (balões de pensamento). |
| `position` | `'auto' \| 'top-start' \| 'top-end' \| 'bottom-start' \| 'bottom-end' \| 'top' \| 'bottom'` | `'auto'` | Onde fica o balão quando a linha não fixa nenhuma posição: onde o letreiramento o colocar, ou num canto ou numa borda do quadro. |
| `butt` | `boolean` | `false` | Encosta na borda do quadro um balão de canto ou de borda (recordatórios). |
| `fontFamily` | `string` | a fonte do letreiramento | A fonte deste estilo. `sfx` usa por padrão a fonte de onomatopeias do idioma: `Bangers`, `Dela Gothic One` em japonês, `ZCOOL KuaiLe` em chinês simplificado, `LXGW WenKai TC` em chinês tradicional, `Lalezar` em árabe (`defaultComicSfxFont(locale)`). |
| `fontScale` | `number` | `1` | O tamanho do texto, como múltiplo do tamanho do letreiramento. |
| `bold`, `italic` | `boolean` | os do letreiramento | Texto em negrito ou em itálico. |
| `color` | `ColorValue` | a do letreiramento | Cor do texto. |
| `textTransform` | `'none' \| 'uppercase'` | o do letreiramento | Tudo em maiúsculas neste estilo. |
| `letterSpacing` | `Dimension` | o do letreiramento | Espaço extra entre as letras. |
| `align` | `'center' \| 'start'` | `'center'` | Alinhamento das linhas dentro do balão. |
| `halo` | `Dimension` | nenhum | Um contorno traçado em volta das letras, com essa espessura, para que o texto se leia sobre o desenho (onomatopeias). |
| `haloColor` | `ColorValue` | branco | A cor do halo. |
| `rotate` | `number` | `0` | Rotação em graus, no sentido horário. O atributo `rotate` da linha tem prioridade. |

### Elenco

Cada entrada de `comics.cast` descreve um personagem:

| Propriedade | Tipo | Padrão | Descrição |
| --- | --- | --- | --- |
| `id` | `string` | obrigatório | A chave de quem fala no roteiro e nas âncoras dos desenhos. |
| `name` | `string` | `id` | O nome que a saída HTML e o EPUB refluível imprimem antes das falas do personagem, e que os editores mostram. |
| `balloonStyle` | `string` | `speech` | O estilo das falas do personagem que não nomeiam nenhum. |
| `color` | `ColorValue` | a do estilo | Cor do texto dos balões do personagem. |
| `fill` | `ColorValue` | o do estilo | Preenchimento dos balões do personagem. |
| `fontFamily` | `string` | a do estilo | A fonte dos balões do personagem. |

A `color` e a `font` próprias de uma linha têm prioridade sobre o elenco, e o elenco sobre o estilo de balão. Qualquer cor dos quadrinhos pode ser uma entrada da paleta, que acompanha a paleta como qualquer cor vinculada.

```ts
const resolved = resolveComicsConfig(config.comics, 'ja');
// => todos os campos preenchidos; Zen Antique e Dela Gothic One como fontes

const minimal = stripComicsDefaults(config.comics, 'ja');
// => undefined quando tudo está no valor padrão

const shout = pickBalloonStyle(resolved, 'shout'); // o grito embutido com as mudanças do livro
const night = pickPanelStyle(resolved, 'night');   // um estilo de quadro com nome ou, se não houver, o quadro padrão
```