Como criar ePubs – Parte 1 (Notas de rodapé)

Neste post irei ensinar a criar e-books no formato ePub, bem como notas de rodapé.

Quais são as características do formato ePub?

Software livre e de código aberto
Conteúdo fluído ou fixo
Conteúdo HTML (XHTML em EPUB 3)
Permite o uso de imagens raster (JPG, PNG) ou vetorial (SVG)
Metadados incorporados
Estilos CSS

Existem vários leitores de formato ePub para tablets e smartphone, além de PC é claro. No Android os melhores leitores para ePub são o Google Play Livros e o Moon Reader.

Mas e como criar o nosso próprio ePub? Novamente existem diversos programas para isso, mas de longe o melhor atualmente é o Sigil. Além de ser gratuito, é intuitivo e muito completo.

Baixe e instale o Sigil.

Abra o programa e irá se deparar com a sua interface, conforme exibida abaixo:

1 – Visualização em formato rico de texto
2 – Visualização do código fonte
3 – Inserir imagem
4 – Inserir caratere especial
5 – Inserir ID
6 – Inserir link

A interface gráfica é bem intuitiva e você conseguirá fazer seus documentos como se estivesse mexendo no Word.

Mas existe um truquezinho para colocar notas de rodapé. Elas ficam escondidas do texto normal e aparecem em uma caixa quando clicadas. Você terá que mexer no código fonte.

Primeiro de tudo entre no modo código clicando no botão 2 do nosso esquema.

Substitua isso:

<html xmlns="http://www.w3.org/1999/xhtml">

Por isso:

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="pt" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:xml="http://www.w3.org/XML/1998/namespace">

Vamos colocar um texto e no final dele uma frase dizendo: “Clique aqui para ver a nota.”, e lá embaixo escrevemos o conteúdo da nossa nota de rodapé. Na nossa nota escrevemos o que será o link de volta para o texto, dizendo: “^ Voltar para o texto”.

Vamos selecionar a frase “Clique aqui para ver a nota” e clicando no botão 5 do nosso esquema, colocar nela o id referencia1.

Agora selecione a frase “^ Voltar para o texto” e clique no botão numero 6 do nosso esquema, para inserir o link. Selecione o link #referencia1.

Agora vamos entrar no modo de código. Clique no botão 2 do nosso esquema.

Agora deixe a nota assim: Envolvida em um div dentro de um aside, ambos com epub:type=”footnote” e o div com o id=”nota1″. O código ficará assim:

<aside epub:type="footnote">
  <div epub:type="footnote" id="nota1">
    <p><a href="#referencia1">^ Voltar para o texto</a> Imagine aqui uma linda nota de rodapé!</p>
    <p>Bla bla bla bla bla bla bla bla bla bla bla</p>
  </div>
</aside>

Aproveitando o modo código, edite o link para a nota adicionando esse código: epub:type=”noteref”

O link ficará assim:

<a href="#nota1" epub:type="noteref" id="referencia1">Clique aqui para ver a nota</a>

Por último, selecione a frase “Clique aqui para ver a nota” e coloque o link para a âncora nota1 clicando no botão 6 do esquema e selecionando a mesma.