Certos livros contêm elementos com dimensões e posicionamento de texto fixos que não permitem que fontes sejam redimensionadas ou que o texto seja digitalmente otimizado. Por exemplo, livros de luxo e livros infantis ilustrados contêm imagens de página inteira com texto ajustado precisamente em relação à arte de fundo, embora esse formato não seja exclusivo a esses tipos de livros.

Livros com layout fixo não são compatíveis com texto digitalmente otimizado e só devem ser usados quando todo o livro for adequado para um formato de layout fixo. Os livros não podem ser digitalmente otimizados ou ter um layout parcialmente fixo. Veja mais detalhes sobre como criar esse tipo de eBook com o Kindle Kid’s Book Creator.

Esse formato atualmente não é compatível com a configuração de fonte.

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 a imagem de capa
• Diretrizes para texto
• Requisitos de conteúdo
• Diretrizes para HTML e CSS
• Criação de livros de layout fixo com pop-ups de texto e texto e imagens de fundo em várias páginas

---

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 não deverá ser aplicada a nenhum outro formato, como livros com layout fixo contendo pop-ups de imagem ou painéis virtuais.

Metadados	Descrição
O layout pode ser especificado usando um dos seguintes campos de metadados: property="rendition:layout">pré-paginado</meta> 2) <meta name="fixed-layout" content="true"/>	Obrigatório. Identifica o livro como sendo de layout fixo. Os valores válidos para metadados de rendition:layout são reflowable ou pre-paginated. O valor padrão é reflowable. Os valores válidos para metadados de fixed-layout são true ou false. O valor padrão é false.
<meta name="original-resolution" content="1024x600"/>	Obrigatório. Identifica a resolução original do design do conteúdo ("1024x600" é apenas um exemplo). As dimensões de pixels podem ter qualquer valor inteiro positivo. Estes valores devem ser proporcionais à proporção de tela geral do conteúdo original.
A orientação pode ser especificada usando um dos seguintes campos de metadados: 1) <meta property="rendition:orientation">paisagem</meta> 2) <meta name="orientation-lock" content="landscape"/> Observação: não é compatível no momento com iOS.	Opcional (mas recomendado). Os valores válidos para metadados de rendition:layout são retrato, paisagem ou automático. Trava a orientação do livro para ou retrato, ou paisagem. Caso o valor seja auto, há suporte para ambos os modos paisagem e retrato. O valor padrão é auto. Os valores válidos para metadados de orientation-lock são portrait, landscape ou none. Bloqueiam a orientação do livro para retrato ou paisagem. Caso o valor seja none, há suporte para ambos os modos paisagem e retrato. O valor padrão é none.
<meta name="primary-writing-mode" content="horizontal-rl"/>	Opcional. Define a ordem de renderização das páginas, modo de leitura e navegação do leitor eletrônico (incluindo Pop-ups de texto Kindle, Visualização em painéis Kindle e Painéis virtuais Kindle). Os valores válidos são horizontal-lr, horizontal-rl, vertical-lr e verticalrl. O comportamento padrão acontece quando a direção de progressão horizontal-lr da página é da esquerda para a direita ou não especificada. Use o valor horizontal-rl para definir a direção de progressão da página da direita para a esquerda. Use o valor vertical-rl para definir uma direção de progressão de página da direita para esquerda em livros chineses, japoneses e coreanos.
<meta name="book-type" content="children"/>	Opcional para livros de literatura infantil. Remove funcionalidades do leitor eletrônico (por exemplo, compartilhamento), que podem ser irrelevantes para certos livros, como eBooks infantis. Os valores válidos são children ou comic.

---

Diretrizes para a imagem de capa

Embora os livros Kindle em formato digitalmente otimizado não usem contracapas, elas proporcionam a sensação de encerramento da narrativa quando se trata de conteúdo infantil. É melhor incluir a contracapa como parte do design de livros infantis (livros não infantis que utilizam esse formato não precisam de contracapa). Remova códigos de barras, preços sugeridos e conteúdo promocional da imagem da contracapa. Pop-ups de texto são necessários e recomendados para o texto da história na contracapa, mas não são necessários para outro texto de contracapa.

---

Diretrizes para texto

Livros de layout fixo não permitem que os usuários escolham e variem fontes. Usar @font-face do CSS e empacotar fontes com o título garante que o livro tenha o mesmo estilo de design em todas as telas e dispositivos. Isso não só garante que as fontes exatas usadas no original sejam utilizadas no livro em layout fixo, mas também que o texto em HTML tenha uma renderização mais fluída entre a visualização de página normal e a visualização com ampliação de região.

Exemplo:

@font-face { font-family: "Arial"; /* denota o nome da fonte a ser utilizada */ src: url(../fonts/arial.otf); /* inclui o arquivo da fonte correta */ }

Dica de acessibilidade: Fontes finas são mais difíceis de ler e podem afetar o contraste percebido do texto com o plano de fundo. A Amazon recomenda evitar fontes finas para o corpo do texto do seu manuscrito.

---

Requisitos de conteúdo

Requisito nº 1: use a estrutura de arquivo HTML

O conteúdo de layout fixo deve ter um único arquivo HTML para cada página representada em um dispositivo Kindle. Isso pode ser obtido usando uma imagem no arquivo HTML ou usando o arquivo HTML para unificar duas imagens a serem visualizadas como uma única página quando o orientation-lock for definido como Paisagem.

Travar a orientação para modo de retrato:

página impressa = 1 arquivo HTML

Exemplo:

Travar a orientação para o modo de paisagem:

2 páginas impressas (1 página dupla) = 1 arquivo HTML

Exemplo:

Requisito nº 2: uso de ampliação de região (pop-ups)

Conteúdo de layout fixo não permite que o usuário altere o tamanho da fonte pois isso pode ofuscar conteúdo relevante à narrativa. O Kindle usa ampliação de região (pop-ups) para ampliar o texto de layout fixo sem alterar o layout original. Para ver um exemplo de Ampliação de região, veja a imagem perto do final desta seção.

O usuário ativa a ampliação de região dando dois cliques na "área ativa" em dispositivos sensíveis ao toque (touch screen). (Em dispositivos não sensíveis ao toque, clicar a seta para cima no botão de navegação seleciona a região e clicar o botão central ativa o Pop-up de texto Kindle ou a Visualização em painéis Kindle). Durante a ampliação de região, a área ativa (elemento fonte) é oculta e a área de ampliação (elemento alvo) é exibida. Quando um eBook é configurado para que a ampliação de região funcione, o KindleGen detecta automaticamente o código de ampliação de região e define o valor para metadados de ampliação de região no arquivo OPF como "true".

Para que a ampliação de região dê certo, os seguintes passos são necessários:

1. Defina a área ativa criando um elemento de âncora (<a>)bem definido no HTML ao redor do texto que será ampliado. A âncora 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 específica da área de ampliação (posição e tamanho de fonte são definidos no arquivo CSS)
   2. "sourceId":"<string:elementId>" = element ID específica da fonte que será ampliada
   3. "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). Isso é necessário para todo texto que use ampliação de região.
2. Quando a ampliação for ativada, o texto fonte não será mais exibido. Crie um elemento alvo <div> que esteja alinhado para cobrir completamente o texto sendo ampliado, além de posicionado para minimizar a cobertura da arte de fundo da página. Isto garante que, quando um usuário ativa a ampliação de região, o texto fonte não desapareça da visualização de página. Também é importante não posicionar um pop-up diretamente adjacente às bordas direita ou inferior da tela. As diferenças entre os tipos de dispositivos podem fazer o conteúdo "transbordar" se os pop-ups estiverem muito próximos a estas bordas. Confira o conteúdo no máximo de dispositivos possíveis antes da publicação.
3. O tamanho da fonte do texto na ampliação de região <div> deve ser definido para 150% do tamanho de fonte regular da página. Há várias exceções para isso:
   • Uma exceção é quando o texto na página é tão grande que, ao aumentá-lo para 150%, acaba ficando mais difícil de ler. A ampliação de região não é necessária para texto com uma altura de pelo menos 4 mm em conteúdo infantil ou uma altura de pelo menos 2 mm em conteúdo não infantil em um dispositivo de 7".
   • Outra exceção é quando o texto na página é tão pequeno que precise ser aumentado em mais de 150% para melhorar a leitura na ampliação de região <div>. Por exemplo, caso o tamanho da fonte no texto na página seja 45%, o tamanho de fonte no texto na ampliação de região <div> pode ter de ser ampliado para 225% para tornar-se legível.

Amostra de página com layout fixo

Mesma página de amostra com ampliação de região ativada

Exemplo:

<div id="fs3-1-org" class="txt fs3-txt1"> <a class="app-amzn-magnify" data-app-amzn-magnify='{"targetId":"fs3-txt1-magTarget", "sourceId":"fs3-1-txt", "ordinal":2}'> <p id="fs3-1-txt">Lorem Ipsum dolor sit amet.</p></a></div> … <div id="fs3-txt1-magTarget" class="target-mag fs3-txt1"></div>

---

Diretrizes para HTML e CSS

Aplicação de reset de CSS

Aplique um reset de CSS em livros com layout fixo. Um reset de CSS remove os estilos inconsistentes que navegadores aplicam automaticamente a tamanhos de fonte, margens, etc. Adicionar um reset de CSS, como um reset YUI, remove essas inconsistências, permitindo a designers desenvolver seus trabalhos em um template de estilo confiável.

Arquivos CSS para livros com layout fixo

Para melhorar o desempenho da virada de página em livros com layout fixo, os arquivos CSS podem ser divididos; dessa forma, cada grupo de páginas HTML terá seu próprio arquivo CSS. Arquivos CSS devem conter apenas as informações que estão diretamente referenciadas pelos arquivos HTML associados.

Otimização do conteúdo para tela cheia

Livros Kindle são lidos em vários dispositivos (por exemplo, tablets e smartphones Fire e smartphones e tablets de outros fabricantes) e em várias dimensões de telas. O Kindle Fire HD 8,9” de 2013 tem uma resolução de 1920 x 1200 pixels. Crie o conteúdo para manter essa proporção de tela, se possível.

Para uma melhor experiência de usuário, a Amazon recomenda aos autores e editoras desenvolverem conteúdo de layout fixo que utilize completamente o espaço disponível nas dimensões de tela. Se o conteúdo tiver uma proporção de tela ou tamanho diferente, os dispositivos e aplicativos Kindle exibirão o conteúdo ajustado à tela, centralizado e envolto por uma margem branca.

Conteúdo de layout fixo e outros com muitas imagens apresentam maior probabilidade de serem ampliados pois clientes preferem ler com a visualização em painéis Kindle ou em dispositivos de tela grande. O recomendável é usar as imagens de maior resolução possível. A Amazon recomenda o envio de imagens dimensionadas compatíveis com ampliação de 100% (ou seja, a imagem ficar 2x maior) com qualidade. Por exemplo: caso planeje para o Kindle Fire HD 8.9'' de 2013, as dimensões da imagem em pixels deve ser de, no mínimo, 3840 x 2400 (isto corresponde à proporção de tela e ofereceria suporte para zoom duplo). Sempre use o Kindle Previewer para validar a qualidade do conteúdo.

Uso de grandes alvos de toque de ampliação de região em livros com layout fixo e pop-ups de texto

O objetivo principal da ampliação de região é auxiliar a acessibilidade. Ele é mais eficaz quando a área de ativação do pop-up é maior que a área que está sendo ampliada. Para ativar uma área maior, considere adicionar um extra de 20 a 40 pixels nos elementos de âncora app-amzn-magnify, mas não permita que os alvos se sobreponham.

Uso de position:absolute para texto na imagem

Para um texto em uma imagem que deve ser posicionado de forma precisa, use o atributo position:absolute. Use este atributo somente para livros que devem ter um layout fixo, tais como livros infantis ilustrados com texto especificamente posicionado em relação aos elementos de imagem de fundo.

Conteúdo de layout fixo pronto para o futuro com pop-ups de texto

Por definição, o layout fixo é criado para um único tamanho de tela. 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.

---

Criação de livros de layout fixo com pop-ups de texto e texto e imagens de fundo em várias páginas

Esta seção explica a maneira correta de criar páginas que contenham imagem e texto de fundo únicos. Embora existam muitas soluções potenciais, o objetivo da Amazon é assegurar que a marcação seja facilmente portátil com o mínimo esforço. O modelo fornecido atende a este objetivo atualizando as regras CSS sem alterar o HTML.

Usar imagens lado a lado quando o orientation-lock for definido como Paisagem

Muitos livros têm uma página dupla sintética em modo paisagem que consiste em uma única imagem. Outros livros têm uma página dupla sintética em modo paisagem que consiste em duas imagens unificadas lado a lado.

No exemplo abaixo, a exibição em modo paisagem é de 1024 x 600 pixels, que é a resolução em tela cheia para o Kindle Fire (1ª geração). As imagens para cada página devem ter dimensões exatamente com metade da largura da tela: 512 x 600 pixels. As partes originais de cada elemento são marcadas com IDs de CSS; as partes comuns usam classes CSS. A imagem à esquerda é exibida à esquerda da página dupla. A imagem à direita é deslocada para a direita ao se definir um estilo margin-left à largura da imagem do lado esquerdo.

O resultado são duas páginas unificadas para criar uma única imagem a ser visualizada no modo paisagem. Isso difere de uma página dupla sintética, em que uma página é visível no modo retrato, e duas páginas lado a lado são visíveis no modo paisagem; essa combinação é exclusiva para livros do tipo quadrinhos.

HTML:

<div class="fs"> <div id="fs9-img" class="lPage"></div> <div id="fs10-img" class="rPage"></div> </div>

CSS:

/* Região com tamanho para as duas páginas */ #fs9-img { background-image: url("../images/005a.jpg"); background-size:100% 100%; } #fs10-img { background-image: url("../images/005b.jpg"); background-size:100% 100%; } div.fs { height: 600px; width: 1024px; /* 2 x largura da página */ position: relative; } div.lPage { position: absolute; background-repeat: no-repeat; height: 600px; width: 512px; /* 1 x largura da tela */ } div.rPage { position: absolute; background-repeat: no-repeat; height: 600px; width: 512px; /* 1 x largura da tela / margin-left: 512px; /* este valor é igual ao valor da largura de imagem esquerda */ }

Posicionamento de blocos de texto

Especifique a posição adequada e o tamanho da fonte usando porcentagens. Isto permite que a posição seja consistentemente escalável em diferentes resoluções, garantindo compatibilidade com uma grande gama de dispositivos e telas. Cada parágrafo deve ser agrupado em um único elemento <div>, com diferentes linhas quebradas por elementos <br/>. Se for necessário espaçamento personalizado entre linhas, defina-o através de declarações de estilo CSS ao invés de adicionar marcações extra como vários <div> ou tags extras de quebra de linha.

Veja um exemplo que complementa o exemplo da imagem de duas páginas e ilustra como posicionar o texto por cima de uma imagem de fundo: o texto é posicionado dentro de um bloco de distribuição fixo, usa as porcentagens para o atributo de margem e é alinhado e espaçado via CSS. Pop-ups de texto devem ser posicionados de forma que cubram o texto correspondente no segundo plano.

Alinhamento de texto

Como padrão, o texto é alinhado no canto superior esquerdo do elemento HTML. Muitos livros podem ter o texto alinhado à direita, na parte inferior ou justificado. A maneira mais fácil de identificar o alinhamento é imaginar uma moldura ao redor do texto e identificar quais bordas do parágrafo estão associadas à uma margem (superior, esquerda, direita, inferior).

Nunca use entidades de caracteres de espaço rígido (&nbsp;) para alinhamento do texto. Ao invés disso, use os atributos superior, direita, inferior e esquerda de CSS para posicionar elementos <div> que contenham texto posicionado de forma absoluta. Use dois lados adjacentes para posicionar cada elemento <div>. Por exemplo, superior e esquerda, mas nunca superior, esquerda e inferior. text-indent e line-height de CSS são úteis para alinhar texto dentro de elementos de bloco HTML.