Quadrinhos

Os desenhos são os quadros; tudo o que é dito, pensado, narrado ou ouvido é texto no Markdown.

Uma história em quadrinhos no Postext é um conjunto de desenhos e um roteiro. Os desenhos são recursos bitmap ou SVG comuns, feitos sem nenhum texto por cima. O roteiro fica no Markdown do capítulo: um bloco :::page corta uma página em quadros, dá a cada quadro seu desenho e lista, linha por linha, os balões, os recordatórios e as onomatopeias daquele quadro. O Postext distribui os quadros, recorta cada desenho para a sua célula sem cortar o que importa, compõe o texto na fonte de letreiramento do livro em um único corpo, desenha um balão em volta dele, aponta o rabicho para quem fala e posiciona os balões na ordem de leitura onde não cubram nenhum rosto. Uma tradução é outro arquivo Markdown com os mesmos quadros e outras palavras; o Postext refaz o letreiramento do zero, em colunas para o japonês e da direita para a esquerda para o árabe.

Os quadrinhos só entram em ação quando usados: um documento sem :::page nem :::strip é diagramado exatamente como antes. As configurações ficam na seção comics da configuração, e a marcação está resumida em Formato do documento › Quadrinhos.

#Páginas de quadrinhos

Um bloco :::page é uma página de quadrinhos. Ele abre com uma linha :::page{…}, contém uma linha ::panel por quadro, cada uma seguida do roteiro daquele quadro, e fecha com um ::: sozinho:

:::page{split="30 [30 | 20 | *] / *" gutter=4mm}
::panel{art=lh-arrive}
caption: Every summer, Maya spent a week at the lighthouse.
maya: Grandpa! I'm here!
::panel{art=lh-radio}
tomas: Just in time. The radio's gone deaf,
tomas: and there's a storm on the way.
::panel{art=lh-maya}
maya{thought}: That valve looks loose…
::panel{art=lh-beam bleed}
sfx{rotate=-8}: KRAK
tomas{shout}: Hold on to the rail!
:::

O bloco sempre começa em uma página nova e ocupa a página inteira. O texto depois da cerca de fechamento começa na página seguinte, então dois blocos :::page seguidos formam duas páginas de quadrinhos, e um :::pagebreak entre eles não acrescenta nenhuma página. O motor lê o corpo por conta própria, linha por linha, como lê :::verse: blocos Markdown, contêineres e outras diretivas não são reconhecidos dentro dele, e <!-- comments --> são ignorados, inclusive quando ocupam várias linhas.

O papel da página é 'comic' (VDTPage.role). Ela não leva cabeços nem fólio, já que uma página de quadrinhos é só quadros, mas conta na numeração das páginas; comics.runningHeads: true os imprime. Os quadros são cortados a partir da moldura, que é a área de texto da página dentro das margens, a não ser que comics.frame.margins dê às páginas de quadrinhos margens próprias.

Os atributos da linha de abertura:

#Dividir a página

O atributo split descreve a página como uma árvore de cortes. Uma lista de tamanhos separados por / empilha células de cima para baixo (fileiras); uma lista separada por | as coloca lado a lado, a partir do lado por onde a página é lida. Um tamanho seguido de uma lista entre colchetes corta essa célula de novo no outro eixo. A página do exemplo acima, 30 [30 | 20 | *] / *, é uma fileira com 30 % da altura da moldura, cortada em quadros com 30 % e 20 % da sua largura e um terceiro que fica com o resto, sobre uma segunda fileira que ocupa o resto da página:

A gramática completa:

split := list
list  := item ( "/" item )*  |  item ( "|" item )*
item  := size [ "[" list "]" ]
size  := number ["%"] [ "~" number ["%"] ]  |  "*"  |  (nothing)

• Tamanhos são porcentagens da célula mãe ao longo do eixo da lista; 30 e 30% são a mesma coisa. Um *, ou um tamanho vazio, fica com uma parte igual do que os tamanhos escritos deixam. O último item de uma lista sempre vai até o fim, diga o que disser o seu tamanho.
• Um separador por lista. Misturar / e | na mesma lista, deixar um [ sem fechar ou pôr uma lista entre colchetes no mesmo eixo da mãe é um erro de sintaxe (comicSplitSyntax): a parte legível é usada.
• Passou do total. Tamanhos que somam mais de 100 % são reduzidos de modo que cada * mantenha 5 %, e a página informa comicSplitOverflow.
• A ordem de leitura é a ordem da árvore: as fileiras de cima para baixo e, dentro de cada fileira, os quadros a partir do lado inicial. As linhas ::panel preenchem as células nessa ordem. Uma página com mais quadros do que células deixa de fora os quadros que sobram; uma com menos deixa as últimas células vazias (comicPanelCount, informado só quando há um split escrito).

Algumas divisões:

#Cortes inclinados

Um tamanho escrito a~b produz uma linha inclinada: a borda final da célula vai de a % no início do eixo transversal até b % na outra ponta. Para quadros lado a lado, o início é o topo, então 40~55 | * traça uma linha de 40 % da largura no alto até 55 % embaixo; para fileiras, o início é o lado por onde a página é lida. Os tamanhos se somam em cada ponta separadamente, e as células continuam sendo polígonos convexos. Os cantos arredondados valem só para quadros retangulares; um quadro inclinado mantém os cantos vivos.

#Sarjetas

A sarjeta fica centrada em cada linha de divisão, metade de cada lado, de modo que uma linha escrita a 30 % fica exatamente a 30 % da sua célula. As linhas inclinadas mantêm a sarjeta do seu eixo, medida na perpendicular à linha. Os valores padrão seguem a página habitual: 4 mm entre fileiras e 2 mm entre os quadros de uma fileira (comics.gutter.horizontal e vertical, ou o atributo gutter da página).

#Sangria

Um quadro com sangria passa da moldura: cada um dos seus lados que toca a moldura é levado até o refile, e até a sangria além dele quando a página tem uma (page.cutLines.bleed). O atributo bleed da página aplica sangria a todos os quadros; o bleed de um quadro aplica só a ele, bleed="top start" só a esses lados (top, bottom, start, end, left, right), e bleed=false a impede. Um estilo de quadro com bleed: true aplica sangria aos seus quadros.

#Recuo interno e quadros sobrepostos

pad deixa um quadro menor do que a sua célula: de um a quatro valores, na ordem das margens do CSS com lados lógicos (superior, final, inferior, inicial), cada um uma medida ou uma porcentagem da célula. ::panel{art=x pad="0 15%"} dá um quadro mais estreito que a sua fileira, centralizado nela.

Um quadro com inset="x y w h" não ocupa uma célula: ele é colocado sobre o quadro anterior, naquela posição e tamanho em porcentagens da caixa desse quadro, como um pequeno retrato num canto ou um close sobre um plano geral. O seu roteiro é letreirado dentro dele.

:::page{split="*"}
::panel{art=storm-wide}
caption{at=bottom-start}: The storm broke at midnight.
::panel{art=maya-window inset="62% 6% 32% 30%"}
maya{whisper}: Grandpa?
:::

#Quadros e arte

Uma linha ::panel{…} inicia um quadro; o seu roteiro vai até a próxima linha ::panel ou até a cerca de fechamento. Um quadro sem art é desenhado vazio na sua cor de fundo, que é como se faz um quadro só de texto. O texto antes do primeiro ::panel é letreirado como recordatório do primeiro quadro e informado como comicStrayText.

#Recortar o desenho para a célula

A arte dos quadros é desenhada sem levar em conta a forma da célula em que vai parar: a página pode ser dividida de novo, um divisor pode ser arrastado, uma tradução pode pedir uma fileira mais alta. A área segura do desenho (Resource.safeArea, veja Formato do documento › Área segura) diz o que precisa continuar visível, e o recorte é calculado para cada célula:

1. Com fit=cover, a janela visível tem as proporções da célula e é tão grande quanto o desenho permite.
2. Ela é posicionada de modo que a área segura fique dentro dela. Onde isso deixa margem, a janela é centralizada em focus quando o quadro define um; caso contrário, as margens fora da área segura são cortadas na proporção dos seus tamanhos, de modo que um tema à esquerda do centro continua à esquerda do centro.
3. Se nenhuma janela com as proporções da célula consegue conter a área segura (uma célula muito larga para um tema alto), o desenho é mostrado com a área segura inteira e o resto da célula é preenchido com o fundo do quadro. A página informa comicPanelLetterbox. Uma célula mantém inteira a área segura de um desenho W × H enquanto a sua largura dividida pela altura fica entre sw·W/H e W/(sh·H), onde sw e sh são a largura e a altura da área segura em frações.

Um desenho sem área segura é recortado em torno do seu centro, ou em torno de focus. Um SVG sem tamanho intrínseco preenche a célula tal como é. Os renderizadores recortam no polígono da célula e desenham o desenho inteiro no seu tamanho sem recorte, então o recorte nunca reamostra a imagem.

#Estilos de quadro

A aparência de um quadro vem de comics.panel (uma borda preta de 1 pt, fundo branco, cover), de um estilo nomeado em comics.panelStyles que uma página ou um quadro escolhe com style=, e do border e do bg do próprio quadro. Uma borda pode ser solid, none ou rough: um traço feito à mão que treme um pouco, igual em todas as compilações, já que o tremor é gerado a partir do quadro. Veja Configuração › Quadrinhos para todos os campos.

#Arte que sai do quadro

Uma borda rompida, quando um personagem ou um objeto sai do seu quadro, exige dois desenhos: a arte do quadro, recortada na célula como de costume, e um recorte transparente da parte que sai, indicado com pop. O recorte é cortado e posicionado exatamente como a arte (ele deve ter o mesmo tamanho do desenho da arte) e desenhado depois da borda, sem recorte, de modo que cobre a borda e a sarjeta.

::panel{art=gull-sky pop=gull-cutout bleed="top"}
sfx{at="70% 20%"}: SKRAAW

#Letreiramento

Abaixo de cada linha ::panel vem o roteiro do quadro, um balão por linha:

key{attributes}: text

A chave é um id de personagem (letras, algarismos, _, . e -), o mesmo em todas as traduções; ela corresponde às âncoras dos desenhos e ao elenco. Três chaves são reservadas: caption (um recordatório de narração), sfx (uma onomatopeia, sem balão) e note (uma nota do editor). Os dois-pontos podem ser o ： de largura total que um método de entrada chinês ou japonês digita. O texto é Markdown em linha: *emphasis* e **strong** saem em negrito itálico, a convenção do letreiramento (só negrito nas escritas sem itálico), :tcy[12] compõe algarismos atravessados numa coluna vertical, :ruby compõe a sua leitura em meio corpo sobre a base (ao lado dela numa coluna), e :ltr / :rtl mantêm um trecho no seu próprio sentido dentro de um balão do sentido oposto. Uma linha recuada com dois espaços ou uma tabulação continua o balão de cima (unida por um espaço, ou sem nenhum entre dois caracteres chineses ou japoneses); uma barra invertida no fim de uma linha quebra ali o texto do balão. Linhas em branco são ignoradas, e uma linha que não é uma linha de roteiro é letreirada como recordatório e informada como comicStrayText.

::panel{art=lh-radio}
tomas: Just in time.
  The radio's gone deaf,\
  and there's a storm on the way.
biscuit{to="40% 70%"}: Mrrp?
note: Valve radios warm up for a minute before they speak.

Os atributos de uma linha de roteiro:

#Como um balão é feito

O letreiramento segue os hábitos do letreiramento de quadrinhos, e não os de uma caixa de texto:

• Um corpo por livro. Todo balão é composto em comics.lettering.fontFamily no corpo comics.lettering.fontSize (7,5 pt por padrão), alterado só pelo fontScale do seu estilo (um sussurro a 0,9, um grito a 1,15). O texto nunca é reduzido para caber: um balão que não cabe muda de forma, muda de lugar, atravessa a borda ou é informado.
• Primeiro o texto, depois o balão. As palavras são quebradas em linhas primeiro, buscando um losango: linhas curtas em cima e embaixo, a mais longa no meio, nenhuma última linha muito mais curta que as outras, nenhuma linha terminando em artigo ou preposição quando outra quebra é igualmente boa. Depois o contorno é desenhado em volta das linhas, com a mesma folga de todos os lados.
• Regras da casa. Três pontos viram reticências; textTransform: 'uppercase' compõe o texto em maiúsculas (as escritas sem caixa ficam como estão, e o ß alemão vira SS); em japonês e chinês, o ponto final que fecha um balão é retirado (dropFinalStop) e os ! e ? ASCII viram as suas formas de largura total nas colunas, dois deles numa só célula (!? como ⁉); doubleDash letreira um travessão como --, como fazem os quadrinhos americanos.
• Posicionamento. Os balões de um quadro são posicionados na ordem de leitura dentro do quadro, a comics.lettering.inset da borda (1,5 mm). O primeiro fica perto do topo, no lado inicial, e cada um dos seguintes não deve ficar mais alto que o anterior, a menos que esteja mais adiante no sentido de leitura. Os balões ficam longe dos rostos e das zonas a evitar que os desenhos marcam, longe das bocas dos personagens e uns dos outros, ficam acima ou ao lado do seu personagem em vez de abaixo, e os seus rabichos não devem se cruzar. Os recordatórios e as notas com canto vêm primeiro, depois os balões fixados, depois o resto. O posicionamento é determinístico: a mesma página sempre dá os mesmos balões.
• Na folha. O letreiramento nunca passa do refile. Num quadro com sangria, os balões ficam na parte do quadro dentro da moldura, onde o refile não pode cortá-los; só uma onomatopeia fixada com at= ou marcada com break pode entrar na sangria ao lado do seu quadro.
• Quando não cabe. Um balão que não pode ser posicionado sem problemas pode primeiro atravessar a borda (só com break), depois cobrir uma zona a evitar (nunca um rosto), depois assumir uma forma mais larga ou mais estreita. Uma fala longa numa célula estreita é composta mais ou menos com a largura da célula e invade a sarjeta, em vez de ficar como uma coluna fina sobre o rosto do personagem. Se o balão ainda se sobrepõe a algo, ele é colocado onde faz menos estrago e a página informa comicBalloonOverflow, indicando o quadro e o que ele cobre. Uma travessia pedida, com break ou com um at=, não conta como uma dessas falhas: o aviso então indica só o que o balão cobre. Uma fala mais curta, um quadro maior ou um at= resolvem o problema.

#Rabichos

O rabicho de um balão de fala aponta para a boca do personagem, e as bolhas de um balão de pensamento, para a cabeça (veja Personagens e âncoras). Ele sai do contorno voltado para o personagem, faz uma leve curva e para antes da boca. Quando a âncora do personagem fica fora do quadro por causa do recorte, ou o desenho não marca nenhuma âncora para esse personagem, o rabicho aponta para fora do quadro, em direção à âncora ou à borda mais próxima, e termina na borda. Um balão assim fica junto à borda de onde vem a voz, com um rabicho curto: um rabicho que atravessa o quadro inteiro é lido como uma seta, então é o balão que se move, em vez de o rabicho crescer. to="x% y%" aponta um rabicho para outro ponto do desenho, e tail=start (ou top, bottom, end) para um personagem fora do quadro daquele lado. Recordatórios, notas e onomatopeias não têm rabicho.

#Balões unidos

Duas falas seguidas do mesmo personagem são unidas, como se letreira a pausa de quem fala: com joinSameSpeaker: 'butt' (o padrão), os dois corpos se sobrepõem e compartilham um só contorno; com 'connector', um gargalo estreito liga os dois; com 'none', eles continuam sendo dois balões com dois rabichos. Só o primeiro balão de um grupo tem rabicho. Uma linha pode pedir o seu próprio comportamento com join ou join=false.

#Onomatopeias

Uma linha sfx não tem balão: o texto é composto em tamanho grande (2,4 vezes o corpo do letreiramento), em negrito, na fonte de onomatopeias do idioma do documento, com um halo branco em volta das letras para que se leia sobre o desenho. Ela é posicionada perto da âncora sfx do quadro quando o desenho marca uma (uma âncora cujo id é sfx) ou, se não, onde não cubra nenhum rosto. rotate, size, color e font a alteram, e at a fixa. No letreiramento vertical, ela é composta numa coluna de no máximo cinco caracteres. As onomatopeias são pintadas depois de todos os balões da página.

Uma linha pode definir o seu próprio modo de escrita. Uma edição horizontal de um mangá que mantém uma onomatopeia em japonês a compõe numa coluna:

sfx{vertical size=2.6 font="Dela Gothic One"}: ドン

#Configurações de letreiramento

comics.lettering reúne a fonte, o corpo, a entrelinha, a cor e as regras da casa do livro inteiro. Por padrão, a fonte segue o idioma do documento, e a fonte das onomatopeias também:

Todas estão no Google Fonts e são carregadas pelo nome, como qualquer outra fonte. Com a altura de linha padrão, os balões verticais e os chineses ou japoneses são compostos com entrelinha de 1,5, e os árabes com 1,45. O letreiramento japonês, chinês e árabe nunca é inclinado, diga o que disser o estilo, e o árabe nunca recebe espaçamento entre letras.

#O elenco

comics.cast lista os personagens: um id (a chave do personagem), um name e, opcionalmente, o estilo de balão em que ele fala (balloonStyle, um robô que sempre fala em radio), a color do texto e o fill do balão que o distinguem, e uma fontFamily. O nome é o que as saídas anunciam: o visualizador HTML e o EPUB refluível imprimem “Nome: palavras” em cada fala. Um personagem que está no elenco nunca é informado como desconhecido.

comics: {
  cast: [
    { id: 'maya', name: 'Maya' },
    { id: 'tomas', name: 'Grandpa Tomás' },
    { id: 'beacon', name: 'The beacon', balloonStyle: 'radio', fill: { hex: '#e8f4ff', model: 'hex' } },
  ],
}

#Estilos de balão

Um estilo de balão é um tipo de balão: o seu contorno, o seu rabicho e o seu letreiramento. Há nove embutidos, e uma linha de roteiro escolhe um com uma palavra solta entre chaves (ben{whisper}: …). As chaves reservadas tiram o estilo do próprio nome (caption:, sfx:, note:), e todas as outras linhas usam speech, ou o balloonStyle do personagem no elenco.

comics.balloonStyles os altera e acrescenta outros. Uma entrada com o id de um estilo embutido é aplicada por cima desse estilo; uma entrada com um id novo parte de speech:

comics: {
  balloonStyles: [
    { id: 'caption', fill: { hex: '#ffffff', model: 'hex' }, textTransform: 'uppercase' },
    { id: 'shout', burstPoints: 18, burstDepth: 0.3 },
    { id: 'eerie', shape: 'wavy', stroke: { hex: '#5b4a8a', model: 'hex' }, italic: true },
    { id: 'writing', shape: 'none', tail: 'none', fontFamily: 'Caveat', color: { hex: '#3b2a1a', model: 'hex' } },
  ],
}

ghost{eerie}: Leave this house…
caption{at=bottom-end}: Three streets away.

Os contornos são oval (uma superelipse ajustada às linhas, roundness 2,2), rounded, rectangle, cloud (recortes arredondados contados a partir do perímetro), burst (burstPoints pontas, com profundidade burstDepth), wavy, electric e none. dash desenha um contorno tracejado, double um contorno duplo, e wobble (0–1) o faz tremer como se fosse feito à mão, sempre do mesmo jeito para o mesmo balão. Os rabichos são curved, wedge, bubbles, zigzag e none. Todos os campos, com os seus valores padrão, estão em Configuração › Quadrinhos.

Os renderizadores desenham um balão do jeito que um letrista o arte-finaliza: todos os contornos de um grupo são traçados primeiro com o dobro da espessura, depois preenchidos, e depois o texto é composto. Por isso, dois corpos unidos e o seu rabicho saem como uma só forma, sem nenhuma linha entre eles.

#Personagens e âncoras

Os rabichos apontam para as pessoas, e os balões ficam longe dos rostos, porque os desenhos dizem onde estão as pessoas. Um recurso bitmap ou SVG pode levar âncoras: um ponto por personagem, escrito uma vez, em frações do desenho (de 0 a 1 a partir do canto superior esquerdo), como a área segura.

const arrive: Resource = {
  id: 'lh-arrive', typeId: 'figure', kind: 'bitmap', createdAt: 0, updatedAt: 0,
  bitmap: { fileId: 'lh-arrive.jpg', format: 'jpeg', width: 1100, height: 733 },
  altText: 'A girl in a yellow raincoat walks up a coastal path towards a lighthouse.',
  safeArea: { x: 0.2, y: 0.08, width: 0.42, height: 0.82 },
  anchors: [
    { id: 'maya', x: 0.29, y: 0.52, head: { x: 0.27, y: 0.47 }, face: { x: 0.22, y: 0.42, width: 0.12, height: 0.16 } },
    { id: 'biscuit', x: 0.4, y: 0.68 },
  ],
  avoid: [{ x: 0.51, y: 0.09, width: 0.1, height: 0.43 }], // o farol
};

• id é a chave de personagem que o roteiro usa (maya: …). Uma âncora cujo id é sfx posiciona as onomatopeias do quadro.
• x, y é a boca, para onde aponta o rabicho de um balão de fala.
• head é para onde apontam as bolhas de um balão de pensamento. Sem ele: a boca.
• face é um retângulo que nenhum balão cobre. Uma âncora sem ele recebe uma caixa de proteção de alguns ems acima e em volta da boca, para que os balões continuem longe de um rosto que não foi delimitado.
• avoid (no recurso) lista outros retângulos que nenhum balão cobre: uma mão, um objeto-chave, uma placa. Sob pressão, um balão pode cobrir uma zona a evitar, nunca um rosto.

Como as âncoras são frações do desenho, elas acompanham o recorte: o motor leva cada uma, através do recorte e do espelhamento do quadro, até a página, de modo que arrastar um divisor, mudar a divisão ou traduzir nunca tira um rabicho do seu personagem. Uma âncora que o recorte deixa fora do quadro faz o rabicho apontar para fora do quadro, na direção dela. A área segura protege as âncoras disso: uma âncora fora dela é informada como comicAnchorOutsideSafeArea, uma dica de autoria, já que um recorte pode cortá-la. Uma chave de personagem que nenhum desenho da página marca e nenhuma entrada do elenco nomeia é informada como comicUnknownSpeaker, o que costuma pegar um id digitado errado; páginas cujos desenhos não marcam nenhuma âncora não informam nada, então uma HQ pode ser letreirada sem âncoras.

As âncoras e as zonas a evitar pertencem ao desenho e são as mesmas em todos os idiomas. No Sandbox, elas são marcadas no editor de imagens do painel Recursos: o campo Área segura e letreiramento abre um diálogo com três modos, Área segura, Personagens e Zonas a evitar. Um clique no desenho adiciona ali um personagem; a boca, a cabeça e o rosto são arrastados até o lugar certo e o id é digitado ao lado; arrastar sobre uma parte vazia do desenho traça uma zona a evitar. Cada marca pode ser movida com as setas do teclado (Shift para passos maiores) e excluída com Delete, e o diálogo tem o seu próprio desfazer.

#Tiras

Um bloco :::strip tem o corpo de uma página de quadrinhos, mas fica no meio do texto, como uma caixa da largura de uma coluna ou da página, cortada em quadros: a tira diária de um jornal, uma piada de quatro quadros numa revista, uma HQ curta dentro de um livro em prosa.

:::strip{split="* | * | * | *" aspect=4 span=page placement=top}
::panel{art=pip-1}
pip: Otto, the ice is melting.
::panel{art=pip-2}
otto{thought}: Not the bakery…
::panel{art=pip-3}
::panel{art=pip-4}
sfx: SPLOSH
:::

Uma tira sem split coloca os seus quadros lado a lado. A caixa da tira é a sua moldura: as sarjetas, os estilos de quadro e o letreiramento são os da configuração, e nada tem sangria. Uma tira mais alta que uma coluna é reduzida à altura da coluna, legenda incluída. Depois dela, o texto continua na linha seguinte da grade de linhas de base, com o espaço que layout.inlineResourceGap pede, como depois de uma figura no texto. Numa página vertical, a tira é diagramada na sua caixa girada, então um yonkoma * / * / * / * com aspect=0.25 desce por uma coluna vertical, e a sua legenda vem depois dela como uma coluna de texto.

:::strip{split="* | * | *" width=70% caption="Pip and Otto on the ice." type=figure id=pip-ice}
::panel{art=pip-1}
::panel{art=pip-2}
::panel{art=pip-3}
:::
 
As :ref{id="pip-ice"} shows, the ice was thin.

A legenda recebe tudo o que o estilo de legenda define: a fonte e o corpo, as cores do rótulo e do texto, o peso e a inclinação do rótulo, o espaço entre a tira e a legenda, o alinhamento e a barra por trás dela. O captionStyle próprio de um tipo se aplica às tiras numeradas nele.

No VDT, uma tira é um bloco de type: 'resource' com um campo comic e sem resourceBlock; as suas coordenadas são relativas à caixa do bloco na folha, e uma tira mais estreita, ou uma que fica sob a legenda, fica dentro dessa caixa (nesse caso comic.frame não começa no canto dela). A legenda são as próprias lines do bloco, compostas nas fontes e cores da legenda, e stripCaption diz quais linhas são essas, onde ficam, o tipo e o número, e a barra. pageComics(page) dá a HQ de uma página e as tiras das suas colunas e flutuantes, todas transpostas para a folha.

#Páginas duplas

:::page{spread} distribui uma única árvore de divisões por duas páginas lado a lado, para um panorama ou uma batalha que precisa do livro aberto inteiro. A moldura são as duas áreas de texto unidas através da lombada, sem as margens internas; a divisão, as sarjetas e o recorte funcionam como numa página simples, e um quadro ou um desenho pode atravessar a lombada.

:::page{spread split="25 [* | * | *] / *" bleed}
::panel{art=market-1}
::panel{art=market-2}
::panel{art=market-3}
::panel{art=market-panorama}
caption: The Saturday market, from the clock tower.
:::

Uma página dupla começa num verso, a página par, para que as duas metades fiquem frente a frente: uma página em branco é acrescentada antes dela quando a HQ começaria num recto, inclusive bem no início de um livro, onde a página 1 fica sozinha. Num livro com encadernação à esquerda, o verso é a página da esquerda; num livro com encadernação à direita (árabe, japonês e chinês verticais, uma HQ lida da direita para a esquerda), é a da direita. Cada página leva a sua metade: os quadros que chegam ao seu lado, cortados na lombada, e o desenho de um quadro que atravessa a lombada aparece nas duas páginas. Os quadros com sangria sangram pela cabeça, pelo pé e pelas bordas externas, nunca na lombada. Nada é letreirado numa faixa de 8 mm em volta da lombada, onde a encadernação o engoliria: um balão fixado ali desliza para o lado mais próximo. Cada balão fica na página que contém o seu centro.

#Sentido de leitura

Uma HQ ocidental é lida da esquerda para a direita: o primeiro quadro de uma fileira fica à esquerda. Mangás e quadrinhos árabes são lidos da direita para a esquerda. O Postext obtém o sentido de comics.readingDirection:

• 'auto' (o padrão): o sentido do idioma da edição. Da direita para a esquerda num documento da direita para a esquerda, de modo que uma edição árabe espelha as suas páginas; num documento vertical; e em japonês e chinês tradicional (ja, zh-Hant, zh-TW, zh-HK, zh-MO), de modo que uma edição japonesa de uma HQ ocidental é lida da direita para a esquerda, como os mangás. Em qualquer outro idioma, incluídos o chinês simplificado e o coreano (manhua e manhwa hoje são lidos da esquerda para a direita), é o sentido para o qual a arte foi desenhada, comics.artDirection ('ltr' por padrão): um mangá, com artDirection: 'rtl', é lido da direita para a esquerda em qualquer idioma.
• 'ltr' ou 'rtl' impõe um sentido ao livro inteiro, e o atributo direction de uma página o impõe a essa página.

A encadernação acompanha os quadrinhos. Com page.binding: 'auto', um livro cuja seção comics é lida da direita para a esquerda é encadernado à direita: a página 1 fica sozinha à esquerda da lombada, as páginas duplas são lidas [3 | 2], os visualizadores viram as páginas para a esquerda, o PDF pede a ordem de páginas da direita para a esquerda e o EPUB declara uma progressão de páginas da direita para a esquerda. A seção comics decide pelo livro inteiro, então um capítulo sem páginas de quadrinhos é encadernado como os outros; a direction própria de uma página não muda a lombada de lugar. Um documento cujas páginas de quadrinhos seguem os valores padrão, sem seção comics, mantém a encadernação do seu texto (basta comics: {} para encaderná-lo no sentido de leitura dos seus quadrinhos). page.binding: 'left' ou 'right' continua tendo prioridade. Veja Encadernação.

A mesma fonte gera as duas diagramações. Uma página da direita para a esquerda distribui os quadros de cada fileira a partir da direita, então o quadro 1 fica no alto à direita; as inclinações se espelham junto, assim como os lados lógicos de bleed, pad e as palavras-chave de canto (um recordatório em top-start fica no alto à direita). As fileiras mantêm a sua ordem de cima para baixo, e a ordem de leitura do roteiro não muda. O letreiramento também espelha as suas regras: o primeiro balão de um quadro tende para a direita, e o seguinte só pode ficar mais alto se estiver mais à esquerda.

Os desenhos não são espelhados, a não ser que se peça: comics.mirrorArt: true vira cada desenho de uma página lida no sentido oposto ao de artDirection, que é o que as edições ocidentais de mangá fizeram durante muito tempo, e ::panel{mirror=false} mantém um desenho como foi feito (texto desenhado na arte, um espadachim destro). As âncoras e as áreas seguras acompanham a virada. Em geral, é melhor deixar o espelhamento desligado: a ordem dos quadros já segue o leitor, e um desenho virado muda o que o artista desenhou.

A escrita dos balões segue o idioma, não a ordem dos quadros. Com comics.lettering.writingMode: 'auto', o japonês e o chinês tradicional são letreirados em colunas verticais lidas da direita para a esquerda, com no máximo maxColumnChars caracteres (8), com as regras de kinsoku do japonês, os algarismos atravessados na coluna com :tcy e a pontuação nas suas formas verticais; um documento composto em escrita vertical é letreirado na vertical em qualquer idioma. O chinês simplificado, o coreano e todos os outros idiomas são letreirados na horizontal, e 'horizontal' ou 'vertical' impõe um ou outro. O árabe é letreirado da direita para a esquerda, com as palavras latinas e os algarismos no seu próprio sentido, nunca inclinado e nunca com espaçamento entre letras.

#Traduzir uma história em quadrinhos

Uma tradução é um arquivo Markdown com as mesmas linhas :::page e ::panel e as mesmas chaves de personagem, e outras palavras. Os desenhos, as suas áreas seguras, âncoras e zonas a evitar, as divisões e as fixações (os pontos at= estão em frações dos desenhos) são compartilhados por todas as edições. Cada edição faz o seu próprio letreiramento: o texto é medido no seu próprio idioma e na sua própria fonte, quebrado nas suas próprias linhas, e cada balão é moldado e posicionado de novo em volta dele.

:::page{split="30 [30 | 20 | *] / *"}
::panel{art=lh-arrive}
caption: Todos los veranos, Maya pasaba una semana en el faro.
maya: ¡Abuelo! ¡Ya estoy aquí!
::panel{art=lh-radio}
tomas: Llegas justo a tiempo. La radio se ha quedado sorda,
tomas: y viene tormenta.
:::

O que muda de uma edição para outra decorre do locale do documento: as fontes padrão de letreiramento e de onomatopeias, o letreiramento vertical para o japonês e o chinês tradicional, os pontos finais retirados do chinês e do japonês, a entrelinha e o sentido das páginas de uma edição árabe. O texto fica cerca de um quinto mais longo em espanhol ou francês do que em inglês, e bem mais curto em chinês ou japonês; os balões crescem e encolhem com ele, e comicBalloonOverflow indica os quadros em que uma tradução precisa de uma fala mais curta ou de uma fixação. Onomatopeias são palavras como quaisquer outras: traduza-as, ou mantenha a original e acrescente uma pequena embaixo, como legenda.

#Saída dos quadrinhos

Todas as saídas pintam a mesma HQ: fundos dos quadros, desenhos recortados nos quadros, bordas, arte que sai do quadro, depois os balões de cada grupo unido (contornos traçados, depois preenchidos, depois o texto) e, por último, as onomatopeias.

• Canvas. O canvas do Sandbox, as páginas 3D do Folio e as miniaturas pintam todos por meio de renderPageToCanvas.
• PDF. O postext-pdf pinta as páginas de quadrinhos com contornos vetoriais e as fontes de letreiramento incorporadas, e os desenhos SVG com uma matriz de impressão em PDF (svg.pdfFileId) são incorporados como essa matriz. Um PDF marcado dá a cada página de quadrinhos um Div, a cada quadro um Figure com o seu texto alternativo (o alt do quadro ou, se não houver, o altText do recurso) e a cada balão um P depois da figura do seu quadro, na ordem de leitura; uma onomatopeia é um Span cujo /ActualText são as suas palavras. Fundos, bordas e contornos são artefatos. A saída passa nas verificações PDF/UA-1 do veraPDF.
• HTML. Cada quadro é um <figure> com um SVG em linha (o recorte, o desenho, a borda, a arte que sai do quadro) com o texto alternativo do quadro, seguido dos seus balões como elementos <p> na ordem de leitura. Um balão de fala começa com o nome do personagem num span visualmente oculto, para que um leitor de tela diga “Maya: Grandpa! I'm here!”; uma onomatopeia é anunciada como uma imagem cujo rótulo são as suas palavras. O visualizador HTML do Sandbox, cujas páginas têm a largura de uma tela e a altura de uma rolagem, compõe uma página de quadrinhos como a página impressa ajustada à janela (comics.viewerLeaf), nunca refluída.
• EPUB de layout fixo. As páginas são as do livro impresso. O livro também traz navegação por regiões (regions.xhtml, EPUB Region-Based Navigation 1.0): uma região panel por quadro na ordem de leitura, com os seus balões, recordatórios e onomatopeias aninhados nela, para que um sistema de leitura possa percorrer o livro quadro a quadro. A progressão das páginas segue o sentido de leitura dos quadrinhos. A opção kindlePanelView: true de renderToEpub acrescenta o Kindle Panel View: uma área de toque por quadro e uma cópia ampliada que preenche a tela, com os metadados que o Kindle exige.
• EPUB refluível. Uma página de quadrinhos não tem ali uma página a manter, então cada quadro vira o seu desenho, recortado exatamente como na página, seguido das suas falas como texto: “Maya: Grandpa! I'm here!”, os recordatórios como parágrafos, as onomatopeias em itálico.

A legenda de uma tira é pintada com o texto, como a de uma figura. Num PDF marcado, ela é o Caption do Div da tira, lido depois dos seus quadros (antes deles quando fica acima da tira). No HTML, no EPUB de layout fixo e no EPUB refluível, a tira e a sua legenda formam um único <figure>, e a legenda é o seu <figcaption>; numa página vertical ou da direita para a esquerda, onde o desenho da tira fica sobre a folha, o HTML mantém a legenda no texto, à parte.

#Editar quadrinhos no Sandbox

No canvas, nas páginas HTML e no modo de seleção do Folio, uma página de quadrinhos pode ser editada com o ponteiro, e cada edição é gravada de volta no Markdown do capítulo (o guia do Sandbox tem os detalhes):

• Divisores. Sobre uma sarjeta, o ponteiro vira um cursor de redimensionamento. Arrastá-lo move a linha de divisão; ao soltar, a nova porcentagem é gravada no valor split da página (o atributo é acrescentado quando a página não tem um), e a página é diagramada de novo. Shift prende a passos de 5 %, Alt move só a ponta mais próxima, inclinando a linha, e nenhuma célula fica mais estreita que 5 %. Durante o arrasto, um quadro cujo desenho ficaria com faixas é marcado. Cada divisor também é um separador focalizável: as setas do teclado o movem 1 % (5 % com Shift), Enter grava a posição e Escape a desfaz.
• Quadros. Uma pequena barra de ferramentas sobre um quadro o divide com uma linha horizontal ou vertical, acrescentando depois dele um ::panel vazio para a nova célula, ou o junta com o próximo quadro: a linha de divisão some, e o quadro resultante fica com o desenho do primeiro e com os dois roteiros.
• Balões. Arrastar um balão o fixa: a sua linha de roteiro recebe at="x% y%" em porcentagens do desenho do quadro, e um grupo unido se move inteiro. Enquanto ele se move, o balão fica laranja onde cobriria um rosto ou uma zona a evitar ou sairia do quadro, e a dica diz qual. As setas do teclado deslocam um balão em foco 1 %, e um clique duplo num balão fixado remove a fixação.
• Rabichos. Arrastar a ponta de um rabicho grava na linha to="x% y%", o ponto para onde o rabicho aponta; um clique duplo na ponta o remove, e o rabicho volta a apontar para o seu personagem. A partir de um balão em foco, T passa para o seu rabicho, cujo alvo as setas do teclado movem.
• Teclado. Um quadro em foco é dividido com H (uma linha horizontal) ou V (uma linha vertical) e juntado com o próximo quadro com M.
• Tiras. Todas as ferramentas também funcionam em blocos :::strip, numa coluna, flutuando ou na largura da página, mais estreitos que a sua medida ou sob uma legenda, e gravam na cerca da própria tira.
• Desenhos. A área segura, os personagens e as zonas a evitar de um desenho são marcados no painel Recursos (veja Personagens e âncoras).
• Configurações. O painel Design tem um grupo Quadrinhos: sentido de leitura, moldura e sarjetas, o quadro padrão e os estilos de quadro, o letreiramento e os estilos de balão, cada um com uma visualização.
• Editor. O editor de texto colore :::page, ::panel e as linhas de roteiro, e o painel Verificações lista os avisos de quadrinhos nas suas linhas.

#Avisos de quadrinhos

Cada aviso indica a linha ou o atributo a que se refere, e o painel Verificações do Sandbox o lista ali, com o título da primeira coluna.

Os avisos voltam no contentWarnings do documento, com o intervalo de origem da linha ou do atributo a que se referem (veja Configuração › Avisos no documento).

Uma configuração de quadrinhos que aceita uma entre poucas palavras e recebe outra, como shape: 'ovl' num estilo de balão ou readingDirection: 'rlt', é lida com o seu valor padrão e aparece no painel Verificações como Valor de configuração desconhecido (unknownConfigValue), com o valor que o motor usou e a palavra mais próxima. As configurações verificadas são readingDirection, artDirection, o borderStyle e o fit de um estilo de quadro, o writingMode, o textTransform, o dropFinalStop e o joinSameSpeaker do letreiramento, e o shape, o tail, o target, o position, o align e o textTransform de um estilo de balão.

#A partir do código

Uma HQ não precisa de nada além de buildDocument: os recursos trazem os desenhos com as suas áreas seguras, âncoras e zonas a evitar, e a configuração pode trazer comics. O letreiramento mede o texto com as fontes carregadas, então as fontes de letreiramento precisam ser carregadas antes da diagramação, como qualquer fonte: comicFontFamilies(config, markdown) lista as fontes de que os quadrinhos de um documento precisam (a fonte de letreiramento, as fontes de cada estilo de balão e as do elenco), e markdownHasComics(markdown) diz se um texto tem páginas de quadrinhos ou tiras. No PDF, o provedor de fontes recebe o pedido dessas fontes como de qualquer outra.

A HQ diagramada fica no VDT: page.comic (VDTComicPage) guarda a moldura, o sentido de leitura, os quadros na ordem de leitura (polígono, borda, fundo, o recorte do desenho como art.source e art.box), os divisores (com o intervalo de origem do valor split em que gravam) e os balões (caminho do contorno, blocos de texto, ponta do rabicho, tipo, personagem). A gramática das divisões é exportada para editores: parseComicSplit, serializeComicSplit, moveComicSplitLine, splitComicCell e mergeComicCells leem e reescrevem um valor split, mantendo os seus * sempre que possível. comicArtCrop e comicCropFeasibleRange calculam um recorte, e comicArtPointToPage leva um ponto de um desenho até a página.

#Limites conhecidos

• Só árvores de divisão. Uma divisão corta cada célula em duas com uma linha que a atravessa inteira, então não é possível escrever diagramações em que nenhuma linha cruza a página toda, como um cata-vento de quatro quadros em volta de um quinto. Os quadros sobrepostos e a arte que sai do quadro cobrem a maior parte do que essas diagramações pretendem.
• Formas de quadro. Os quadros são polígonos convexos; quadros redondos, irregulares ou vinhetas sem borda, arte girada ou ampliada e linhas de movimento são desenhados nos desenhos, não pelo Postext.
• Letreiramento. O rubi sobre uma base da direita para a esquerda fica de fora, e as outras anotações saem como texto simples dentro dos balões. O posicionamento é por quadro: os rabichos são impedidos de se cruzar por custo, não desviados uns dos outros, e o fluxo de um quadro para o seguinte não é equilibrado. Falas longas em células muito pequenas são informadas, não resolvidas. A proteção sobre um rosto não marcado é dimensionada a partir da boca e do ponto da cabeça (alguns ems quando a âncora não tem cabeça), então, num close, ela pode proteger mais a boca do que o rosto; marque o rosto.
• As tiras não podem ocupar um número de colunas menor que o da página (columns=2 numa página de três), e só são lidas no nível superior de um capítulo (não dentro de um boxe, de uma tabela ou de uma nota de rodapé). Uma citação na legenda de uma tira sai como foi escrita.
• Páginas duplas. Um quadro arredondado cortado na lombada perde todos os cantos arredondados. Uma HQ da direita para a esquerda num livro com encadernação à esquerda continua abrindo na página da esquerda, então o seu primeiro quadro cai na segunda página da página dupla.
• A arte que sai do quadro usa o recorte da arte do quadro, então o recorte transparente precisa ter o mesmo tamanho do desenho da arte.
• Saídas. O texto alternativo de reserva de um quadro sem alt e sem altText é “Panel N”, em inglês. A navegação por regiões descreve os quadros inclinados pelas suas caixas delimitadoras. O Kindle Panel View copia a HQ de uma página uma vez por quadro, o que aumenta o arquivo, e não foi verificado no Kindle Previewer.

#Referências

• Nate Piekos, Comic Book Grammar & Tradition (Blambot): tipos de balão, recordatórios, ênfase, o travessão duplo.
• John Roshell e Comicraft, Balloon Tales: rabichos e uniões, e o método das camadas, de traçar e depois preencher.
• Todd Klein, Digital lettering for comics.
• David Kurlander, Tim Skelly e David Salesin, Comic Chat, SIGGRAPH 96: posicionamento dos balões na ordem de leitura.
• IDPF, EPUB Region-Based Navigation 1.0, e Amazon KDP, Kindle Panel View.