Portugus (Brasil) Conecte-se (ou Registrar)

Itens Tcnicos Downloads e Trials Comunidade

Crie Publicaes com Layout Rico em EPUB 3 com HTML5, CSS3 e

MathML
Explore o padro eBook aberto de prxima gerao para layout e tipografia avanados

Liza Daly, Vice-President of Engineering, Safari Books Online

Resumo: O EPUB 3.0, a reviso mais recente do formato de e-book XML padro de mercado, se incorpora tecnologia moderna da web adotando o HTML5 e o CSS3.
Ele foca em kits de ferramentas orientados para XML ao requerer serializao XHTML e incluir vocabulrios XML complementares, como MathML e SVG. Oferece uma
variedade de opes para desenvolvimento de publicaes originalmente digitais avanadas. Neste artigo, aprenda a criar pginas de layout rico usando alguns dos novos
recursos em EPUB 3.

Data: 06/Abr/2012
Nvel: Intermedirio
Tambm disponvel em : Ingls
PDF: A4 e Carta (650 KB | 23 pginas)Obtenha o Adobe Reader
Atividade: 2273 visualizaes
Comentrios: 0 (Visualizar | Incluir comentrio - Conectar)

Mdia de classificao (7 votos)

Classificar este artigo

Introduo

O EPUB um formato XML para livros digitais e publicaes de fluxo controlvel padronizadas pelo International Digital Publishing Forum (IDPF). At 2009, o EPUB 2 era,
de fato, o formato de eBook usado pela grande maioria dos varejistas e sistemas de leitura de eBook.

Os archives ZIP de EPUB so compactados sob uma estrutura bem-definida. Cada componente tem sua prpria especificao, unida sob o rtulo de EPUB comum:

Especificao de continer
Define o mtodo pelo qual um documento de EPUB compactado.
Publicao de EPUB
Inclui todos os metadados sobre o contedo do eBook, tais como: o manifesto do pacote, ttulo bsico, metadados de autor e definiesem EPUB 3de quais
recursos avanados a publicao espera suportar, como JavaScript ou MathML. Isso chamado de arquivo de Formato de Continer Aberto.
Documentos de contedo EPUB
Os arquivos XHTML e CSS reais que compem o contedo da publicao. Documentos de contedo tambm incluem recursos binrios, como imagens, multimdia e,
possivelmente, documentos XML definidos externamente.

Abreviaes usadas frequentemente

CSS: Folhas de estilo em cascata
DTD: Definio do tipo de documento
HTML: Linguagem de Marcao de Hipertexto
JAR: Java archive
OPF: Formato de Compactao Aberta
SVG: Scalable Vector Graphics
XHTML: Linguagem de Marcao de Hipertexto Extensvel
XML: Linguagem de marcao extensvel
XSLT: Transformao de Linguagem de Folha de Estilo Extensvel

Este artigo explora alguns dos recursos do EPUB 3. Voc aprender sobre validao de documentos em EPUB 3, navegao e hierarquia, bem como diretrizes de
desenvolvimento. Um exemplo percorre o processo de adaptao de uma pgina de um livro infantil para o EPUB 3. Tambm aprender como incluir MathML em
publicaes.

Faa o download dos exemplos usados neste artigo.

Pr-requisitos

O cdigo de amostra e os exemplos deste artigo supem uma familiaridade bsica com a especificao EPUB 2 e as publicaes baseadas em XML em geral. Consulte
Recursos para detalhes sobre o EPUB 2.

Mudanas no EPUB 3

O EPUB 2 fornece todos os recursos de formatao e layout do HTML4 e CSS2, o que mais do que suficiente para publicaes de textos pesados. Porm, os publicadores
e autores descobriram que o EPUB 2 no conseguia manipular muitos tipos de contedo e casos de uso, como livros multimdia, livros com layout complexo, publicaes
matemticas e documentos interativos. O IDPF e a comunidade de eBook liberaram a especificao para EPUB 3 em outubro de 2011.

Sistemas de leitura EPUB 3

A partir de dezembro de 2011, nenhum sistema de leitura suporta oficialmente o EPUB 3. Porm, muitos sistemas de leitura escritos usando mecanismos de navegador de
www.ibm.com/developerworks/br/library/x-richlayoutepub/#fig1 1/14
 HTML5, como o WebKit, suportam a maior parte da especificao de Documentos de Contedo do EPUB 3. Recomenda-se o uso de um navegador recente com base em
um mecanismo de renderizao HTML moderno para testar e desenvolver documentos EPUB 3.

Este artigo inclui tcnicas para criar polyfills inofensivos (shims) a fim de produzir sada compatvel com o EPUB 3 mesmo sem um sistema de leitura EPUB 3 integral.

Importantes mudanas do EPUB 2 para o EPUB 3 incluem:

O esquema exigido para documentos com contedo EPUB 3 mudou do XHTML 1.1 para a serializao XHTML do HTML5. A incluso dos elementos de multimdia
do HTML5 foi uma exigncia fundamental (<vdeo>, <udio>e <canvas>).
A faixa permitida de CSS em documentos com contedo EPUB 3 se expandiu de um subconjunto de CSS2.1 para um conjunto de mdulos maduros do CSS3
relevante criao do documento.
O MathML foi includo no XHTML5 e SVG como um tipo de contedo de primeira ordem.
O suporte para fontes integradas agora exigido pelos sistemas de leitura que possuem porta de visualizao CSS. O Web Open Font Format foi includo como um
formato de fonte aceitvel.
Suporte explcito para modos e scripts de gravao no ocidentais, incluindo layout vertical em japons e outros scripts asiticos.
Suporte opcional para interatividade mediada por JavaScript usando um modelo de segurana customizado.
Metadados permitidos em documentos de publicao foram expandidos, incluindo algum suporte para Resource Description Frameworkinattributes (RDFa).
O documento do ndice (TOC) do Navigational Center eXtended (NCX) do EPUB 2 foi descontinuado em favor de um TOC com base em XHTML5. (O NCX ainda
permitido para compatibilidade reversa.)

Validando documentos do EPUB 3

Como o EPUB 3 conta com serializaes XML para a maioria dos tipos de contedo, ele responsvel pela validao automtica. A ferramenta EpubCheck o mtodo
cannico de testar a validade e conformidade de documentos do EPUB. O EpubCheck uma biblioteca de software livre Java(licenciada pelo Berkeley Software
Distribution) . Uma verso de visualizao de desenvolvedor est disponvel para uso com documentos EPUB 3 e usada por todo este artigo. Consulte Recursos para
obter links para a verso mais recente.

altamente recomendvel que a extenso .xhtml seja usada para todos os documentos de contedo do EPUB. Os navegadores no interpretaro o contedo HTML como
application/xhtml+xmlsem essa extenso. O modo de processamento XML necessrio ao trabalhar com qualquer um dos recursos demonstrados neste artigo, como
namespaces do CSS.

Normalmente, voc interage com o EpubCheck por meio da linha de comandos, conforme mostrado abaixo.

$ java -jar epubcheck-3.0b3.jar sample.epub

Epubcheck Verso 3.0b3

Nenhum erro ou aviso detectado.

Caso seja exibido o erro java.lang.NoClassDefFoundError: com/thaiopensource/validate/SchemaReaderna resposta, certifique-se de que o diretrio lib/ que
acompanha a distribuio do EpubCheck esteja no mesmo diretrio do arquivo JAR do EpubCheck.

O EpubCheck 3 pode validar um nico subcomponente do pacote EPUB individualmente, comoa Listagem 1. Esse recurso extremamente til usado nos exemplos deste artigo
pode:

Ajudar a isolar problemas.

Reduzir a necessidade da entediante tarefa de recompactar o EPUB em um novo ZIP apenas para valid-lo.
Ser incorporado em uma estrutura de teste de unidade para uma cadeia de ferramentas que emite um nico tipo de arquivo.

Lista 1. Executando o EpubCheck 3 com relao a um nico tipo de arquivo

$ java -jar ~/src/epubcheck-3.0b3.jar sample-toc.xhtml -mode nav

Epubcheck Verso 3.0b3

AVISO: sample-toc.xhtml:
O arquivo validado como um nico tipo de arquivo nav e verso 3!
Somente um subconjunto de testes disponveis executado!
Nenhum erro ou aviso detectado.

Navegao e hierarquia em documentos do EPUB 3

Ainda que o arquivo NCX TOC em EPUB 2 suportasse um rico conjunto de marcao para navegao hierrquica e mapeamento de pgina, ele seria derivado do Digital
Talking Book (uma especificao para produzir eBooks acessveis impresso desativada)do Digital Accessible Information System (DAISY). Reliance no formato DAISY
bem especificado se destinava ao fcil desenvolvimento de leitores de eBook que pudessem suportar uma rica acessibilidade. Nesse sentido, o NCX foi bem executado.
Porm, o NCX DTD bem grande e inclui recursos no relevantes ao EPUB 2. A confuso quanto a quais partes do NCX eram necessrias no EPUB resultou em
fragmentao indesejvel e extenses de propriedade por alguns varejistas de eBook e fornecedores de sistema de leitura.

O EPUB 3 descontinua o NCX e o substitui pelo EPUB Navigational Document (END). Listagem 2 mostra um exemplo. O END usa XHTML5 em vez de um DTD
customizado, reduzindo, assim, os formatos XML para implementar e validar. Atributos de EPUB customizados so fornecidos usando o namespace do EPUB
(http://www.idpf.org/2007/ops).

Lista 2. Um END mnimo

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:epub="http://www.idpf.org/2007/ops">
<head>

www.ibm.com/developerworks/br/library/x-richlayoutepub/#fig1 2/14
 <title>Example</title>
</head>
<body>
<section epub:type="frontmatter toc">
<header>
<h1>Contents</h1>
</header>
<nav epub:type="toc" id="toc">
<ol>
<li id="chapter_001">
<a href="chapter_001.html">Chapter 1</a>
</li>
</ol>
</nav>
</section>
</body>
</html>

O elemento <nav>HTML5 necessrio (como o epub:typevalor toc).

Declarando o END

Inclua o END em uma publicao declarando oitemno manifesto com ovalor depropriedades nav, como mostra a Listagem 3.

Lista 3. Incluindo um END em um EPUB Package Document (OPF)

<manifest>

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

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

A incluso de um arquivo END necessria no EPUB 3. Tambm possvel incluir um arquivo NCX para compatibilidade reversa, mas os processadores de EPUB 3 devem
ignorar o NCX em favor do END.

Apresentao visual do END

Diferentemente do NCX, possvel incluir o END no fluxo do contedo do livro. No EPUB 2, caso desejasse mostrar um TOC customizado aos usurios (em vez de contar
com o suporte de TOC integrado no eReader), seria preciso produzir duas cpias do mesmo contedo:uma no NCX e outra como um documento de contedo HTML. O
END elimina essa duplicao e permite bastante flexibilidade na apresentao de parte ou de todo o TOC no fluxo de contedo.

Para incluir o END no fluxo de contedo, basta inclui-lo no OPF spine, como mostra a Listagem 4.

Lista 4. Incluindo o END no fluxo de leitura

<![CDATA[
<spine>
<itemref idref="toc" />
<itemref idref="chapter_001" />
...
</spine>

Em documentos com hierarquias profundas, como documentao tcnica, possvel incluir todos os nveis da seo em um TOC puramente funcional enquanto mostra somente
as sees de primeiro ou segundo nveis aos usurios no fluxo de contedo. Isso feito usando o atributo ocultode HTML5, como na Listagem 5, em quaisquer elementos
que devem ser removidos da apresentao aos usurios.

Lista 5. Removendo subsees da apresentao visual de um TOC

...
<nav xmlns:epub="http://www.idpf.org/2007/ops" epub:type="toc" id="toc">
<ol>
<li id="chapter_001">
<a href="chapter_001.html">Chapter 1</a>
<ol hidden="hidden">
<li>
<a href="chapter_001.html#id1">Chapter 1 subsection</a>
<ol>
<li>
<a href="chapter_001.html#id1.1">Chapter 1 subsection 1</a>
...

Por que no seria possvel fazer isso usando a propriedade display: nonedo CSS? Como o EPUB usado em uma variedade de sistemas de leitura, incluindo leitores de
www.ibm.com/developerworks/br/library/x-richlayoutepub/#fig1 3/14
 tela no visuais ou dispositivos em Braille, nem todos os leitores precisam suportar o CSS. A maioria dos navegadores da web modernos suporta ocultosnativamente.
melhor incluir o CSS para configurar a propriedade de exibio desses elementos de modo explcito, como na Listagem 6. Como o arquivo END apenas outro arquivo
HTML, possvel incluir o CSS no cabealho HTML assim como com qualquer outra folha de estilo, .

Lista 6. Configurando a propriedade de exibio

/* Nunca exiba elementos com o atributo oculto */ *[hidden] {

display: none;
}

Em sistemas de leitura ou navegadores incompatveis, a ausncia de estilo para o atributo ocultoresulta na exibio de todas as subsees, como na Figura 1.

Figura 1. END TOC sem atributo oculto ou CSS

Em navegadores que suportam ocultosou aps a aplicao do shim CSS, a sada transformada, como na Figura 2.

Figura 2. O END TOC com atributo oculto aplicado

Por padro, a lista ordenada HTML produz um conjunto de listas numeradas. Porm, a especificao END declara, " . . . o estilo de exibio padro de itens da lista deve ser
equivalente a CSS list-style: none." Para conseguir essa apresentao, inclua outra regra no polyfill EPUB 3 CSS, como na Listagem 7.

Lista 7. Configurando o estilo de itens da lista

/* Em uma lista TOC declarada, nunca exiba a numerao da lista */

nav#toc ol {
list-style-type: none;
}

Migrando do NCX para o END por meio de XSLT

Apesar de o EPUB 3 END oferecer mais opes de layout e controle, caso esteja migrando de um fluxo de trabalho EPUB 2 para EPUB 3, considere comear convertendo a
partir de documentos NCX existentes. Como os dois documentos, de entrada e de sada, so XML, esse um aplicativo perfeito para XSLT.

A Listagem 8 fornece a estrutura bsica para gerar um documento HTML a fim de preencher com o TOC.

Lista 8. Declare os namespaces necessrios para o NCX e o END

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
exclude-result-prefixes="ncx xsl"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ncx="http://www.daisy.org/z3986/2005/ncx/"
xmlns:epub="http://www.idpf.org/2007/ops"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="ncx:ncx">
<html>
<head>
<title><xsl:apply-templates select="/ncx:ncx/ncx:docTitle/ncx:text"/></title>
</head>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>

Observe a incluso obrigatria do namespace http://www.idpf.org/2007/ops, que normalmente prefixado com epub. Inclua esse namespace principalmente para
suportar a inflexo semntica do EPUB (significado adicional sobre o propsito especfico que um elemento possui em um documento de contedo do EPUB). Caso utilize o
EPUB 3, incentivamos o uso da expressividade disponvel no Vocabulrio Semntico Estrutural a fim de fornecer contexto para o software de acessibilidade, como tambm

www.ibm.com/developerworks/br/library/x-richlayoutepub/#fig1 4/14
 para processamento de mquina. Consulte Recursos para obter informaes sobre os valores includos neste vocabulrio.

Para um exemplo completo mostrando a converso de outros tipos de mapa de pgina, consulte o aplicativo de software livre nendlistado em Recursos.

Com a estrutura de tpicos bsica em vigor, comece a percorrer o TOC hierrquico no NCX e nos elementos XHTML correspondentes de sada. Apesar de o NCX permitir
diversos tipos diferentes de listas de pginas, os livros EPUB normalmente incluem somente o ncx:navMap. O extrato de modelo na Listagem 9 mostra como emitir um
conjunto de ns do ncx:navMap.

Lista 9. Emitindo o navMap

...
<!-- Gere um elemento nav completo e uma sublista do navMap,
depois faa recurso pelos ns -->
<xsl:template match="ncx:navMap">
<nav id="toc" epub:type="toc">
<xsl:copy-of select="@class"/>
<xsl:choose>
<xsl:when test="ncx:navLabel">
<xsl:apply-templates select="ncx:navLabel" mode="heading"/>
</xsl:when>
<xsl:otherwise>
<xsl:if test="self::ncx:navMap">
<h1>Table of Contents</h1>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
<ol>
<xsl:apply-templates select="ncx:navPoint|ncx:navLabel"/>
</ol>
</nav>
</xsl:template>

<xsl:template match="ncx:navPoint">
<xsl:text>
</xsl:text>
<li>
<xsl:copy-of select="@id|@class"/>

<!-- Cada navPoint deve ter um navLabel e contedo -->

<a href="{ncx:content[1]/@src}">
<xsl:apply-templates select="ncx:navLabel"/>
</a>

<!-- Este elemento tem um sub-nav? -->

<xsl:if test="ncx:navPoint">
<ol>
<xsl:apply-templates select="ncx:navPoint"/>
</ol>
</xsl:if>
</li>
</xsl:template>

<!-- Estes ns contm somente texto --> <xsl:template match="ncx:navLabel|ncx:text">

<xsl:apply-templates/>
</xsl:template>
...

A Listagem 10 fornece um exemplo de um NCX hierrquico.

Lista 10. Amostra de um NCX organizado hierarquicamente

<?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" xml:lang="en">

<head>
<meta name="dtb:uid" content="d989d60c-2302-40d1-9c85-1c028414342a" />
<meta name="dtb:depth" content="-1" />
<meta name="dtb:totalPageCount" content="-1" />
<meta name="dtb:maxPageNumber" content="-1" />
</head>

<docTitle>
<text>Middlemarch</text>
</docTitle>

<navMap>
<navPoint id="np1" playOrder="1">
<navLabel>
<text>Prelude</text>
</navLabel>
<content src="prelude.html"/>
</navPoint>

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

<navLabel>
<text>I: Miss Brooke</text>

www.ibm.com/developerworks/br/library/x-richlayoutepub/#fig1 5/14
 </navLabel>
<content src="book1.html" />

<navPoint id="np3" playOrder="3">

<navLabel>
<text>Chapter 1</text>
</navLabel>
<content src="chapter1.html" />
</navPoint>
<navPoint id="np4" playOrder="4">
<navLabel>
<text>Chapter 2</text>
</navLabel>
<content src="chapter2.html" />
</navPoint>
...

Transformar o arquivo da Listagem 10 usando o XSLT resulta na sada da Listagem 11 abaixo. possvel fazer o download dos arquivos de exemplo.

Lista 11. Resultado da transformao do NCX para END

<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>Middlemarch</title>
</head>
<body>
<nav id="toc" epub:type="toc">
<h1>Table of Contents</h1>
<ol>
<li id="np1">
<a href="prelude.html">Prelude</a>
</li>
<li id="np2">
<a href="book1.html">I: Miss Brooke</a>
<ol>
<li id="np3">
<a href="chapter1.html">Chapter 1</a>
</li>
<li id="np4">
<a href="chapter2.html">Chapter 2</a>
</li>
...

Como os valores @idso preservados do arquivo original, preciso gravar ferramentas de validao para assegurar que todos os ns originais sejam captados. Outras opes
de transformao adicional incluem:

Atualizao dos metadados no arquivo OPF a partir do antigo esquema Dublin Core para o metaesquema @property, conforme definido na especificao das
Publicaes 3.0 (consulte Recursos).
Migrando o contedo do guiado OPF descontinuado para o recurso de refernciasno END.
Removendo referncias no spinedo OPF para o arquivo NCX (a menos que esteja produzindo um documento com compatibilidade reversa).

Normalmente, no necessrio modificar o contedo XHTML 1.1 para produzir documentos com contedo compatvel com EPUB 3. No entanto, quando as informaes
semnticas estiverem disponveis, como na extrao de um sistema de gerenciamento de contedo ou outro repositrio de documentos, considere aplicar a inflexo semntica
sada. A especificao EPUB 3 possui mais informaes sobre inflexo semntica (consulte Recursos).

As Diretrizes de Desenvolvimento do EPUB 3

At que os sistemas de leitura do EPUB 3 estejam disponveis, seria prematuro recomendar melhores prticas especficas. Porm, o EPUB 3 se baseia no amadurecimento
rpido de tecnologias da web. J existem informaes suficientes para fazer amplas recomendaes sobre como usar as tecnologias subjacentes e quando usar as melhores
prticas existentes para produzir marcao slida, semntica e acessvel.

Quando Produzir o EPUB 3

preciso usar o EPUB 2 ou o EPUB 3 para eBooks produzidos hoje? Felizmente, a compatibilidade reversa foi um objetivo de design do EPUB 3. Beneficie-se com os
aprimoramentos semnticos e metadados enriquecidos no EPUB 3 enquanto ainda produz documentos que sejam legveis em eReaders mais antigos. Na prtica, pode no ser
possvel vender esse contedo em alguns mercados de trabalho de eBook; eles podem no aceitar o EPUB 3 devido a regras de negcios. Entretanto, pode-se esperar o
funcionamento da "transferncia local" desse contedo para a maioria dos sistemas de leitura compatvel com o EPUB 2. O EPUB 3 tambm foi desenvolvido para ter
compatibilidade posterior em termos de suporte do sistema de leitura,um sistema de leitura EPUB 3 deve suportar documentos EPUB 2 vlidos.

Muitos sistemas de leitura j suportam um tipo de "EPUB 2.5", no qual a marcao HTML5 permitida (especialmente quanto aos elementos de vdeo, udioe tela).
preciso esperar que plataformas de eReading com mecanismos de navegador da web, como o Apple iBooks, executem com xito muitos dos elementos permitidos em
documentos com contedo EPUB 3. Assim como com qualquer contedo da web de ponta, teste o seu contedo no mximo de leitores possveis antes do release.

Design de eBook Responsivo

O mdulo CSS3 Media Query um novo componente incrvel do EPUB 3. O Media Query permite que os autores especifiquem que um conjunto de regras e propriedades se
aplique somente a uma condio de visualizao particular, normalmente baseado no tamanho da porta de visualizao. Tambm possvel usar o Media Query para prever
propores de altura e largura especficas, como retrato versus paisagem.

Esses recursos j esto em uso em alguns websites para fornecer experincias de usurio aprimoradas em dispositivos mveis. Considerados juntos, esses princpios so
chamados de design da web responsivo. As tcnicas provaram ser efetivas na web e, em algumas maneiras, elas so ainda mais aplicveis aos designers de livros. Os

www.ibm.com/developerworks/br/library/x-richlayoutepub/#fig1 6/14
 designers de livros se baseiam em dcadas de pesquisa e experimentao em como efetivamente apresentar as informaes visuais em vrios tamanhos e orientaes. (Consulte
Recursos para saber mais sobre design responsivo da web.)

A maioria dos eBooks puramente ou primariamente texto. Porm, muitos tipos de publicao requerem layout mais rico por razes de marketing ou devido natureza
essencial do contedo. Livros com uso intensivo de layout foram considerados candidatos ruins para converso de eBook, mas o EPUB 3 e seu uso de HTML5 e CSS3
possibilitam design avanado. Contudo, com grande poder, vm grandes responsabilidades. No possvel negligenciar usurios em dispositivos mveis que desejam ler o
contedo facilmente e ainda ter layouts atraentes. aqui que as tcnicas combinadas de layout do CSS3 e design de eBook responsivo se juntam.

Layout avanado e responsivo no EPUB 3

Livros ilustrados, livros de receitas, livros didticos e de poesia eram difceis de converter para contedo com refluxo. Nesta seo, veja como adaptar a pgina de um livro de
poesias para crianas, na A figura 3em um EPUB 3. A palavra adaptar foi usada no lugar de converter, porque o processo muito mais artstico do que tcnico.

Figura 3. Uma pgina de Abroad de Thomas Crane (imagem de domnio pblico da Internet Archive)

A abordagem capturar o texto como XHTML e depois extrair algumas das imagens para evocar, mas no reproduziro layout original. Como o EPUB 3 assume um
contexto de processamento XHTML5/CSS3, possvel usar marcao semntica mnima em vez de acomodar muitos navegadores de legado, como voc faria na web aberta.
A Listagem 12 mostra a marcao XHTML para o contedo.

Lista 12. Marcao de poesia

<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<title>Exemplo de Media Query no EPUB 3</title>
<link rel="stylesheet" type="text/css" href="childrens-book-style.css" />
</head>
<body>
<div epub:type="chapter">
<h1>The Swans.</h1>
<p>
<span>"Ho! pretty swans,</span>
<span>Do you know, in our Zoo'</span>
<span>The swans of old England</span>
<span>Are just like you?"</span>
</p>
<p>
<span>"Don't tell me!"</span>
<span>Said a cross old bird;</span>
<span>"I know better,</span>
<span>The thing's quite absurd.</span>
</p>
<p>
<span>Their figures, I'm sure,</span>
<span>Are not worth a glance:</span>
<span>If you want to see style,</span>
<span>You <em>must</em> come to France."</span>
</p>
<p>
<span>With a scornful whisk</span>
<span>The swan turned tail,</span>
<span>Spread its wings to the breeze</span>
<span>And was off full-sail.</span>
</p>
<p>
<span>"Ho! pretty swan,</span>
<span>Do you know, in our Zoo'</span>
<span>The swans are not half</span>
<span>So conceited as you?"</span>
</p>
</div>
</body>
</html>

www.ibm.com/developerworks/br/library/x-richlayoutepub/#fig1 7/14
 Nenhuma imagem est especificada. Para facilitar o design responsivo, as imagens sero fornecidas no CSS. Apesar de grande parte do desenvolvimento de web responsivo
advogar a adoo de uma estratgia "dispositivo mvel primeiro", pode ser mais fcil comear adaptando o contedo de impresso a uma tela com tamanho de desktop ou
tablet. Para o exemplo, supomos que a visualizao padro uma tela grande. A Listagem 13 mostra o CSS e a Figura 4 mostra o eBook resultante como renderizado em
iBooks em um Apple iPad.

Lista 13. CSS para um layout com tamanho de tablet

@namespace epub "http://www.idpf.org/2007/ops";

body {
font-family: Georgia, serif;
margin: 0;
padding: 0;
}

/* Selecione o <div epub:type> inteiro e aplique

imagens de segundo plano em vrias posies relativas ao texto. */

div[epub|type="chapter"] {
background-image: url('childrens-book-swans.jpg'),
url('childrens-book-flowers.jpg');
background-position: 100% 50%, bottom center;
background-size: 50% auto, auto auto;
background-repeat: no-repeat, repeat-x;
background-color: #fdefc2;

padding: 2em;
}

p{
font-size: .75em;
text-align: left;
}

p:last-child {
padding-bottom: 2em;
}

h1 {
margin-top: 0;
text-transform: uppercase;
font-weight: 200;
}

p > span {
display: block;
}

/* Use o mdulo CSS Selector para aplicar formatao baseada em

regra ao contedo da poesia, gerando linhas alternadas de texto indentado. */

p > span:nth-child(even) {
text-indent: 1em;
}

O exemplo est usando a sintaxe @namespacedo mdulo CSS Namespaces. Namespaces CSS permitem estilizar os elementos e atributos prefixados com namespace.
Apesar de ser necessrio usar namespaces CSS no EPUB 3, conveniente anexar estilos a estes elementos com inflexo semntica do EPUB aplicada (o atributo @epub:type
) em vez de criar classes separadas somente para estilo. O documento HTML deve usa uma extenso .xhtml para a maioria dos navegadores para processar os namespaces
CSS corretamente.

Figura 4. Pgina do livro Abroad renderizada em uma tela com tamanho de tablet

www.ibm.com/developerworks/br/library/x-richlayoutepub/#fig1 8/14
 Com a imagem alinhada direita e grande borda decorativa, o layout na Figura 4 certamente evoca a pgina original satisfatoriamente. Porm, essa disposio no adequada
para um dispositivo mvel em modo retrato, em que a largura ser insuficiente tanto para a imagem quanto para o texto. Para dispositivos mveis, que normalmente possuem
cerca de 480 pixels de largura, possvel substituir diversos elementos, como na Listagem 14. Com o CSS na Listagem 14:

A imagem desses cisnes ser reduzida, se tornar centralizada e aparecer antes do texto. A imagem decorativa na parte inferior diminuir para evitar "sufocar" o
contedo do poema.
O ttulo se tornar menor e centralizado.
O prprio texto do poema estar mais centralizado do que alinhado fortemente esquerda.

Lista 14. CSS para layout vertical com tamanho de telefone

@media screen and (max-width:480px) {

div[epub|type="chapter"] {
background-position: top center, bottom center;
background-size: 30% auto, 50% auto;

padding: 1em;
margin: auto;
text-align: center;
}

h1 {
margin: 50% auto 0 0;
font-size: 1em;
text-align: center;
}

p{
margin-left: 25%;
}
}

A diretiva acima segue o CSS anterior, assim, ela precisa somente substituir as propriedades cujos valores mudaram no novo layout. A Figura 5 mostra o resultado, abrangendo
duas pginas.

Figura 5. Pgina do livro Abroad renderizada em uma tela com tamanho de telefone

www.ibm.com/developerworks/br/library/x-richlayoutepub/#fig1 9/14
 A apresentao estreita funciona bem em um layout vertical, mas um poema curto como este poderia facilmente se ajustarcompletamente estendido na maioria das pginas
horizontais. possvel incluir uma consulta de mdia final para permitir que dispositivos orientados horizontalmente disponham o poema em diversas colunas. Esse recurso faz
parte do mdulo CSS Text e uma parte principal do suporte ao EPUB 3 CSS. O CSS para layout de tamanho de telefone est na Listagem 15.

Lista 15. CSS para layout horizontal com tamanho de telefone

@media screen and (orientation:landscape and max-width:480px) {

div[epub|type="chapter"] {
background-position: 97% 40%, bottom center;
background-size: 20% auto, 50% auto;

/* No momento, temos de usar as verses prefixadas

do fornecedor na maioria dos navegadores */
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;

-webkit-column-gap: 0;
-moz-column-count: 0;
column-gap: 0;

padding: 2em 4em 5em 4em;

}
}

A Figura 6 mostra o resultado renderizado.

Figura 6. Pgina do livro Abroad renderizada em uma tela com tamanho de telefone

Incluindo MathML em publicaes

No EPUB 2, as publicaes podem incluir contedo matemtico somente como imagens de rasterizao ou como SVG. Apesar de a matemtica de SVG poder produzir um
resultado atraente, ela impenetrvel aos leitores de tela e difcil de gravar. As imagens de rasterizao so piores; elas no fornecem acessibilidade nem bom ajuste de escala
em diferentes tamanhos de fonte e exibio.

O EPUB 3 inclui MathML como um tipo de contedo EPUB nativo. A marcao MathML pode ser fornecida sem nenhum fallback para outro tipo, como uma imagem de
rasterizao. Os leitores de EPUB 3 devem suportar pelo menos MathML de apresentao na maioria dos casos.

Ainda que o MathML seja um tipo de contedo principal, necessrio declarar quais pginas XHTML possuem MathML no arquivo OPF, como na Listagem 16.

Lista 16. Declarando Contedo de MathML no Arquivo OPF

www.ibm.com/developerworks/br/library/x-richlayoutepub/#fig1 10/14
 <manifest>
<item href="mathml-style.css" id="css1" media-type="text/css"/>
<item href="mathml.xhtml" properties="mathml"
id="page1" media-type="application/xhtml+xml"/>
<item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/>
<item id="toc" properties="nav"
href="toc.xhtml" media-type="application/xhtml+xml"/>
</manifest>

A Listagem 17 mostra uma equao simples. Apesar de alguns navegadores da web suportarem MathML em um contexto HTML5 (sem namespaces),
http://www.w3.org/1998/Math/MathML.

Lista 17. MathML em documento de contedo EPUB 3

<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:epub="http://www.idpf.org/2007/ops"
xmlns:m="http://www.w3.org/1998/Math/MathML">
<head>
<title>Exemplo de MathML em EPUB 3</title>
<link rel="stylesheet" type="text/css" href="mathml-style.css" />
</head>
<body>

<m:math display="block">
<m:mrow>
<m:mi>x</m:mi>
<m:mo>=</m:mo>
<m:mfrac>
<m:mrow>
<m:mo form="prefix">-</m:mo>
<m:mi>b</m:mi>
<m:mo></m:mo>
<m:msqrt>
<m:msup>
<m:mi>b</m:mi>
<m:mn>2</m:mn>
</m:msup>
<m:mo>-</m:mo>
<m:mn>4</m:mn>
<m:mo> </m:mo>
<m:mi>a</m:mi>
<m:mo> </m:mo>
<m:mi>c</m:mi>
</m:msqrt>
</m:mrow>
<m:mrow>
<m:mn>2</m:mn>
<m:mo> </m:mo>
<m:mi>a</m:mi>
</m:mrow>
</m:mfrac>
</m:mrow>
</m:math>
</body>
</html>

A Figura 7 mostra a sada em iBooks. Pode ser necessrio integrar uma fonte que inclua smbolos matemticos apropriados para todos os tipos de equao a fim de executar
corretamente. Consulte Recursos para obter informaes sobre as Fontes STIX para uso em publicaes cientficas.

Figura 7. Equaes de matemtica simples executadas em EPUB 3

Muitos sistemas que emitem MathML podem usar entidades nomeadas que fazem parte do MathML 1.0 DTD, como &PlusMinus;. preciso converter essas entidades em
entidades numricas antes da incluso em uma publicao do EPUB 3. Como DTDs externos, mesmo para tipos de contedo principal, eles no devem ser includos em
archives do EPUB.

Tpicos para explorar mais

O EPUB 3 oferece muitas opes para desenvolvimento de publicaes nativas digitais avanadas. Os seguintes tpicos podem ser explorados.

Usando a tela HTML5 juntamente com o JavaScript para livros interativos.

Caso esteja interessado na Web Semntica, familiarize-se com as opes de inflexo semntica no Vocabulrio de Semntica Estrutural do EPUB 3.

www.ibm.com/developerworks/br/library/x-richlayoutepub/#fig1 11/14
 As funes de semntica do HTML5 e do Accessible Rich Internet Applications Suite (WAI-ARIA) oferecem um mtodo atraente para enriquecer o contedo para
consumo por dispositivos assistivos ou algoritmos de aprendizagem por mquina.

O EPUB 3 est sendo ativamente estendido. provvel que recursos de novos mdulos CSS, como Regies de CSS, sejam incorporados em revises futuras.

Downloads

Descrio Nome Tamanho Mtodo de download

XSLT and sample files for NCX transformation ncx-to-end.zip 5KB HTTP
A sample EPUB 3 demonstrating advanced CSS3 layout childrens-book-epub.zip 139KB HTTP
A sample EPUB 3 demonstrating MathML mathml-epub.zip 3KB HTTP

Informaes sobre mtodos de download

Recursos

Aprender

Build a digital book with EPUB (Liza Daly, developerWorks, jullho de 2011): Aprenda sobre o formato EPUB em detalhes.

Especificao do EPUB 3: Obtenha uma viso geral da reviso atual do EPUB padro.

Especificao Recomendada do EPUB Publications 3.0: Leia sobre a semntica no nvel de publicao e os requisitos de conformidade do EPUB 3, incluindo o
formato dos Documentos do Pacote e as regras para como esse documento e outros Recursos de Publicao so associadas para criar uma Publicao EPUB em
conformidade.

Vocabulrio de Semntica Estrutural do EPUB 3: Aprenda mais sobre o conjunto de propriedades relacionadas descrio da semntica estrutural de livros gravados.

HTML5 for Publishers (Sanders Kleinfeld, O'Reilly Media, 2011): Obtenha gratuitamente este livro de EPUB que demonstra o uso de interatividade com base em tela e
outros recursos incrveis do EPUB 3.

Design da Web Responsivo por Ethan Marcotte: Explore as tcnicas e os princpios de design do CSS, incluindo grades fludas, imagens flexveis e consultas de mdia.

Iniciante em XML? Obtenha os recursos necessrios para aprender XML.

rea de XML do developerWorks: Localize os recursos necessrios para avanar em conhecimentos na arena XML, incluindo DTDs, esquemas e XSLT. Consulte a
seo Biblioteca tcnica de XML para obter uma faixa ampla de artigos tcnicos e dicas, tutoriais, padres e IBM Redbooks.

Certificao XML da IBM: Descubra como possvel se tornar um Desenvolvedor Certificado pela IBM em XML e tecnologias relacionadas.

Eventos e webcasts tcnicos do developerWorks: Fique por dentro da tecnologia nestas sesses.

Demos On Demand do developerWorks: Acompanhe demos que abrangem desde a instalao de produto e configurao para iniciantes at a funcionalidade avanada
para desenvolvedores experientes.

O developerWorks no Twitter: Entre hoje para seguir os tweets do developerWorks.

Podcasts do developerWorks: Escute entrevistas e debates interessantes para desenvolvedores de software.

Demos On Demand do developerWorks: Acompanhe demos que abrangem desde a instalao de produto e configurao para iniciantes at funcionalidade avanada
para desenvolvedores experientes.

Obter produtos e tecnologias

EpubCheck: Faa o download da verso mais recente do validador para trabalhar com os documentos do EPUB 2 e EPUB 3.

nend: Obtenha o conjunto completo de ferramentas XSLT e Python para converso de arquivos NCX em ENDs.

Fontes STIX: Use o conjunto abrangente de fontes que servem comunidade cientfica e de engenharia.

Verses de avaliao de produto IBM: Faa o download ou explore as verses de teste on-line no IBM SOA Sandbox e entre em contato com as ferramentas de
desenvolvimento de aplicativos e produtos de middleware do DB2, Lotus, Rational, Tivolie WebSphere.

Discutir

perfil do developerWorks: Crie seu perfil hoje e configure uma lista de observao.

Fruns de discusso da zona de XML: Participe de qualquer uma das vrias discusses relacionadas a XML.

A comunidade do developerWorks: Entre em contato com outros usurios do developerWorks e explore os blogs, fruns, grupos e wikis voltados para
desenvolvedores.

Sobre o autor

www.ibm.com/developerworks/br/library/x-richlayoutepub/#fig1 12/14
 Liza Daly Vice-Presidente de Engenharia na Safari Books Online e engenheira de software com experincia em aplicativos da web e publicao digital. Ela fundou a
Threepress Consulting, uma empresa de software de publicao, e em 2010, lanou o Ibis Reader, o primeiro eReader mvel em HTML5. Integra o conselho de administrao
do International Digital Publishing Forum (IDPF), a organizao que patrocina e desenvolve a especificao EPUB eBook.

Fechar [x]

developerWorks: Registre-se
IBM ID:
Precisa de um ID IBM?
Esqueceu seu ID IBM?

Senha:
Esqueceu sua senha?
Alterar sua senha

Mantenha-me conectado.

Ao clicar em Enviar, voc concorda com os termos de uso do developerWorks.

Enviar Cancelar

Na primeira vez que voc efetua sign in no developerWorks, um perfil criado para voc. Informaes selecionadas do seu perfil developerWorks so exibidas ao
pblico, mas voc pode edit-las a qualquer momento. Seu primeiro nome, sobrenome (a menos que escolha ocult-los), e seu nome de exibio acompanharo o
contedo que postar.

Todas as informaes enviadas so seguras.

Fechar [x]

Selecione seu nome de exibio

Ao se conectar ao developerWorks pela primeira vez, criado um perfil para voc e necessrio selecionar um nome de exibio. O nome de exibio acompanhar o
contedo que voc postar no developerWorks.

Escolha um nome de exibio de 3 - 31 caracteres. Seu nome de exibio deve ser exclusivo na comunidade do developerWorks e no deve ser o seu endereo de email
por motivo de privacidade.

Nome de exibio: (Deve possuir de 3 a 31 caracteres.)

Ao clicar em Enviar, voc concorda com os termos de uso do developerWorks.

Enviar Cancelar

Todas as informaes enviadas so seguras.

Mdia de classificao (7 votos)

1 estrela

1 estrela
2 estrelas

2 estrelas
3 estrelas

3 estrelas
4 estrelas

4 estrelas
5 estrelas

5 estrelas

Enviar

Incluir comentrio:

Conectar or registre-se para deixar um comentrio.

www.ibm.com/developerworks/br/library/x-richlayoutepub/#fig1 13/14
 Observao: elementos HTML no so suportados nos comentrios.

Notificar-me quando um comentrio for adicionado1000 caracteres restantes

Postar

Nenhum comentrio postado para esse artigo

Imprimir esta pgina Compartilhe esta pgina Siga o developerWorks

Sobre Feeds Relatar abuso IBM Academic Initiative

Ajuda Termos de uso IBM PartnerWorld

Entre em contato conosco Privacidade Industry Network

Acessibilidade (Ingls)

www.ibm.com/developerworks/br/library/x-richlayoutepub/#fig1 14/14