Enfoques para el Diseño Fijo
Existen tres métodos para crear un e-book de diseño fijo:
- 1. Usar HTML y CSS con Posicionamiento Absoluto.
- 2. Usar Imágenes.
- 3. Usar SVG.
Nos centraremos en el primer método, ya que es el más compatible en el mercado. Las soluciones basadas solo en imágenes suelen resultar en una experiencia de usuario insatisfactoria, a menos que la ventana de visualización (el área por la que se ven las páginas en el sistema de lectura) se asemeje estrechamente a las dimensiones del formato impreso. SVG, por ahora, no ha funcionado bien para quienes lo han intentado debido a problemas de rendimiento, soporte limitado en los sistemas de lectura y la dificultad de realizar correcciones. Sin embargo, esto podría cambiar en el futuro, ¡así que mantente al tanto!
Fundamentos Técnicos: La Estructura del Contenido de Diseño Fijo
La multiplicidad de formatos de diseño fijo es un gran problema para editores, distribuidores y proveedores. Idealmente, crearíamos una sola versión de cada título, que pudiera usarse en cualquier dispositivo y venderse por cualquier proveedor.
Mientras tanto, la mayoría de los proveedores coinciden en los fundamentos de cómo deben crearse los archivos EPUB de diseño fijo. Veamos lo que debería funcionar en todas partes.
Contenido del Libro
El método principal para crear un título de diseño fijo es a través del uso de XHTML (EPUB 2) o XHTML5 (EPUB 3), junto con el posicionamiento absoluto en CSS. Una situación muy común es tener:
- 1. Un archivo de imagen de página completa referenciado por el archivo HTML.
- 2. Una capa de texto sobre la imagen.
- 3. CSS para posicionar cada línea de texto exactamente donde se desea.
Veamos un ejemplo de un libro infantil simple.
HTML
```html
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<meta name="viewport" content="width=600, height=600"/>
<meta charset="utf-8"/>
<title>The Earth Book</title>
<link href="css/stylesheet.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="page006">
<img src="images/006.png" alt="Girl with card saying I love you"/>
<p class="p6l1"><span id="s6l1">I use both sides of the paper</span></p>
</div>
</body>
</html>
```
Notas importantes:
- 1. Este ejemplo utiliza el vocabulario EPUB 3 (notable principalmente debido al espacio de nombres EPUB).
- 2. ¡El meta name="viewport" es crucial! Describe el tamaño inicial de la página y debe coincidir con la imagen de fondo, así como con el CSS.
- 3. Todo tiene un ID, lo que nos permitirá dirigirmos a cada línea individual en el CSS.
Imagen
Page_006.png es una imagen de 600 píxeles por 600 píxeles, que coincide con la etiqueta viewport mencionada anteriormente. Es cuadrada para coincidir con el libro original (y, por ende, el arte original).
CSS
Hay mucho en juego aquí, pero veámoslo pieza por pieza.
Elemento body
```css
body {
width: 600px;
height: 600px;
margin: 0;
overflow: hidden;
}
```
Aquí definimos el tamaño de la página para que coincida con nuestro viewport en HTML.
Imágenes
```css
img {
position: absolute;
width: 600px;
height: 600px;
margin: 0;
top: 0;
left: 0;
z-index: -1;
}
```
Todo usa posicionamiento absoluto; z-index permite que el texto se sitúe sobre la imagen.
Texto
```css
p {
position: absolute;
margin: 0;
padding: 0;
font-size: 30px;
font-family: "Parr";
}
.page006 > p {
top: 50px;
left: 110px;
}
```
Esto define las características básicas del texto.
Dado que solo tenemos una línea de texto en esta página, podemos definir la posición de esta manera. Con más líneas, usaríamos una declaración de posicionamiento para cada línea individual.
Diseño Fijo en EPUB 3
Los e-books de diseño fijo no estaban oficialmente soportados en la especificación original de EPUB 3. El posicionamiento absoluto en CSS (necesario para el enfoque de Apple) fue "desalentado", y no había una disposición para los metadatos necesarios para estos tipos de libros. Se estableció un grupo de trabajo ad hoc a finales de 2011 para abordar estos problemas, y una especificación fue aprobada (como un "documento informativo") en marzo de 2012 (http://idpf.org/epub/fxl/). La especificación estandariza los metadatos necesarios para los títulos de diseño fijo; además, especifica cómo definir un diseño fijo, describir la orientación preferida, controlar la creación de spreads y definir las dimensiones del contenido. Esta especificación no recomienda un único enfoque para la construcción de EPUBs de diseño fijo; las propiedades se aplican a libros que usan SVG o imágenes para el contenido, así como al enfoque HTML + CSS de posicionamiento absoluto discutido anteriormente.
Para utilizar la especificación, debes agregar metadatos al (1) archivo de paquete (.opf) y (2) a los documentos de contenido (generalmente .xhtml).
Metadatos del Paquete FXL
Los metadatos del paquete indican al sistema de lectura cómo mostrar el contenido de diseño fijo. Existen cuatro propiedades:
- 1. `rendition:layout` simplemente especifica si el libro es de diseño fijo o no.
- 2. `rendition:orientation` nos permite "bloquear" la orientación de un libro; por ejemplo, para que siempre se muestre en orientación horizontal.
- 3. `rendition:spread` es la más complicada; controla si el sistema de lectura puede "unir" páginas individuales en un spread, como hace ahora iBooks de Apple.
- 4. `page-spread-*` controla la ubicación de una "página" cuando el sistema de lectura está creando spreads. Por ejemplo, podrías usar esto para que la primera "página" aparezca en la mitad derecha de un spread.
**Nota:** Cada una de estas propiedades puede usarse de dos maneras. Cuando se usa en el elemento meta del paquete, la propiedad se aplica al libro completo. Para hacer algo diferente en un archivo individual (también conocido como "ítem del lomo"), usa la propiedad en el `itemref`:
```html
<itemref … properties="rendition:layout-reflowable"/>
```
Esto permitiría incluir una sección refluible en un libro de diseño fijo.
El Prefijo rendition
Para usar las siguientes propiedades en el paquete, debes declarar el prefijo rendition:
```html
<package xmlns="http://www.idpf.org/2007/opf" uniqueidentifier="bookid" version="3.0" prefix="rendition: http://www.idpf.org/vocab/rendition/#">
```
La Propiedad rendition:layout
Si un libro está en diseño fijo, esta propiedad debe estar configurada como “pre-paginated”:
```html
<meta property="rendition:layout">pre-paginated</meta>
```
Si un libro es un e-book refluible regular, puedes omitir esto o usar el valor predeterminado:
```html
<meta property="rendition:layout">reflowable</meta>
```
La Propiedad rendition:orientation
Para "bloquear" la orientación de un dispositivo en horizontal:
```html
<meta property="rendition:orientation">landscape</meta>
```
Para "bloquear" la orientación en vertical:
```html
<meta property="rendition:orientation">portrait</meta>
```
Si cualquiera de las orientaciones funciona, puedes omitir esto o usar el valor predeterminado:
```html
<meta property="rendition:orientation">auto</meta>
```
**Nota:** La propiedad tendrá sentido solo cuando el dispositivo de lectura pueda responder a un cambio en su orientación, como con un iPad.
La Propiedad rendition:spread
Las implementaciones actuales presentan un dilema en su enfoque contradictorio a los spreads. iBooks de Apple hace algo interesante: toma dos archivos de contenido separados y los muestra uno al lado del otro en orientación horizontal. Esencialmente, iBooks te pide que crees páginas individuales (una página por archivo HTML) y luego construye spreads a partir de esos archivos. El formato básico KF8 de Amazon (que no es EPUB 3) te pide que crees un spread en cada archivo y luego simplemente muestra ese único archivo en pantalla.
Entonces, ¿cómo indicamos al sistema de lectura cuándo es aceptable crear estos “spreads sintéticos”? Este es el propósito de la propiedad `rendition:spread`. Hay cinco valores posibles para esta propiedad:
- 1. `none` significa que el sistema de lectura nunca intentará crear un spread a partir de archivos de contenido individuales.
- 2. `auto` deja que el sistema de lectura decida.
- 3. `both` indica al sistema de lectura que siempre ensamble documentos de contenido en spreads, independientemente de la orientación del dispositivo de lectura.
- 4. `landscape` indica al sistema de lectura que ensamble documentos de contenido en spreads solo cuando el dispositivo esté en orientación horizontal.
- 5. `portrait` indica al sistema de lectura que ensamble documentos de contenido en spreads solo cuando el dispositivo esté en orientación vertical.
En este momento, Amazon y iBooks parecen seguir las convenciones especificadas aquí.
Ejemplo de Metadatos EPUB 3
```html
<metadata xmlns="http://www.idpf.org/2007/opf" xmlns:rendition="http://www.idpf.org/vocab/rendition/#">
<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:orientation">auto</meta>
<meta property="rendition:spread">both</meta>
</metadata>
```
Contenido XHTML
La Propiedad page-spread-* y Enlace HTML
Es posible usar la propiedad `page-spread-*` en cualquier archivo de contenido (XHTML) para ajustar cómo se visualiza una página en un spread. `page-spread-left` y `page-spread-right` especifican si una página está a la izquierda o a la derecha de un spread.
Para la propiedad `page-spread-*`:
```html
<meta property="page-spread-left">right</meta>
<meta property="page-spread-right">left</meta>
```
Ejemplo de Un Archivo de Contenido XHTML
```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<meta charset="utf-8"/>
<title>Title Page</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="page001">
<img src="images/001.png" alt="Title Page"/>
<p class="p1l1"><span id="s1l1">The Earth Book</span></p>
</div>
</body>
</html>
```
Nota Final
Cada uno de los enfoques tiene sus propios pros y contras. La elección de la metodología depende del contenido, el público objetivo y los requisitos específicos del proyecto. ¡Esperamos que esta guía te haya proporcionado una comprensión sólida para comenzar con la creación de e-books de diseño fijo!
