sábado, 5 de maio de 2012

Oficina do eBook: Notas de Rodapé

Aumentar Letra Diminuir Letra


Hoje vamos analisar como fazer as notas de rodapé.
Primeiramente é preciso ter em mente que as notas em um livro digital não é exatamente uma nota de rodapé, pois não fica no fim de uma página. As notas devem estar em um arquivo separado ou ao fim do arquivo html.
Na verdade em um livro de vários capítulos, recomendo organizar todas as notas em um arquivo xhtml final, criando sessões que indiquem a qual capítulo aquela nota faz referência.

Existem duas tags que devem ser observada na criação das notas a primeira é a <sup> que cria aquele númerozinho ou estrofe sobre a palavra como no exemplo:

Texto da nota<sup>1</sup>
Texto da nota1

Depois temos as âncoras que são as tags que usam a seguinte extrutura:
<a>área em que a âncora age</a>
As âncoras permitem adicionar alguns recursos interessantes como a indicação de um link pelo comando href e permite ser identificada por uma id.
Então nossa sintaxe final ficaria assim:
Texto da nota<a href="notas.xhtml" id="texto-com-nota1"><sup>1</sup></a>
Ou seja no final quando clicarmos no 1 iremos para a nota.
Mas além disso devemos pensar em qual posição dentro do documento queremos ir pra isso usamos o id no comando href da seguinte maneira:
href="nota.xhtml#nota1"
Vejam que indicamos a página nota.xhtml e depois colocamos #nota1, esta segunda parte diz que o link deve apontar para a id com nome nota1.

Vejamos agora como fica o documento nota.xhtml

Aqui é interessante usarmos a tag div para cada nota então a sintaxe fica assim

<div id="nota1">
1. a nota referenciada <a href="texto1.xhtml#texto-com-nota1">(voltar)</a>
</div>

Veja que na div temos o id nota 1 o que indica que é no começo desta linha que o link da nota deve nos levar, em seguida temos a nota e uma outra âncora que faz o texto voltar, nos levar de volta para o texto que chamava a nota.

Por fim você ainda pode, de forma opcional adicionar dentro do arquivo .opf a seguinte linha:


<reference href="nota.xhtml" title="Notes" type="notes" />

Esta linha deve estar dentro da seção <guide>.

Um comentário:

  1. Muito obrigado, depois desse post eu consegui iniciar meu projeto, um livro de RPG em EPUB, e devo dizer que os resultados são promissores. Agradeço muitíssimo.

    ResponderExcluir