Indesign e ePub. Listas no e-book.

Publicamos mais um post de Felipe Santos que nos dá algumas dicas de como produzir um ePub a partir do Indesign. Coisa para profissionais!

Felipe Santos é Designer e Produtor Gráfico com mais de 20 anos de experiência nas áreas de pré-impressão, editoração e tratamento de imagens. É Adobe Certified Expert em Photoshop CS4 e InDesign CS4. Ministra cursos sobre aplicativos Adobe no Rio de Janeiro e escreve artigos sobre os recursos do InDesign e Photoshop no site www.infoprepress.ppg.br

Um dos parâmetros encontrados no painel de exportação para EPUB, do InDesign, refere-se a configuração das Listas – numéricas ou com marcadores (bullets).

O InDesign oferece algumas opções de conversão para esse item e conforme o tipo de trabalho e formatação do eBook uma delas poderá se adequar ao seu trabalho .

Acima está a pagina que usei como referência. Tenho comentado com frequencia nos cursos que ministro sobre eBooks, que devemos desassociar o “layout impresso” do “layout para eBook” e cada vez mais pensar no eBook como um “produto” independente.

Claro que é importante – e muito bem vindo – criar uma mesma identidade entre a versão impressa e digital de um livro. É nessa hora que o designer mostra seu valor, através da utilização de elementos comuns nas duas mídias: vinhetas; traços; boxes; imagens, entre outros.

Parâmetros como tipo de fontes, alinhamento, tamanho dos corpos e disposição dos elementos não asseguram essa “identidade”. Mesmo as cores – um forte elemento de design – tem sua atuação limitada devido a maioria dos eReaders possuírem tela em tons de cinza.

A seguir comento o resultado do uso de listas em eBooks, com as opções disponíveis pelo InDesign e posterior edição do CSS.

Atento que cada tipo de lista possui seu próprio estilo de parágrafo no InDesign, bem como um estilo de caracter para formatar o Bullet ou Número. Em todas as exportações trabalhei com a opção de Include Embeddable Fonts habilidata.

Observação: Estilos de caractere aplicados de forma “aninhada”, ou seja, via outro comando, como: Nested Styles; Capitulares; Listas, entre outros não são reconhecidos pela exportação do ID para EPUB.

1 – Conversão da lista em texto pelo InDesign

Esta opção é indicada para quem deseja manter certa “fidelidade” entre InDesign e eBook, mas perdendo em flexibilidade de edição no InDesign.

Quando a opção Convert Bullets and Numbering to Text é escolhida no menu Type > Bulleted and Numered List é mantida toda a formatação para o EPUB – devido a aplicação dos estilos de caractere e parágrafo. Contudo o recuo das listas com mais de uma linha é perdido, pois não são tratadas mais como listas.

Convertendo a lista para texto todas as opções de exportação do InDesign geram o mesmo resultado.

No xhtml a formatação é aplicada de forma individual, veja:

<p class=”lista”><span class=”bullet”>»</span> conseguir a atenção</p>

<p class=”lista” ><span class=”bullet”>»</span> estabelecer rapport</p>

Trabalhei com dois estilos do InDesign: parágrafo “lista” e caracter “bullet”

2 – Conversão da lista em texto na exportação

Escolhendo esta opção os estilos dos marcadores (caracteres) são desconsiderados na exportação. Sendo preservado apenas os estilos de parágrafo. O recuo das listas numéricas aparece um pouco irregular, contudo o tipo de marcador (Glyphs – caractere especial) utilizado n

a lista é mantido no eBook.

No xhtml o texto e o marcador são tratados como um único conjunto, ambos na mesma class do estilo de parágrafo, mantendo a tipografia definida. Desta forma a aparência do texto se mantém uniforme com os demais textos do documento

<p class=”lista”>» conclusão e teste futuro</p>

<p class=”lista-numero”>1. é bom saber que esta é uma maneira didática e sistemática de explicar como uma venda ocorre, mas tem exceções.</p>

3 – Bullets: Map to Unordered List | Numbers: Map to Ordered List

Ao escolher esta opção o InDesign converte literalmente a lista do InDesign para uma lista em xhtml, incluindo as tags correspondentes para cada tipo de lista: <ul> – lista não ordenada; <ol> – lista ordenada.

Veja o resultado do xhtml desta exportação. São utilizados valores padrões para o recuo, tipo de marcador e espaçamento entre parágrafos.

<ul>

<li class=”lista”>conseguir a atenção</li>

<li class=”lista”>estabelecer rapport</li>

</ul>

<ol>

<li class=”lista-numero”>é bom saber que esta é uma maneira didática e sistemática de explicar como uma venda ocorre, mas tem exceções.</li>

<li class=”lista-numero”>um exemplo é quando chega um cliente e pede um produto específico , não pergunta preço e ainda diz que vai levar três unidades. tudo que você deve fazer neste caso é anotar o pedido, tentar vender algo diferente só no caso de não estar mais trabalhando com o produto solicitado.</li>

<ol>

Notem, na imagem acima, que a tipografia da lista mudou em relação aos demais textos da página. Conforme comentei no inicio do texto, usei o recurso de fonte embutida no eBook, neste caso a fonte não serifada Myriad Pro.

Apesar de marcar na tag do xhtml – <li>, o estilo de parágrafo aplicado no InDesign – lista e lista-numero, não vemos a formatação aplicada.

A resposta está no CSS. O InDesign cria class específicas para estilos de parágrafo, caractere e objeto, também.

A declaração abaixo aplica o estilo lista apenas em textos dentro das tags <p> e não dentro de tags <li>

p.lista {

font-family: “Myriad Pro”;

font-weight: normal;

font-style: normal;

font-size: 1.17em;

line-height: 1.20em;

text-decoration: none;

font-variant: normal;

text-indent: -0.61em;

text-align: left;

color: #000000;

margin: 0em 0em 0.40em 0.61em;

No tópico 5 mostro alguns exemplos de formatação de listas com CSS

4 – Bullets: Map to Unordered List | Numbers: Map to Static Ordered List

Na pratica a escolha de Map to Static Ordered List, na opção Numbers gera os mesmos resultados visuais que o item anterior analisado. Considere as mesmas observações.

5 – Edição via CSS

Para aqueles que já se aventuram na formatação CSS, acredito que a opção de exportação Bullets: Map to Unordered List | Numbers: Map to Ordered List seja a mais indicada, visto que já aplica as tags necessárias para formatação da lista via CSS.

A seguir compartilho o CSS da formatação acima. Via código as opções são variadas, como controle de posicionamento, espaços, linhas, fundos, entre outros

ul {

width:40%;

margin:20px;

list-style-position: outside;

list-style-image: none;

list-style-type: disc;

}

ul li {

border-top-width: thin;

border-bottom-width: thin;

border-bottom-style: solid;

border-bottom-color: #000;

padding-top: 0.2em;

padding-bottom: 0.2em;

}

ol {

width:40%;

margin:1em;

list-style-position: outside;

list-style-image: none;

list-style-type: decimal;

}

ol li {

color:#000;

padding-top: 0.2em;

padding-bottom: 0.2em;

background-color: #CCC;

padding: 0.3em;

border-bottom-width: 5px;

border-bottom-style: solid;

border-bottom-color: #FFF;

}

Abaixo o preview do eBook no ADE e no iPad, com as alterações no CSS.