Algunos libros contienen elementos con dimensiones o posiciones del texto fijas; esto no permite que el tamaño de fuente cambie ni que el formato sea ajustable. Un ejemplo serían los libros de sobremesa o los libros infantiles ilustrados con imágenes a pantalla completa que tienen texto posicionado en relación a la imagen (aunque esto no es exclusivo de este tipo de libros).

Los libros con formato fijo no son compatibles con el texto ajustable y solo se deben utilizar cuando todo el libro se adapte a un formato fijo. Los libros no pueden ser parcialmente de formato ajustables ni parcialmente de formato fijo. Consulte más detalles sobre la creación de este tipo de eBooks con Kindle Kids' Book Creator.

Este formato no admite actualmente la tipografía mejorada.

Importante: Las etiquetas de ancla anidadas no se admiten en libros de formato fijo. Los libros de formato fijo y etiquetas de ancla anidadas se retirarán.

Contenidos

• Pautas de metadatos
• Pautas sobre imágenes de portada
• Pautas sobre texto
• Requisitos de contenido
• Pautas sobre HTML y CSS
• Crear libros de formato fijo con texto emergente y con imágenes de fondo y texto en múltiples páginas

---

Pautas de metadatos

El archivo OPF especifica los metadatos necesarios para libros de formato fijo. Pese a las similitudes, los varios tipos de formatos fijos cuentan con diferencias clave. A menos que se indique explícitamente, no deben aplicarse las instrucciones para libros de formato fijo con texto emergente a cualquier otro formato, como libros de formato fijo con imágenes emergentes o paneles virtuales.

Metadatos	Descripción
El diseño puede especificarse con uno de los siguientes campos de metadatos: 1) <meta property="rendition:layout">prepaginated</meta> 2) <meta name="fixed-layout" content="true"/>	Obligatorio. Identifica si el libro tiene un formato fijo. Los valores válidos de metadatos de rendition:layout son reflowable y pre-paginated. El valor predeterminado es reflowable. Los valores válidos de metadatos para fixed-layout son true y false. El valor predeterminado es false.
<meta name="original-resolution" content="1024x600"/>	Obligatorio. Identifica la resolución de diseño original del contenido (“1024x600” es solo un ejemplo). Las dimensiones del píxel pueden tener cualquier valor positivo entero. Estos valores deben igualar la relación de aspecto global del contenido original.
La orientación puede especificarse con uno de los siguientes campos de metadatos: 1) <meta property="rendition:orientation">lands cape</meta> 2) <meta name="orientation-lock" content="landscape"/> Nota: Actualmente, esto no es compatible con iOS.	Opcional (pero recomendado). Los valores válidos de los metadatos de rendition:layout son portrait, landscape y auto. Esto fija la orientación del libro en modo horizontal o vertical. Si el valor es auto, se admitirá tanto el modo horizontal como el vertical. El valor predeterminado es auto. Los valores válidos de metadatos de orientation-lock son portrait, landscape y none. Esto fija la orientación del contenido en modo horizontal o vertical. Si el valor es none, se admitirá tanto el modo horizontal como el vertical. El valor predeterminado es none.
<meta name="primary-writing-mode" content="horizontal-rl"/>	Opcional. Define el orden de renderización de la página, el modo de lectura y la navegación del lector (como el texto emergente Kindle, la vista de viñeta y los paneles virtuales). Los valores válidos son horizontal-lr, horizontal-rl, vertical-lr y vertical-rl. El comportamiento predeterminado es horizontal-lr cuando la dirección de progreso de la página es de izquierda a derecha o no se ha especificado. Utilice el valor horizontal-rl para configurar la dirección de progreso de la página de derecha a izquierda. Utilice el valor vertical-rl para configurar la dirección de progreso de la página de derecha a izquierda para libros en chino, japonés o coreano.
<meta name="book-type" content="children"/>	Opcional para libros de la categoría infantil y juvenil. Elimina opciones para el lector, como compartir, que quizá no sean relevantes para ciertos eBooks, como los de esta categoría. Los valores válidos son children y comic.

---

Pautas sobre imágenes de portada

Aunque los libros Kindle con formato ajustable no lleven contraportadas, es un elemento que proporciona una sensación de cierre en la narrativa infantil. Le recomendamos que incluya una contraportada como parte del diseño de libros infantiles y juveniles (los libros que no son infantiles y juveniles, y emplean este formato, no deben proporcionar una contraportada). Elimine los códigos de barra, listas de precios y cualquier contenido promocional de la imagen de la contraportada. Se necesita un texto emergente para el texto relacionado con la historia en la contraportada, y se recomienda (si bien no es obligatorio) en otros textos de contraportada.

---

Pautas sobre texto

Los títulos con formato fijo no permiten a los usuarios seleccionar ni cambiar las fuentes del texto. Utilizar @font-face mediante CSS y el empaquetado de fuentes con el libro hacen que el aspecto del título sea coherente y uniforme en todos los dispositivos. Esto permite que las fuentes tipográficas utilizadas en la fuente sean las mismas que en el libro de formato fijo y, sobre todo, que el texto HTML tenga un renderizado más fluido al pasar de la vista de página a la vista de ampliación de la zona.

Ejemplo:

@font-face { font-family: "Arial"; /* asigna el nombre de la fuente que se utilizará */ src: url(../fonts/arial.otf); /* incluye el archivo para la fuente correcta */ }

Consejo sobre accesibilidad: Las fuentes finas son más difíciles de leer y pueden afectar al contraste del texto con el fondo que perciben los lectores. Amazon recomienda que no utilice fuentes finas en el cuerpo del texto de su manuscrito.

---

Requisitos de contenido

Requisito n.º 1: Estructura HTML del archivo

El contenido de formato fijo debe provenir de un único archivo HTML para cada página que se verá en el dispositivo Kindle. Para conseguirlo, emplee una imagen en el archivo HTML o utilice el archivo HTML para pegar dos imágenes y que se vean en una sola página cuando el bloqueo de orientación está fijado en horizontal.

Fijar la orientación vertical:

1 página impresa = 1 archivo HTML

Ejemplo:

Fijar la orientación horizontal:

2 páginas impresas (1 imagen a doble página) = 1 archivo HTML

Ejemplo:

Requisito n.º 2: Ampliación de la zona (elementos emergentes)

El formato fijo no permite al usuario modificar el tamaño de la fuente ya que esto podría confundir sobre la relevancia del texto de la narración. Kindle utiliza una ampliación de la zona (ventanas emergentes) para aumentar el texto sin alterar el diseño original. La imagen al final de esta sección es un ejemplo de la ampliación de la zona.

En los dispositivos con pantalla táctil el usuario puede activar la función de ampliación de la zona pulsando dos veces sobre el "área activa". En el resto de dispositivos, tiene que pulsar la flecha hacia arriba del botón de navegación para seleccionar el área y luego apretar el botón central que activará el texto emergente Kindle o la vista de viñeta. En el modo de ampliación de la zona, el área activa (elemento fuente) queda oculta y solo aparece el área de aumento (elemento objetivo). Cuando un eBook admite la ampliación de la zona, KindleGen detecta automáticamente el código de ampliación de la zona y configura los metadatos de ampliación de la zona en el archivo OPF como "true".

Para que su libro cuente con esta función, siga estos pasos:

1. Establezca el área activa con un elemento ancla HTML bien definido (<a>) alrededor del texto que debe ampliarse. El ancla debe especificar la clase app-amzn-magnify. El ancla tiene que tener los siguientes atributos almacenados en un objeto JSON como parte del valor data-app-amzn-magnify:
   1. "targetId":"<string:elementId>" = ID del elemento único del área de ampliación (la posición y el tamaño de fuente se establecen en el archivo CSS).
   2. "sourceId":"<string:elementId>" = ID del elemento único de la fuente que se ampliará.
   3. "ordinal":<integer:reading order> = orden de lectura de las zonas de ampliación (el orden en que aparecerán las viñetas como parte del flujo de lectura). Esto es necesario en todo el texto que utiliza la función de ampliación de la zona.
2. Cuando se active la ampliación, el texto fuente ya no se visualizará. Crear un elemento objetivo <div> que esté alineado para cubrir totalmente el texto de ampliación y que esté ubicado para minimizar la cobertura de la ilustración de fondo de la página Esto permite que el texto fuente no desaparezca de la vista de la página cuando el usuario active la función de ampliación de la zona. También es importante no colocar un elemento emergente contiguo a los bordes derecho ni inferior de la pantalla. Esto puede causar errores de solapamiento ya que cada dispositivo es diferente. Compruebe el contenido en todos los dispositivos posibles antes de publicar.
3. El tamaño de fuente del texto de la zona de ampliación <div> debe ajustarse a un 150% del tamaño normal de la fuente de la página. Existen algunas excepciones:
   • Cuando el texto de la página es tan grande que ampliarlo a 150% dificulta la lectura en lugar de mejorarla. La ampliación de zona no es necesaria en textos con una altura de al menos 4 mm para contenidos infantiles y juveniles o una altura de al menos 2 mm para contenidos de adultos en un dispositivo de 7".
   • Cuando el texto de la página debe ampliarse a más del 150% para mejorar la legibilidad en la zona de ampliación <div>. Por ejemplo, si el tamaño de fuente del texto de la página es del 45%, el tamaño de fuente del texto en la zona de ampliación <div>, quizá tenga que ampliarse a 225% para facilitar la lectura.

Ejemplo de página con formato fijo

El mismo ejemplo de página con ampliación de la zona activada

Ejemplo:

<div id="fs3-1-org" class="txt fs3-txt1"> <a class="app-amzn-magnify" data-app-amzn-magnify='{"targetId":"fs3-txt1-magTarget", "sourceId":"fs3-1-txt", "ordinal":2}'> <p id="fs3-1-txt">Lorem Ipsum dolor sit amet.</p></a></div> … <div id="fs3-txt1-magTarget" class="target-mag fs3-txt1"></div>

---

Pautas sobre HTML y CSS

Aplicación de un reset de CSS

Al aplicar un reset de CSS a libros con formato fijo, Restablecer el CSS elimina los estilos no uniformes que los navegadores aplican automáticamente, como el tamaño de las fuentes, los márgenes, etc. Añadir un restablecimiento de CSS, como el restablecimiento de YUI, elimina estas irregularidades y permite que los diseñadores construyan una plantilla de estilo fiable.

Archivos CSS para libros de formato fijo

Para aumentar la velocidad de paso de página en libros de formato fijo, es posible dividir los archivos CSS para que cada grupo de páginas HTML cuente con su propio archivo CSS. Los archivos CSS solo deben contener información que esté directamente referenciada por los archivos HTML asociados.

Optimización de contenido para pantalla completa

Los libros Kindle se leen en un gran número de dispositivos como los tablets Fire, teléfonos inteligentes, tablets de otros fabricantes, etc. que ofrecen una amplia variedad de tamaños de pantalla. El Kindle Fire HD 8.9" de 2013 tiene una resolución de 1920 x 1200 píxeles. Si es posible, diseñe contenido que tenga esa relación de aspecto.

Para lograr la máxima calidad de lectura, Amazon recomienda a los editores que elaboren contenido con formato fijo para maximizar el espacio disponible en la pantalla. Si el contenido tiene una relación de aspecto o un tamaño distinto al de la pantalla, los dispositivos y aplicaciones Kindle lo adaptan para que se ajuste a ella, lo centran y lo rodean de un margen blanco (enmarcado).

El contenido de formato fijo y el que contiene muchas imágenes es el que se suele ampliar, ya que los clientes prefieren leer en la vista de viñeta de Kindle o en dispositivos con pantallas grandes. La práctica recomendada es utilizar imágenes con la máxima resolución posible. Amazon recomienda enviar imágenes a escala para ser compatibles con, por lo menos, una ampliación al doble con alta calidad. Por ejemplo, para Kindle Fire HD 8.9 " de 2013, las dimensiones en píxeles de las imágenes deben ser al menos de 3840 x 2400 (esto coincide con la relación de aspecto y es compatible con un aumento al doble). Use siempre Kindle Previewer para verificar la calidad del contenido.

Uso de grandes áreas de pulsación para la ampliación de la zona en libros de formato fijo con texto emergente

El objetivo principal del aumento de zona es permitir la accesibilidad y es más efectivo cuando el área de pulsación es mayor que el área que debe ampliarse. Para habilitar un área mayor, considere la posibilidad de añadir un relleno de entre 20 y 40 píxeles a los elementos del ancla de app-amzn-magnify, siempre evitando que las áreas se solapen.

Utilización del atributo position:absolute en los textos de las imágenes

Los textos de las imágenes deben colocarse en el lugar exacto. Para ello, utilice el atributo position:absolute. Solo lo debe utilizar en aquellos libros que requieren un formato fijo, como libros infantiles y juveniles ilustrados que contengan texto específicamente posicionado en relación la imagen del fondo.

Preparación de contenido con formato fijo con texto emergente para el futuro

Por definición, el formato fijo está pensado para ocupar solo el tamaño de una pantalla. Para que el contenido sea válido en el futuro, Amazon recomienda utilizar píxeles para el tamaño del texto y la posición de los bloques de texto. Especificar el tamaño de la fuente o la posición del texto en porcentajes puede generar fracciones de píxel que se interpreten de forma distinta en los dispositivos.

---

Crear libros de formato fijo con texto emergente y con imágenes de fondo y texto en múltiples páginas

En esta sección explicamos la forma correcta de crear páginas que contengan una única imagen de fondo y texto. Aunque existen muchas soluciones posibles, el objetivo de Amazon es garantizar que el marcado se pueda transferir fácilmente con el mínimo esfuerzo. La plantilla proporcionada cumple este objetivo ya que actualiza las normas de CSS, sin cambiar el HTML.

Utilizar imágenes en paralelo cuando el bloqueo de orientación está fijado en horizontal

Muchos libros tienen un desplegado en horizontal que consiste en una única imagen. Otros libros tienen un desplegado en horizontal con dos imágenes adyacentes.

En el ejemplo que figura a continuación, se muestra un desplegado en horizontal de 1024 x 600 píxeles, que es una resolución de pantalla completa para Kindle Fire (1.ª generación). Las imágenes para cada página deben tener unas dimensiones que sean exactamente la mitad del tamaño de pantalla completa: 512 x 600 píxeles. Las partes únicas de cada elemento se etiquetan utilizando las ID de CSS y las partes comunes utilizan clases de CSS. La imagen de la izquierda aparece en el lado izquierdo de la página. La imagen de la derecha se desplaza hacia la parte de la derecha de la página definiendo un estilo margin-left ajustado al ancho de la imagen del lado izquierdo.

El resultado son dos páginas unidas para formar una sola imagen que se verá en modo horizontal. Esto es diferente al desplegado sintético, donde una página puede verse en modo vertical y dos páginas adyacentes pueden verse en modo horizontal, una característica exclusiva de los libros de tipo cómic.

HTML:

<div class="fs"> <div id="fs9-img" class="lPage"></div> <div id="fs10-img" class="rPage"></div> </div>

CSS:

/* Zona redimensionada para ambas páginas */ #fs9-img { background-image: url("../images/005a.jpg"); background-size:100% 100%; } #fs10-img { background-image: url("../images/005b.jpg"); background-size:100% 100%; } div.fs { height: 600px; width: 1024px; /* 2 x anchura de la página */ position: relative; } div.lPage { position: absolute; background-repeat: no-repeat; height: 600px; width: 512px; /* 1 x anchura de la pantalla */ } div.rPage { position: absolute; background-repeat: no-repeat; height: 600px; width: 512px; /* 1 x anchura de la pantalla / margin-left: 512px; /* este valor es equivalente al valor del ancho de la imagen del lado izquierdo */ }

Posición de los bloques de texto

Especifique la posición y el tamaño de fuente adecuada utilizando porcentajes. Esto permite que la posición se adapte de manera uniforme en distintas resoluciones lo que favorece la compatibilidad con una amplia gama de dispositivos y pantallas. Cada párrafo se debe agrupar con un solo elemento <div>, con múltiples líneas separadas por elementos <br/>. Si se necesita un interlineado personalizado, asígnelo a través de las declaraciones de estilo en CSS en lugar de añadir marcadores como contenedores múltiples <div> o etiquetas adicionales de salto de línea.

Consulte un ejemplo que profundiza en el ejemplo de la página doble e indica cómo colocar texto en la parte superior de una imagen de fondo: el texto está posicionado dentro de un bloque fijo, utiliza porcentajes para el atributo de margen y está alineado y espaciado mediante CSS. El texto emergente no se debe posicionar de modo que cubra el texto de fondo correspondiente.

Alinear texto

De manera predeterminada, el texto se alinea en la esquina superior izquierda del elemento HTML contenedor. Muchos libros pueden contener texto alineado a la derecha, en la parte inferior o justificado. La forma más sencilla de identificar la alineación es imaginar un contorno alrededor del texto e identificar qué bordes del párrafo están asociados con un margen (superior, izquierdo, derecho, inferior).

Nunca utilice caracteres de espacio duro (&nbsp;) en la alineación del texto. En su lugar, utilice elementos <div> en CSS como top (superior), right (derecha), bottom (inferior) y left (izquierda) que contengan texto posicionado de forma absoluta. Utilice dos lados adyacentes para posicionar cada elemento <div>. Puede utilizar, por ejemplo, top y left, pero nunca top, left y bottom. Los valores de CSS text-indent y line-height son útiles a la hora de alinear el texto dentro de los elementos de bloque HTML.