Oficina do eBook

Paulo Carvalho

Esse é um pequeno curso online, retirado do site Ebook Brasil, que ensina os princípios da

formatação de um epub. Muito prático para quem está se aventurando na criação de seus próprios

ebooks.

Os posts originais de encontram aqui: http://www.ebookbr.com/search/label/Oficina%20do

%20eBook

Ruriak

Hoje quero iniciar uma nova seção no blog, trata-se da Oficina do eBook um espaço onde irei discutir

a feitura e formatação dos livros digitais. Mais do que um espaço para relatar notícias eu pretendo

criar tutoriais que abordem os aspectos técnicos dos livros digitais.

A primeira coisa a levar em consideração em relação aos livros digitais é onde ele vai ser lido. Pois

assim como os browsers de internet cada aparelho interpreta os comandos à sua maneira.

Desta forma é preciso fazer uma decisão, você quer um livro cheio de recursos visuais incríveis ou

você quer um livro que abra vem em qualquer dispositivo.

Sim pois existem alguns ebooks que apesar de lindos e com um apuro visual arrojado não abrem em

qualquer lugar.

Não falo apenas dos leitores de e-ink que já são limitados pela tecnologia monocromática, mas até

mesmo de celulares.

Entretanto você pode optar em criar um material diferente que será lido apenas em computadores e

tablets, isso não é um problema se desde o princípio você sabe deste limite.

Agora do lado dos livros que pretendem ser universais, a simplicidade é a lei, isso não significa um

livro mal apresentado, mas um código simplificado que cumpra bem e de forma segura a sua função.

Bom é isso, hoje comecei devagar, semana que vem pretendo falar sobre os tipos mais populares de

livros digitais e a estrutura básica dos mesmos.

Me digam o que acham da ideia, se acham uma boa ou se eu deveria buscar um blog próprio para

tratar do assunto.

Formatos digitais

Continuando nossas discussões técnicas sobre os e-books, hoje eu quero, falar sobre os diferentes

formatos que estes podem apresentar:

TXT - Os primeiros livros digitalizados continham texto puro, a falta de formatação pode sim

prejudicar a leitura, mas é inegável a leveza e possibilidade de acesso deste formato, todos os

computadores tem algum aplicativo que consegue ler este tipo de arquivo.

PDF - Este é um formato de arquivo que permite uma ótima diagramação de livros, por este motivo é

muito usado pela indústria gráfica para a impressão de livros, entretanto este é um formato estático já

que não permite modificações por parte do leitor e isto torna o documento difícil de ler em telas

pequenas.

Kindle - AZW, Mobi e PRC são basicamente o mesmo formato, a diferença é que o AZW costuma

possuir DRM. O formato foi desenvolvido pela Mobipocket e posteriormente comprado pela Amazon,

A base do formato é HTML e CSS, assim como o ePub, mas diferente desse as opções de tags que

funcionam são limitadas.

ePub - Aqui temos o formato principal de livros digitais, este formato é aberto e serve de referência

para outros formatos como o KF8 e o Ibooks. A base do formato é o HTML e o CSS, e recentemente

foi lançado a versão 3.0 que permite entre outras coisa adicionar conteúdo multimídia.

O ePub nada mais é do que uma reunião de arquivos htmls junto a outros arquivos de configuração

comprimidos num formato ZIP ou RAR e nomeados como ePub.

Abaixo vamos observar um pouco mais a estrutura do epub:

Ao descompactarmos um epub encontraremos dentro dele o seguinte conteúdo:

arquivo mimetype

pasta META-INF

container.xml

pasta OEBPS

content.opf

toc.ncx

style.css

page-template.xpgt

arquivos.html

Mimetype:

O mimetype serve apenas para dizer ao sistema operacional que o arquivo em questão trata-se de

um livro digital. Ele é composto por um arquivo de texto em ASCII que contém o seguinte conteúdo:

application/epub+zip

Conteiner.xml

É o único arquivo dentro da pasta META-INF e sua função é basicamente indicar o conteúdo do

epub, isso é feito indicando o arquivo content.opf

<container version="1.0"

xmlns="urn:oasis:names:tc:opendocument:xmlns:container">

<rootfiles>

<rootfile full-path="OEBPS/content.opf" media-type="application/oebps-

package+xml">

</rootfile></rootfiles>

</container>

Content.opf

Aqui você tem uma lista de todos os arquivos do ebook como você podem observar no exemplo

abaixo:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

<package xmlns="http://www.idpf.org/2007/opf" unique-identifier="BookId"

version="2.0">

<metadata xmlns:dc="http://purl.org/dc/elements/1.1/"

xmlns:opf="http://www.idpf.org/2007/opf">

<dc:identifier id="BookId" opf:scheme="UUID">urn:uuid:a0fcccf7-f48c-4e49-

b60b-bf733db8b1e9</dc:identifier>

</metadata>

<manifest>

<item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml" />

<item href="Text/Section0001.xhtml" id="Section0001.xhtml" media-

type="application/xhtml+xml" />

</manifest>

<spine toc="ncx">

<itemref idref="Section0001.xhtml" />

</spine>

</package>

Se vocês observarem com cuidado perceberão que o arquivo possui três partes específicas o

Metadata o Manifest e o Spine.

Metadata - Aqui ficam os metadados do livro informações como autor, nome do livro, editora, isbn.

Os dados title, language e identifier são obrigatórios, abaixo uma amostra de metadados

preenchidos.

<metadata xmlns:opf="http://www.idpf.org/2007/opf"

xmlns:dc="http://purl.org/dc/elements/1.1/">

<dc:title>Nome do Livro</dc:title>

<dc:creator opf:role="aut" opf:file-as="Autor">Autor</dc:creator>

<dc:publisher>Editora</dc:publisher>

<dc:date opf:event="epub-publication">data de publicação</dc:date>

<dc:identifier id="EPB-UUID">Código de Identificação do

livro</dc:identifier>

<dc:language>pt-br</dc:language>

</metadata>

Manifest - aqui fica uma lista de todos os arquivos do livro com exceção do mimetype, container.xml

e content.opf, cada item precisa receber um ID, que é uma identificação única e interna do

documento.

Abaixo segue um exemplo desta parte:

<manifest>

<!-- Documentos -->

<item id="titulo" href="titulo.html" media-type="application/xhtml+xml" />

<item id="capitulo1" href="capitulo1.html"

media-type="application/xhtml+xml" />

<item id="capitulo2" href="capitulo2.html"

media-type="application/xhtml+xml" />

<!-- CSS Style Sheets -->

<item href="Styles/style.css" id="style.css" media-type="text/css" />

<!-- NCX -->

<item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml" />

<!-- Imagens-->

<item href="Images/A_Mao_e_a_Luva.jpg" id="A_Mao_e_a_Luva.jpg" media-

type="image/jpeg" />

</manifest>

Spine - Aqui temos a "Espinha dorsal do livro", aqui fica a listagem dos arquivos na ordem em que

devem aparecer no livro, eles devem ser chamados pelas ID,s referenciadas no Manifest.

<spine toc="ncx">

<itemref idref="titulo" />

<itemref idref="capitulo1" />

<itemref idref="capitulo2" />

</spine>

toc.ncx

Toc é uma abreviação de Table of Contents, ou seja é o sumário do livro, mas aqui cabem algumas

observações, você pode ter um sumário aplicado na página do livro e o arquivo NCX, a diferença é

que o arquivo ncx é usado pela maioria dos leitores quando você seleciona esta opção e ele ainda é

responsável por criar os navpoints que são os pontos de navegação entre os capítulos.

Já no epub 3 este arquivo já não é mais requerido já que ele usa a tag <nav> própria do html 5.

A estrutura do Toc é a seguinte:

->head

uid — o ID do content.opf

depth — níveis do sumário >= 1

totalPageCount — to 0

maxPageNumber — to 0

->navMap

O mapa do sumário

->navPoint

id — único do arquivo

playOrder —ordem de navegação (iniciando em 1)

Abaixo segue um exemplo:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE ncx

PUBLIC "-//NISO//DTD ncx 2005-1//EN" "http://www.daisy.org/z3986/2005/ncx-

2005-1.dtd">

<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1">

<head>

<meta name="dtb:uid" content="idtest"/>

<meta name="dtb:depth" content="3"/>

<meta name="dtb:totalPageCount" content="0"/>

<meta name="dtb:maxPageNumber" content="0"/>

</head>

<docTitle>

<text>Saga do primeiro ePub</text>

</docTitle>

<docAuthor>

<text>Dani</text>

</docAuthor>

<navMap>

<navPoint id="titulo" playOrder="1">

<navLabel>

<text>Titulo</text>

</navLabel>

<content src="titulo.html"/>

</navPoint>

<navPoint id="capitulo1" playOrder="2">

<navLabel>

<text>Capitulo 1</text>

</navLabel>

<content src="capitulo1.html"/>

</navPoint>

<navPoint id="capitulo2" playOrder="2">

<navLabel>

<text>Capitulo 2</text>

</navLabel>

<content src="capitulo2.html"/>

</navPoint>

</navMap>

</ncx>

Style.css

Os arquivos css são as folhas de estilo do livro, são arquivos responsáveis por parâmetros de

formatação tais como alinhamento, margem, etc.

Abaixo segue um exemplo.

body{margin-left:5%;margin-right:5%;margin-top:5%;margin-bottom:5%}

.nomargin{margin:0}

h1{text-indent:0;margin-left:0;font-size:200%;font-weight:bold;text-

align:center;margin-top:20%}

h2{text-indent:0;margin-left:0;font-size:130%;font-weight:bold;text-

align:center;margin-top:8%}

h3{text-indent:0;margin-left:0;font-size:110%;font-weight:bold;text-

align:center;margin-top:3%}

p{text-indent:3%;margin-left:0;margin-right:0; margin-top:0;margin-

bottom:2%;text-align:justify;}

.center{text-indent:o;text-align:center;margin-bottom:2%;}

.separado{text-indent:3%;margin-left:0;margin-right:0; margin-top:0;margin-

bottom:8%;text-align:justify;}

.pp{text-indent:3%;margin-left:0;margin-right:0; margin-top:10%;margin-

bottom:2%;text-align:justify;}

.ppc{text-indent:0;margin-left:0;margin-right:0; margin-top:10%;margin-

bottom:2%;text-align:center;}

.hc{text-indent:o;text-align:center;}

page-template.xpgt

Este arquivo não é uma parte essencial do documento, na verdade é um arquivo que serve apenas

ao Adobe Digital Edition e é responsável por organizar colunas e outros tipos de características da

exibição do livro no programa da Adobe, outros programas simplesmente ignoram este arquivo.

arquivos.html

Aqui ficam todos os arquivos de conteúdo do livros todos os capítulos, podem usar a extensão html

ou xhtml.

tem a seguinte estrutura básica.

<?xml version="1.0" encoding="utf-8" standalone="no"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

<head>

<title></title>

<style type="text/css">

/*<![CDATA[*/

p.sgc-2 {text-align: center;}

h1.sgc-1 {text-align: center;}

/*]]>*/

</style>

</head>

<body>

<h1 class="sgc-1">Título</h1>

<p class="sgc-2">&nbsp;texto do livro</p>

</body>

</html>

Como você pode observar o arquivo segue a forma básica de uma página html, a restrição fica nas

tags e estilos que você pode usar.

Fora estes arquivos você ainda poderá ter imagens e fontes associadas ao livro.

Além dos formatos citados ainda existem outros como o KF8 e Ibooks, que como já foi citado são

baseados em ePub 3, por fim você ainda pode achar algum formato proprietário de uma editora

específica, mas esses arquivos não são relevantes para o mercado como um todo.

Recomendo ainda a leitura deste post do blog tableless que foi uma das fontes para a criação deste

post.

HTML, XHTML e XML

A base dos livros digitais de hoje em dia é o XHTML, isto significa que precisamos entender pelo

menos os conceitos básicos desta linguagem para garantirmos livros com boa qualidade.

O XHTML nada mais é que um documento HTML que utiliza a organização XML.

XML é um padrão de construção de documentos que visa tornar mais fácil o entendimento do código

tanto para humanos como para os computadores.

Na prática isto significa que a página deve obedecer uma série de regras de organização por

exemplo:

As tags devem ser escritas apenas em caixa baixa e as tags são organizadas em níveis.

Desta forma se tivéssemos duas tags uma chamada endereço e outra chamada rua elas deveriam

aparecer da seguinte maneira:

<endereco><rua>Aqui fica o nome da sua rua</rua></endereco>

Observe que a tag rua é fechada antes da tag endereço, isto porque temos aí dois níveis

hierárquicos, logo rua está contido em endereço, observe também que não utilizei o ç pois não

devemos usar caracteres especiais em nossas tags XML's

No exemplo acima eu usei tags inventadas, porém elas poderiam ser parte de um banco de dados.

Mas acho melhor eu ir com mais calma não?

Afinal ainda nem expliquei o que são tags.

Tags são os comandos da linguagem html e xml, basicamente são comandos inseridos entre os

caracteres menor que < e maior que >

Toda tag em um documento XML, incluindo aí o XHTML deve ser fechada, em geral isso demonstra

qual a área de atuação do comando por exemplo:

<tag>Aqui o conteúdo entre as tag's sofre ação do comando,</tag>

Observe que a diferença entre a tag de fechamento e a de abertura é a barra / antes do nome do

comando, que no exemplo foi tag.

Entretanto em um documento XHTML algumas tag's são autocontidas como a tag <br /> que indica

quebra de linha, veja que após o comando "br" temos um espaço e então a barra de fechamento.

No nosso ebook as páginas de conteúdo do livro são feitas em XHTML já as páginas de estruturação

são arquivos XML.

Os comandos usados nestes arquivos seguem o padrão determinado pelo idpf, conforme

observamos no post anterior.

A estrutura básica de um documento XHTML começa com a declaração como esta:

<?xml version="1.0" encoding="utf-8" standalone="no"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Esta declaração é chamada de prólogo xml. A primeira linha nos mostra a versão do padrão xml

usado, a codificação do texto e o terceiro item diz se a página usa um DTD ou não.

Um DTD é ou DOCTYPE é a Definição de tipo de documento, ou seja é um documento externo que

determina quais comandos podem ser usados na página e quais os valores válidos para estes

comandos.

A segunda linha mostra onde está este DTD.

Ambas as declarações não fazem parte do documento em si por isso não precisam de fechamento.

O arquivo em si tem a seguinte estrutura:

<html>

<head>

<title> </title>

</head>

<body> </body>

</html>

A tag <html> informa ao sistema que se trata de um documento html, por isso ela envolve todo o

documento em todas as partes.

A tag <head> é o cabeçalho do documento, aqui são colocadas informações que servirão de base

para toda a página.

em nosso caso é comum encontrarmos declarações de estilos css.

a tag <title> que está dentro do cabeçalho informa o nome da página.

A tag <body> é o corpo do documento, é aqui que fica o conteúdo do nosso livro, esta tag permite

algumas configurações que podem ser declaradas como estilo css ou como regra html, em outro

momento veremos quais valores os livros digitais aceitam para esta e outras configurações.

Bom por hoje acho que já falei bastante, estes são apenas conceitos básicos de xhtml e xml, é

importante que o profissional de livros digitais dominem estes conceitos, pelo menos o suficiente para

entenderem a lógica de um documento XHTML.

Na semana que vem iremos estudar alguns conceitos básicos de CSS.

CSS

Continuando nosso estudo sobre a criação de e-books hoje vamos observar um pouco o CSS.

CSS significa "Cascading Style Sheet" ou em português "Folha de Estilo em Cascata" o que significa

basicamente um arquivo que define os estilos de formatação e configuração do conteúdo de um

documento HTML.

Isto significa que o CSS nos permite trabalhar toda a configuração de um livro de maneira mais fácil.

por exemplo:

Se eu quero que o meu texto use um alinhamento justificado.

Sem o CSS eu teria a opção de definir isso como padrão na página através da tag <body

align=justify>, ou ir individualmente em cada parágrafo e adicionar <p align=justify>.

No primeiro caso apesar de mais simples isso me obrigara a colocar um comando em cada elemento

em que eu queira um alinhamento diferente e no caso de um livro em epub teria que modificar todos

os documentos xhtml, mas a situação fica ainda mais complicado quando eu adiciono outros

elementos com formatações variadas, tais como <img> <div> <table>, todos esses elementos podem

ter uma formatação diferente e o css permite que tudo isso seja feito em um só lugar.

No segundo caso o trabalho seria insano e nada produtivo, além disso o css nos permite fazer muito

mais coisas como criar caixas flutuantes com imagem ou cor diferenciada no fundo, entretanto esses

recursos tem de ser usados com parcimônia nos e-books, já que nem todos os leitores suportam

estes comandos.

Os e-books em geral aceitam CSS 2 com alguns comandos CSS3 e alguns leitores suportam

versões webkit de comandos css, o ibooks no ipad por exemplo, mas novamente é bom termos

cuidado com o que usamos pois o uso avançado destes comandos podem fazer com que o livro nem

sequer consiga ser aberto pela maioria dos leitores.

No caso do Kindle o suporte a estes comandos são muito mais limitados e no futuro faremos um

estudo sobre quais comandos são aceitos no kindle bem como em outros leitores.

Mas vamos observar mais de perto como funciona a estrutura de um arquivo css:

O documento css é muito mais simples que um XHTM pois não precisa de nenhum cabeçalho ou

mesmo tag que organize seu conteúdo, é basicamente uma lista com as definições e segue o

seguinte esquema.

seletor {propriedade:valor;}

O seletor é a propriedade que você quer alter por exemplo p para parágrafos.

Propriedade é o ponto que você quer alter por exemplo text-align.

Valor é a especificação da propriedade por exemplo justify.

Assim no exemplo dos parágrafos justificados bastaríamos usar a seguinte sintaxe.

p {text-align:justify;}

Uma coisa bacana é que você pode usar vários seletores para um mesmo grupo de especificações

por exemplo:

p, h1, h2, h3, div {text-align:justify;}

Da mesma forma um seletor pode usar várias especificações.

p {

text-align:justify;

text-indent:5%;

}

Entretanto nem sempre precisamos de valores gerais por vezes queremos aplicar um estilo à apenas

um parágrafo, por exemplo no primeiro parágrafo de cada capítulo. Neste casso devemos usar a

propriedade classe.

p.pp{

text-align:justify;

text-indent:5%;

margin-top:8%;

}

No exemplo acima chamamos a classe de pp pois ela está relacionada aos primeiros parágrafos,

vejam que a sintaxe é praticamente a mesma com exceção do .pp entre o seletor e a chave. No caso

usamos uma definição de margem superior o que nós daria uma distância entre o título e o

parágrafo.

Uma coisa interessante é que uma classe não precisa de um seletor então você pode usar o

elemento acima do seguinte modo

.pp{

text-align:justify;

text-indent:5%;

margin-top:8%;

}

Desta forma você pode atribuir à classe .pp para qualquer elemento em seu documento como por

exemplo em uma imagem.

Mas não adianta criarmos uma página de css se ela não estiver associada ao arquivo HTML em que

as mudanças devem ser aplicadas.

Para aplicar o CSS em uma página HTML temos 3 maneiras.

Associando uma página css externa. Que é o caso de usarmos um documento como styles.css com

todas as atribuições, para isso precisamos declara a página dentro do ,<head> do arquivo HTML.

<head>

<link href="../Styles/style.css" rel="stylesheet" type="text/css" />

<title></title>

</head>

Basta adicionar a tag link em todo o documento html que todas as definições serão aplicadas, veja

que a propriedade href indica o caminho do documento .css, a rel diz que se trata de uma folha de

estilo e o type indica que é um documento de texto com informações css.

A segunda maneira é declarar as informações css dentro do próprio documento css da seguinte

maneira.

<head>

<title></title>

<style type="text/css">

/*<![CDATA[*/

p.italico {font-style: italic;}

/*]]>*/

</style>

</head>

Veja que existe a tag style e dentro dela ficam todas as especificações css, no caso temos um classe

para parágrafos em itálico.

Um ponto que ainda não falei é como atribuir a classe para o elemento desejado para isso temos que

ir no ponto em que queremos a mudança e usar o comando class por exempo.

<p class="italico">Este parágrafo está em itálico</p>

Neste caso o parágrafo em questão usaria a especificação determinada pela classe itálico.

Tanto o primeiro modo de aplicação css como o segundo exigem o uso do comando class para o uso

de classes.

A terceira forma de aplicar css é diretamente no elemento.

<p style="font-style: italic; text-align: center;">Este parágrafo é

centralizado e em itálico</p>

Neste caso o parágrafo receberá as especificações estipuladas pelo comando style, entretanto é bom

evitar este tipo de uso pois o documento final acaba ficando sujo e pesado, sempre que possível

utilize apenas uma definição para todos os lugares que utilizem as mesmas definições.

Veja, também, que só usei valores em % isso porque valores absolutos são altamente

desaconselhados em e-book's já que não sabemos em qual tela o livro será lido, além da

porcentagem podemos usar também o valor em que basicamente significa o valor da fonte padrão ou

seja.

p {font-size: 1em} tem o exato tamanho da fonte usada.

p {font-size: 2em} tem o dobro do tamanho da fonte usada.

Entretanto nem todos os leitores realmente usam esta regra o kindle aparentemente determina um

tamanho padrão para cada em. Segundo Joshua Tallent em "Kindle Formatting: The Complet Guide"

no kindle 1 cada em corresponde à 1/4 de polegada enquanto no kindle 2 cada em corresponde à 1/8

de polegada. Se alguém tiver os valores para o kindle 3 ou se isto está diferente nos novos aparelhos

pôr favor colabore nos comentários.

Você pode estar se perguntando qual o sentido de Cascata em "folhas de estilo em cascata" isso se

deve a questão hierárquica dos comandos.

Se eu tenho definido como padrão para os parágrafos a seguinte formatação.

p {

text-align:justify;

text-indent:5%;

}

Se eu usar a seguinte classe.

p.centralizar {

text-align:center;

}

Meus parágrafos serão centralizados e terão o recuo de primeira linha de 5%, isto porque eu

determinei este recuo no seletor p e como a classe não determina nenhum valor para text-indent ela

herda esta característica da configuração de parágrafo padrão feita na definição de p.

Além disso a hierarquia de comando é sempre do mais próximo ao atributo, por exemplo.

<head>

<title></title>

<style type="text/css">

/*<![CDATA[*/

p {text-align:justify;}

/*]]>*/

</style>

</head>

<body>

<div style="text-align:center">

<p style="text-align:right">Qual o alinhamento final deste parágrafo?</p>

</div>

</body>

No caso acima o parágrafo acabaria com um alinhamento à direita já que é o comando mais próximo

a ele.

Por fim cabe algumas considerações finais a respeito do CSS. Como já disse é bom ter cuidado ao

usar comando avançados para que o seu livro possa ser aberto em muitos dispositivos, fora isso

alguns leitores como o aldiko por padrão não respeitam as folhas de estilo, então é bom assegurar

uma qualidade mínima de leitura mesmo sem o uso de css. E tenha cuidado com os limites que você

impõem ao leitor, pois se você define um tipo de fonte ou alinhamento específico, na maioria dos

casos o leitor não poderá mudar esta opção em seu leitor, então se o sujeito em questão prefere um

alinhamento à direita e você define em seu css que o alinhamento deve ser justificado, mesmo que o

e-reader tenha a opção de alinhamento à direita ele provavelmente não irá funcionar.

Regex

Hoje vou fazer um texto rápido sobre algo que não faz parte dos e-books, mas é uma ferramenta que

aumenta em muita a sua produtividade para trabalhar com eles, trata-se das regex.

Regex ou expressões regulares são partes de um mecanismo de busca e substituição de conteúdo

de texto que otimiza certas buscas.

Por exemplo se eu tenho o conteúdo abaixo.

<a id="texto.html" />

E quero remover a extensão do título de id eu usaria a seguinte regex no campo de busca.

(<a id=")(.*).html(" />)

e no campo de substituição eu colocaria o seguinte conteúdo.

\1\2\3

Como resultado eu teria o seguinte.

<a id="texto" />

Claro pra apenas uma substituição esse trabalho seria tolice, mas quando eu tenho um padrão bem

estabelecido para busca e substituição o regex é uma mão na roda.

Vamos entender um pouco mais.

A expressão (<a id=")(.*).html(" />) que usamos no exemplo contém alguns caracteres de comando e

parte do texto a ser procurado. Os Parênteses ( ) servem apenas para dividir a busca em campos

sendo que cada par de parênteses corresponde a um grupo isso é utilizado na substituição pois

quando usamos \1 estamos nos referenciando ao primeiro grupo \2 ao segundo e \3 ao terceiro.

Dentro do grupo 2 temos como conteúdo .* aí temos dois comandos o primeiro . significa um

caractere qualquer já o segundo * significa quantas repetições forem necessárias, ou seja o conjunto

diz que no grupo dois temos qualquer número de quaisquer caracteres isso permite que você tenha o

conteúdo que quiser do tamanho que quiser ele só para a leitura quando achar o conjunto de

caracteres seguintes que é .html. O resto da expressão faz parte do conteúdo da busca.

Entretanto ainda a um detalhe a ser observado o ponto em .html faz referência a um caractere

qualquer e não a um ponto, entretanto como na busca temos um ponto ele bate como um caractere

qualquer, mas se o id fosse como mostrado abaixo.

<a id="texto$html" />

Não conseguiríamos um bom resultado usando a expressão (<a id=")(.*)$html(" />), isso porque $

também é um comando de regex mas este faz referência ao fim de uma linha e não a um caractere

qualquer, logo ele não se auto referencia como o ponto . no primeiro exemplo.

Para resolver isso devemos usar a barra invertida \ pois esta barra é um comando que diz ao regex

para interpretar o comando seguinte como caractere logo \$ diz respeito ao caractere $ enquanto que

apenas $ diz respeito ao fim de uma linha.

Abaixo tem uma pequena lista de comandos para o regex.

. Um caractere qualquer

( ) Marca uma região para referência na substituição

\n Faz referência ao grupo que deve ser copiado \1 para grupo um, \2 para grupo dois , etc.

\0 representa toda a sentença que foi pesquisada

\< Referência ao começo de uma palavra

\> Referência ao fim de uma palavra

\xPermite usar o comando que x representa como caractere por exemplo \. representa um

ponto e não qualquer caractere

[]

Indica um grupo de caracteres, por exemplo [abc] procurará por a ou b ou c no texto

[ABC] procurará A ou B ou C. Você também pode usar um conjunto por exemplo [a-z]

procurará por qualquer letra em caixa baixa já [0-9] procura por qualquer número.

[^ ]Procura por qualquer caractere com exceção dos descritos. Por exemplo [^0-9]

procurará por qualquer caractere que não seja número.

^Referência ao começo de linha, não pode estar entre colchetes pois aí entraria na regra

acima

$ Referência ao fim da linha

* Procura pelo resultado 0 ou mais vezes

+ Procura pelo resultado 1 ou mais vezes

? Procura pelo resultado 0 ou 1 vez

| Alternativa por exemplo a|b significa encontre a ou b

Dica final.

Muitas vezes em conversões de documentos pdf temos quebra de linhas estranhas para resolver

isso no sigil você pode tentar a seguinte expressão.

([^\.\?\:\!])</p>

<p>

Substituir por

\1

Isto porque um parágrafo sempre termina com um ponto final, interrogação dois pontos ou

exclamação, desta forma você elimina todas as quebras de linha sem justificação, apenas tenha

cuidado com os títulos e veja se não há casos em que os dois pontos seguiriam na mesma linha.

Outro ponto interessante é marcar os títulos como <h1> ou outro que indique se tratar de um título

pois aí ele não entra na busca já que não usará o <p>

Tags para o Kindle

Ao contrário do ePub, principalmente em sua última versão 3.0 o formato Mobi ou AZW próprio do

Kindle não responde a uma série de comandos, quando você criar um e-book que visa ser lido em

todos os dispositivos é importante ter em mente as limitações que o formato do Kindle apresenta.

Para chegar ao formato final do arquivo você tem várias opções. Uma delas é criar um único

documento html, ou vários e utilizar o Mobipocket Creator, entretanto este caminho é bastante

complexo, e você precisará de outros arquivos para indicar a parte estrutural do e-book.

Uma segunda forma é criar um e-pub e utilizar o kindlegen, que é distribuído pela própria Amazon

para este tipo de conversão, se o e-pub for criado, pensando na conversão ela não ficará ruim.

A última versão do kindlegen pode não ser a ideal pois ela pensa na conversão de epub3 para kf8 a

solução é usar uma versão mais antiga ou mesmo o calibre.

Mas volto a dizer para se ter um bom resultado é preciso preparar o código para a conversão e para

isso segue a lista de tags html e comandos css que são aceitos.

Os dados abaixo são do formato mobi 7 usado nos Kindle de e-ink para o Kf8 usado no fire veja esta

tabela.

A tabela a seguir teve como base esta tabela criada por Joshua Tallent.

HTML

Tags Gerais

<!--...--> Comentário no código, apenas como referência não é

mostrado no livro.

<a>

...</a>

Âncora. É usado para indicar um link com através do atributo

href que indica onde está um link, que pode apontar para um

documento específico, um bookmark, através do uso do

sustenido (#) após o link como neste exemplo

(href=".../Text/documento1.xhtml#bookmark") ,

ou para um site externo como no exemplo

(href=http://www.ebookbr.com)

Também serve para indicar um bookmark através do atributo

name como no exemplo (name="bookmark") entretanto se

você estiver fazendo um epub para o kindlegen use o atributo

id como no exemplo

(id="bookmark").

<html>...</html> As tags que abrem e fecham o documento HTML.

<head>...</head> Determina a área do cabeçalho e pode conter instruções

através de tags como <link>, <title> e <style> .

<body>...</body> Determina o corpo do documento.

<hr /> Cria uma barra horizontal com efeito decorativo ou

organizacional.

<img src=""

alt="" />

Insere imagens, sendo que o src indica onde está a imagem e o

alt

informa o conteúdo da imagem para fins de acessibilidade.

<mbp:pagebreak/> Quebra de página. Esta tag é exclusiva do formato Kindle e

indica que o conteúdo após esta tag deve ser exibido em uma

nova página.

Formatação das fontes.

Tamanho da fonte

<small>...</small> Reduz o tamanho da fonte.

<big>...</big> Aumenta o tamanho da fonte

Itálico

<i>...</i>

<em>...</em>

Itálico.

<cite>...</cite> Indica uma citação (em itálico).

<var>...</var> Indica o nome de uma variável ou o argumento de um

programa.

Negrito

<b>...</b>

<strong>...</strong>

Negrito

Lines

<u>...</u> Sublinhado.

<s>...</s>

<strike>...</strike>

Rasurado.

Formatações especiais

<code>...</code> Código de computador.

<kbd>...</kbd> Texto de teclado.

<samp>...</samp> Texto de Amostra.

<tt>...</tt> Texto de Teletipo.

Outras tags

<span>...</span> Usado para aplicar um estilo no conteúdo entre as tags.

_... Reduz o tamanho da fonte e o coloca abaixo da linha do texto.

^... Reduz o tamanho da fonte e o coloca acima da linha do texto.

Paragrafos, etc

<h1>...</h1>

<h1>...</h2>

<h1>...</h3>

<h1>...</h4>

<h1>...</h5>

<h1>...</h6>

Títulos.

<div>...</div> Divisão ou Seção, é usado para destacar uma área que receberá

uma formatação diferenciada, mas ao contrário do <span> não

pode estar dentro de um parágrafo.

<p>...</p> Parágrafo.

<blockquote>...

</blockquote>

Bloco de citação. Cria uma margem esquerda além da margem

padrão.

<br /> Quebra de linha.

<center>...</center> Centraliza o conteúdo entre as tags

horizontalmente.

<ol>...</ol> Lista Numerada.

Para itens a tag <li>.

<ul>...</ul> Lista com bullets. Para itens a tag <li>.

<li>...</li> Item de uma lista

Atributos

Comumente usados nas tags

class Chama uma classe de estilo css

id Usado para criar um bookmark

width Largura.

Em parágrafos, blocos de citação, Títulos e listas indica o

espaçamento da primeira linha.

Entretando seu uso é desaconselhável se pretende usar um

epub

height Determina o espaço entre linhas.

style Permite usar um estílo css dentro do conteúdo entre as tags.

align Alinhamento. Permite usar os valores: left, right, e center.

CSS Suportados

Fonte

font-size Determina o tamanho da fonte xx-small

x-small

small

medium

large

x-large

xx-large

em

%

font-style Determina o estilo da fonte. normal

italic

oblique

font-weight Determina se a fonte é em negrito ou normal. normal

bold

Posicionamento

vertical-align Determina o alinhamento do elemento em

relação à linha do texto sendo

sub alinhado pela base e super pelo topo

sub

super

Text

text-align Alinhamento do texto left

right

center

justify

text-decoration Decoração do texto underline

line-through

text-indent Espaçamento da primeira linha de um

parágrafo.

length

%

Bordas

border-top Borda Superior

border-bottom Borda Inferior

Capitulares

Hoje vou falar de uma coisa simples mas que embeleza muito os livros digitais, que são as

capitulares.

Capitular é a primeira letra ou palavra de um parágrafo que possui um tamanho maior que indica o

começo do capítulo.

Como podem ver acima o texto fica muito bonito, entretanto já adianto que o kindle não suporta este

tipo de capitular, suporta apenas o tamanho maior, mas não o texto em volta.

Mãos à obra!

Para usarmos o capitular você deve usar a tag <span>.

Esta tag tem como objetivo aplicar um estilo no trecho abordado por ela que é diferente do estilo

usado no documento e no parágrafo que ela se encontra.

Então a primeira coisa é escolher o lugar que você quer e colocar a tag.

<span>T</span>exto de Exemplo.

Mas a span sem nada não faz nada então vamos aumentar o tamanho da letra.

<span style="font-size: 4em;">T</span>exto de Exemplo.

Texto de Exemplo.

Como podem ver isso torna a primeira letra maior, e é tudo que podemos fazer no formato mobi,

também recomendo este uso para parágrafos muito curtos, inclusive no epub.

O que mais podemos fazer?

O epub permite fazermos muito mais que o kindle então vamos incrementar o código da seguinte

maneira:

<span style="font-size: 4em;margin-bottom: -0.3em; float: left; line-

height: 1.0em; width: .8em; font-weight:bold;">T</span>exto de Exemplo.

Texto de Exemplo.

Como podem observar no exemplo acima o texto fica em volta do parágrafo, isso deixa o texto mais

bonito, mas em parágrafos curtos pode ficar estranho, abaixo apenas uma variação do exemplo

acima para ilustrar melhor o texto sobre a capitular.

<span style="font-size: 4em;margin-bottom: -0.3em; float: left; line-

height: 1.0em; width: .8em; font-weight:bold;">T</span>exto<br />de<br

/>Exemplo.

Texto

de

Exemplo.

mas vamos analisar cada um dos comandos que adicionamos ao estilo.

margin-bottom: -0.3em; - Este comando tem por objetivo alinhar a letra com o resto do texto,

nos exemplos aqui apresentados ele não aparece porque o blog não aceita o comando, mas no seu

livro vai funcionar, o valor varia de acordo com o tamanho da fonte usada.

float: left; - Este comando é um dos mais bacanas pois permite que o texto seja "flutuante" é

isso que permite que o texto fique em volta dele, também é possível usar em imagens.

line-height: 1.0em; - Aqui temos a altura das linhas, não ultrapasse nunca o valor 1 senão as

linhas vão ficar muito distantes entre si e o capitular não ficará bom.

width: .8em;- Aqui temos a largura da letra, é usado para aproximar o texto da letra, sem ela

teríamos uma borda ao redor da letra. e não ficaria bom.

font-weight:bold;- Isto deixa a fonte em negrito, seu uso é opcional.

Pra finalizar vamos substituir este comando por uma classe da seguinte forma.

<span class="capitular">T</span>exto<br />de<br />Exemplo.

Assim podemos ter nosso documento mais organizado, e não podemos esquecer de criar a classe

em nossa folha de estilos.

span.capitular {margin-bottom: -0.3em; font-size: 4em; float: left; line-

height: 1.0em; width: .8em; font-weight:bold;}

É isso com alguns recursos simples nosso livro virtual fica muito mais bonito.

Obs: Para usar o capitular é necessário que o parágrafo não use o espaçamento na primeira linha

então o parágrafo precisa usar a regra de estilo text-indent:0;

Incorporar Fontes

Hoje vamos estudar a incorporação de fontes ou "fontes embebedadas" para isso devemos usar a

variável font-face.

Para isso em nossa arquivo css devemos usar a seguinte estrutura.

@font-face {

font-family : StayPuft;

font-weight : normal;

font-style: normal;

src : url(../Fonts/StayPuft.ttf);

}

Aí temos o chamado da fonte em @font-face é a chamada da função.

Em font-family: temos o nome que damos para a fonte em nosso documento.

Em font-weight: usamos normal ou bold, para definir se usamos negrito ou não.

Em font-style: podemos usar normal ou italic, para definirmos se a fonte será em itálico ou não.

Pode parecer estranho, mas para fontes embedadas não adianta apenas usarmos o <i> ou <b> ou

definir isso no css é preciso colocar todas as opções que você vai usar no css.

Finalmente temos o endereço da fonte em url.

Então ainda no css devemos indicar onde usaremos a fonte, por exemplo para usar a fonte nos

parágrafos normais devemos usar a seguinte declaração:

p{font-family: "StayPuft"}

Pra finalizar devemos ir até o arquivo .opf e colocar a seguinte linha dentro do <manifest>:

<item href="Fonts/StayPuft.ttf" id="StayPuft.ttf" media-type="font/truetype" />

se a fonte for Open type em media-type use "application/x-font-otf"

E pronto você terá a sua fonte no seu livro digital.

Pra finalizar você deve sempre usar fontes Open Type e True Type.

Notas de Rodapé

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 numerozinho ou estrofe sobre a palavra como no exemplo:

Texto da nota¹

Texto da nota1

Depois temos as âncoras que são as tags que usam a seguinte estrutura:

<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">¹</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>.

Viúvas e Blocos de texto

Viúvas são aquelas palavras que aparecem sozinhas no fim de um capítulo, para evitá-las temos

alguns recursos em css interessantes, é bom atentar que isso pode gerar espaços em brancos na

penúltima página do capítulo, pois estes comandos nada mais são do que um reajuste da

apresentação do texto.

Primeiro temos os comandos widows e orphans.

O comando orphans permite que você determine um número mínimo de linhas que devem ser

apresentadas no fim das páginas recomendo o uso dentro dos parágrafos deste jeito.

p{orphans:2;}

Neste exemplo pelo menos duas linhas aparecerão ao fim da página.

Já o comando windows permite determinarmos que ao menos um número de linhas seja apresentado

no início da página e tem a sintaxe abaixo.

p{window:4;}

Neste caso pelo menos 4 linhas aparecerão ao início da página.

Mas como nem tudo funciona com o deveria em nosso universo de leitores eletrônicos existem outros

comandos que podem ser usados com o por exemplo o comando display: inline-block.

Na verdade o comando display faz mais do que isso, entretanto para o exercício de hoje nos

manteremos no valor inline-block. Ese valor determina que os elementos dentro de sua área de

atuação devem permanecer juntos como um bloco, logo eles não serão divididos pelo fim da página

ao invés disso o grupo apareceria junto na página seguinte, você deve usar este comando dentro da

tag div desta maneira.

div.blocojunto{display:inline-block;}

Finalmente temos as opções page-break-before e page-break-after, como o nome indica elas forçam

uma quebra de linha antes ou depois do elemento, entretanto existem algumas variáveis para estes

comandos:

always - Determina que a regra será sempre aplicada.

avoid - Isso determina que o comando deve ser evitado.

auto - aqui deixamos o software de leitura determinar quando é mais apropriado usar a

quebra de página, é a função default.

A reunião dos dois comandos com estas variáveis permite muita coisa, para o page-break-before o

uso do valor always permite termos inicío de capítulo ou seção, já o avoid pode ser usado para

garantir que uma legenda apareça junto a sua imagem.

No caso do page-break-after o valor always permite que você encerre uma seção do texto para que a

próxima seção inicie em uma nova página, já com o valor avoid podemos evitar que a imagem citada

acima fique sozinha no final da página sem a sua legenda.

Por fim temos o comando page-break-inside: avoid que determina que devem ser evitadas quebras

de linha dentro do elemento, tem o funcionamento muito semelhante com o display:inline-block.

A sintaxe destes comandos é a seguinte:

div.1{page-break-before:always;}

div.2{page-break-after:avoid;}

div.3{page-break-inside:avoid;}

Claro podemos ter limitações causada pelo tamanho da tela, principalmente quando o leitor está

usando fontes de tamanho grande, neste caso não temos nada o que fazer pois se o texto não caber

na tela ele será cortado ao meio.

Vídeo-aulas - HTML - CSS - Javascript

Bom hoje faço um post apenas para indicar um canal do youtube com vídeo-aulas sensacionais para

html, css e javascript.

Estes conhecimentos são essenciais para quem quer trabalhar com livros digitais.

As aulas são bem completas e muito explicativas, ou seja mesmo que você não entenda nada de

programação e edição de sites, com estes cursos você se torna especialista.

O canal você encontra aqui: http://www.youtube.com/user/ricardolopescosta

Bons estudos!