Graphic novels, mangás e quadrinhos (doravante denominados graphic novels) são os livros de layout fixo mais comuns com pop-ups de imagem ou painéis virtuais. São semelhantes a livros infantis, mas apresentam um desafio singular, pois tendem a ser maiores e incluem um conteúdo mais complexo.

Os romances gráficos incluem uma grande quantidade de detalhes em imagens que serão exibidas em uma tela de 1920 x 1200. Para superar essa e outras dificuldades de acessibilidade, a Amazon encoraja o uso de conteúdo customizado e do nosso recurso de Visualização de painéis Kindle, que otimiza o conteúdo para uma experiência de leitura de alta resolução. Veja detalhes sobre o Kindle Comic Creator (Criador de quadrinhos).

Esse formato é compatível com a configuração de fonte, desde que não haja texto híbrido no eBook (consulte mais detalhes sobre texto híbrido).

Importante: tags de âncora aninhadas (nested anchor tags) não são compatíveis com livros de layout fixo. Livros de layout fixo com tags de âncora aninhadas serão suprimidos.

Índice

• Diretrizes para metadados
• Diretrizes para imagens
• Visualização em painéis (ampliação de região)
• Painéis virtuais em quadrinhos e mangás
• Otimização de conteúdo para a experiência de leitura em romances gráficos
• Diretrizes para texto
• Visualização guiada

Diretrizes para metadados

O arquivo OPF especifica os metadados necessários em livros de layout fixo. Embora semelhantes, os diversos tipos de formatos de layout fixo contêm diferenças importantes. A não ser quando explicitamente determinado, a diretriz sobre livros com layout fixo e pop-ups de imagem ou painéis virtuais não deverá ser aplicada a nenhum outro formato, como livros com layout fixo contendo pop-ups de texto.

Diretrizes para imagens

Quando otimizadas para o Kindle Fire HD 8,9" de 2013, os romances gráficos devem manter uma proporção de tela de 1920 x 1200. A resolução da imagem irá depender do fator de zoom requerido para a visualização em painéis Kindle.

No entanto, a Amazon recomenda planejar para uma experiência de leitura de alta qualidade com ampliação de 2 vezes. As imagens devem estar em formato JPEG. A Amazon recomenda usar uma resolução de imagem de pelo menos 300 ppi.

Há cinco fatores padrão de zoom:

Uma boa qualidade de imagem em romances gráficos exige imagens que sigam os padrões de resolução listados nesta seção e que mantenham uma proporção de tela consistente. Mais importante ainda, otimize imagens para que tanto a arte de fundo fique clara quanto o texto fique legível. Esses dois fatores garantem a mais alta qualidade para o formato de romances gráficos.

Visualização em painéis (ampliação de região)

A Visualização em painéis para romances gráficos oferece uma experiência de leitura única. Ela trata da acessibilidade e permite que o usuário experimente o fluxo de ação de cada página em alta resolução e de maneira fácil de usar. Os usuários podem ocultar a Visualização em painéis a qualquer hora para ver toda a página. Para um exemplo de Visualização em painéis, consulte as imagens nesta seção.

O usuário ativa a Visualização em painéis tocando duas vezes em uma "área de ativação do pop-up". A área ativa (elemento fonte) é ocultada e a Visualização em painéis (elemento alvo) é exibida.

Para que a Visualização em painéis funcione, são necessárias as seguintes etapas:

1. Defina a área de ativação do pop-up criando um elemento de contêiner bem definido (<div>) que contenha um elemento de âncora (<a>). O <div> denota o tamanho e a posição da área de ativação do pop-up. O <a> é ajustado para preencher o <div> e deve especificar a classe app-amzn-magnify. A âncora deve também ter um dos seguintes atributos armazenados em um objeto JSON como parte do valor data-app-amzn-magnify:
   1. "targetId":"<string:elementId>" = element id única do elemento HTML da Visualização em painéis que representa a região ampliada
   2. "ordinal":<integer:reading order> = ordem de leitura das áreas de ampliação (a ordem na qual os painéis devem aparecer de acordo com o fluxo de leitura)
2. Crie um elemento-alvo <div> para visualização em painéis que esteja posicionado e dimensionado para exibir a ação que melhor reflita a área de ativação do pop-up.
   
   

   Captura de tela de conteúdo de layout fixo

   Captura do mesmo conteúdo com a Visualização em painéis ativada

   Exemplo:

   <div> <img src="images/page_002.jpg" alt="Comic Book Images" class="singlePage" /> </div> <div id="page_002-1"> <a class="app-amzn-magnify" data-app-amzn-magnify='{"targetId":"page_002-1magTargetParent", "ordinal":1}'></a> </div> … <div id="page_002-1-magTargetParent" class="target-mag-parent"> <div class="target-mag-lb"> </div> <div id="page_002-1-magTarget" class="target-mag"> <img src="images/page_002.jpg" alt="Comic Book Images"/> </div> </div>

   
   

   ---

   Painéis virtuais em quadrinhos e mangás

   O recurso de painéis virtuais é ativado em histórias em quadrinhos e mangás na ausência de painéis fornecidos pela editora. Os metadados RegionMagnification são usados para identificar se a editora forneceu informações sobre painéis. Caso a editora tenha incluído os painéis de Ampliação de região em alguma página, a visualização em painéis virtuais Kindle não é ativada.

   Por padrão, toda página é dividida em quatro painéis com base no valor primary-writing-mode. Os exemplos abaixo indicam a ordem dos painéis.

   Exemplo:

   Modo retrato:

   

   Horizontal-lr, Horizontal-rl

   

   Vertical-rl, Vertical-lr

   
   

   Modo paisagem:

   

   Vertical-lr e Horizontal-lr, Horizontal-rl e Vertical-rl

   Alguns dispositivos aceitam páginas duplas sintéticas:

   

   Vertical-rl, Vertical-lr

   Requisito nº 1: Usar uma página dupla sintética quando o orientation-lock for igual a Nenhum

   Caso a orientação não esteja "travada", o conteúdo deve ser projetado tanto para o modo retrato quanto o paisagem. Alguns dispositivos apresentam uma página dupla sintética com duas páginas lado a lado no modo paisagem. Toda página a ser usada em uma página dupla sintética deverá ter uma página pareada definida na orientação paisagem. Na orientação de retrato, os pares são ignorados.

   As páginas a serem usadas em páginas duplas sintéticas devem ser marcadas com as propriedades page-spread-left ou page-spread-right. Cada página esquerda deve ter uma página direita associada e vice-versa. É possível centralizar páginas individuais no dispositivo em modo paisagem usando a propriedade page-spread-center.

   

   No modo retrato, as duas páginas serão renderizadas separadamente:

   

   Se nenhuma das propriedades for especificada ou se uma página for marcada como page-spread-left sem uma correspondente page-spread-right (ou vice-versa), o Kindle assume page-spread-center e centraliza a página sem nenhuma propriedade page-spread quando o dispositivo estiver no modo paisagem.

   O exemplo a seguir presume que primary-writing-mode é igual a horizontal-lr ou vertical-lr.

   Exemplo:

   <spine> <itemref idref="page1" /> <!--OBSERVAÇÃO: considerados como propriedades="page-spread-center" --> <itemref idref="page2" /> <!-- OBSERVAÇÃO: considerados como propriedades="page-spread-center" --> <itemref idref="page3" properties="page-spread-left"/> <!-- OBSERVAÇÃO: visão esquerda da página dupla sintética --> <itemref idref="page4" properties="page-spread-right"/> <!-- OBSERVAÇÃO: visão direita da página dupla sintética --> </spine>

   O exemplo a seguir presume que primary-writing-mode é igual a horizontal-rl ou vertical-rl.

   Exemplo:

   <spine> <itemref idref="page1" /> <!-- OBSERVAÇÃO: considerados como propriedades="facing-page-right" --> <itemref idref="page2" /> <!-- OBSERVAÇÃO: considerados como propriedades="facing-page-left" --> <itemref idref="page3" properties="page-spread-right"/> <!-- OBSERVAÇÃO: visão direita da página dupla sintética --> <itemref idref="page4" properties="page-spread-left"/> <!-- OBSERVAÇÃO: visão esquerda da página dupla sintética --> </spine>

   Em casos nos quais uma página esquerda não tenha uma equivalente direita (ou vice-versa), a editora deve inserir uma página HTML em branco e adicionar a propriedade layout-blank a essa página, exceto se for a última página do livro. Opcionalmente, a página em branco pode incluir o título do livro e uma marca d’água.

   Páginas com a propriedade layout-blank são renderizadas no modo paisagem e são ignoradas no modo retrato.

   Em alguns casos, a editora pode querer inserir uma página em branco que sempre renderize nos modos retrato e paisagem. Nesse caso, não utilize a propriedade layout-blank. Use as mesmas regras de distribuição sintética citadas acima e referencie um arquivo de imagem que contenha um JPEG "em branco".

   O exemplo a seguir presume que primary-writing-mode é igual a horizontal-lr ou vertical-lr.

   Exemplo:

   <spine> <itemref idref="page1" /> <!-- OBSERVAÇÃO: considerados como propriedades="page-spread-left" --> <itemref idref="blank-page" properties="layout-blank"/> <!-- OBSERVAÇÃO: considerados como propriedades="page-spread-right". Ignorado em modo retrato. --> <itemref idref="page2" properties="page-spread-left"/> <!-- OBSERVAÇÃO: visão esquerda da página dupla sintética --> <itemref idref="page3" properties="page-spread-right"/> <!--OBSERVAÇÃO: visão direita da página dupla sintética --> </spine>

   
   

   ---

   Otimização de conteúdo para a experiência de leitura em romances gráficos

   Otimização em áreas de ativação do pop-up

   As áreas de ativação do pop-up devem cobrir efetivamente 100% da tela. Isto garante que o usuário tenha uma experiência ampliada sempre que ele toque duas vezes no romance gráfico.

   
   

   Otimização de painéis de exibição

   Os painéis de visualização devem ter 150% do tamanho da área de ativação do pop-up, por padrão. É aceitável o uso de um tamanho diferente em um painel de visualização para enfatizar uma cena de ação específica dentro da área de ativação do pop-up.

   Posicione os painéis de visualização para que eles cubram a imagem correspondente no plano de fundo. Eles devem ser posicionados sobre painéis básicos e alinhados às margens onde for possível.

   Ao preservar o contexto entre múltiplos painéis, uma leve sobreposição com outros painéis de visualização é aceitável.

   

   Para usar o fator de zoom padrão de 150%, uma cena de ação normalmente precisa ser dividida em dois painéis de visualização (normalmente esquerda e direita ou parte superior e inferior). Essa é uma melhor experiência de usuário do que o uso de um fator de zoom menor, uma vez que preserva a acessibilidade e oferece ao usuário uma experiência de leitura com maior resolução.

   Divida as áreas de ativação do pop-up de modo que a primeira delas esteja entre 50 e 75% da largura da área inteira, e que a segunda esteja na quantidade restante necessária para se alcançar 100%. Isso garante que, quando um usuário tocar duas vezes em uma área próxima ao meio do painel de ação, ele visualize o primeiro painel de visualização antes do segundo ao prosseguir.

   Para preservar o fluxo da ação, os painéis de visualização devem exibir uma pequena quantidade de ação sobreposta.

   Primeiro painel de visualização de uma cena de ação dividida em dois painéis

   Segundo painel de visualização de uma cena de ação dividida em dois painéis

   
   

   ---

   Diretrizes para texto

   Para livros com layout fixo com pop-ups de imagem: As imagens devem ter pelo menos 300 ppi e o texto deve estar nítido e legível, sem pixelamento ou borrões, e as letras maiúsculas devem ter pelo menos 2 mm de altura em pop-ups quando visualizadas em um dispositivo de 7". Como prática recomendada, isso geralmente significa uma ampliação de 150% ou mais.

   Para layout fixo com painéis virtuais: As imagens devem ter pelo menos 300 ppi e o texto deve estar nítido e legível, sem pixelamento ou desfoque quando ampliado para 2 mm de altura quando visualizado em um dispositivo de 7".

   Para exibir grandes quantidades de texto, a Amazon sugere um tratamento híbrido que misture a experiência de romances gráficos com a de livros infantis. A Amazon recomenda limitar o uso de tratamento híbrido de texto a seções onde o texto é muito amplo para ser ampliado de forma eficiente. O tratamento híbrido de texto deve imitar a formatação do texto que representa em fatores como altura de linha, itálico e/ou negrito e aparência geral. Isso propicia uma melhor experiência de usuário.

   Para que seu conteúdo continue funcionando no futuro, a Amazon recomenda o uso de pixels para tamanho do texto e posicionamento de blocos de texto. A especificação do tamanho de fonte ou da posição do texto em porcentagens pode resultar em frações de pixels que podem ser interpretadas diferentemente nos dispositivos.

   A configuração de fonte não aceita romances gráficos com texto híbrido.

   

   Exemplo de texto em HTML híbrido:

   <div id="Title_page-2-magTargetParent" class="target-mag-parent"> <div class="target-mag-lb"></div> <div id="Title_page-2-magTarget" class="target-mag" amzn-ke-id-rtbar="amzn-ke-idrtbar"> <div class="target-mag-text" id="amzn-ke-id-rtbar-Title_page-2-magTarget"> <span id="amzn-ke-id-rtbar-Title_page-2-magTarget-2"></span> <span class="" id="amzn-ke-id-rtbar-Title_page-2-magTarget-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ab aquiline regem. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui official deserunt mollit anim id est laborum.</span>

   Exemplo de texto híbrido em CSS:

   div.target-mag div.text{ height: 100%; padding: 5px; background-color: #000000; font-size: 150%; font-family: "Arial"; }

   
   

   ---

   Visualização guiada

   Visualização guiada é uma série de melhorias feitas na experiência de leitura de eBooks de quadrinhos que agora estão disponíveis para alguns quadrinhos Kindle. Essas melhorias permitem que os leitores vejam um quadrinho de uma maneira adequada de painel por painel para dispositivos móveis de uma forma que imita o movimento natural do olho do usuário pelo quadrinho. A Visualização guiada anima o movimento de painel para painel com cada passada fornecendo uma indicação clara de como a história avança em cada página. As funções da Visualização guiada incluem:

   • Uma experiência de leitura guiada de painel por painel, conforme a ordem definida pelo autor
   • Painéis ampliados para o tamanho de tela cheia e centralizados
   • Cores de mascaramento personalizadas ao redor de cada painel quando ampliado

   
   

   A Visualização guiada é aplicada automaticamente aos quadrinhos Kindle compatíveis e usa o código de Visualização de painel existente para posicionar os painéis corretamente na Visualização guiada. A Amazon trabalha continuamente para tornar a Visualização guiada compatível com mais livros e habilitará as melhorias dessa função automaticamente para seu livro em quadrinhos Kindle assim que possível.