Crie Publicações com Layout Rico em EPUB 3 com HTML5, CSS3 e MathML

Explore o padrão eBook aberto de próxima geração para layout e tipografia avançados

O EPUB 3.0, a revisão mais recente do formato de e-book XML padrão 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 serialização XHTML e incluir vocabulários XML complementares, como MathML e SVG. Oferece uma variedade de opções para desenvolvimento de publicações originalmente digitais avançadas. Neste artigo, aprenda a criar páginas de layout rico usando alguns dos novos recursos em EPUB 3.

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

Photo of Liza DalyLiza Daly é Vice-Presidente de Engenharia na Safari Books Online e é engenheira de software com experiência em aplicativos da web e publicação digital. Ela fundou a Threepress Consulting, uma empresa de software de publicação, e em 2010, lançou o Ibis Reader, o primeiro eReader móvel em HTML5. Integra o conselho de administração do International Digital Publishing Forum (IDPF), a organização que patrocina e desenvolve a especificação EPUB eBook.



06/Abr/2012

Introdução

O EPUB é um formato XML para livros digitais e publicações de fluxo controlável 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 são compactados sob uma estrutura bem-definida. Cada componente tem sua própria especificação, unida sob o rótulo de EPUB comum:

Especificação de contêiner
Define o método pelo qual um documento de EPUB é compactado.
Publicação de EPUB
Inclui todos os metadados sobre o conteúdo do eBook, tais como: o manifesto do pacote, título básico, metadados de autor e definições—em EPUB 3—de quais recursos avançados a publicação espera suportar, como JavaScript ou MathML. Isso é chamado de arquivo de Formato de Contêiner Aberto.
Documentos de conteúdo EPUB
Os arquivos XHTML e CSS reais que compõem o conteúdo da publicação. Documentos de conteúdo também incluem recursos binários, como imagens, multimídia e, possivelmente, documentos XML definidos externamente.

Abreviações usadas frequentemente

  • CSS: Folhas de estilo em cascata
  • DTD: Definição do tipo de documento
  • HTML: Linguagem de Marcação de Hipertexto
  • JAR: Java archive
  • OPF: Formato de Compactação Aberta
  • SVG: Scalable Vector Graphics
  • XHTML: Linguagem de Marcação de Hipertexto Extensível
  • XML: Linguagem de marcação extensível
  • XSLT: Transformação de Linguagem de Folha de Estilo Extensível

Este artigo explora alguns dos recursos do EPUB 3. Você aprenderá sobre validação de documentos em EPUB 3, navegação e hierarquia, bem como diretrizes de desenvolvimento. Um exemplo percorre o processo de adaptação de uma página de um livro infantil para o EPUB 3. Também aprenderá como incluir MathML em publicações.

Faça o download dos exemplos usados neste artigo.

Pré-requisitos

O código de amostra e os exemplos deste artigo supõem uma familiaridade básica com a especificação EPUB 2 e as publicações baseadas em XML em geral. Consulte Recursos para detalhes sobre o EPUB 2.


Mudanças no EPUB 3

O EPUB 2 fornece todos os recursos de formatação e layout do HTML4 e CSS2, o que é mais do que suficiente para publicações de textos pesados. Porém, os publicadores e autores descobriram que o EPUB 2 não conseguia manipular muitos tipos de conteúdo e casos de uso, como livros multimídia, livros com layout complexo, publicações matemáticas e documentos interativos. O IDPF e a comunidade de eBook liberaram a especificação 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. Porém, muitos sistemas de leitura escritos usando mecanismos de navegador de HTML5, como o WebKit, suportam a maior parte da especificação de Documentos de Conteúdo do EPUB 3. Recomenda-se o uso de um navegador recente com base em um mecanismo de renderização HTML moderno para testar e desenvolver documentos EPUB 3.

Este artigo inclui técnicas para criar polyfills inofensivos (shims) a fim de produzir saída compatível com o EPUB 3 mesmo sem um sistema de leitura EPUB 3 integral.

Importantes mudanças do EPUB 2 para o EPUB 3 incluem:

  • O esquema exigido para documentos com conteúdo EPUB 3 mudou do XHTML 1.1 para a serialização XHTML do HTML5. A inclusão dos elementos de multimídia do HTML5 foi uma exigência fundamental (<vídeo>, <áudio>e <canvas>).
  • A faixa permitida de CSS em documentos com conteúdo EPUB 3 se expandiu de um subconjunto de CSS2.1 para um conjunto de módulos maduros do CSS3 relevante à criação do documento.
  • O MathML foi incluído no XHTML5 e SVG como um tipo de conteúdo de primeira ordem.
  • O suporte para fontes integradas agora é exigido pelos sistemas de leitura que possuem porta de visualização CSS. O Web Open Font Format foi incluído como um formato de fonte aceitável.
  • Suporte explícito para modos e scripts de gravação não ocidentais, incluindo layout vertical em japonês e outros scripts asiáticos.
  • Suporte opcional para interatividade mediada por JavaScript usando um modelo de segurança customizado.
  • Metadados permitidos em documentos de publicação foram expandidos, incluindo algum suporte para Resource Description Framework–in–attributes (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 serializações XML para a maioria dos tipos de conteúdo, ele é responsável pela validação automática. A ferramenta EpubCheck é o método canônico de testar a validade e conformidade de documentos do EPUB. O EpubCheck é uma biblioteca de software livre Java(licenciada pelo Berkeley Software Distribution)™ . Uma versão de visualização de desenvolvedor está disponível para uso com documentos EPUB 3 e é usada por todo este artigo. Consulte Recursos para obter links para a versão mais recente.

É altamente recomendável que a extensão .xhtml seja usada para todos os documentos de conteúdo do EPUB. Os navegadores não interpretarão o conteúdo HTML como application/xhtml+xml sem essa extensão. O modo de processamento XML é necessário 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 Versão 3.0b3

Nenhum erro ou aviso detectado.

Caso seja exibido o erro java.lang.NoClassDefFoundError: com/thaiopensource/validate/SchemaReader na resposta, certifique-se de que o diretório lib/ que acompanha a distribuição do EpubCheck esteja no mesmo diretório 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 relação a um único tipo de arquivo
$ java -jar ~/src/epubcheck-3.0b3.jar sample-toc.xhtml -mode nav
Epubcheck Versão 3.0b3

AVISO: sample-toc.xhtml: 
O arquivo é validado como um único tipo de arquivo nav e versão 3! 
Somente um subconjunto de testes disponíveis é executado!
Nenhum erro ou aviso detectado.

Navegação e hierarquia em documentos do EPUB 3

Ainda que o arquivo NCX TOC em EPUB 2 suportasse um rico conjunto de marcação para navegação hierárquica e mapeamento de página, ele seria derivado do Digital Talking Book (uma especificação para produzir eBooks acessíveis à impressão desativada)do Digital Accessible Information System (DAISY). Reliance no formato DAISY bem especificado se destinava ao fácil desenvolvimento de leitores de eBook que pudessem suportar uma rica acessibilidade. Nesse sentido, o NCX foi bem executado. Porém, o NCX DTD é bem grande e inclui recursos não relevantes ao EPUB 2. A confusão quanto a quais partes do NCX eram necessárias no EPUB resultou em fragmentação indesejável e extensões 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 são fornecidos usando o namespace do EPUB (http://www.idpf.org/2007/ops).

Lista 2. Um END mínimo
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:epub="http://www.idpf.org/2007/ops">
  <head>
    <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 é necessário (como é o epub:type valor toc).

Declarando o END

Inclua o END em uma publicação declarando oitem no manifesto com ovalor de propriedades 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 inclusão de um arquivo END é necessária no EPUB 3. Também é possível incluir um arquivo NCX para compatibilidade reversa, mas os processadores de EPUB 3 devem ignorar o NCX em favor do END.

Apresentação visual do END

Diferentemente do NCX, é possível incluir o END no fluxo do conteúdo do livro. No EPUB 2, caso desejasse mostrar um TOC customizado aos usuários (em vez de contar com o suporte de TOC integrado no eReader), seria preciso produzir duas cópias do mesmo conteúdo:—uma no NCX e outra como um documento de conteúdo HTML. O END elimina essa duplicação e permite bastante flexibilidade na apresentação de parte ou de todo o TOC no fluxo de conteúdo.

Para incluir o END no fluxo de conteúdo, 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 documentação técnica, é possível incluir todos os níveis da seção em um TOC puramente funcional enquanto mostra somente as seções de primeiro ou segundo níveis aos usuários no fluxo de conteúdo. Isso é feito usando o atributo oculto de HTML5, como na Listagem 5, em quaisquer elementos que devem ser removidos da apresentação aos usuários.

Lista 5. Removendo subseções da apresentação 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 não seria possível fazer isso usando a propriedade display: none do CSS? Como o EPUB é usado em uma variedade de sistemas de leitura, incluindo leitores de tela não visuais ou dispositivos em Braille, nem todos os leitores precisam suportar o CSS. A maioria dos navegadores da web modernos suporta ocultos nativamente. É melhor incluir o CSS para configurar a propriedade de exibição desses elementos de modo explícito, como na Listagem 6. Como o arquivo END é apenas outro arquivo HTML, é possível incluir o CSS no cabeçalho HTML assim como com qualquer outra folha de estilo, .

Lista 6. Configurando a propriedade de exibição
/* Nunca exiba elementos com o atributo oculto */ *[hidden] {
  display: none;
}

Em sistemas de leitura ou navegadores incompatíveis, a ausência de estilo para o atributo oculto resulta na exibição de todas as subseções, como na Figura 1.

Figura 1. END TOC sem atributo oculto ou CSS
END TOC sem atributo oculto ou CSS

Em navegadores que suportam ocultos ou após a aplicação do shim CSS, a saída é transformada, como na Figura 2.

Figura 2. O END TOC com atributo oculto aplicado
O END TOC com atributo oculto aplicado

Por padrão, a lista ordenada HTML produz um conjunto de listas numeradas. Porém, a especificação END declara, " . . . o estilo de exibição padrão de itens da lista deve ser equivalente a CSS list-style: none." Para conseguir essa apresentação, 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 numeração 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 opções de layout e controle, caso esteja migrando de um fluxo de trabalho EPUB 2 para EPUB 3, considere começar convertendo a partir de documentos NCX existentes. Como os dois documentos, de entrada e de saída, são XML, esse é um aplicativo perfeito para XSLT.

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

Lista 8. Declare os namespaces necessários 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 inclusão obrigatória do namespace http://www.idpf.org/2007/ops , que é normalmente prefixado com epub. Inclua esse namespace principalmente para suportar a inflexão semântica do EPUB (significado adicional sobre o propósito específico que um elemento possui em um documento de conteúdo do EPUB). Caso utilize o EPUB 3, incentivamos o uso da expressividade disponível no Vocabulário Semântico Estrutural a fim de fornecer contexto para o software de acessibilidade, como também para processamento de máquina. Consulte Recursos para obter informações sobre os valores incluídos neste vocabulário.

Para um exemplo completo mostrando a conversão de outros tipos de mapa de página, consulte o aplicativo de software livre nend listado em Recursos.

Com a estrutura de tópicos básica em vigor, comece a percorrer o TOC hierárquico no NCX e nos elementos XHTML correspondentes de saída. Apesar de o NCX permitir diversos tipos diferentes de listas de páginas, os livros EPUB normalmente incluem somente o ncx:navMap. O extrato de modelo na Listagem 9 mostra como emitir um conjunto de nós do ncx:navMap.

Lista 9. Emitindo o navMap
...
  <!-- Gere um elemento nav completo e uma sublista do navMap,
       depois faça recursão pelos nós -->
  <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 conteúdo -->
      <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 nós contêm somente texto --> <xsl:template match="ncx:navLabel|ncx:text">
    <xsl:apply-templates/>
  </xsl:template>
...

A Listagem 10 fornece um exemplo de um NCX hierárquico.

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>
      </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 saída da Listagem 11 abaixo. É possível fazer o download dos arquivos de exemplo.

Lista 11. Resultado da transformação 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 @id são preservados do arquivo original, é preciso gravar ferramentas de validação para assegurar que todos os nós originais sejam captados. Outras opções de transformação adicional incluem:

  • Atualização dos metadados no arquivo OPF a partir do antigo esquema Dublin Core para o metaesquema @property , conforme definido na especificação das Publicações 3.0 (consulte Recursos).
  • Migrando o conteúdo do guia do OPF descontinuado para o recurso de referências no END.
  • Removendo referências no spine do OPF para o arquivo NCX (a menos que esteja produzindo um documento com compatibilidade reversa).

Normalmente, não é necessário modificar o conteúdo XHTML 1.1 para produzir documentos com conteúdo compatível com EPUB 3. No entanto, quando as informações semânticas estiverem disponíveis, como na extração de um sistema de gerenciamento de conteúdo ou outro repositório de documentos, considere aplicar a inflexão semântica à saída. A especificação EPUB 3 possui mais informações sobre inflexão semântica (consulte Recursos).


As Diretrizes de Desenvolvimento do EPUB 3

Até que os sistemas de leitura do EPUB 3 estejam disponíveis, seria prematuro recomendar melhores práticas específicas. Porém, o EPUB 3 se baseia no amadurecimento rápido de tecnologias da web. Já existem informações suficientes para fazer amplas recomendações sobre como usar as tecnologias subjacentes e quando usar as melhores práticas existentes para produzir marcação sólida, semântica e acessível.

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 semânticos e metadados enriquecidos no EPUB 3 enquanto ainda produz documentos que sejam legíveis em eReaders mais antigos. Na prática, pode não ser possível vender esse conteúdo em alguns mercados de trabalho de eBook; eles podem não aceitar o EPUB 3 devido a regras de negócios. Entretanto, pode-se esperar o funcionamento da "transferência local" desse conteúdo para a maioria dos sistemas de leitura compatível com o EPUB 2. O EPUB 3 também 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 válidos.

Muitos sistemas de leitura já suportam um tipo de "EPUB 2.5", no qual a marcação HTML5 é permitida (especialmente quanto aos elementos de vídeo, á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 conteúdo EPUB 3. Assim como com qualquer conteúdo da web de ponta, teste o seu conteúdo no máximo de leitores possíveis antes do release.

Design de eBook Responsivo

O módulo CSS3 Media Query é um novo componente incrível do EPUB 3. O Media Query permite que os autores especifiquem que um conjunto de regras e propriedades se aplique somente a uma condição de visualização particular, normalmente baseado no tamanho da porta de visualização. Também é possível usar o Media Query para prever proporções de altura e largura específicas, como retrato versus paisagem.

Esses recursos já estão em uso em alguns websites para fornecer experiências de usuário aprimoradas em dispositivos móveis. Considerados juntos, esses princípios são chamados de design da web responsivo. As técnicas provaram ser efetivas na web e, em algumas maneiras, elas são ainda mais aplicáveis aos designers de livros. Os designers de livros se baseiam em décadas de pesquisa e experimentação em como efetivamente apresentar as informações visuais em vários tamanhos e orientações. (Consulte Recursos para saber mais sobre design responsivo da web.)

A maioria dos eBooks é puramente ou primariamente texto. Porém, muitos tipos de publicação requerem layout mais rico por razões de marketing ou devido à natureza essencial do conteúdo. Livros com uso intensivo de layout foram considerados candidatos ruins para conversão de eBook, mas o EPUB 3 e seu uso de HTML5 e CSS3 possibilitam design avançado. Contudo, com grande poder, vêm grandes responsabilidades. Não é possível negligenciar usuários em dispositivos móveis que desejam ler o conteúdo facilmente e ainda ter layouts atraentes. É aqui que as técnicas combinadas de layout do CSS3 e design de eBook responsivo se juntam.


Layout avançado e responsivo no EPUB 3

Livros ilustrados, livros de receitas, livros didáticos e de poesia eram difíceis de converter para conteúdo com refluxo. Nesta seção, veja como adaptar a página de um livro de poesias para crianças, na A figura 3em um EPUB 3. A palavra adaptar foi usada no lugar de converter, porque o processo é muito mais artístico do que técnico.

Figura 3. Uma página de Abroad de Thomas Crane (imagem de domínio público da Internet Archive)
Uma página de Abroad de Thomas Crane (imagem de domínio público da Internet Archive)

A abordagem é capturar o texto como XHTML e depois extrair algumas das imagens para evocar—, mas não reproduzir—o layout original. Como o EPUB 3 assume um contexto de processamento XHTML5/CSS3, é possível usar marcação semântica mínima em vez de acomodar muitos navegadores de legado, como você faria na web aberta. A Listagem 12 mostra a marcação XHTML para o conteúdo.

Lista 12. Marcação 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>

Nenhuma imagem está especificada. Para facilitar o design responsivo, as imagens serão fornecidas no CSS. Apesar de grande parte do desenvolvimento de web responsivo advogar a adoção de uma estratégia "dispositivo móvel primeiro", pode ser mais fácil começar adaptando o conteúdo de impressão a uma tela com tamanho de desktop ou tablet. Para o exemplo, supomos que a visualização padrão é 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 várias posições 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 módulo CSS Selector para aplicar formatação baseada em
regra ao conteúdo da poesia, gerando linhas alternadas de texto indentado. */

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

O exemplo está usando a sintaxe @namespace do módulo CSS Namespaces. Namespaces CSS permitem estilizar os elementos e atributos prefixados com namespace. Apesar de ser necessário usar namespaces CSS no EPUB 3, é conveniente anexar estilos a estes elementos com inflexão semântica do EPUB aplicada (o atributo @epub:type ) em vez de criar classes separadas somente para estilo. O documento HTML deve usa uma extensão .xhtml para a maioria dos navegadores para processar os namespaces CSS corretamente.

Figura 4. Página do livro Abroad renderizada em uma tela com tamanho de tablet
Página do livro Abroad renderizada em uma tela com tamanho de tablet

Com a imagem alinhada à direita e grande borda decorativa, o layout na Figura 4 certamente evoca a página original satisfatoriamente. Porém, essa disposição não é adequada para um dispositivo móvel em modo retrato, em que a largura será insuficiente tanto para a imagem quanto para o texto. Para dispositivos móveis, que normalmente possuem cerca de 480 pixels de largura, é possível 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 conteúdo do poema.
  • O título se tornará menor e centralizado.
  • O próprio 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 páginas.

Figura 5. Página do livro Abroad renderizada em uma tela com tamanho de telefone
Página do livro Abroad renderizada em uma tela com tamanho de telefone

A apresentação estreita funciona bem em um layout vertical, mas um poema curto como este poderia facilmente se ajustarcompletamente estendido na maioria das páginas horizontais. É possível incluir uma consulta de mídia final para permitir que dispositivos orientados horizontalmente disponham o poema em diversas colunas. Esse recurso faz parte do módulo 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 versões 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. Página do livro Abroad renderizada em uma tela com tamanho de telefone
Página do livro Abroad renderizada em uma tela com tamanho de telefone

Incluindo MathML em publicações

No EPUB 2, as publicações podem incluir conteúdo matemático somente como imagens de rasterização ou como SVG. Apesar de a matemática de SVG poder produzir um resultado atraente, ela é impenetrável aos leitores de tela e difícil de gravar. As imagens de rasterização são piores; elas não fornecem acessibilidade nem bom ajuste de escala em diferentes tamanhos de fonte e exibição.

O EPUB 3 inclui MathML como um tipo de conteúdo EPUB nativo. A marcação MathML pode ser fornecida sem nenhum fallback para outro tipo, como uma imagem de rasterização. Os leitores de EPUB 3 devem suportar pelo menos MathML de apresentação na maioria dos casos.

Ainda que o MathML seja um tipo de conteúdo principal, é necessário declarar quais páginas XHTML possuem MathML no arquivo OPF, como na Listagem 16.

Lista 16. Declarando Conteúdo de MathML no Arquivo OPF
  <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 equação 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 conteúdo 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 saída em iBooks. Pode ser necessário integrar uma fonte que inclua símbolos matemáticos apropriados para todos os tipos de equação a fim de executar corretamente. Consulte Recursos para obter informações sobre as Fontes STIX para uso em publicações científicas.

Figura 7. Equações de matemática simples executadas em EPUB 3
Equações de matemática 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 numéricas antes da inclusão em uma publicação do EPUB 3. Como DTDs externos, mesmo para tipos de conteúdo principal, eles não devem ser incluídos em archives do EPUB.


Tópicos para explorar mais

O EPUB 3 oferece muitas opções para desenvolvimento de publicações nativas digitais avançadas. Os seguintes tópicos podem ser explorados.

  • Usando a tela HTML5 juntamente com o JavaScript para livros interativos.
  • Caso esteja interessado na Web Semântica, familiarize-se com as opções de inflexão semântica no Vocabulário de Semântica Estrutural do EPUB 3.
  • As funções de semântica do HTML5 e do Accessible Rich Internet Applications Suite (WAI-ARIA) oferecem um método atraente para enriquecer o conteúdo para consumo por dispositivos assistivos ou algoritmos de aprendizagem por máquina.

O EPUB 3 está sendo ativamente estendido. É provável que recursos de novos módulos CSS, como Regiões de CSS, sejam incorporados em revisões futuras.


Downloads

DescriçãoNomeTamanho
XSLT and sample files for NCX transformationncx-to-end.zip5KB
A sample EPUB 3 demonstrating advanced CSS3 layoutchildrens-book-epub.zip139KB
A sample EPUB 3 demonstrating MathMLmathml-epub.zip3KB

Recursos

Aprender

Obter produtos e tecnologias

  • EpubCheck: Faça o download da versão 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 conversão de arquivos NCX em ENDs.
  • Fontes STIX: Use o conjunto abrangente de fontes que servem à comunidade científica e de engenharia.
  • Versões de avaliação de produto IBM: Faça o download ou explore as versões 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®, Tivoli®e WebSphere®.

Discutir

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Software livre
ArticleID=808248
ArticleTitle=Crie Publicações com Layout Rico em EPUB 3 com HTML5, CSS3 e MathML
publish-date=04062012