Manual para la correcta maquetación de ePubs, escrito por y para los miembros de la comunidad del Proyecto Scriptorium.

En este tercer tomo se abordará un nivel más avanzado de maquetación, concretamente lo relacionado con los lenguajes HTML y CSS. Aquí, el editor podrá consultar desde la incorporación de distintos tipos de imágenes, a la colocación de fuentes, letras capitales, formatos varios y en general, cualquier tipo de estructura de aparición frecuente en un libro, tanto de ficción como de no ficción.

Todos los códigos aquí presentados han pasado el banco de pruebas y por tanto su compatibilidad y correcta visualización en la gran mayoría de lectores está garantizada.

Si consideras que el Manual no abarca algún tema necesario, que en su redacción cierto punto no ha sido abordado con la suficiente claridad, que no es correcto o que tienes un método mejor de trabajo, por favor, ponte en contacto con la editora responsable: Fénix.

Proyecto Scriptorium

Aprende a maquetar III: Código Avanzado

Manual para maquetar libros electrónicos - 3

ePub r3.0

Fénix 22.10.2018

Título original: Aprende a maquetar: Código avanzado

Proyecto Scriptorium, 2013

Edición revisada y actualizada, 2018

Diseño de cubierta: Diseñador

Editora responsable: Fénix

ePub base r2.0

A todos los editores,

del pasado, presente y futuro.

FÉNIX

¿Cómo usar este manual?

Este tercer tomo está orientado a proporcionar a los editores códigos HTML y CSS útiles y ampliamente testados, de forma que puedan fácilmente pasar los formatos de sus ediciones en papel al formato electrónico.

En ningún momento se ha pretendido que este tomo sea leído de principio a fin, sino que el editor avanzado pueda, en un momento dado, localizar aquel punto concreto que necesita utilizar y no tiene claro como conseguir.

Para facilitar su uso se han elaborado dos métodos de organización complementarios:

Una TOC realmente amplia que permite localizar casi cada detalle del contenido.

Un Índice temático que recoge buena parte de los contenidos más interesantes.

Es imprescindible haber leído y dominado el primer tomo, Manual básico, antes de profundizar en la parte avanzada.

Todos los códigos y fuentes utilizados en nuestros ePubs deben ser correctamente visualizados en la mayoría de los lectores. Si tienes dudas, debes pasar el código por el banco de pruebas. En el caso de las fuentes, existe un listado disponible en el foro, y si utilizas una que no esté en él, es obligatorio testarla.

HTML AVANZADO

Introducción

Uno de los puntos más importantes a tener en cuenta respecto al uso de las etiquetas HTML es que no definen cómo se va a ver el texto, sino que marcan cual es la función que tiene. Existen etiquetas para encabezados, párrafos, citas, listas, tablas, etc. Algunos dispositivos no soportan algunas, y otros soportan todo lo que le pongan por delante. Pero básicamente son las etiquetas las que aseguran que el texto se vea correctamente según la estructura que le asignemos.

Otra cosa es el aspecto del texto. Más allá de lo básico, de la función que le asignamos con el HTML, usamos el CSS para retocar y que quede más a nuestro gusto, aunque sabemos por experiencia que existen muchos dispositivos que aplican su propio CSS o simplemente lo ignoran. De ahí que se recomiende, siempre que sea posible, dar preferencia a las etiquetas frente al CSS.

NOTA: Una forma de comprobar si el texto que se está maquetando mantiene una estructura que lo haga legible sin importar el medio o dispositivo es eliminar del encabezado del capítulo los enlaces a los CSS. Notarás lo que se pierde y lo que no. Si la estructura de encabezados, párrafos, citas, etc se mantiene, el ePub va por buen camino y se está maximizando la compatibilidad del libro respecto a cualquier software que sea usado por los lectores de ahora o en el futuro.

En el Tomo I: Manual básico ya vimos las etiquetas más habituales que se pueden encontrar en todos los ePubs. A continuación, explicaremos en detalle aquellas de uso más específico.

Si estás interesado en hacer algo concreto y no sabes la etiqueta que lo hace, o bien has visto una etiqueta que no sabes para qué sirve, puedes preguntar en el foro o consultar páginas como las siguientes (en inglés):

www.quackit.com

www.w3schools.com

Ante cualquier código dudoso o nuevo, debe pasarse la prueba de código en los todos los lectores del banco de pruebas del foro.

Tipos de elementos en HTML

El modelo de cajas

HTML define una estructura en la cual hay un elemento matriz, el <body>, que delimita el cuerpo de la página y contiene a todos los elementos que le dan forma (es la parte del documento XHTML que se muestra). Pero a su vez, cada uno de estos elementos puede contener a otros elementos, y así sucesivamente.

A la hora de interpretar el código para representar la información, hay unas reglas predefinidas que determinan el diseño del documento XHTML: el modelo de cajas.

El modelo de cajas es el comportamiento de CSS que hace que todos los elementos HTML (párrafos, imágenes, tablas, etc.) se representen mediante cajas rectangulares que encierran los contenidos de ese elemento, y que se crean de manera automática cada vez que se inserta una etiqueta HTML.

Cada una de estas cajas puede tener un borde que la delimita, un relleno interior y un margen externo. La siguiente imagen muestra cómo se construye este modelo:

En principio estas cajas son invisibles, dado que no muestran ningún borde ni ningún color o imagen de fondo (valores por defecto). Pero sobre estas cajas actúan los estilos CSS, mediante los cuales se puede definir su aspecto al contar con opciones detalladas en lo referente al ajuste de la anchura y altura de cada caja, el espacio de relleno interior (padding) que muestra cada una, y el margen de separación existente entre distintas cajas. Así mismo, CSS también permite controlar la forma en la que se visualizan estas cajas: se pueden ocultar o desplazar respecto de su posición original, entre otros.

Las particularidades de cada caja varían en función del tipo de elemento que sea (como se verá en el apartado siguiente, básicamente pueden ser de dos tipos: de bloque o en línea), así como las propiedades CSS que admiten y el cómo se relacionan o influyen con las otras cajas adyacentes.

Las partes que componen cada caja y su orden de visualización son las siguientes:

Contenido (content): Se trata del contenido HTML del elemento, aquello que se quiere mostrar al visualizar el elemento (un texto, una imagen, una lista de elementos, etc.). Tiene forma de caja rectangular, y es posible establecer sus dimensiones (anchura/altura) mediante las propiedades CSS «width» y «height».

Relleno (padding): Espacio que se puede dejar opcionalmente entre el contenido y el borde. No tiene color, pero es transparente y permite ver el color o imagen de fondo, si están definidos.

Borde (border): Línea que encierra completamente el contenido y su relleno.

Imagen de fondo (background image): Imagen (opcional) que se muestra por detrás del contenido y el espacio de relleno.

Color de fondo (background color): Color (opcional) que se muestra por detrás del contenido y el espacio de relleno.

Margen (margin): Espacio o margen de separación que puede dejarse opcionalmente entre el borde del elemento y el borde del resto de cajas adyacentes. No forma parte de la caja. El margen no tiene color, pero es transparente y permite ver el color o imagen de fondo de su elemento padre (el elemento que lo contiene), si están definidos.

Si para una caja se define un color y una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza, aunque si la imagen tiene partes transparentes o es de un tamaño tal que no ocupa la caja del elemento en su totalidad, en esas zonas también se visualizará el color de fondo.

La anchura y altura establecida con CSS («width» y «height») siempre hace referencia a las dimensiones del contenido, pero la anchura y altura total del elemento debe tener en cuenta además los valores del resto de partes que componen la caja (el margen, el relleno y los bordes).

El modelo de cajas es una de las características más importantes del lenguaje CSS, porque condiciona el diseño de la página (documento XHTML). Al igual que los elementos que las definen, las cajas pueden estar anidadas, unas dentro de otras, lo cual puede crear un sistema bastante complejo para dar forma a la página en lo que respecta a la estructura y representación del contenido.

Tipos de elementos en HTML

El lenguaje HTML clasifica a todos los elementos en dos grandes grupos: elementos en línea (inline) y elementos de bloque (block). Estos dos tipos de elementos difieren fundamentalmente en dos aspectos:

La principal diferencia radica en la forma en la que ocupan el espacio disponible en la página. Mientras que los elementos de bloque provocan un salto de línea antes y otro después de los contenidos del elemento, los elementos en línea no suelen provocar un salto.

En segundo lugar, los elementos de bloque pueden contener elementos en línea y algunos de ellos también a otros elementos de bloque. Los elementos en línea solo pueden contener texto u otros elementos en línea, pero no elementos de bloque.

Por otro lado, y en lo que respecta a las dimensiones de los mismos, si no se especifica el valor de la propiedad «width» sobre un elemento, su tamaño se calcula automáticamente en función de si es un elemento de bloque o en línea, y del tamaño del elemento contenedor en el que se encuentre. De la misma forma, si no se establece la propiedad «height» sobre un elemento, su valor por defecto es la altura necesaria para que muestre completamente el contenido.

Elementos de bloque

Son aquellos elementos del documento que son tratados visualmente como bloques. Tienen por defecto un formato diferente que el de los elementos inline, ya que cada vez que existe un elemento de bloque, existe un salto de línea asociado a él. Generalmente empiezan en una nueva línea y tienden a ocupar toda la anchura disponible (la del elemento contenedor padre), aunque sus contenidos no lleguen hasta el final de la línea. Por otro lado, ocupan el espacio necesario a lo alto, es decir, su altura se ajusta al contenido.

Se les puede fijar una altura y anchura con CSS, mediante las propiedades «width» y «height». También se les puede aplicar las propiedades «margin» y «padding», pero ignoran la propiedad «vertical-align».

En caso de existir varios se agrupan en vertical situándose unos elementos debajo de otros, siendo la distancia vertical entre dos cajas adyacentes la determinada por la propiedad «margin». Y aunque a un elemento de bloque se le puede fijar un ancho específico para evitar que ocupe todo el espacio, se seguirán apilando en vertical salvo que usemos la propiedad «float».

Los elementos de bloque pueden contener otros elementos de tipo inline o block. Algunos de los definidos por HTML son:

Texto: <h>, <p>, <div>, <blockquote>.

Listas <ul>, <ol>, <li>.

Tablas <table>, <td>, <th>, <tr>.

Otras: <hr />.

En el ejemplo de la imagen superior hay representados cuatro elementos de bloque dentro de su contenedor padre, el elemento <body>. El primero de estos elementos es un bloque de texto <p>, que se expande hasta ocupar todo el ancho del <body>, y cuya altura se ajusta al contenido (dos líneas de texto). A su vez, contiene al elemento en línea <b>.

A continuación, aparecen dos cajas contenedoras <div> para las que se ha fijado alguna de sus dimensiones.

El <div> superior contiene un elemento en línea <img>, tiene un ancho fijo (definido mediante la propiedad «width»), y su altura se ajusta al contenido (la dimensión vertical de la imagen). Para que la imagen se adapte siempre al tamaño del contenedor, independientemente de la resolución de la misma, se aplica un «width:100%» al elemento <img>.

Para el <div> inferior se ha definido una anchura y una altura fija. Este elemento contiene a su vez a dos bloques de texto <p> que se expanden hasta ocupar todo el ancho de su contenedor padre (el <div>).

Hay que tener cuidado cuando se fijen las dimensiones de un elemento de bloque (especialmente su altura, definida con «height»), porque el resultado puede no ser siempre el esperado y que acabe por interferir en el aspecto visual de la página. En este ejemplo, la altura dada al elemento <div> es mayor que la que ocupan los párrafos de texto, y por ello aparece un espacio de separación entre el borde inferior del segundo elemento <p> y el correspondiente al contenedor <div>. Sin embargo, la altura de este espacio no será fija, variará en función del tamaño de letra. Como el ancho de cada bloque <p> se adapta al del contenedor <div> (que es fijo), al modificar el tamaño de letra también cambiará la altura de los elementos <p> (para que se ajuste a la del texto que contienen), variando a su vez la altura de este espacio de separación.

También puede ocurrir justo lo contrario, que el tamaño del elemento contenedor sea insuficiente, en cuyo caso el contenido desborda los límites de la caja, ya que el estándar de CSS indica que cuando los contenidos de un elemento no caben en su interior deben mostrarse aunque se salgan del contenedor (parcial o completamente) y se solapen con los elementos adyacentes.

En la imagen superior, las dimensiones del logo sobrepasan el tamaño definido para el elemento <div> que lo contiene, por lo que se sale de la caja y se muestra parcialmente fuera de la misma, solapándose con el elemento <p> inferior, cuyo contenido (el texto) se muestra superpuesto a la imagen. Idéntico comportamiento presenta el segundo párrafo <p>, con la salvedad de que como a la caja contenedora que lo engloba únicamente se la ha fijado el valor de la altura, solo desborda al elemento <div> por su borde inferior.

En ciertas ocasiones esta característica de CSS puede resultar de utilidad, como ocurre con el código que se comenta en la sección Imágenes no rectangulares.

Por otro lado, indicar que no se puede utilizar la propiedad «text-align» para alinear un elemento de bloque respecto de la página (o respecto de otro elemento que lo contenga) aunque, como sucede en este caso, no ocupe todo el ancho de la misma. Únicamente se puede utilizar para alinear su contenido, dado que esta propiedad describe cómo el contenido a nivel de línea de un bloque es alineado. Así por ejemplo, si se definiera una clase del tipo:

.imagen { width:50%; margin:1em 0; }

Y se aplicara en el documento XHTML de la forma:

<div class="centrado">

<div class="imagen"><img alt="" src="../Images/EPL_logo.png" /></div>

</div>

El elemento <div> que contiene a la imagen no quedaría centrado respecto de la página, sería únicamente la imagen la que se mostraría centrada respecto del mismo.

El último elemento de bloque representado es una lista no ordenada <ul> sobre la que se han aplicado las propiedades «margin» y «padding», y que contiene a dos elementos <li>. Al igual que ocurría con el elemento <p> inicial, las cajas de los elementos <ul> y <li> se expanden hasta ocupar el ancho de su contenedor padre (<body> y <ul>, respectivamente), con la salvedad de que en este caso se ha definido un margen de separación entre el borde del elemento <ul> y el borde de los elementos adyacentes (<body> y <div>), y un espacio de relleno entre dicho borde y el de su contenido, los elementos <li>.

Para concluir, se comenta una peculiaridad que presenta el comportamiento de los márgenes verticales (top y bottom), y es que no son aditivos. Es decir, que cuando dos (o más) márgenes verticales son contiguos, se fusionan y la altura del nuevo margen será igual a la altura del mayor de los márgenes que se han fusionado. Esto es así porque la referencia para establecer un margen vertical es el borde de las cajas, y no el límite del margen de una caja adyacente. En cambio, los márgenes horizontales sí son aditivos.

Con el relleno (padding) vertical no ocurre los mismo, porque sí forma parte de la caja del elemento (al contrario de lo que sucede con los márgenes). Así, si en la caja superior hay definido un «padding-bottom» de valor 3em, y en la inferior un «padding-top» de valor 2em, la separación vertical entre los contenidos de los elementos sería de 5em. Si además tuvieran definidos un «margin» de valor 2em cada una, la separación total entre contenidos sería 7em, y no 9em, por la particularidad del margen vertical comentada en el párrafo anterior.

Elementos en línea

Son aquellos elementos que no forman nuevos bloques de contenido; el contenido es distribuido en líneas (ej., fragmentos de texto enfatizado dentro de un párrafo, imágenes en línea, etc.). Por tanto, no producen saltos en el flujo de la página, ni empiezan necesariamente en una nueva línea. Solo ocupan el espacio necesario para mostrar sus contenidos, por lo que tienen la capacidad de posicionarse horizontalmente en línea con otros elementos, uno a continuación del otro, siempre y cuando haya el espacio suficiente para que en una misma línea entre más de un elemento. Una vez alcanzado el ancho máximo (delimitado por los elementos que los contengan) saltarán de línea y seguirán apilándose en horizontal.

La anchura y altura de estos elementos se ajusta al contenido, y no se puede cambiar (fijar) por medio de CSS: ignoran las propiedades «width» y «height». Sin embargo, la altura de la línea donde esté inserta la caja se establece mediante la propiedad «line-height» (excepto para elementos de tipo inline que no son texto, como las imágenes), que puede definirse para el elemento en línea, o que puede heredar del elemento padre que lo contenga (como un párrafo de texto <p>).

Las propiedades «margin» y «padding» pueden aplicarse en los cuatro lados, pero solo respetan los valores horizontales. Los verticales (top y bottom) no van a afectar a otros elementos, no los desplaza. Es como si ignoraran estos valores (no tienen efectos prácticos). En la siguiente imagen se repite dos veces un mismo párrafo. Este párrafo contiene dos elementos en línea <i>; a uno se le aplica la propiedad «padding» y a otro la propiedad «margin». El párrafo que se muestra en la parte izquierda refleja el efecto que tendrían y cómo se visualizarían estos elementos. En el que se muestra a la derecha, se ha añadido un color de fondo a estos elementos para ver que los valores verticales, aunque estén definidos (padding), parece que no tienen efecto.

Los elementos en línea respetan las propiedades CSS «white-space» y «vertical-align», y pueden contener otros elementos de tipo inline, pero no elementos de tipo block.

Normalmente se emplean para seleccionar un fragmento del contenido y resaltarlo, crear enlaces, etc. Algunos de los elementos en línea más comunes definidos por HTML son:

Estilo: <i>, <em>, <b>, <strong>, <strike> <cite>, <code>, <span>.

Tamaño: <big>, <small>.

Indices: <sub>, <sup>.

Otras: <a>, <img>.

El elemento <img> es un poco particular, porque se comporta como una mezcla de elemento en línea y elemento de bloque. En el estándar CSS se define como “elemento en línea reemplazado” (replaced inline element), porque no tiene contenido por sí mismo, sino que será después reemplazado por el archivo al que apunta el atributo SRC. Realmente es un elemento inline, pero de un tipo especial que admite altura y anchura, es decir, se le puede aplicar las propiedades «width» y «height». También admite que se le definan márgenes y relleno (padding). Digamos que es como un elemento de bloque que se coloca en línea.

Por lo general, hay dos formas de modificar el comportamiento de un elemento: por medio de la propiedad «display», o mediante la propiedad «float».

Etiquetas de contenido del texto

Utiliza los elementos HTML de contenido del texto para organizar bloques o secciones de contenido colocados entre la etiqueta de apertura <body> y su cierre.

<ol>

El elemento ol (Lista ordenada) crea una lista ordenada. Estas listas pueden ser numéricas o alfabéticas, definidas por CSS. Por defecto su valor es numérico decimal.

Sus etiquetas son: <ol> y </ol> (ambas obligatorias).

Se usa en conjunción con la etiqueta <li> para definir los ítems de la lista. Puede contener uno o más elementos li.

Ejemplo:

<ol>

    <li>punto uno</li>

    <li>punto dos</li>

    <li>punto tres</li>

</ol>

Se visualiza así:

punto uno

punto dos

punto tres

Valores CSS predeterminados:

ol {

    display: block;

    list-style-type: decimal;

    margin-top: 1em;

    margin-bottom: 1em;

    margin-left: 0;

    margin-right: 0;

    padding-left: 40px;

}

<ul>

El elemento ul (Lista no ordenada) crea una lista no ordenada. Los elementos de estas listas son denotados por algún topo o signo. Pueden ser definidos por CSS.

Sus etiquetas son: <ul> y </ul> (ambas obligatorias).

Se debe usar en conjunción con la etiqueta <li> para definir los ítems de la lista. Puede contener uno o más elementos li.

Ejemplo:

<ul>

    <li>punto uno</li>

    <li>punto dos</li>

    <li>punto tres</li>

</ul>

Se visualiza así:

punto uno

punto dos

punto tres

Valores CSS predeterminados:

ul {

    display: block;

    list-style-type: disc;

    margin-top: 1em;

    margin-bottom: 1em;

    margin-left: 0;

    margin-right: 0;

    padding-left: 40px;

}

<li>

El elemento li, del inglés item list (elemento de lista), declara cada uno de los elementos de una lista. Se usa en conjunto con las etiquetas de listas ordenadas <ol> y las listas no ordenadas <ul>.

Sus etiquetas son: <li> y </li>.

Valores CSS predeterminados:

li {

    display: list-item;

}

<dl>

El Elemento dl de definition list (lista de definición). Crea una lista de definiciones, con términos y descripciones.

Sus etiquetas son: <dl> y </dl> (ambas obligatorias).

La etiqueta <dl> es usada en conjunción con las etiquetas <dt> (define los términos) y <dd> (describe cada término). Puede contener al menos uno de cada uno.

Ejemplo:

<dl>

    <dt>Tequila blanco</dt>

        <dd>La forma más pura del espíritu del agave.</dd>

    <dt>Tequila reposado</dt>

        <dd>Típicamente envejecido en barriles de madera entre dos y once meses.</dd>

</dl>

Que se visualizará así:

Tequila blanco

La forma más pura del espíritu del agave.

Tequila reposado

Típicamente envejecido en barriles de madera entre dos y once meses.

Valores CSS predeterminados:

dl {

    display: block;

    margin-top: 1em;

    margin-bottom: 1em;

    margin-left: 0;

    margin-right: 0;

}

<dt>

El Elemento dt de definition term (término de la definición). Contiene un término a definir dentro de una lista de definiciones.

Sus etiquetas son: <dt> y </dt> (ambas obligatorias).

Valores CSS predeterminados:

dt {

    display: block;

}

<pre>

El Elemento HTML <pre> (o Texto HTML Preformateado) representa texto preformateado. El texto en este elemento típicamente se muestra en una fuente fija, no proporcional, exactamente como es mostrado en el archivo. Los espacios dentro de este elemento también son mostrados como están escritos.

Sus etiquetas son: <pre> y </pre> (ambas obligatorias).

Ejemplo:

<pre>

    Este texto

        es preformateado

</pre>

Que se visualizará así:

Este texto
	es preformateado

Valores CSS predeterminados:

pre {

    display: block;

    font-family: monospace;

    white-space: pre;

    margin: 1em 0;

}

Esta etiqueta solo debe usarse para mostrar el texto de forma fija, y en el caso de que no haya una alternativa mejor. No debe utilizarse para mostrar la fuente monospace, como en el ejemplo, ya que se ha detectado que no se visualiza en algunos dispositivos.

Etiquetas de texto en línea

Utilice las etiquetas HTML de texto en línea para definir el significado, estructura, o el estilo de una palabra, una línea o cualquier pieza arbitraria de texto.

Texto destacado

Como ya vimos, la etiqueta <i> marca una parte del texto que se quiere presentar como con una voz o modalidad alternativa, o bien se diferencia del texto normal, como una palabra o frase en idioma extranjero, un nombre científico, un término técnico, un pensamiento, o un nombre de barco o nave, etc.

Sólo se utilizará la etiqueta <i> cuando no haya un elemento semántico más apropiado, como por ejemplo:

<em> (texto enfatizado)

<strong> (texto importante)

<cite> (título de una obra)

<dfn> (un término de definición)

<em>

La etiqueta <em> se usa para marcar con énfasis partes importantes de un texto.

Por defecto el texto marcado con esta etiqueta se presenta en cursiva o itálica.

Es más usada en textos en inglés o que se han traducido de este idioma, ya que, en español, para marcar o resaltar un texto que se debe leer en un tono de voz más enfático se usan por lo general las comillas.

Sus etiquetas son <em> y </em> (ambas obligatorias).

<p>¡No quiero volver a verte nunca, <em>jamás</em>!</p>

Se visualizará:

¡No quiero volver a verte nunca, jamás!

Valores CSS predeterminados:

em {

    font-style: italic;

}

<strong>

La etiqueta <strong> representa importancia, seriedad o urgencia del contenido.

Por defecto el texto marcado con esta etiqueta se presenta en negrita.

Sus etiquetas son <strong> y </strong> (ambas obligatorias)

Importante: El elemento strong se puede usar en un párrafo para distinguir la parte que realmente importa de otras partes que podrían ser más detalladas, ligeras o simplemente repetitivas.

Por ejemplo, la primera palabra del párrafo anterior está marcada con la etiqueta <strong> para distinguirla del texto más detallado del resto del párrafo.

<p><strong>Importante:</strong>El elemento strong se puede usar en un párrafo para distinguir…</p>

Seriedad: puede usarse <strong> para marcar un resaltar un texto, como una advertencia.

Urgencia: Puede usarse <strong> para marcar contenido que el lector debe ver antes de cualquier otra parte del texto.

Valores CSS predeterminados:

strong {

    font-weight: bold;

}

<cite>

La etiqueta <cite> define el título de una obra (por ejemplo, un libro, un ensayo, un periódico, una revista, una canción, una película, un programa de televisión, una pintura, una escultura, un poema, una obra de teatro, una ópera, un musical, etc.).

Por defecto el texto marcado con esta etiqueta se presenta en cursiva o itálica.

Sus etiquetas son <cite> y </cite> (ambas obligatorias).

Ejemplo:

<p>El editorial del <cite>New York Times</cite> causó un terremoto en el seno del gobierno estadounidense.</p>

Se visualizará:

El editorial del New York Times causó un terremoto en el seno del gobierno estadounidense.

Valores CSS predeterminados:

cite {

    font-style: italic;

}

<dfn>

Sirve para marcar el término que se quiere definir. La instancia de definición suele ser el primer uso de un término en un texto.

Sus etiquetas son <dfn> y </dfn> (ambas obligatorias)

Por defecto el texto marcado con esta etiqueta se presenta en cursiva o itálica.

Ejemplo:

<p><dfn>HTML</dfn>es un lenguaje que se utiliza para establecer la estructura y contenido de una página web.</p>

Se visualizará:

HTML es un lenguaje que se utiliza para establecer la estructura y contenido de una página web.

Valores CSS predeterminados:

dfn {

    font-style: italic;

}

Otras etiquetas

<sub>

El elemento HTML <sub> define un fragmento de texto que se debe mostrar, por razones tipográficas, más bajo, y generalmente más pequeño, que el tramo principal del texto, es decir, en subíndice.

Sus etiquetas son <sub> y </sub> (Ambas obligatorias).

Debe ser utilizado sólo por razones tipográficas, es decir, cambiar la posición del texto cambia su significado como en matemáticas (por ejemplo la fórmula matemática t₂) o fórmulas químicas (por ejemplo H₂O).

No debe ser utilizado para propósitos meramente visuales. En ese caso debe usarse la propiedad de CSS vertical-align para lograr el mismo efecto.

Ejemplo:

<p>La fórmula química del agua: H<sub>2</sub>O.</p>

Resultado

La fórmula química del agua: H₂O

Valores CSS predeterminados:

sub {

    vertical-align: sub;

    font-size: smaller;

}

<sup>

El elemento HTML <sup> define un fragmento de texto que se debe mostrar, por razones tipográficas, más alto, y generalmente más pequeño, que el tramo principal del texto, es decir, en superíndice.

Sus etiquetas son <sup> y </sup> (Ambas obligatorias).

Debe ser utilizado sólo por razones tipográficas, es decir, cambiar la posición del texto cambia su significado como en matemática (por ejemplo la fórmula matemática f⁴) o en las abreviaturas francesas (por ejemplo Mlle, Mme or Cie).

También se puede encontrar siguiendo palabras o frases. Estas anotaciones indican una entrada bibliográfica y se conocen como «notas al pie».

No debe ser utilizado para propósitos meramente visuales. En ese caso debe usarse la propiedad de CSS vertical-align para lograr el mismo efecto.

Ejemplos:

<p>Este texto es <sup>superíndice</sup></p>

<p>Notas al pie<sup>1</sup></p>

Resultado

Este texto es superíndice

Notas al pie¹

Valores CSS predeterminados:

sup {

    vertical-align: super;

    font-size: smaller;

}

<br>

El elemento HTML line break <br> produce un salto de línea en el texto (retorno de carro). Es útil para escribir un poema o una dirección, donde la división de las líneas es significante, o para dividir un título en varias líneas.

Debe tener etiqueta de inicio y no debe tener etiqueta de cierre. En documentos XHTML, como los ePub, este elemento se escribe como <br/>. No debe colocarse más de una seguida.

Ejemplo:

Este texto contiene<br/>un salto de línea

Se visualiza así:

Este texto contiene
un salto de línea

No utilices <br/> para incrementar el espacio entre líneas de texto y separar párrafos; para ello utiliza la propiedad margin de CSS o el elemento <p>.

<s>

Se usa para marcar el texto que ya no es correcto, preciso o relevante.

Sus etiquetas son: <s> y </s> (ambas obligatorias).

Ejemplo:

<p><s>Mi automóvil nuevo es azul.</s></p>

<p>Mi automóvil nuevo es negro.</p>

Se visualiza así:

Mi automóvil nuevo es azul.

Mi automóvil nuevo es negro.

Valores CSS predeterminados:

s {

    text-decoration: line-through;

}

<del> e <ins>

<del>: Se usa para marcar una sección de texto que ha sido borrado. Sus etiquetas son: <del> y </del> (ambas obligatorias).

<ins>:Se usa para marcar una sección de texto que es nueva, que ha sido insertada en el texto principal. Sus etiquetas son: <ins> y </ins> (ambas obligatorias).

Ejemplo:

<p>Mi color favorito es el <del>azul</del> <ins>rojo</ins></p>

Se visualiza así:

Mi color favorito es el azul rojo

NOTA: Use <del> e <ins> para indicar actualizaciones y modificaciones en un texto. El texto eliminado se muestra tachado y el insertado nuevo se muestra subrayado.

Valores CSS predeterminados:

del {

    text-decoration: line-through;

}

ins {

    text-decoration: underline;

}

<abbr>

El elemento HTML <abbr> (o Elemento de Abreviación HTML) marca un texto como una abreviatura o acrónimo, por ejemplo "Sr.", "EE. UU.", "ONU", “a. dC.”, “NASA”, “a. m.”, etc.

Sus etiquetas son: <abbr> y </abbr> (ambas obligatorias).

Marcar las abreviaturas puede proporcionar información útil para dispositivos o aplicaciones de lectura, sistemas de traducción, de texto a voz (text to speech) y cualquier otro sistema de asistencia en el futuro.

Ejemplo:

Tim Berners-Lee, investigador del <abbr>CERN<abbr>, creó el <abbr>HTML<abbr>.

Visualmente no tiene ningún efecto en el texto, pero en nuestro ePub Base se le ha dado el mismo efecto que la clase .nosep, (ver manual Nº 3, códigos útiles) que se utiliza para mantener el texto seleccionado en una misma línea. Las abreviaturas y acrónimos no deben dividirse (por ejemplo, con guiones) al final de la línea. Por ejemplo las siglas “EE. UU.” deben estar juntas.

<code>, <kbd>, <samp>, <var>

<code>: indicar el código de un programa de computadora.

<kbd>: marca el texto que debe introducir el usuario con el teclado.

<samp>: Señala texto de salida de un programa de computadora.

<var>: Indica una variable de un programa.

Ejemplo:

<code>

#include main() { for(;;) { printf ("Hola Mundo!\n"); } }

</code>

Se visualiza así:

#include main() { for(;;) { printf ("Hola Mundo!\n"); } }

Ejemplo:

<p>…entonces aparecerá una ventana con el mensaje: <samp>Hola mundo</samp></p>

Se visualiza así:

…entonces aparecerá una ventana con el mensaje: Hola mundo

Por defecto el texto entre estas etiquetas se muestra en una fuente monoespaciada.

Estas etiquetas no están en desuso, pero es posible lograr un efecto más rico y variado con CSS (a menos que se desee maquetar un libro o manual informático, donde serían más adecuadas).

Enlaces: Etiqueta <a>

La etiqueta de texto en línea <a> define un hipervínculo, que se usa para vincular texto de una parte del libro a otra (como notas al pie de página), o a un vínculo externo, como una página web.

El atributo más importante de la etiqueta <a> es href, que indica el destino del enlace.

Enlaces externos

Consisten en enlaces a páginas web externas al lector y que funcionarán si el lector está preparado para conectarse a internet.

Hemos visto dos enlaces de este tipo en la introducción de este apartado:

<a href="http://www.quackit.com/html/tags">www.quackit.com</a>

<a href="http://www.w3schools.com/html/default.asp">www.w3schools.com</a>

NOTA: Debido a que estos enlaces pueden quedar obsoletos, se recomienda evitar su uso siempre que sea posible.

Enlaces internos

Estos enlaces dan la posibilidad de dirigir la lectura a cualquier parte del libro.

Si al final del capítulo 2 queremos dar la opción al lector de saltar al capítulo 116, como hizo Julio Cortázar en su libro Rayuela, al final de dicho capítulo debemos escribir el siguiente código:

<p class="derecha"><a href="../Text/capitulo-116.xhtml"><b>[116]</b></a></p>

Cuando pulsemos sobre [116] la lectura saltará al mencionado capítulo, tal como queríamos.

La muerte, el muñequito. La lengua de la Maga me hace cosquillas. Rocamadour, la ética, el muñequito, la Maga. La lengua, la cosquilla, la ética.

[116]

Capítulo 116

…

Si quisiéramos redirigir a alguna parte en especial de este capítulo, al final por ejemplo, pondríamos:

<a href="../Text/116.xhtml" id="final116"><b>[final cap 116]</b></a>

Y al final del capítulo 116 pondríamos el siguiente código:

116.xhtml

…

<a id="final116"></a>

Ahora cuando pulsemos sobre [116] la lectura saltará al final del capítulo 116.

La muerte, el muñequito. La lengua de la Maga me hace cosquillas. Rocamadour, la ética, el muñequito, la Maga. La lengua, la cosquilla, la ética.

[116]

…

Fin del capítulo

Las notas son un caso especial de estos enlaces internos, con la particularidad de que están diseñadas para un viaje de ida y vuelta. Puedes consultarlas en el Tomo I: Manual básico, en el apartado Maquetando el contenido.

Capitulo08.xhtml

<p>En este texto hay una nota<a href="../Text/notas.xhtml#nt1" id="rf1"><sup>[1]</sup></a>.</p>

notas.xhtml

<p id="nt1" ><sup>[1]</sup> Nota explicativa. <a href="../Text/Capitulo08.xhtml#rf1">&lt;&lt;</a></p>

En este texto hay una nota[1].

[1] Nota explicativa. <<

CSS AVANZADO

Selectores de CSS

Introducción

El lenguaje CSS, como cualquier otro lenguaje de programación, tiene sus particularidades y pautas de funcionamiento específicas que, en su caso, resultan especialmente oscuras y complicadas. No obstante, explicaremos alguna para que sepamos un poco más de su funcionamiento.

CSS es un lenguaje específicamente pensado para la definición de estilos que se puedan aplicar a una página web o a un ePub para darle forma. La experiencia de cualquiera que haya trabajado con él es que funciona o no según un propio criterio que habitualmente es muy difícil de concretar. La razón es que durante su diseño se pensó en que funcionara de una forma similar al lenguaje HTML (el que nos ayuda a diseñar las páginas web o los ePubs), es decir, que si se ha escrito correctamente haga lo que tenga que hacer, y si se ha hecho de forma incorrecta, que se ignore.

Al no producir errores de programación que pueda detectar la persona que está programando es muy difícil saber qué pasó para que no se produzca el resultado esperado.

La razón más frecuente para que nuestros estilos no hagan lo que deben hacer es, por supuesto, la introducción de código incorrecto (un espacio, un carácter cualquiera mal colocado hará que todo se ignore), pero no menos frecuente que eso es no haber tenido en cuenta una de las normas de funcionamiento del lenguaje. Hay tres características de CSS que debemos tener muy en cuenta (y cuyo funcionamiento, insisto, es difícil de concretar):

Precedencia: Esta característica pretende dilucidar qué estilo aplicar cuando hay más de una definición. La parte sencilla de la pauta es que se aplica el último estilo definido (es decir, el que se haya escrito más abajo en la hoja de estilos); la parte complicada implica asignar una puntuación a cada definición según varios criterios… nos quedamos con la parte sencilla y procuraremos no liarla mucho.

Jerarquía: CSS funciona junto con HTML y ambos permiten el trabajo con «cajas», es decir, «cosas» que se sitúan dentro de otras «cosas». Por ejemplo, todo lo que vemos en una web o en un capítulo de un ePub está dentro de <body>; otro ejemplo típico es <div> que es contenedor de todo lo que se escriba entre su etiqueta de apertura y su etiqueta de cierre. Por supuesto, estas cajas pueden contener más cajas a su vez, lo cual termina definiendo una estructura jerárquica de cajas «más grandes» que contienen otras cajas «más pequeñas» que a su vez contienen otras «aún más pequeñas», en una relación que llamamos de «padres» e «hijos». La jerarquía supone que la situación de la caja contenedora va a limitar a su contenido. Si hay conflicto entre las definiciones, la parte sencilla de la pauta es que se aplica la definición más concreta, la parte complicada pasa, como en el caso anterior, por la puntuación de cada definición… de nuevo nos quedaremos con la parte sencilla y procuraremos no meternos en complicaciones.

Herencia: Las propiedades de un elemento «padre» pasarán a sus «hijos» si estos no las tienen definidas. Las pautas de herencia en CSS están relacionadas con las normas de herencia en HTML, mezcladas con sus propias características. De la parte de HTML se toma qué propiedades se heredan y cuáles no, qué etiquetas transfieren sus propiedades y cuáles no. De la parte de CSS se aplican los mecanismos de precedencia y jerarquía para delimitar los estilos aplicables. Eso supone que no haya una forma sencilla de plantear esta norma, por lo que no debemos confiarnos en que se herede ninguna propiedad, debemos comprobarlo constantemente.

Otro punto importante a tener claro cuando programamos en CSS es la estructura que debemos respetar. CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilos están compuestas por una o más de esas reglas aplicadas a un documento HTML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

La propiedad y el valor que queremos asignarle han de ir separados por dos puntos («:»), finalizando con punto y coma («;»). Podemos poner tantas propiedades como queramos (con sus correspondientes valores) separados por el punto y coma.

El selector es a quien se le va a aplicar el estilo. Pueden ser varias cosas:

Selector universal «*»: Se utiliza para seleccionar todos los elementos. No se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todo.

Una etiqueta HTML: Cada vez que aparezca esa etiqueta se le aplicará el estilo definido.

Una clase personal: Podemos crear clases personales poniendo un punto delante del nombre.

Un identificador: Podemos definir el estilo que se le aplicará a la «caja» (es decir, a la etiqueta) que lleve ese identificador, poniéndole una almohadilla (#) delante.

Un pseudoelemento (se identifican con dos puntos delante): en el caso de ePub esto lo vamos a ignorar pues no se representan en los eReader.

Aclarados (o al menos, presentados) estos conceptos básicos, podemos pasar a casos concretos de su uso.

Definiciones combinadas

Selector combinado (coma «,»)

Es frecuente que dos elementos distintos tengan la misma definición, deberíamos ponerlos en nuestra hoja de estilos de la siguiente forma:

elemento1 { propiedad: valor; }

elemento2 { propiedad: valor; }

Pero también podemos combinarlos de esta forma:

elemento1, elemento2 { propiedad: valor; }

Ponemos los nombres de los selectores separados por coma y una sola definición, que se aplicará a todos ellos. Un ejemplo típico, que puede verse en nuestro ePub Base, es la definición de las propiedades de los distintos encabezados:

h1, h2, h3, h4, h5, h6 { margin:25% 0.25em 1em; }

Definiciones múltiples

También es frecuente ver que un elemento está definido más de una vez en nuestra hoja de estilos:

elemento1 { propiedad1: valor1; }

elemento1 { propiedad2: valor2; }

Esta práctica es peligrosa por dos razones:

El tener la definición de un mismo elemento en varios sitios puede que nos despiste y no sepamos en concreto qué propiedades se están modificando.

Al estar separadas ambas definiciones, entran en funcionamiento las reglas de precedencia y jerarquía, cuyos efectos pueden ser inesperados.

Aun así, es frecuente verla en combinación con las definiciones combinadas: se definen las propiedades comunes de forma combinada y las particulares en definiciones múltiples. El ePub Base nos da ejemplos de esto:

h1, h2, h3, h4, h5, h6 { margin:25% 0.25em 1em; … }

h1 { font-size:1.5em; }

h3 { font-size:1.4em; }

Como norma de precaución para estos casos hemos de procurar no definir la misma propiedad en las distintas definiciones.

Dar formato a una etiqueta

Selector etiqueta

La definición más habitual es asignar estilos a una etiqueta HTML concreta. Siempre que aparezca esa etiqueta en nuestro libro o web se le aplicará ese estilo. La forma de hacerlo es:

etiqueta_HTML { propiedad: valor; }

El ePub Base nos da múltiples ejemplos de esta forma de definir estilos:

body { margin:1em; padding:0; border:0; }

p { margin:0; text-align:justify; text-indent:1.5em; line-height:1.25em; }

Crear una clase

Selector clase

Si lo que queremos es aplicar un estilo solo a aquellas etiquetas que nosotros decidamos, podemos definir una clase personalizada, de la siguiente forma:

.clasepersonal { propiedad: valor; }

Y luego usarla de la siguiente forma en el XHTML:

<etiqueta class="clasepersonal"> … </etiqueta>

Donde <etiqueta> se refiere a cualquier etiqueta HTML que admita la aplicación de estilos personales.

El uso de las clases también puede ser combinado, ponemos varias clases separadas por espacios y se aplicarán todas sus propiedades a la etiqueta a la que se les aplique:

<etiqueta class="clasepersonal1 clasepersonal2"> … </etiqueta>

Lógicamente, aunque una clase personal puede aplicarse a cualquier etiqueta, las propiedades definidas se aplicarán o no dependiendo de las características de la etiqueta. Por ejemplo, si definimos el color de la letra y se la aplicamos a una etiqueta <img> (imagen), no tendrá efecto alguno, pues no hay representación de texto; de la misma forma, cualquier clase aplicada a la etiqueta <br /> no tendrá efectos, pues no tiene representación.

El ePub Base nos proporciona también en este caso diversos ejemplos:

.cubierta { margin:0; … }

También podemos concretar más la definición de una clase si queremos especificar el estilo que tendrá cuando se aplique a una etiqueta en concreto:

etiqueta.clasepersonal { … }

Si hacemos esto le estaremos indicando el estilo que ha de aplicarse cuando la clase se aplique a esa etiqueta en concreto. Si se ha hecho la definición genérica de la clase, se aplicará la definición genérica a todas las etiquetas y la particular a la etiqueta concreta indicada en la segunda definición. Si no se ha hecho la definición genérica, se ignorará la aplicación de la clase en todas las etiquetas salvo la especificada.

Identificador

Selector por identificador

Los casos vistos hasta ahora, estilo aplicado a una etiqueta o creación de una clase, son aplicables de forma genérica (a todas las etiquetas de un tipo o a todas las etiquetas, sean del tipo que sean, que se les aplique la clase definida), pero hay ocasiones en que vamos a aplicar un estilo de forma puntual, en una sola ocasión, y no podemos hacerlo directamente en el fichero HTML, estamos obligados a hacerlo en nuestra hoja de estilos.

Para ello se ha habilitado las definiciones de estilos aplicables a un identificador. Se indica colocando la almohadilla (#) delante del nombre:

#identificador { propiedad: valor; }

Y luego lo aplicamos de esta forma en el fichero XHTML:

<etiqueta id="identificador"> … </etiqueta>

También podemos concretar más y especificar el estilo de una etiqueta concreta cuando lleve ese identificador:

etiqueta#identificador { propiedad: valor; }

Ignorándose cuando el identificador se le ponga a otra etiqueta distinta.

La diferencia entre el selector de clase y el selector por identificador es que este último está pensado para que el elemento que se selecciona sea único, porque en estos casos es un selector más eficiente, mientras que el de clase se utiliza cuando se quiere aplicar un estilo a varios elementos diferentes.

Por ello, el valor del atributo «id="identificador"» no se puede repetir en dos elementos diferentes de un mismo documento XHTML, solo puede aplicarse (identifica) a un único elemento. Es decir, se podría utilizar en todos los «Section.xhtml», pero una única vez en cada uno; en caso contrario cualquier validador de ePub arrojará un error. En cambio, el atributo «class="clasepersonal"» se puede aplicar en tantos elementos como se requiera dentro de un mismo documento XHTML.

Una posible utilidad que tiene el empleo de un identificador único para dar un estilo es que también se puede utilizar como una referencia. Por ejemplo, si desde cualquier parte del texto o desde la entrada correspondiente de un índice que hayamos creado, queremos poner un enlace a una imagen, ecuación, tabla, etc., se podría hacer utilizando el «id="identificador"» único de la forma:

<p><a href="../Text/Section.xhtml#identificador">texto, ecuación, nombre ilustración, … </a></p>

Controlar la jerarquía/herencia

Selector descendente (espacio « »)

Se nos puede dar el caso de que estemos trabajando con propiedades que no se heredan o se nos puede dar el caso de definir el estilo de una etiqueta de forma genérica, pero queramos definirlo de forma distinta cuando esa etiqueta esté situada en una «caja» concreta. La definición se hará así:

elemento1 elemento2 { propiedad: valor; }

Esto quiere decir que ese estilo se le aplicará al «elemento2», pero únicamente cuando se encuentre dentro del «elemento1». Un elemento es descendiente de otro cuando se encuentra entre sus etiquetas de apertura y de cierre, sin importar el nivel de profundidad en el que se encuentre. Es decir, no tiene por qué ser descendiente directo («hijo») del otro.

Los selectores descendentes siempre están formados por dos o más selectores separados entre sí por espacios en blanco. El último selector indica el elemento sobre el que se aplican los estilos y todos los selectores anteriores indican el lugar en el que se debe encontrar ese elemento.

Para verlo gráficamente, si escribimos la regla «div p», el contenido afectado sería el marcado con fondo rojo:

El ePub Base nos da ejemplos de este caso:

.banner p { text-align:center; text-indent:0; }

Este estilo se aplicará a los párrafos que estén situados dentro de una «caja» a la que se le haya aplicado la clase «.banner».

Es necesario ponerlo así y no en la definición de la propia clase «.banner» pues estas dos propiedades en concreto no se heredan y más arriba se ha definido el formato de la etiqueta «p» con otros valores para esas propiedades:

p { … text-align:justify; text-indent:1.5em; … }

Definir el estilo de los «hijos» como se indica aquí soluciona la mayor parte de los comportamientos extraños de las clases personales.

Selector de hijos (signo mayor que «>»)

Se trata de un selector muy similar al selector descendente, pero con un comportamiento más específico. Se utiliza para seleccionar todos los elementos «hijo» que estén contenidos en un elemento «padre» directamente (sin que existan otros elementos entre ambos).

Es decir, que mientras que en el selector descendente solo importa que un elemento esté dentro de otro, independientemente de lo profundo que se encuentre, en el selector de hijos el elemento debe ser «hijo directo» de otro elemento.

En las siguientes imágenes se puede ver gráficamente la diferencia entre ambos selectores. De esta forma, si se escribe la regla «div > span», el contenido afectado sería únicamente el marcado con fondo rojo:

Es decir, que se selecciona cualquier elemento <span> que sea hijo directo de un elemento <div>, por lo que el único elemento que cumple la condición es el señalado en rojo. Por contra, si la regla utilizada es el selector descendente «div span», los elementos ahora seleccionados serían los siguientes:

Por tanto se aplica a todos los elementos <span> que se encuentran dentro de elementos <div>, independientemente del nivel de profundidad (pueden existir otros elementos entre ambos).

Selector adyacente (signo más «+»)

Un caso concreto del control de la jerarquía en CSS es cuando queremos definir el estilo de elementos que no son «padres» ni «hijos» unos de otros, sino que están uno junto al otro (es decir, son «hermanos»):

elemento1+elemento2 { propiedad: valor; }

Este estilo se aplicará al «elemento2», pero únicamente cuando esté precedido inmediatamente por el «elemento1».

Nuevamente veamos gráficamente como afectaría a la figura anterior la regla «h1 + p»:

Veamos otro ejemplo:

.cita+p { … }

Este estilo sería aplicable al primer párrafo inmediatamente precedido de cualquier etiqueta a la que se le haya aplicado la clase «.cita».

Se pueden ver más ejemplos prácticos de aplicación de este selector en la sección Imágenes no rectangulares.

Combinando selectores

Todas estas formas de realizar definiciones (y algunas más que no se han explicado por la poca aplicación que tienen en el diseño de ePubs) se pueden combinar al gusto, consiguiendo que se concrete más su ámbito de aplicación. Veamos algunos ejemplos:

etiqueta.clase#identificador { … }

El estilo se aplicará únicamente a la etiqueta indicada que tenga aplicada la clase indicada y también se le haya establecido el identificador indicado.

etiqueta1.clase etiqueta2 { … }

El estilo se aplicará a la etiqueta2 pero únicamente cuando esté incluida dentro de la etiqueta1 y esta, a su vez, tenga aplicada la clase indicada.

etiqueta1.clase+etiqueta2 { … }

El estilo se aplicará a la «etiqueta2» pero únicamente cuando esté inmediatamente precedida de la «etiqueta1» y esta, a su vez, tenga aplicada la clase indicada.

A este respecto, podemos complicar tanto como queramos la combinación de formas de definir estilos tanto en la variedad como en la cantidad, consiguiendo delimitar su aplicación únicamente a los casos que creamos conveniente.

La propiedad «display»

La propiedad «display»

Esta propiedad es una de las más complejas y completas de CSS, ya que establece el tipo de caja que genera un elemento. Todos los elementos generados en HTML ocupan un espacio y pueden comportarse de muchas formas. Este comportamiento y la forma en que interactúan con los elementos adyacentes, está regido por la propiedad display.

La propiedad «display» tiene muchos posibles valores para aplicar en elementos de la página, pero no todos ellos son soportados por los dispositivos de lectura. A continuación se realiza una breve descripción de los valores más usuales, y que parecen ser interpretados de forma adecuada por los lectores.

none

Este valor hace que el elemento no genere ninguna caja, lo que ocasiona que desaparezca por completo de la página y que no ocupe sitio. Al no reservar el espacio que ocupa, el resto de elementos adyacentes se visualizan como si no existiera, es decir, pueden ocupar el espacio en el que se debería visualizar el elemento.

Todos los elementos descendientes que estén contenidos dentro del elemento donde se ha aplicado la propiedad «display:none», también desaparecen.

Si lo que se pretende es hacer que el elemento sea invisible, es decir, que no se vea pero que siga ocupando el espacio, se debe utilizar la propiedad «visibility», que permite hacer visibles o invisibles los elementos de una página. El valor por defecto de «visibility» es visible, que hace que la caja del elemento se vea de forma normal. El valor hidden de esta propiedad hace invisible la caja para que no muestre sus contenidos, pero el resto de elementos contiguos se muestran como si la caja todavía fuera visible, por lo que en el lugar donde originalmente se mostraba la caja invisible, ahora se muestra un hueco vacío (como si el elemento fuera absolutamente transparente).

Cuando una caja se hace invisible, sus elementos interiores también se hacen invisibles, aunque a diferencia de lo que ocurre con «display:none», los elementos interiores invisibles se pueden volver a mostrar si se utiliza la propiedad «visibility:visible».

Por tanto, la diferencia entre ambas propiedades es que mientras que «display» permite cambiar el tipo de caja de un elemento, «visibility» solo permite hacerla visible o invisible. En la siguiente imagen se muestra el diferente comportamiento que presentan ambas propiedades:

Un posible uso que puede tener este valor de la propiedad «display» es el de añadir entradas a la TOC. Si, por ejemplo, la maquetación del título de un capítulo es compleja y no puede realizarse con elementos del tipo <h1>, se puede emplear para ello cualquier otra combinación de elementos (<div>, <p>…) y recurrir a la clase .oculto del ePub Base de la forma:

<h1 class="oculto">Título del capítulo</h1>

O también podría utilizarse para añadir una entrada a la TOC en cualquier parte del libro desde la que interese hacerlo.

block, inline, inline-block

block

Este valor muestra un elemento como si fuera un elemento de bloque, independientemente del tipo del que se trate, y hace que adquiera el comportamiento de los elementos tipo block que se comentaba en el apartado anterior.

inline

Este valor hace que la caja de un elemento sea en línea, por lo que el elemento solo ocupará el espacio necesario para mostrar sus contenidos. Por tanto, tendrá el mismo comportamiento que los elementos tipo inline descritos en el apartado anterior.

Por ejemplo, en una lista <ul> se puede aplicar esta propiedad al elemento de bloque <li> para que tenga el comportamiento de un elemento en línea, y de esta forma lograr que los distintos ítems de la lista se dispongan horizontalmente, en lugar de posicionarse unos debajo de otros como es habitual. Si para la siguiente lista:

Primer punto.

Segundo punto.

Tercer punto.

Se define en el style.css alguna de las siguientes reglas (o similares), aplicada en el segundo caso de la forma:

style.css

li { display:inline; margin-right:.5em; }

ul.horiz li { display:inline; margin-right:.5em; }

Section0001.xhtml

<ul class="horiz">

<li>Primer punto.</li>

<li>Segundo punto.</li>

<li>Tercer punto.</li>

</ul>

El resultado obtenido sería el que se muestra a continuación:

Primer punto.

Segundo punto.

Tercer punto.

inline-block

Este valor de la propiedad «display» crea cajas que son de bloque y en línea de forma simultánea, es decir, hace que la caja contenedora se comporte como si se tratara de un elemento de bloque, pero que permite la presencia de elementos adyacentes, lo que es propio de los elementos en línea.

Para elementos reemplazados (como <img>), el valor inline-block es exactamente igual al inline que tienen por defecto.

Probablemente sea el valor más interesante y versátil de todos, porque da mucho juego a la hora de maquetar el contenido al conjugar las características de los elementos tipo block e inline.

Así por ejemplo, como elemento de bloque puede contener a otros elementos de tipo block, mientras que como elemento en línea puede alinearse horizontalmente respecto de la página por medio de la propiedad «text-align». Estas características permiten que se puedan alinear bloques de texto, como listas o poemas, tal y como se comenta en el apartado Alinear bloques de texto de la sección Compendio de códigos útiles. Otro posible ejemplo se muestra a continuación, donde para conseguir el efecto del cartel se combina este valor inline-block (para que el elemento de bloque se adapte horizontalmente a su contenido y además se pueda alinear) con la propiedad «float»:

°°

VENTA DE MADERA

nw 1/4 SECT 12

T 39 S R 15 E

160 acres

Se aceptan pujas

KAIBAB NF

FLAGSTAFF AZ

°°

De igual forma, se puede establecer el tamaño del elemento mediante las propiedades «width» y «height» (lo que es propio de elementos de bloque), y a su vez alinear la caja respecto de la página y/o hacer que admita otros elementos adyacentes entre los que pueda aplicarse la propiedad «vertical-align» (propio de elementos en línea). Un ejemplo de utilización se encuentra en la sección Pies de foto, donde se utiliza tanto para el pie de foto inferior, como para el pie de foto lateral.

Como se comentó al hablar de los elementos inline, hay ciertas propiedades que no les son aplicables (o se ignoran si están establecidas) como «width» o «height», entre otras. Aplicando esta propiedad a un elemento en línea, se consigue que se puedan definir. El ejemplo siguiente muestra una lista simulada en la que se pretende conseguir que el texto comience a la misma altura que el indentado de los párrafos. Aunque podría lograrse utilizando un margen horizontal, no sería del todo exacto y el resultado variaría en función del tipo de fuente. Por ello, se utiliza la propiedad inline-block para definir un ancho igual a 1.5em en un elemento en línea <span>:

El texto de la lista que se muestra bajo estas líneas comienza a la misma altura que el indentado que se le ha aplicado a este párrafo.

—Primer elemento de la lista.

—Segundo elemento de la lista.

Para ello, se ha definido en el style.css la clase «.listib», que se aplica en el documento XHTML de la siguiente forma:

style.css

.listib { display:inline-block; width:1.5em; }

Section0001.xhtml

<div class="asangre">

<p><span class="listib">—</span>Primer elemento de la lista.</p>

<p><span class="listib">—</span>Segundo elemento de la lista.</p>

</div>

En el siguiente ejemplo se utiliza el valor inline-block junto con la propiedad «float» para ubicar dos estrofas en paralelo, de tal forma que cada una de ellas quede centrada en su mitad de la página y se mantenga así al ir aumentando el tamaño de letra, hasta que llega el momento en el que ocupa todo el ancho y los versos comienzan a indentarse:

Las duras tierras frías

con los pies y las manos

son crueles.

Allí el viento chilla,

las piedras son frías;

no hay nada que encontrar.

Nuestro corazón descansa

en aguas húmedas

en algún pantano profundo.

¡Oh, cómo deseamos

probar el pescado

tan dulce y frío!

O también podría resultar de utilidad para representar tablas complejas:

COMPAÑÍA GANADERA DE HAT CREEK
Y EMPORIO CABALLAR

propietarios

Cap. Augustus McCrae

Cap. W. F. Call

}

ayudantes

P. E. Parker

Deets, Joshua

}

Se alquilan: Caballos y coches.

Se venden: Reses y caballos.

No se compran ni se venden cabras ni burros.

No alquilamos cerdos.

Uva Uvam Vivendo Varia Fit.

El uso de inline-block presenta una peculiaridad, y es que los elementos en los que se aplica tienden a dejar un pequeño hueco entre cada uno de ellos, espacio que depende del tipo y tamaño de letra. Aunque existen varias formas (vía CSS o HTML) de suprimir dicha separación, parece que no hay una que funcione bien en todos los dispositivos, por lo que habrá que tener en cuenta este espacio mínimo cuando haya muchos elementos implicados para que no se descuadre el diseño (al final de la sección Pie de foto lateral se comenta un poco más en profundidad esta particularidad).

list-item

Este valor hace que cualquier elemento de cualquier tipo se muestre como si fuera un elemento <li> de una lista a efectos de visualización. Su comportamiento es exactamente igual que si se tratara de un ítem de lista, por lo que soporta las propiedades de este tipo de elementos, como «list-style-type», «list-style-image», «list-style-position» y «list-style». Al igual que los elementos <li>, su comportamiento es similar al de los elementos de bloque, por lo que no permite la presencia de elementos adyacentes y pueden determinarse todas sus dimensiones.

Por ejemplo, si se define en el style.css la siguiente regla, aplicada luego al XHTML:

style.css

.displist p { display:list-item; text-indent:0; margin-left:1.5em; list-style-type:square; }

Section0001.xhtml

<div class="displist">

<p>Primer elemento de la lista.</p>

<p>Segundo elemento de la lista.</p>

</div>

Se visualiza el siguiente resultado:

Primer elemento de la lista

Segundo elemento de la lista

table, inline-table y table-cell

Estos valores están relacionados con las tablas y hacen que los elementos donde se apliquen se comporten, en lo referente al posicionamiento, como si fueran tablas o partes de una tabla. Como tales, también se les pueden aplicar las propiedades inherentes a las tablas.

Las tablas presentan algunas ventajas en lo que se refiere a la sencillez con que se pueden posicionar los elementos en algunas ocasiones. Para aquellos casos en los que el uso de las tablas puede resultar una ventaja, CSS presenta estos valores de la propiedad «display»:

table: el elemento será mostrado como una Tabla de Bloque (como <table>), provocando un salto antes y otro después del elemento. Además, permite asignar un comportamiento de tabla a los elementos que haya dentro (anidados a la etiqueta donde esté colocado el «display:table»). En teoría, sería necesario este elemento para englobar dentro a otros que puedan tener comportamiento de tabla, pero no siempre es necesario.

inline-table: el elemento será mostrado como una Tabla en Línea (como <table>). Es decir, actúa igual que si le hubiésemos aplicado la propiedad «display:table» con la diferencia de que en este caso se comporta como un elemento inline; no provoca un salto antes o después del elemento, y se puede alinear horizontalmente.

table-cell: el elemento será mostrado como una celda de una tabla (como <td> y <th>).

Algunas ventajas del uso de esta propiedad radican en el hecho de que se pude mostrar información como en una tabla pero utilizando contenedores que no son tablas realmente; o que se pueden utilizar las características de una tabla para realizar la maquetación y dar estructura al documento. Así, se pueden seguir usando los elementos <div>, <p>, etc., para no perder la semántica del documento HTML, pero con CSS se les asigna un comportamiento visual como si fueran celdas de una tabla, aunque presentan un comportamiento más flexible ya que CSS permite modificar la distribución en la maquetación de los elementos.

Por ejemplo, la estructura creada con una tabla nunca se rompe independientemente del tamaño de la pantalla, de forma que mantiene el ancho que deseemos y las celdas nunca se visualizan unas debajo de otras cuando la pantalla se hace muy pequeña. Por ello, puede ser ventajoso crear la estructura de la página mediante una tabla CSS en lugar de mediante elementos <div> posicionados (con «float», por ejemplo), porque en este último caso es posible que alguna columna se muestre debajo de otros contenidos. En el ejemplo que se muestra a continuación se utiliza este valor de la propiedad «display» para representar tres columnas de texto (con la ventaja de que todas las columnas tendrán la misma altura independientemente de su contenido).

style.css

.displtable { display:table; width:100%; margin:1em 0; font-size:.85em; }

.displcelda { display:table-cell; width:33%; padding:0 .25em; }

Section0001.xhtml

<div class="displtable">

<div class="displcelda">

<p>Lorem ipsum ad…</p>

<p>Eu sit tincidunt incorrupte…</p>

</div>

<div class="displcelda">

…

</div>

</div>

Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos.

Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.

Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos.

Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.

Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos.

Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per.

De igual forma, se podrían utilizar las características de una tabla para realizar la maquetación. En el ejemplo que se muestra a continuación se tiene en cuenta el hecho de que la propiedad «vertical-aling» se puede aplicar a las celdas de una tabla para ubicar un pie de foto lateral a una imagen.

Pie lateral alineado verticalmente

También podría utilizarse para maquetar los ejemplos mostrados cuando se hablaba de la propiedad inline-block, como para el caso de las estrofas en paralelo, o para la tabla de las llaves que se muestra a continuación:

COMPAÑÍA GANADERA DE HAT CREEK
Y EMPORIO CABALLAR

Cap. Augustus McCrae

Cap. W. F. Call

}

propietarios

P. E. Parker

Deets, Joshua

}

ayudantes

Se alquilan: Caballos y coches.

Se venden: Reses y caballos.

No se compran ni se venden cabras ni burros.

No alquilamos cerdos.

Uva Uvam Vivendo Varia Fit.

O para cualquier otra estructura que pudiera presentarse. Sin embargo, no debería utilizarse para representar datos tabulados. Lo correcto en estos casos es emplear tablas ya que HTML dispone de las mismas para ello (mediante el elemento <table>).

Finalmente, se reproduce un ejemplo donde se han combinado elementos a los que se les han aplicado distintos valores de la propiedad «display» (inline-block, inline-table y table-cell). El código utilizado hace que las estrofas que se muestran se ubiquen en paralelo, cada una centrada respecto de la mitad de la página que ocupa, alineación que mantienen al ir aumentando el tamaño de letra (para ello se utiliza la propiedad «min-width»). Pero a diferencia de lo que ocurría en el ejemplo mostrado cuando se hablaba de la propiedad inline-block, cuando los versos ocupan todo el ancho no comienzan a indentarse, sino que la estrofa derecha se ubica debajo de la izquierda y ambas se alinean en el centro de la página. Si en esta situación, al ir aumentando el tamaño de letra, los versos llegaran a ocupar nuevamente todo el ancho de pantalla, entonces sí que comenzarían a indentarse.

Las duras tierras frías

con los pies y las manos

son crueles.

Allí el viento chilla,

las piedras son frías;

no hay nada que encontrar.

Nuestro corazón descansa

en aguas húmedas

en algún pantano profundo.

¡Oh, cómo deseamos

probar el pescado

tan dulce y frío!

CÓDIGOS ÚTILES

Compendio de códigos útiles

Hay varios códigos que utilizamos para que nuestro ePub quede más «elegante» y lo más parecido posible al original en papel.

NOTA: Debemos recordar que todos estos códigos que vayamos añadiendo deben ir en el fichero styles.css. Nunca se debe modificar epl.css.

Vamos a comentar algunos de los más utilizados.

Subtítulos

Para colocar subtítulos, o el título en dos líneas, podemos utilizar <br />, pero únicamente uno, nunca se deben encadenar:

<h1>Título<br />

Subtítulo</h1>

Otra opción es crear una clase subtítulo en nuestra CSS. La llamaremos «.subtit»:

style.css

.subtit { text-align:center; text-indent:0; font-size:1.5em; }

Section0001.xhtml

<h1 title="Título: Subtítulo">Título</h1>

<p class="subtit">Subtítulo</p>

En «title» pondremos lo que queramos que vaya a salir en el índice de contenido (TOC).

Si tenemos un título complejo y no queremos dividir los títulos usando una clase subtítulo o algo similar, para mantener el encabezado en una sola pieza podemos utilizar la siguiente solución:

<h1 title="Parte I. El desafío tecnológico"><span>Parte I</br></span>El desafío tecnológico</h1>

Y en el CSS:

h1 {

    font-size: 1.3em;

    margin: 20% 0 3em;

    font-weight: normal;

}

h1 span {

    display: block;

    margin: 0 30% 2em;

    padding-bottom: 1em;

    border-bottom: 4px solid grey;

}

Que se visualizará de la siguiente forma:

Parte I
El desafío tecnológico

Por supuesto, este código puede adaptarse para que no aparezca la línea o se encuentre en otro lado, o bien que tenga otras características.

Imagen antes del título del capítulo

Parece sencillo, bastaría con poner una imagen (con la clase vineta, por ejemplo) y luego el h1 del título. El problema es que si lo hacemos así, entre la imagen y el título se colocará un gran espacio de separación (todo el que queda entre el título y el borde superior de la página cuando no hay imagen). Para solucionar esto hay distintos métodos, veamos dos formas distintas de hacerlo.

La primera solución es aprovechar las características de la clase ilustra, aplicándosela directamente a h1, de esta forma:

<h1 class="ilustra" title="Capítulo X"><img alt="" src="../Images/imgXX.jpeg" /><br />

CAPÍTULO X</h1>

La otra solución es más versátil pues consiste en crear una clase para aplicarla al h1, indicándole las características que queramos que tengan, entre ellas modificar el margen superior para que no se separe de la imagen. Quedaría así:

<p class="ilustra"><img alt="" src="../Images/imgXX.jpeg" /></p>

<h1 class="tit">CAPÍTULO X</h1>

Separador de asteriscos

Coloca nuestros asteriscos más grandes, ya centrados y con margen superior e inferior.

El código que pondríamos sería:

style.css

.asteriscos { text-align:center; text-indent:0; font-size:1.2em; padding:1.5em 0 1em; }

Section0001.xhtml

<p class=”asteriscos” >* * *</p>

Quedaría así:

* * *

Letras capitales y precapitales

Letra capital

Si queremos poner una letra capital al principio de cada capítulo, por ejemplo, podemos utilizar una imagen, como veremos más adelante, o simplemente poner la primera letra más grande, creando una clase en la CSS de este modo:

.capital { font-size:300%; font-weight:bold; float:left; margin:-0.1em 0.125em -0.2em 0; text-indent:0; line-height:1em; height:1em; }

Si queremos que la letra capital se vea en una fuente específica, podemos añadir «font-family», siempre que tengamos definida la fuente y añadido su archivo como se explica en el capítulo «Añadir fuentes».

.capital { font-size:300%; font-weight:bold; float:left; margin:-0.1em 0.125em -0.2em 0; text-indent:0; line-height:1em; height:1em; font-family:"OLDENGL", OLDENGL; }

Tanto en el primer caso como en el segundo, la forma de ponerlo en cada inicio de capítulo es la siguiente:

<p class="asangre"><span class="capital">P</span>árrafo completo</p>

Veamos cómo queda:

Aquí tenemos un ejemplo de cómo quedaría la letra capital «A» con con la fuente Old English incrustada. Si preferimos otra fuente que nos guste más, podemos hacerlo con cualquiera de las que son compatibles con la mayoría de los lectores, o simplemente dejarlo para que se vea con la fuente original. Escribimos un poco más para poder comprobar cómo queda con, al menos, tres líneas en el párrafo, que es como mejor se aprecia.

Precapital

Cuando a la primera letra del párrafo, que queremos poner con letra capital, le precede un símbolo (interrogación, raya de diálogo, etc.), se puede optar por tres soluciones:

Eliminar los símbolos y dejar solamente la letra capital.

Poner con el estilo «.capital» tanto los símbolos como la primera letra.

Definir una clase «.precapital», más pequeña que la «capital», pero también grande y que flote a la izquierda igual que la «.capital».

Vamos a centrarnos en el punto 3, la clase «.precapital»:

style.css

.precapital { font-size:200%; float:left; margin:-0.1em 0.125em -0.2em 0; text-indent:0; line-height:1em; height:1em; }

Section0001.xhtml

<p class="asangre"><span class="precapital">-¿</span><span class="capital">P</span>árrafo completo</p>

Y esto quedaría así:

-¿Qué te parece cómo queda ahora el párrafo? Sin duda es mejor que quitar el símbolo de interrogación y el guión de diálogo ¿verdad?

Letra capital «capalta»

Letra capital más grande y en la misma línea que el resto, en lugar de «flotar» a lo largo de varias líneas:

style.css

.capalta { font-weight: bold; font-size: 300%; }

Section0001.xhtml

<p class="asangre"><span class="capalta">L</span>etra más alta y luego todo el párrafo</p>

Podemos variar el porcentaje del tamaño a nuestro gusto o ponerlo en tamaño fijo 2em o 3em y también ponerlo con un tipo de letra diferente, igual que lo hacíamos con la letra capital que «flota» a la izquierda, de la que hablábamos en el punto anterior.

Quedaría:

Ejemplo de letra capital sin flotar, es decir, a la misma altura de la línea en que está incluida. Esta vez no hemos variado la fuente, pero se puede hacer, lo mismo que en el ejemplo anterior.

Salto de página

Este código se utilizaría para aplicar un salto de página. Se puede poner para que el salto se haga en el elemento anterior a donde hagamos la llamada «breakbefore» o en el elemento posterior a donde hagamos la llamada «breakafter»

Si lo colocamos en un párrafo o div vacío, es indiferente que utilicemos uno u otro, ya que el salto lo hará antes o después de un elemento que no tiene nada.

Salto de página anterior o posterior aplicado en elemento vacío.

En la página de estilos style.css definiremos así el salto de página:

Antes:

.breakbefore { page-break-before: always; }

Después:

.breakafter { page-break-after: always; }

Y en el documento xhtml, justo donde queremos efectuar el salto de página, ponemos:

<p class="break"></p>

O bien:

<div class="break"></div>

Hemos utilizado la clase «.break» para dar a entender que es indiferente utilizar «.breakbefore» o «.breakafter».

Salto de página utilizando la clase «.breakbefore» aplicada en el elemento posterior al salto.

<p class="breakbefore">Texto del párrafo posterior al salto></p>

O bien:

<div class="breakbefore Restoclases">

<pTexto del primer párrafo posterior al salto, contenido en un «div».></p>

<pTexto del segundo párrafo posterior al salto, contenido en un «div».></p>

<p>etc.></p>

</div>

También podríamos añadir, como veremos, la clase «.breakafter» al elemento anterior al salto de página, con lo que el salto quedará después de dicho elemento, ya sea un <p> o un <div>.

Salto de página utilizando la clase «.breakafter» aplicada en el elemento anterior al salto.

<p class="breakafter"Texto del párrafo anterior al salto></p>

O bien:

<div class="breakafter Restoclases">

<pTexto del primer párrafo anterior al salto, contenido en un «div».></p>

<pTexto del segundo párrafo anterior al salto, contenido en un «div».></p>

<p>etc.></p>

</div>

También podríamos añadir, como hemos visto, la clase «.breakbefore» al elemento posterior al salto de página, con lo que el salto quedará antes de dicho elemento, ya sea un <p> o un <div>.

Hay que tener en cuenta que en Sigil no se verá el salto de página. Solamente veremos un salto de línea más grande, pero al verlo en un lector, sí que se verá el salto.

No separar

.nosep

La clase .nosep viene directamente en el ePub Base, y se utiliza para mantener en la misma línea aquello que queramos (por ejemplo, una fecha separada por guiones).

En el documento xhtml usamos:

<p>Inicio del párrafo en que vamos a poner la fecha <span class="nosep">01-01-2000</span>, final del párrafo.</p>

Y así conseguimos que nunca se divida la fecha en dos líneas.

&nbsp;

En las abreviaturas, o iniciales separadas por punto y espacio, podemos conseguir el mismo efecto sustituyendo el espacio intermedio por «&nbsp;», que en este caso sí está permitido:

<p>El gran poeta anglo-estadounidense T.&nbsp;S. Eliot (St. Louis, Misuri, EE.&nbsp;UU., 1888 - Londres, R.&nbsp;U., 1965).</p>

Alineación

Clase «.dere»

Para alinear el párrafo al margen derecho con un poco más de margen, de forma que queda más estético que la clase «.derecha». En realidad, esta clase no es una alineación del texto a la derecha, sino que es un aumento del margen izquierdo para que el texto quede a la derecha de la página.

style.css

.dere { padding-left:20%; }

Section0001.xhtml

<p class="dere">Texto con 20% margen a la izquierda</p>

Quedaría:

Texto con 20% margen a la izquierda

Sangría francesa

Como dice el título del punto, es para aplicar una sangría francesa a uno o varios párrafos.

style.css

.francesa { padding-left:1.5em; text-indent:-1.5em; }

.francesa p { text-indent:-1.5em; }

Section0001.xhtml

<p class="francesa">Párrafo con sangría francesa</p>

Esto quedaría así:

Aquí tenemos un ejemplo de cómo quedaría un párrafo con sangría francesa, aunque ya sabemos qué es la sangría francesa, por supuesto, vamos a poner una definición: Estilo de sangría de párrafo en el que la primera línea sobresale por la izquierda algo más que el resto, que van algo más sangradas. Al párrafo formado con la sangría francesa se le llama «párrafo francés».

Alinear bloques de texto

Mediante el uso de la propiedad «display:inline-block» se puede alinear horizontalmente en la página un bloque de texto, manteniendo a su vez la alineación relativa que tengan los elementos que lo componen.

Para ello, únicamente habría que englobar el bloque en un contenedor al que se le ha aplicado dicha propiedad, y posteriormente alinear horizontalmente el conjunto.

Así por ejemplo, podría utilizarse para centrar una lista ordenada:

style.css

.listacen { display:inline-block; text-indent:0; }

Section0001.xhtml

<div class="centrado">

<ol class="listacen">

<li>Punto uno.</li>

<li>Punto dos.</li>

<li>Punto tres.</li>

</ol>

</div>

Dando como resultado:

Punto uno.

Punto dos.

Punto tres.

También podría emplearse para centrar tablas, si bien en ese caso es más adecuado utilizar la propiedad «display:inline-table», de la que se hablará más extensamente en el capítulo de tablas.

Otra opción interesante sería la de utilizar esta propiedad para centrar en la página una serie de versos que se encuentran alineados a la izquierda.

style.css

.centrarversos { text-align:center; text-indent:0; margin:1em .5em; }

.versoscen { display:inline-block; margin-left:3em; }

.versoscen p { font-style:italic; text-align:left; line-height:1.1em; text-indent:-3em; }

Section0001.xhtml

<div class="centrarversos">

<div class="versoscen">

<p>Este el primer verso</p>

<p>este el segundo</p>

<p>el tercero podría ser este</p>

<p>para terminar con el cuarto.</p>

</div>

</div>

La propiedad «margin» definida en la clase «.centrarversos» es la que proporciona el margen de separación entre el grupo de versos y los párrafos (o elementos) adyacentes. El «margin-left» que se incluye en la clase «.versoscen» permite que los versos se indenten cuando, al ir aumentando el tamaño de letra, lleguen a ocupar todo el ancho de pantalla. Para ello, el valor que adopte tendrá que coincidir con el dado a la propiedad «text-indent» del selector «.versoscen p».

El resultado se muestra bajo estas líneas:

Este el primer verso

este el segundo

el tercero podría ser este

para terminar con el cuarto.

El código utilizado para centrar versos podría aplicarse también si lo que se pretende centrar es un poema o un grupo de versos más extenso, si bien presenta un inconveniente: el englobar los versos en un único elemento contenedor <div>, al que se le ha aplicado la propiedad «display:inline-block», hace que estos permanezcan agrupados, de tal forma que ante un salto de página es todo el <div> el que pasa a la página siguiente, y no los distintos versos (párrafos) de forma individual.

Por ello, si el poema llega a alcanzar el 100% del alto de pantalla, ya sea porque es muy extenso o como fruto de ir aumentando el tamaño de letra, la parte del mismo que no quepa en la página no salta a la siguiente, sino que desaparece por la parte inferior de la pantalla.

Para evitar esta circunstancia, en lugar de utilizar una única caja contenedora que englobe a todos los versos, puede recurrirse al empleo de varios elementos <div> independientes que agrupen un número limitado de versos cada uno. El problema radica en el hecho de que al hacerlo de esta forma, el centrado resultante no será homogéneo, dado que cada grupo quedará alineado en función del verso de mayor longitud que contenga, como ocurre en el ejemplo que se muestra a continuación, donde los versos anteriores se han agrupado de dos en dos:

Este el primer verso

este el segundo

el tercero podría ser este

para terminar con el cuarto.

Una posible solución consistiría en fijar en la regla que define el estilo de los versos un ancho que sea igual al que ocupa el verso de mayor longitud del poema.

Day is ended,

dim my eyes,

but journey long

before me lies.

Farewell, friends!

I hear the call.

The ship’s beside

the stony wall.

Foam is white

and waves are grey;

beyond the sunset

leads my way.

Para centrar estas estrofas, se ha utilizado el siguiente código:

style.css

.centrarpoema { text-align:center; text-indent:0; margin:0 .5em 1em; padding-left:2em; }

.poemacen { display:inline-block; max-width:100%; padding-top:1em; }

.poemacen p { font-style:italic; text-align:left; line-height:1.1em; text-indent:-2em; width:6.5em; max-width:100%; }

.clear { clear:both; }

Section0001.xhtml

<div class="centrarpoema">

<div class="poemacen">

<p>Day is ended,</p>

<p>dim my eyes,</p>

<p>but journey long</p>

<p>before me lies.</p>

</div>

<div class="clear"></div>

<div class="poemacen">

<p>Farewell, friends!</p>

<p>I hear the call.</p>

<p>The ship’s beside</p>

<p>the stony wall.</p>

</div>

<div class="clear"></div>

…

</div>

En este ejemplo, cada caja contenedora engloba a cuatro versos. Para que el poema quede centrado, y que a su vez todos los versos del poema permanezcan alineados a la izquierda, al dar las propiedades al párrafo que los define (mediante el selector descendente «.poemacen p») se fija un ancho de valor «width:6.5em» similar al que ocupa el verso de mayor longitud del poema. Por otro lado, el valor de la propiedad «padding-left» definido en la clase «.centrarpoema» coincidirá con el indentado negativo dado a los versos en el selector «.poemacen p» (2em en este caso).

El elemento <div class="clear"></div> se utiliza para forzar un salto de línea entre los distintos grupos de versos (<br /> no termina de funcionar bien en todos los dispositivos). Al aplicar la propiedad «display:inline-block», cada elemento contenedor <div> se comporta como un elemento en línea, por lo que permite la presencia de otros elementos adyacentes. Así, si no se fuerza este salto, puede ocurrir que los grupos de versos acaben posicionados horizontalmente en línea si el tamaño de letra no es muy grande y/o los versos son cortos.

Poemas

Los versos siempre se pueden poner con una clase «.cita», pero quedan mejor de la siguiente manera:

style.css

.verso { margin:2em 0 2em 5em; }

.verso p { text-align:left; line-height:1.2em; font-style:italic; text-indent:-2em; }

Section0001.xhtml

<div class="verso">

<p>Este el primer verso</p>

<p>este el segundo</p>

<p>el tercero podría ser este</p>

<p>para terminar con el cuarto. </p>

</div>

Que quedaría:

Este el primer verso

este el segundo

el tercero podría ser este

para terminar con el cuarto.

Si queremos numerar nuestros versos, podemos hacerlo colocando los números a la derecha o a la izquierda.

Poema con versos numerados a la derecha

Para colocar los números a la derecha, ponemos:

style.css

.numerosder { font-size:0.9em; font-style:italic; float:right; color:grey; margin-right:-4em; }

.versonder { margin-left: 2em; margin-right: 4em; }

.versonder p { text-alingn:left; text-indent:0; }

Section0001.xhtml

<div class="versonder">

<p><span class="numerosder">1NÚM</span>Texto del primer verso</p>

<p>Ahora el segundo verso</p>

<p>Después viene el tercero</p>

<p><span class="numerosder">2NÚM</span>En el último verso el segundo número.</p>

</div>

Si queremos cambiar el color, en lugar de color:grey (gris), podemos poner otro o, si no ponemos ninguno, saldrá negro igual que el texto.

Si en cada página tenemos un poema, podemos modificar el cuerpo de la sección <body>.

style.css

body.versonder { margin:1em 0 1em 1em; }

body.versonder p { margin-right: 4em; }

Section0001.xhtml

<body class="versonder">

<h1>Título del poema</h1>

<p><span class="numerosder">1NÚM</span>Texto del primer verso</p>

<p>Ahora el segundo verso</p>

<p>Después viene el tercero</p>

<p><span class="numerosder">2NÚM</span>En el último verso el segundo número.</p>

…

</body>

Que queda:

1NÚMTexto del primer verso

Ahora el segundo verso

Después viene el tercero

2NÚMEn el último verso el segundo número.

Poema con versos numerados a la izquierda

Ahora vamos a poner los números a la izquierda:

style.css

.numerosizq { float: left; margin-left: -4em; color:grey; }

.versonizq { margin-left: 4em; }

.versonizq p { text-alingn:left; text-indent:0; }

Section0001.xhtml

<div class="versonizq">

<p><span class="numerosizq">1NÚM</span>Texto del primer verso</p>

<p>Ahora el segundo verso</p>

<p>Después viene el tercero</p>

<p><span class="numerosizq">2NÚM</span>En el último verso el segundo número.</p>

</div>

Y lo mismo que hicimos anteriormente, si queremos un poema en cada página, también podemos modificar el <body>:

style.css

body.versonizq { margin:1em 0 1em 1em; }

body.versonizq p { margin-left: 4em; }

Section0001.xhtml

<body class="versonizq">

<h1>Título del poema</h1>

<p><span class="numerosizq">1NÚM</span>Texto del primer verso</p>

<p>Ahora el segundo verso</p>

<p>Después viene el tercero</p>

<p><span class="numerosizq">2NÚM</span>En el último verso el segundo número.</p>

…

</body>

Y esto quedaría:

1NÚMTexto del primer verso

Ahora el segundo verso

Después viene el tercero

2NÚMEn el último verso el segundo número.

Notación marginal

Algunas obras clásicas llevan una notación al margen que se consigue con el siguiente código:

style.css

.numarg { font-size:0.8em; font-style:italic; float:right; color:grey; margin-right:-4em }

body.notmarg { margin:1em 0 1em 1em; }

body.notmarg p { margin-right: 4em; }

Section0001.xhtml

<body class="notmarg">

<p>Principio del párrafo <span class="numarg">NOTA</span> seguiríamos con el párrafo varias líneas hasta llegar a la siguiente notación <span class="numarg">NOTA2</span> y así sucesivamente</p>

…

</body>

Es decir, conseguimos que nuestra anotación flote a la derecha, con un margen negativo de 4em para que quede a la derecha de nuestro texto, con el mismo tamaño de las versalitas y en color gris. Además modificamos el margen derecho con una clase aplicada al body, para que ese margen negativo no se salga de la pantalla. Tanto el color como el tamaño de la letra se podría cambiar según nuestro gusto o la edición en papel.

Hay que tener en cuenta que hemos modificado el margen de todo el archivo al aplicarle al body la etiqueta «.notmarg».

Voy a transcribir aquí parte del primer párrafo de «Acerca del alma» de Aristóteles, que contiene estas anotaciones marginales de las que hablamos, para que podamos ver cómo queda (téngase en cuenta que este ejemplo se ha adaptado para ser incluido dentro del manual y, por tanto, no incluye la modificación del body; se puede ver un ejemplo completo aquí):

Partiendo del supuesto de que el saber es una de las 402a cosas más valiosas y dignas de estima y que ciertos saberes son superiores a otros bien por su rigor bien por ocuparse de objetos mejores y más admirables, por uno y otro motivo deberíamos con justicia colocar entre las primeras la investigación en torno al alma. Más aún, parece que el conocimiento de esta contri5buye notablemente al conjunto del saber y muy especialmente al que se refiere a la Naturaleza: el alma es, en efecto, como el principio de los animales. Por nuestra parte, intentamos contemplar y conocer su naturaleza y su entidad así como cuantas propiedades la acompañan: de estas las hay que parecen ser afecciones exclusivas del alma mientras que otras parecen afectar además, y en virtud de ella, a los animales 10como tales[…]

Notas al margen

Tomando como base el código anterior, también se podrían incluir anotaciones que estuvieran situadas en alguno de los laterales del texto, como ocurre en el ejemplo que se muestra a continuación:

Aquí estaría situada la nota al margenPrincipio del párrafo, donde iría la primera anotación, tras la cual seguiríamos con el párrafo varias líneas hasta llegar Segunda notaa la siguiente anotación, que se incluiría de manera similar, y así sucesivamente…

En este ejemplo, las notas se han ubicado a la izquierda del texto y como máximo pueden ocupar un 30% del ancho total de pantalla. Para ello, se ha utilizado el siguiente código:

style.css

.coltexto { margin-left:30%; }

.colnota { float:left; clear:both; padding-top:.3em; margin-left:-42.86%; max-width:40%; text-indent:1.2em; font-size:.8em; line-height:1.1em; text-align:justify; }

@media amzn-kf8 {

.colnota { float:left; clear:both; padding-top:.3em; margin-left:-42.86%; width:40%; text-indent:1.2em; font-size:.8em; line-height:1.1em; text-align:justify; }

}

Section0001.xhtml

<div class="coltexto">

<p><span class="colnota">Aquí estaría situada la nota al margen</span>Principio del párrafo, donde iría la primera anotación, tras la cual seguiríamos con el párrafo varias líneas hasta llegar <span class="colnota">Segunda nota</span>a la siguiente anotación, que se incluiría de la misma manera, y así sucesivamente…</p>

</div>

Mediante la clase «.coltexto» se indica el porcentaje del ancho de pantalla que ocuparán las notas al margen, y se aplica a un elemento contenedor <div> que englobará a todos los párrafos de texto que lleven este tipo de anotación. El estilo del texto de las notas se aplica con la clase «.colnota», y puede modificase como se considere oportuno. El valor negativo de la propiedad «margin-left» dependerá de la relación que exista entre el porcentaje de pantalla que ocupan las notas y el porcentaje que ocupa el texto principal, y se calcula dividiendo uno entre otro. Así, para este ejemplo toma un valor de (30/70)×100=42,86%. Con la propiedad «max-width» se evita que el texto de las notas sobrepase el ancho de pantalla asignado. También podría utilizarse en su lugar la propiedad «width», pero de esta forma se “obliga” al texto de la anotación a ocupar todo el espacio reservado, lo que hace que el resultado sea visualmente peor. El valor dado es algo inferior al del «margin-left» para que quede un pequeño margen de separación entre las anotaciones y el texto principal.

El inconveniente que presenta el código es que la propiedad «max-width» no es soportada por KindleGen cuando se realiza la conversión desde ePub a formato Kindle. Por ello se utiliza la media query «@media amzn-kf8». La regla «@media» permite especificar que un determinado conjunto de reglas CSS solo deben aplicarse a cierto tipo de dispositivo, en este caso, al formato .azw3 de Kindle, para el que se ha modificado la clase «.colnota» cambiando la propiedad «max-width» por «width».

Líneas y recuadros

Línea horizontal

Dibuja una línea horizontal atravesando toda la página. Puede servir, por ejemplo, para separar el título del capítulo. Veamos dos formas de hacerlo. La más sencilla es poner en el fichero xhtml, donde queremos la línea, el código:

<hr />

Y nos saldrá una línea gris como esta:

Si queremos elegir grosor de línea, margen superior e inferior, color, etc., tendremos que complicar el código un poco más.

style.css

.linea { margin-bottom:10%; padding:0.5em; border:0; border-bottom:3px solid green; }

Section0001.xhtml

<hr class="linea" />

Donde «margin-bottom» es el margen que queda bajo la línea, por lo que si no lo vamos a utilizar para separar el título del capítulo, convendría reducirlo, por ejemplo a un 5%.

Veamos cómo queda:

Una gran ventaja de usar <hr /> (en lugar de <p> o <div> vacíos, que por otra parte están desaconsejados) es que podemos definirla directamente en la CSS:

hr { margin-bottom:10%; padding:0.5em; border:0; border-bottom:3px solid green; }

Y todas nuestras líneas horizontales tendrán el mismo estilo. Si necesitamos personalizar algunas, pueden crearse clases adicionales y aplicarlas solamente a las requeridas, como veremos a continuación.

Línea corta

Para líneas horizontales que no cubren el total de la página.

style.css

.lineacorta { margin:0 40%; padding:0.5em; border:0; border-bottom:1px solid brown; }

Section0001.xhtml

<hr class="lineacorta" />

La línea queda centrada al poner «margin:0 40%» (0 arriba y abajo, 40% a cada lado = 80% en total). De este modo, ya no es necesario establecer su ancho (width) a 20%. Aquí también podemos especificar el margen inferior para separarlo de la línea siguiente.

.lineacorta { margin:0 40% 10%; padding:0.5em; border:0; border-bottom:1px solid brown; }

Esta línea queda:

Línea decorativa

Se trata de poner una línea decorativa a la izquierda que llegue hasta, por ejemplo, el número de capítulo. Hemos encontrado dos formas de hacerlo y vamos a explicar ambos códigos, uno aplicado al párrafo y otro aplicado al título de capítulo.

Vamos primero poniendo la línea decorando el número de capítulo:

style.css

hr { background-color:black; height:0.1em; width:90%; float:left; margin-top:-2em; }

h1 { text-align:right; }

Section0001.xhtml

<h1>1</h1> <hr />

Lo que hacemos es poner en la línea un margen superior negativo para que se alinee con el número del capítulo que va encima y el número del capítulo lo alineamos a la derecha.

Y ya tenemos nuestro número de capítulo con una línea a la izquierda.

Ahora probaremos el otro código para decorar un número en un párrafo.

style.css

.lin { border-bottom:1px solid black; }

.num { float:right; background-color:white; margin-top:-0.5em; font-size:1.3em; }

Section0001.xhtml

<p class="lin"><span class="num">1</span></p>

Este código lo que hace es que el número flote a la derecha de la línea.

Así es como queda:

1

Línea vertical

Si deseamos poner una línea vertical a toda la página (hablamos de toda la sección), podemos utilizar este código en la CSS:

.lineav { border-left: 1em solid rgb(200,200,200); padding-left:0.5em;}

Luego aplicaríamos la clase «.lineav» en el body de la sección que deseemos

Esto quedaría así:

Recuadro

Para encuadrar todo el texto, podemos utilizar simplemente una variante de la clase «.banner» que ya viene en el ePub Base, añadiendo los bordes derecho e izquierdo.

Ya un poco más complicado sería poner un recuadro más pequeño centrado. No mucho más complicado, desde luego. Pondríamos:

style.css

.recuadro { text-indent:0; border:1px solid black; margin:0.5em 25% 0.5em 25%; padding:1em; }

.recuadro p { text-indent:0; }

Section0001.xhtml

<div class="recuadro">

<p>Primer párrafo</p>

<p>Segundo párrafo</p>

<p>Tercer párrafo</p>

<p>Etcétera.</p>

</div>

Lo que quedaría:

Primer párrafo

Segundo párrafo

Tercer párrafo

Etcétera.

Jugaríamos con las medidas de los márgenes para ajustar el tamaño que queramos para el recuadro. Concretamente con los porcentajes a derecha e izquierda.

En estos códigos, siempre podemos modificar los tamaños, márgenes, grosor de las líneas, color, etc., para que el ePub quede a nuestro gusto. Se trata de ir probando hasta encontrar el formato ideal.

NOTA: Para definir una separación entre párrafos, se aconseja el uso de «em», ya que el cambio del tamaño de la letra puede hacer que no se muestre adecuadamente usando porcentajes. En cambio, para definir los márgenes laterales con respecto al borde de la pantalla, es preferible usar %, ya que esto asegura que el espacio se mantenga siempre igual, con respecto a tu marco fijo.

Código desaconsejado

Etiqueta <mark>

El elemento <mark> representa un texto resaltado, un texto marcado para referencia, debido a su relevancia en un contexto particular.

Ejemplo:

<p>Este es un texto <mark>resaltado</mark> como ejemplo.</p>

Resultado:

Este es un texto resaltado como ejemplo.

Valores CSS predeterminados:

mark {

    background-color: yellow;

    color: black;

}

Problema: Se ha detectado que no funciona en los lectores Sony.

Poner un acceso directo en una imagen

Se usa para hacer clic en una imagen y que te enlace con otra parte del texto, como lo que hacemos con las notas pero con una imagen en vez de un número.

Se pone un código del tipo:

<a href="../Text/destino.xhtml#lugar"><img src="../Images/imagen.jpg" /></a>

Problema: No funciona en algunos dispositivos.

Solución: Colocar el enlace en un texto cercano a la imagen, un pie de foto por ejemplo.

Parámetros start y value para listas ordenadas

Se usan para comenzar una lista en un número distinto de 1. Por ejemplo, para comenzar en el número 6 colocamos:

<ol start="6">

O en el segundo caso:

<ol>

<li value="6">texto</li>

Problema: Muchos lectores lo interpretan adecuadamente, pero otros lo ignoran y comienzan la numeración en 1, con lo cual se pierde el efecto.

Solución: Este código pasó por el banco de pruebas de EPL y no se encontró un código que solucionara el problema en los lectores que no lo interpretan adecuadamente. La mejor solución, por tanto, es no usar listas en estos casos sino introducir manualmente los números correspondientes.

background

Se usa para poner una imagen detrás de un texto o repetida hasta completar todo el espacio de una caja (muy útil, por ejemplo, para cenefas). Un ejemplo de uso es:

background-image: url('../Images/caballo.png');

background-repeat: repeat-x;

Problema: Algunos eReader no lo representan, sencillamente, otros lo hacen de forma inesperada.

Solución: Siempre que sea posible, usaremos imágenes normales o flotantes. Para el caso de imagen de fondo no se ha encontrado una solución aceptable.

Propiedad small-caps para las versalitas

Se usa para poner un texto en versalitas sin tener que reescribirlo en mayúsculas. El efecto es que las mayúsculas las deja en mayúsculas y las minúsculas las convierte en mayúsculas de menor tamaño, es decir, lo que llamamos versalitas. Para usarlas se usa un código de estilos del tipo:

.miestilo { font-variant:small-caps }

Problema: No funciona en algunos lectores.

Solución: Usar la clase .versalita del base o la etiqueta <small>.

Pseudoelementos

Son muchos y variados, se identifican por comenzar con dos puntos (:). Tienen variados significados y aplicaciones. El más conocido quizá sea :first-letter (usado para definir las letras capitulares), aunque hay otros igualmente conocidos (:first-child, :last-child, :nth-child(2), :nth-last-child(2), :first-line, :before, :after, …).

Problema: Son ignorados por todos los lectores basados en ADE y algunos más.

Solución: Algunos no tienen sustituto posible (por ejemplo :first-line) pues no es posible saber a qué texto se aplicará con antelación. En los casos en los que sabemos a qué texto se aplicará sí se puede solucionar con la aplicación de clases propias.

Controlar la altura de los elementos: max-height

Esta propiedad se usa para definir la altura máxima de algún elemento escalable, como por ejemplo, una imagen. Hace referencia a la altura del contenedor donde esté situado el elemento al que se aplica, cuando se trata de una altura porcentual, o a la altura del elemento cuando se coloca una altura fija (en píxeles).

Problema: Es ignorado por casi todos los lectores cuando la altura del contenedor no es fija y no se coloca como un dato fijo.

Solución: Lo mejor suele ser usar la propiedad height o, si queremos que el elemento escale hasta un tope, poner ese tope con un valor fijo en píxeles.

Otos códigos ignorados

list-style-position

font-variant

!important

letter-spacing

text-transform

vertical-align (ignorado al usarse con elementos en bloque, solo funciona con elementos en línea)

word-spacing

LISTAS Y TABLAS

Listas

Para los distintos tipos de listas usaremos las siguientes etiquetas:

<ul> </ul>: Define una lista no numerada.

<ol> </ol>: Define una lista numerada.

<li> </li>: Se usa para añadir puntos dentro de las etiquetas anteriores.

<dl> </dl>: Define una lista de definición.

<dt> </dt>: Indica un «título» dentro de una lista de definición.

<dd> </dd>: Para añadir las definiciones en las listas de definición.

A cualquiera de las etiquetas les podemos añadir «clases» para dar formato a la lista entera, al nido o a la línea.

Y ahora ¿cómo aplicarlo? A continuación presentamos ejemplos para los distintos tipos de listas y su correcto uso:

Listas sencillas

1. No numeradas

Para delimitar la extensión de la lista, se utiliza la etiqueta <ul> </ul> y para los distintos puntos, la etiqueta <li> </li>.

Si queremos que en el ePub nos quede:

Título de la lista

Punto uno.

Punto dos.

Punto tres.

Tendremos que poner:

<p class="negrita">Título de la lista</p>

<ul>

<li>Punto uno.</li>

<li>Punto dos.</li>

<li>Punto tres.</li>

</ul>

2. Numeradas

Para delimitar la extensión de la lista, se utiliza la etiqueta <ol> </ol> y para los distintos puntos la etiqueta <li> </li>.

Si queremos que en el ePub nos quede algo como:

Título de la lista

Punto uno.

Punto dos.

Punto tres.

Pondríamos:

<p class="negrita">Título de la lista</p>

<ol>

<li>Punto uno.</li>

<li>Punto dos.</li>

<li>Punto tres.</li>

</ol>

Cambio de aspecto de listas numeradas

Vamos a conseguir que nuestra numeración vaya con paréntesis y en negrita, en lugar de con punto. Es decir, en lugar de «1.» vamos a hacer que sea «1)».

Utilizamos el código de las listas no numeradas. Tenemos que introducir los números, pero con los estilos que vamos a crear, conseguimos que quede perfectamente ordenado.

Primero creamos los estilos en nuestra CSS:

.ul2 { list-style-type:none; }

.li2 { text-indent:-2em; margin-left:2em;}

.ker10 { padding-right:1em; }

.ker04 { padding-right:0.4em;}

Y en nuestro xhtml ponemos:

<ul class="ul2">

<li class="li2"><b>1<span class="ker10">)</span>Punto uno.</b> Definición del punto uno.</li>

<li class="li2"><b>2<span class="ker10">)</span>Punto dos.</b> Definición del punto dos.</li>

<li class="li2"><b>3<span class="ker10">)</span>Punto tres.</b> Definición del punto tres.</li>

</ul>

Lo que quedaría:

1)Punto uno. Definición del punto uno.

2)Punto dos. Definición del punto 2.

3)Punto tres. Definición del punto tres.

Listas numeradas con títulos intercalados

A veces necesitamos que la numeración de nuestra lista se interrumpa y continúe tras otro u otros párrafos. Por ejemplo:

Título 1

Punto uno

Punto dos.

Punto tres.

Título 2

Punto cuatro.

Punto cinco.

Título 3

Punto seis.

Punto siete.

Para conseguir esto necesitaríamos crear una clase personalizada para la interrupción de la numeración, es decir:

.sinnum {list-style:none; display:inline-block; margin:2em 0 0 -1em; font-size:1.2em; font-weight:bold; }

Entendiendo que podríamos modificar el código para poner una fuente diferente, una decoración de la fuente diferente, etc.

Y en nuestro xhtml pondremos:

<ol>

<li class="sinnum">Título 1</li>

<li>Punto uno.</li>

<li>Punto dos.</li>

<li>Punto tres.</li>

<li class="sinnum">Título 2</li>

<li>Punto cuatro.</li>

<li>Punto cinco.</li>

<li class="sinnum">Título 3</li>

<li>Punto seis.</li>

<li>Punto siete.</li>

</ol>

Los usuarios de Kindle que necesiten este código han de traducirlo desde el ePub con las herramientas de conversión de Calibre, pues el KindleGen no lo hace correctamente.

Listas con varios párrafos en cada punto

Tanto en las listas sin ordenar como en las ordenadas, podemos poner varios párrafos dentro de cada punto de la siguiente manera:

<ul>

<li>Primer párrafo del primer punto

<p>Segundo párrafo del primer punto</p>

</li>

<li>Primer párrafo del segundo punto

<p>Segundo párrafo del segundo punto</p>

<p>Tercer párrafo del segundo punto</p>

</li>

</ul>

Y así sucesivamente.

Lo que quedaría:

Primer párrafo del primer punto

Segundo párrafo del primer punto

Primer párrafo del segundo punto

Segundo párrafo del segundo punto

Tercer párrafo del segundo punto

Si queremos que el margen de los párrafos quede alineado, podemos definir una clase para los párrafos en nuestro fichero style.css con «text-indent:0» o con el estilo que nos parezca mejor.

Listas anidadas

Se puede anidar una lista dentro de otra. Al igual que con las listas sencillas, tenemos:

1. Listas anidadas no ordenadas

Se anidan etiquetas <ul> </ul> dentro de otras etiquetas <ul> </ul>, delimitando siempre los puntos con <li> </li>. Hay que tener cuidado de ir cerrando siempre las etiquetas <ul> delimitando la extensión del «nido».

También habría que tener cuidado con no cerrar la última etiqueta </li> de cada «nido», si vamos a «anidar» algo en ella, ya que se cerraría al final de lo que «anidemos».

Por ejemplo, si queremos obtener este resultado:

Título de la lista

Punto 1.

Punto 1.1.

Punto 1.2.

Punto 1.2.1.

Punto 1.2.2.

Punto 1.3.

Punto 1.3.1.

Punto 1.3.2.

Punto 2.

Punto 2.1.

Tendríamos que poner:

Para dar formato a los puntos, tenemos que ponerlo en la página style.css. Si queremos un círculo relleno, pondremos «disc», para un círculo «circle», para un cuadrado «square» y si no queremos que ponga nada «none». Es decir, pondríamos esto:

/* -------- ESTILOS PERSONALES -------- */

ul { list-style-type:disc; }

ul ul { list-style-type:circle; }

ul ul ul { list-style-type:square; }

ul ul ul ul { list-style-type:none; }

2. Listas anidadas ordenadas

Se hacen igual que las listas no ordenadas, solo que en vez de la etiqueta <ul> </ul> se utiliza <ol> </ol>.

Para obtener:

Título de la lista

Punto 1.

Punto 1.1.

Punto 1.2.

Punto 1.2.1.

Punto 1.2.2.

Punto 1.3.

Punto 1.3.1.

Punto 1.3.2.

Punto 2.

Punto 2.1.

Pondríamos:

<p class="negrita">Título de la lista</p>

<ol>

<li>Punto 1.

<ol>

<li>Punto 1.1.</li>

<li>Punto 1.2.

<ol class="cursiva">

<li>Punto 1.2.1.</li>

<li>Punto 1.2.2.</li>

</ol>

</li>

<li>Punto 1.3.

<ol>

<li>Punto 1.3.1.</li>

<li>Punto 1.3.2.</li>

</ol>

</li>

</ol>

</li>

<li>Punto 2.

<ol>

<li>Punto 2.1.</li>

</ol>

</li>

</ol>

Listas de definición

Las listas de definición se utilizan, sobre todo, para definir palabras, tipo diccionario y también para los listados de personajes.

Para delimitar la lista se utiliza la etiqueta <dl> </dl>, para lo que vamos a definir, la etiqueta <dt> </dt> y para las definiciones <dd> </dd>.

Si ponemos:

<p class="negrita">TÍTULO</p>

<dl>

<dt class="negrita">Libro</dt>

<dd>La mayor fuente de cultura que existe.</dd>

<dd>El mejor entretenimiento del mundo.</dd>

<dd>Forma de expresión.</dd>

<dt class="negrita">Escritor</dt>

<dd>Persona que plasma en los libros sus pensamientos o imaginación.</dd>

</dl>

Nos quedará:

TÍTULO

Libro

La mayor fuente de cultura que existe

El mejor entretenimiento del mundo.

Forma de expresión.

Escritor

Persona que plasma en los libros sus pensamientos o imaginación.

Tablas

Introducción

El objetivo original de las tablas es mostrar datos tabulados. Por este motivo hacen este trabajo en un ePub de forma mucho más eficiente que de cualquier otra forma.

Por otro lado una tabla es solo un contenedor de contenedores (celdas) y muchas tareas de maquetación compleja pueden ser resueltas mediante su utilización. Entre ellas: Adaptación de poesía, centrado de texto en pantalla con cualquier alineación, texto en dos o más columnas, notas o numeración al margen del texto, etc.

En otras partes del manual hemos visto cómo lo anterior puede realizarse con otro tipo de técnicas. Es decisión de cada editor elegir lo que mejor se adapte a sus gustos o necesidades.

Las tablas tienen sobre otras técnicas la ventaja de ser un código más fácilmente legible en conjunto. Y el inconveniente del tedioso trabajo de marcar su contenido con las diversas etiquetas. Esto último puede resolverse sencillamente diseñando su estructura general en Word y utilizar después algún programa que facilita la conversión de docx a ePub. La tabla quedará perfectamente etiquetada a falta de darle el formato deseado para obtener diseños de tablas con datos claros, como se mostrará a continuación.

Estructura básica de las tablas

La estructura de una tabla debe estar perfectamente diferenciada del resto del texto de la página y el usuario debe poder entender fácilmente la misma.

Una estructura simple de tabla es un conjunto de celdas de datos alineadas horizontalmente en filas y verticalmente en columnas.

Etiquetas xhtml que definen una tabla

Para delimitar la tabla utilizamos las etiquetas <table></table>. Entre ellas irán especificadas y delimitadas las filas con <tr></tr> que a su vez delimitarán cada una de las celdas que contienen con <td></td>. Entre estas dos etiquetas iría el texto o datos.

Este código (después veremos las propiedades «frame» y «rules» para los bordes):

<table frame="box" rules="all">

<tr>

<td>Celda 1.1</td>

<td>Celda 2.1</td>

<td>Celda 3.1</td>

</tr>

<tr>

<td>Celda 1.2</td>

<td>Celda 2.2</td>

<td>Celda 3.2</td>

</tr>

</table>

Se mostraría:

Celda 1.1 | Celda 2.1 | Celda 3.1
Celda 1.2 | Celda 2.2 | Celda 3.2

Título de la tabla

El título de la tabla se especifica entre las etiquetas <caption></caption>.

La alineación por defecto del texto incluido es centrado y situado en la parte superior de la tabla. El formato y alineación del texto puede modificarse aplicando las clases correspondientes:

style.css

.captright { text-align: right; font-weight: bold; }

Section0001.xhtml

<caption class="captright">Título de la Tabla</caption>

Lo anterior aplicado mediante selectores puede también definirse directamente en la CSS:

caption { text-align: right; font-weight: bold; }

Para modificar su posición (lateral, inferior) se utiliza la propiedad «caption-side». Pero esta propiedad no es reconocida por los lectores de ePub.

Título de columnas

El título de cada columna se especifica entre las etiquetas <th></th>.

El formato por defecto del texto incluido es centrado y negrita, pero puede modificarse aplicando cualquier clase utilizada para formato o alineación de texto.

Section0001.xhtml

<th class="cursiva">Título 1</th>

La etiqueta <th> puede ser perfectamente sustituida por <td>, aplicando a la celda la clase deseada. Es decir, <th> es lo mismo que: <td class="negrita centrado">.

Estructura compleja

Una estructura más compleja puede añadir:

Bordes.

Espacio entre las celdas (padding).

Combinación de celdas.

Formato del texto.

Alineación del texto o datos.

Alineación de tablas.

Tamaño de columnas y celdas.

Tamaño de texto (variable o fijo).

Notas Previas: Todos los estilos aplicados a una etiqueta son heredados por las etiquetas hijas. En los casos que veremos a continuación aplicados a la etiqueta <table> afectan a toda la tabla. Para modificarlo en casos concretos es posible aplicar un estilo distinto a los títulos y celdas. Sin embargo la aplicación de un estilo a la etiqueta de fila <tr> no tiene ningún efecto en las celdas que contiene.

Los estilos aplicados en la CSS a table, th y td (globales) afectan a todas esas etiquetas en todo el ePub. En caso de haber formatos diferentes para esas etiquetas en el ePub deben ser aplicados mediante selectores de clase en cada caso concreto

Los diferentes estilos en la CSS se muestran generalmente con ejemplos de selectores aislados para mayor claridad, pero pueden agruparse en una clase que incluya varios estilos y aplicables a la etiqueta que nos interese.

Bordes

Si la tabla no tiene definido ningún estilo se mostrará por defecto sin bordes. Para introducir bordes tenemos que definir el borde de la tabla (borde externo) y el borde de las celdas (bordes internos).

Para especificar qué bordes exteriores de la tabla queremos que sean visibles, utilizamos el atributo «frame»:

frame="box" → significa que se pondrán todos los bordes de alrededor.

frame="void" → Ningún borde por fuera.

frame="above" → Solo el borde superior.

frame="below" → solo el borde inferior.

frame="hsides" → Bordes superior e inferior.

frame="lhs" → Borde izquierdo.

frame="rhs" → Borde derecho.

frame="vsides" → Bordes derecho e izquierdo.

Para especificar qué bordes interiores queremos que sean visibles, utilizamos el atributo «rules»:

rules="none" → Ningún borde interior.

rules="all" → Todos los bordes interiores.

rules="cols" → Delimita las columnas.

rules="rows" → Delimita las filas.

Nota: En las tablas con los atributos «frame» o «rules» no tiene efecto el salto de línea: <table class="salto10">

Formato del borde: Para especificar su grosor se utiliza el atributo «border». Por defecto es 1 px. Ejemplo: <table border="2px">. Pero es preferible definir su apariencia en la CSS con la propiedad «border», pudiéndose además especificar en ella el tipo de línea y color, teniendo en cuenta que el formato por defecto de la línea del borde es: 1px solid gray.

table, th, td { border: 2px solid black; }

o

table, th, td { border: 1px dotted red; }

Espacio entre bordes: Para especificarlo se utiliza la propiedad «border-spacing».

style.css

table, th, td { border-spacing: 2px; }

De esta manera la tabla se dibuja con un borde externo para la tabla en su conjunto y luego un borde interno para cada una de las celdas, generando una tabla con espacios variables de separación. Usando «border-spacing: 0;» los espacios se anulan pero los bordes entre celdas tienen el efecto de «líneas dobles», es decir, no se superponen.

Para evitar este efecto se utiliza la propiedad «border-collapse». Por defecto tiene el valor separate, pero aplicando el valor collapse las líneas colindantes se fusionan en una sola línea. En este caso el grosor de las líneas de borde será exactamente el especificado.

style.css

table { border-collapse: collapse; }

Bordes aislados en celda: En el caso de que queramos mostrar una tabla sin bordes pero especificar alguno concreto para una celda o grupo se aplica a las celdas correspondientes una de las propiedades siguientes: «border-top», «border-right», «border-bottom», «border-left». Ej:

style.css

.bordleft { border-left: 3px solid black; }

Section0001.xhtml

<table class="bordleft">

Espacio entre celdas/columnas (padding)

Anteriormente hemos visto como separar el contenido de dos celdas contiguas con «border-spacing». En las tablas con los bordes colapsados (collapse) esta separación se realiza con la propiedad padding. Mientras que «border-spacing» especifica la separación entre celdas adyacentes, «padding» realmente especifica el espacio entre el contenido de la celda y el borde correspondiente.

style.css

.celtoplp { vertical-align: top; text-align: left; padding-right: 1em; }

Section0001.xhtml

<td class="celtoplp">

Hay que señalar que si una celda tiene un tamaño prefijado, que veremos más adelante, este no incluye el tamaño del padding y se añadiría al anterior. Esto afectaría igualmente al tamaño de todas las celdas de la columna y al tamaño de la tabla. Por tanto, en tablas muy ajustadas debe utilizarse padding conociendo los efectos citados.

Combinación de celdas

Dos o más celdas pueden combinarse en una sola con los siguientes atributos:

«rowspan» indica las celdas que queremos combinar verticalmente. Se aplicaría en la primera celda de la columna afectada y las celdas correspondientes de las filas siguientes de la misma columna no deben existir.

<td rowspan="4">Texto</td>

«colspan» indica las celdas que queremos combinar horizontalmente. Se aplica en la primera celda de la fila afectada. En esa fila habría, por tanto, tantas celdas o etiquetas <td> menos (las indicadas en colspan) que en las restantes filas de la tabla.

<td colspan="2">Texto</td>

Salto de página en tabla

Por defecto la tabla permite cortarse entre filas en caso de salto de página. En tablas largas es útil ya que no cabría en una sola página.

En algunos casos, en tablas pequeñas, puede interesarnos que se muestre la tabla completa y no se corte con un salto de página. Para ello utilizamos la propiedad «page-break-inside» con el valor avoid en la CSS:

table { page-break-inside: avoid; }

O en un selector

.nobreak { page-break-inside: avoid; }

Formato de texto

A una tabla se le puede aplicar cualquiera de los formatos de texto de forma similar a la etiqueta <p>. Si se aplican a la etiqueta <table> afectarán a toda la tabla. Si se aplican a la etiqueta <td> solo afectará a esa etiqueta concreta. De hecho, la etiqueta <td> se comporta de forma similar a la etiqueta <p>. Una etiqueta <td> puede incluir a su vez una etiqueta <p> pero estará condicionada por el formato señalado en la CSS para <p>. Es mejor evitar <p> aplicando los estilos directamente en <td>. Igualmente se debe evitar la etiqueta <br> ya que en caso de salto de línea es más conveniente utilizar una fila nueva.

Alineación del texto en una tabla

Alineación vertical

La propiedad «vertical-align» establece la alineación vertical del texto en una tabla. Si se asigna a <table> afectará a toda la tabla y a <td> a una celda concreta. El valor por defecto es centrado (middle).

Otras opciones:

Arriba (top)

style.css

.celtop { vertical-align: top; }

Section0001.xhtml

<td class="celtop">

Abajo (bottom)

style.css

.celbot { vertical-align: bottom; }

Section0001.xhtml

<td class="celbot">

Alineación horizontal

La propiedad «text-align» establece la alineación horizontal del texto en una tabla. Si se asigna a <table> afectará a toda la tabla y a <td> a una celda concreta. El valor por defecto es alineado a la izquierda (left).

Otras opciones:

Centrado (center)

style.css

.celcenter { text-align: center; }

Section0001.xhtml

<td class="celcenter">

Derecha (right)

style.css

.celright { text-align: right; }

Section0001.xhtml

<td class="celright">

Justificado (justify)

style.css

.celjust { text-align: justify; }

Section0001.xhtml

<td class="celjust">

Francesa

No existe valor para este tipo de alineación y solo puede aplicarse a las celdas. Se define de manera similar a la etiqueta <p>:

style.css

.celfranc { padding-left: 2em; text-indent: -2em;}

Section0001.xhtml

<td class="celfranc">

En todos los casos puede especificarse a la vez la alineación vertical y horizontal.

.celtopl { vertical-align: top; text-align: left; }

.celtopj { vertical-align: top; text-align: justify; }

.celtopf { vertical-align: top; padding-left: 2em; text-indent: -2em; }

Ejemplo genérico de tabla

Utilizando algunas de las propiedades anteriores vamos a poner un ejemplo de tabla.

<table>

<caption class="captright">

Título de la Tabla

</caption>

<tr>

<th>Título 1</th>

<th>Título 2</th>

</tr>

<tr>

<td class="celtoplp">Primera Izquierda</td>

<td class="celmidc bordleft" rowspan="4">Centro</td>

</tr>

<tr>

<td class="celtoplp">Segunda Izquierda</td>

</tr>

<tr>

<td class="celtoplp">Tercera Izquierda</td>

</tr>

<tr>

<td class="celtoplp">Cuarta Izquierda</td>

</tr>

</table>

Se mostraría:

Título de la Tabla

Título 1 | Título 2
Primera Izquierda | Centro
Segunda Izquierda
Tercera Izquierda
Cuarta Izquierda

Alineación horizontal de tabla

Por defecto las tablas están alineadas a la izquierda y situadas en el borde de la pantalla o del contenedor en el que estén situadas. Puede asignarse un margen a la tabla utilizando la propiedad «margin».

style.css

.margizq30 { margin-left: 3em; }

Section0001.xhtml

<table class="margizq30">

Tabla centrada

Hay varias formas de centrar una tabla con diferentes resultados en cada lector. La única forma de centrarla y que funciona en todos los lectores es utilizar la propiedad «display» con el atributo «display: inline-table;».

style.css

.tabcentro { display: inline-table; }

Section0001.xhtml

<div class="centrado">

<table class="tabcentro">

<tr>

<td class="celtopl">¡Que mis pies y mis dedos bendigan el agua!</td>

</tr>

<tr>

<td class="celtopl">¡Que mis diez dedos la bendigan!</td>

</tr>

</table>

</div>

Se mostraría:

¡Que mis pies y mis dedos bendigan el agua!

¡Que mis diez dedos la bendigan!

¡Bendícela, oh Odo!

Y canta loas a Marmaduque

Ventajas: permite un centrado exacto en la pantalla, tomando como referencia el texto de la celda más largo y se puede definir la alineación del texto que nos interese. En el caso anterior alineación izquierda.

Limitaciones:

Utilizar la clase centrado para centrar la tabla afecta a toda ella y el texto de las celdas por tanto se mostraría centrado. Para evitarlo se debe especificar un estilo de alineación para cada celda. En el caso anterior:

style.css

.celtopl { vertical-align: top; text-align: left; }

Section0001.xhtml

<td class="celtopl">

La propiedad inline-table funciona como un bloque y muestra la tabla en una sola página. Si la tabla excede la página, no será visible la parte que sobrepase la página por debajo. Así que esta técnica solo debe aplicarse a tablas relativamente pequeñas en número de filas. Si la tabla contiene muchas filas se puede simular el centrado aplicando a la tabla la propiedad margin explicada más arriba con el valor adecuado.

Tabla alineada a la derecha

Para esta técnica utilizamos la propiedad «float» ya explicada en otras partes del Manual y que se puede aplicar también a las tablas. En este caso sería «float: right;» con el texto alineado a la izquierda.

style.css

.tabderecha { float: right; }

Section0001.xhtml

<table class="tabderecha">

<tr>

<td class="celtopl">De J. R. R. Tolkien a W. H. Auden</td>

</tr>

<tr>

<td class="celtopl">carta del 7 de junio de 1955</td>

</tr>

</table>

Se mostraría:

De J. R. R. Tolkien a W. H. Auden

carta del 7 de junio de 1955

Si la tabla es seguida de texto (como en este ejemplo) debe cerrase la propiedad «float» para que no se muestre al lado de la tabla. Se aplicará en el primer párrafo del texto siguiente a la tabla:

style.css

.clear { clear: both; }

Section0001.xhtml

<p class="clear" />

Alineación vertical de tabla

No existe ninguna propiedad para alinear verticalmente las tablas. Puede simularse mediante la propiedad «padding-top» en un <div> ya que aplicada directamente a la etiqueta <table> no tiene efecto.

style.css

.salto50 { padding-top: 50%; }

Section001.xhtml

<div class="salto50">

<table>

…

</table>

</div>

Si se quiere separar claramente del texto anterior y alinearla en una página (portadilla o similar) habrá que forzar antes un salto de página:

style.css

.breakfefore { page-break-before:always; }

Section0001.xhtml

<div class="breakbefore"></div>

Igualmente, dicho sea de paso, la técnica anterior es útil para alinear verticalmente una imagen en una página.

Tamaño de columnas y celdas

El tamaño de una tabla es definido con las propiedades «width» y «height». Esto apenas se utiliza para la tabla en su conjunto. Lo más corriente es aplicar un tamaño horizontal a aquellas columnas que nos pueda interesar, ya que el tamaño vertical no se usa apenas y se sustituye por saltos de línea (salto10) o padding. El comportamiento por defecto es ajustar el tamaño de las celdas a su contenido y en caso de varias columnas no exceder el tamaño de la pantalla.

Si se quiere fijar el tamaño horizontal de una columna solo es preciso especificar el tamaño en una de las celdas. Puede ser en <th> o en la primera celda de la columna, pero lo más conveniente es hacerlo en aquella cuyo contenido tiene mayor longitud para poder calcularlo mejor.

Preferiblemente deben utilizarse medidas relativas. Si se quiere ajustar el tamaño de las columnas al texto deben utilizarse medidas en «em» y si se quiere ajustar a la pantalla medidas en «%».

Tampoco es preciso, si no se necesita, fijar un tamaño para todas las columnas. Si en una tabla de dos columnas se fija el tamaño de una la otra ajustará su contenido automáticamente para no exceder el tamaño de pantalla.

Si se fija un tamaño para todas las columnas y excede el tamaño de pantalla la sobrepasará por la derecha. Es importante calcularlo para que la suma de tamaños no exceda el 100% (más seguro 95%) de pantalla teniendo en cuenta que el tamaño del padding asignado a cada columna se suma al ya fijado para ellas.

Veamos dos ejemplos de definición en CSS:

Para medidas en «em».

.celtop20er { vertical-align: top; text-align: right; width: 2em; padding-right: 0.5em; }

Para medidas en «%».

.celtop45p { vertical-align: top; text-align: justify; width: 45%; padding-left: 1em; }

En los ejemplos avanzados del epígrafe siguiente se verán aplicaciones más concretas de tamaño.

Tamaño de texto (variable o fijo)

Tamaño de texto variable

Por defecto el tamaño de texto es el fijado para el ePub. Se puede modificar mediante una clase:

style.css

.texto08 { font-size: 0.8em; }

Section0001.xhtml

<table class="texto08">

Si el tamaño de la tabla y/o el texto está fijado para todas las columnas en «em», obviamente al aumentar el tamaño de fuente en el lector llegará un momento que la tabla se salga de pantalla.

Tamaño de texto fijo

En tablas muy ajustadas o en aquellos casos que nos pueda interesar, es posible fijar el tamaño del texto en valores absolutos. Aunque se pueden ajustar en «puntos» y «píxeles», es mejor la primera opción. Los píxeles dependen de la resolución del dispositivo que puede ser muy variable. Los puntos son dependientes del tamaño en «pulgadas» (1 punto = 1/72 pulgadas) y son más manejables. Hay variaciones de tamaño de un lector a otro pero son controlables. Por ej. Sony PC muestra la letra en puntos un poco más grande que ADE, pero si se ve bien en Sony PC se ve bien también en ADE. Los valores que se acercan a la usada como tamaño medio en un lector oscila desde 10pt (letra pequeña) hasta 12pt (letra normal).

Aunque el tamaño de las celdas estén prefijados en tamaños relativos en «em», al poner el texto fijo en puntos dentro de la etiqueta <table>> esta hereda y ajusta el tamaño de la celda al fijado en dicho texto.

style.css

.texto12p { text-size: 12pt; }

Section0001.xhtml

<td class="texto12p">

Veamos un ejemplo:

| Cuentos Perdidos | El Silmarillion
I | Teleri ……………… | Vanyar
| (incluido Inwir) |
II | Noldoli …………… | Noldor
| (Gnomos) |
III | Solosimpi ………… | Teleri

De esta manera, independientemente del tamaño de texto utilizado o cambiado por el usuario en el lector, la tabla siempre se mostrará tal y como la hemos diseñado, como podemos comprobar con el ejemplo anterior variando el tamaño de letra del lector.

Tablas: Ejemplos avanzados

Teniendo en cuenta que, debido a la estructura de la tabla, mostrar aquí el código ocupa mucho espacio, solo se mostrarán los resultados. El código utilizado puede examinarse abriendo el ePub con Sigil.

Adaptación de poesía

Cuando hablamos de la alineación de tabla centrada ya expusimos un ejemplo de poema. La tabla centrada es muy útil para poemas cortos. En caso de ser muchos versos veremos un ejemplo de simulación en el siguiente apartado. Aquí vemos dos ejemplos con tabla centrada. En ambos el tamaño lo marca el texto (no está aplicado en las celdas). Los hemistiquios se marcan en el primer caso dentro del mismo verso.

«¡Ay! Aquella colina verde de hierba perenne

donde duermen las espadas de siete linajes,

con luna o con sola la colina no suben

ni Hombres ni Elfos; y las huestes de Morgoth

por miedo no se atreven a cavar en ella.»

En el segundo los hemistiquios se marcan con desplazamiento del verso siguiente.

Cuando estaba sentado junto al camino

vi pasar a tres hobbits:

uno era bobo y no tenía nada que decir,

los otros no hablaban.

«¡Buenas noches!», les dije. «¡Buenas noches

a todos!» Pero no me escucharon:

uno de ellos era sordo, y los otros dos también.

Fue un encuentro muy divertido.

Texto en doble columna

En el primer ejemplo las dos columnas son idénticas y el formato del texto está en francesa ya que al ser poesía nos interesa que la segunda línea quede desplazada para indicar que forma parte del verso. La tabla tiene un margen izquierdo de 3em para simular centrado.

(Beginning) | (Comienzo)
Of old was an age | Hubo una edad antigua
when was emptiness, | donde había vacío,
there was sand nor sea | no había arena ni mar
nor surging waves; | ni olas bulliciosas;
unwrought was Earth, | sin forjar estaba la Tierra,
unroofed was Heaven — | sin techo el Cielo:
an abyss yawning, | un abismo bostezaba,
and no blade of grass. | y no había ni una brizna de hierba.

En este segundo ejemplo el texto es continuo y está justificado.

The king of that land took Sigrlinn to wife. Sigurd was sent to be fostered by Regin, of whom it has been told above. Regin dwelt now in the forest and was deemed wise in many other matters than smithwork. | El rey de esa tierra tomó a Sigrlinn como esposa. Sigurd fue enviado a Regin, de quien se ha hablado antes, para que lo educara. Regin habitaba entonces en el bosque y era considerado sabio en muchas otras artes además de la herrería.
Regin egged Sigurd to slay Fáfnir. With the sword Gram and the horse Grani, of which it is here spoken, he accomplished this, though Regin had concealed from him both the great power of Fáfnir and the nature of the hoard that the serpent guarded. | Regin envió a Sigurd a matar a Fáfnir. Con la espada Gram y el caballo Grani, de los que se habla aquí, lo consiguió, aunque Regin le había ocultado tanto el gran poder de Fáfnir como la naturaleza del tesoro que guardaba la serpiente.

Texto en varias columnas

Este primer ejemplo es idéntico al primer ejemplo del apartado anterior al que se ha unido la numeración y el personaje que habla. En estas dos últimas columnas el texto está alineado a la derecha.

Regin | 3 | ‘Full well couldst thou wield | «Bien podrías hacerte
|  | wealth and kingship, | con riquezas y reinos,
|  | O son of Sigmund, | oh, hijo de Sigmund,
|  | a sire’s treasure.’ | el tesoro de un señor.»
Sigurd |  | ‘My father is fallen, | «¡Mi padre murió,
|  | his folk scattered, | su pueblo está disperso,
|  | his wealth wasted, | sus riquezas malgastadas,
|  | in war taken!’ | tomadas en la guerra!»
Regin | 4 | ‘A hoard have I heard | «De un tesoro he oído,
|  | on a heath lying, | oculto en un brezal,
|  | gold more glorious | oro más glorioso
|  | than greatest king’s. | que el del mayor de los reyes.

Otros dos ejemplos de tablas centradas con varias columnas.

En el primer caso el tamaño de la 1.ª columna está aplicado en la celda «Montañas Nubladas…» y en el resto igualmente, como dijimos, en la celda con el texto más largo. Se incluyen dos ejemplos de combinación de celdas con «colspan» para los títulos de tabla y la columna derecha doble.

Cadenas de montañas
CORDILLERA | LONGITUD EN MILLAS
Montañas de Hierro |  | Desconocida
Las Pelóri |  | Desconocida
Montañas de Mordor |  | 1282
Montañas de Ceniza | 498 |
Ephel Dúath meridionales | 501 |
Ephel Dúath occidentales | 283 |
Montañas Blancas |  | 852
Montañas Nubladas (incluidas las Montañas de Angmar) |  | 702
Montañas Grises |  | 580
Montañas Azules (1.a Edad) |  | 928
Montañas Azules (3.a Edad) |  | 559
septentrionales | 389 |
meridionales | 170 |

En este otro caso, se ha fijado el tamaño de las celdas, pero se aprovecha el centrado de toda la tabla, que se aplica en todas las celdas sin especificarlo en ellas.

Cuentos Perdidos | «Esbozo» | El Silmarillion
Teleri | Q(u)endi | Vanyar
Noldoli | Noldoli | Noldor
Solosimpi | Teleri, Solosimpi | Teleri

Numeración en margen izquierdo

La numeración en el margen izquierdo es fácil realizarla con sangría francesa, pero la numeración quedaría alineada a la izquierda. Con la siguiente tabla la numeración queda alineada a la derecha, que es su posición natural. La segunda columna no tiene fijado tamaño. Aunque el texto es corto, se ajustaría perfectamente a los lectores sin fijarlo. Solo habría que preocuparse de la alineación del texto: izquierda, justificado, etc.

50 | Turgon descubrió Gondolin
60 | Dagor Aglareb e inicio del Sitio de Angband
64 | Turgon partió a Gondolin (anal adicional, dado en la nota 68 de AB 2)
155 | Incursión orca por la costa occidental
260 | Primera mención de Gondolin
455 | Batalla del Fuego Súbito y final del Sitio

Numeración en margen derecho

Este caso es el contrario del anterior. La primera columna tiene especificado formato francesa sin tamaño. En la columna con numeración solo cambia, respecto al anterior ejemplo, que el padding para separar las celdas está aplicado a la izquierda.

| Her onginneð séo bóc þe man Pennas nemneð, 7 héo is |
| on þréo gedæled; se forma dæl is Valinórelúmien þæt is |
| Godéðles géargetæl, 7 se óþer is Beleriandes géargetæl, |
| 7 se þridda Quenta Noldorinwa oþþe Pennas nan |
| Goelið þæt is Noldelfaracu. Þás ærest awrát Pengolod se | 5
| Úþwita of Gondoline, ær þám þe héo abrocen wurde, 7 |
| siþþan æt Siriones hýþe 7 æt Tavrobele in Toleressean |
| (þæt is Ánetége), þá he eft west cóm. And þás béc |
| Ælfwine of Angelcynne geseah on Ánetége, þá þá he æt |
| sumum cerre funde híe; 7 he geleornode híe swa he | 10
| betst mihte 7 eft geþéodde 7 on Englisc ásette. |

INSERCIÓN DE IMÁGENES

Inserción de imágenes avanzada

Imágenes a toda página

Lo siguiente es una breve explicación del código necesario para añadir ilustraciones a toda página sin más texto en el xhtml.

En la hoja de estilos están definidas las siguientes clases, que se utilizarán para este caso:

style.css

.cubierta { margin:0; padding:0; border:0; font-size:0; text-align:center; text-indent:0; }

.cubierta img { height:100%; }

En la página xhtml hay que usar

Section0001.xhtml

<body class="sinmargen">

<p class="cubierta"><img alt="" src="../Images/foto.jpg" /></p>

</body>

NOTA: Este código es únicamente para imágenes que están aisladas en un xhtml (como la portada o láminas a página completa). El motivo es que el código toca el margen del <body>, y si hubiera texto en el xhtml se vería afectado. Si queremos colocar una imagen entre el texto, se debería usar la clase «.ilustra», y poner «.sinmargen» en un <div>, en lugar de en el <body>.

Si queremos ajustar las imágenes, podemos usar lo siguiente:

Imagen horizontal (alargada):

.ilustraalargada img { max-width:100%; }

Imagen vertical (estirada):

.ilustraestirada img { max-height:100%; }

Con el «max-» respetaremos el tamaño original de la imagen (en píxeles). Si quieres que se ajuste ocupando toda la pantalla (aunque dejará igualmente un pequeño espacio) quita el «max-»:

.ilustraalargada img { width:100%; }

Imágenes flotantes

ara introducir imágenes en el texto, lo primero que tenemos que hacer es añadir los ficheros con las imágenes que deseamos introducir, para lo cual, hacemos clic derecho en la zona de los ficheros y pulsamos «Añadir ficheros existentes». Entonces importamos los ficheros con las imágenes que deseamos.

Una vez importados los archivos de imágenes, hemos de crear las clases que necesitemos en la hoja de estilos. A no ser que queramos la imagen centrada, porque ya tenemos definida en la CSS la clase «ilustra» o a toda página, para lo que utilizaremos la clase «cubierta».

Además, para la letra capitular que figura a la izquierda, se ha usado la clase «asangre» en el párrafo (en este y los dos anteriores), para evitar la sangría en el texto y ofrecer una mejor estética.

A modo de ejemplo vamos a crear tres clases:

.capitular { float:left; margin:0 0.5em -0.1em -1.2em; }

.ilustradcha { max-height:50%; max-width:50%; float:right; margin:0.5em 0.5em -0.1em 0.25em; }

.ilustraizda { max-height:50%; max-width:50%; float:left; margin:0.5em 0.5em -0.1em -1.2em; }

Vamos a explicar lo que significa cada atributo: con «float» le decimos en qué lado del texto queremos incrustar la imagen (right o left) y «margin» son los márgenes que la separarán del texto, resumidos en el sentido de las agujas del reloj, es decir arriba, derecha, abajo e izquierda, en este mismo orden.

«Width» y «height» son el ancho y alto respectivamente. Se puede expresar el tamaño en porcentaje, es decir el tamaño proporcional, o en píxeles, pero como las imágenes se verán en diferentes lectores con tamaños distintos, resulta más aconsejable utilizar el porcentaje siempre que la imagen original no sea muy pequeña, ya que al indicar el tamaño en porcentaje, se vería muy pixelada en los lectores grandes.

«max» significa que se va a respetar el tamaño original. Si queremos que se ajuste a grande, borramos el «max».

Ahora, vamos a ver el código que hemos puesto para ver las imágenes tal y como las hemos puesto en esta página:

Tras el párrafo del título hemos puesto este párrafo con la primera imagen (Imagenes_im1):

<p class="ilustra"><img alt="" src="../Images/Imagenes_im1.jpg" /></p>

Inmediatamente el párrafo de la letra capitular:

<p class="capitular"><img alt="" src="../Images/Imagenes_P.gif" /></p>

Tras el párrafo en que creábamos las clases en la hoja de estilos, insertamos la imagen (Imagenes_im2) a la derecha:

<p class="ilustradcha"><img alt="" src="../Images/Imagenes_im2.jpg" /></p>

Después del párrafo en que explicábamos lo que significa «max», ponemos la imagen (Imagenes_im3) a la izquierda:

<p class="ilustraizda"><img alt="" src="../Images/Imagenes_im3.jpg" /></p>

Este código, sin embargo, solo funciona con seguridad si se aplica a imágenes pequeñas (lo habitual en imágenes flotantes), pero si necesitamos usar imágenes de gran tamaño (unos 400px de ancho o más) puede dar problemas en según qué eReader.

Para solucionarlo tenemos dos opciones.

En los caso en que solo flotará la imagen, la solución es aplicar la clase a la imagen y no al contenedor, de esta forma:

<p><img alt="" class="ilustradcha" src="../Images/01.jpg" />texto</p>

En los casos en que flotará algo más que la imagen (por ejemplo un pie de foto) y necesitemos aplicar la clase al contenedor, modificaremos un poco la clase, de esta forma:

.ilustradcha { max-height:50%; max-width:50%; float:right; margin:0.5em 0.25em -0.1em 0.5em; }

.ilustradcha img { max-height:100%; max-width:100%; }

Y luego en el fichero html:

<div class="ilustradcha"><img alt="" src="../Images/01.jpg" /><p>pie de foto</p></div>

<p>texto</p>

Y, finalmente, a modo de «Fin», ponemos otra imagen (Imagenes_im4) centrada:

<p class="ilustra"><img alt="" src="../Images/Imagenes_im4.jpg" /></p>

Imágenes escalables

Para hacer que una imagen escale con el tamaño de letra del texto, basta con aplicar al elemento <img> (o a la caja contenedora que lo engloba) las propiedades «width» y «max-width». La unidad de medida utilizada para dar el valor de la propiedad «width» será em, relativa respecto al tamaño de letra. La propiedad «max-width» digamos que actúa como limitador, ya que evita que la imagen, al ir aumentando de tamaño, rebase los límites de la pantalla («max-width:100%») o el ancho de la misma que como máximo queramos que ocupe.

Así por ejemplo, se podría crear una clase similar a la «.ilustra» definida en el ePub Base, pero haciendo que sea escalable:

.ilustraesc { margin:1em 0; text-align:center; text-indent:0; display:block; }

.ilustraesc img { width:15em; max-width:100%; }

Al aplicarla, la imagen escalará con el tamaño de letra hasta ocupar todo el ancho de pantalla, momento a partir del cual permanecerá invariable aunque se aumente el tamaño del texto base desde el lector. Modificando el valor de la propiedad «max-width» se podría haber limitado el ancho máximo a cualquier otra magnitud.

Otra posibilidad sería la de hacer escalable el elemento contenedor en el que se encuentra la imagen. Esta opción es la que se recomienda, dado que el método anterior no termina de funcionar bien en todos los dispositivos, como ocurre con el iBooks de iPad. De este modo, se podrían crear las siguientes reglas en la hoja de estilos style.css:

.imagenesc { display:inline-block; margin:1em 0; text-indent:0; width:15em; max-width:50%; }

.imagenesc img { width:100%; }

Y utilizarlas en el documento XHTML por ejemplo de la forma:

<div class="centrado">

<p class="imagenesc"><img alt="" src="../Images/imagen.jpg" /></p>

</div>

En este caso es el elemento contenedor <p>, al que se le aplica la clase «.imagenesc», el que escalará con el texto hasta que ocupe como máximo el 50% del ancho de pantalla. Con el selector descendente «.imagenesc img» se indica a la imagen que tiene que ocupar el 100% del tamaño que en cada momento adopte la caja que la contiene. Esta opción es la que se utiliza posteriormente en el epígrafe relativo a los pies de foto para hacer que el conjunto imagen + pie escale con el tamaño de letra.

Igualmente, si quisiéramos una imagen flotante que además fuera escalable, se podrían utilizar clases similares a «.ilustradcha» o «.ilustraizda» (de las que se ha hablado en el apartado anterior) pero definiendo un ancho en em mediante la propiedad «width». Así, se podría crear la clase:

.ilustradchaesc { display:inline-block; width:10em; max-width:50%; float:right; text-indent:0; margin:0.5em 0.5em -0.1em 0.25em; }

.ilustradchaesc img { width:100%; }

Y aplicarla en el documento XHTML por ejemplo mediante el siguiente código:

<div class="ilustradchaesc"><img alt="" src="../Images/Imagen.jpg" /></div>

<p>Texto del párrafo…</p>

Para finalizar, se comenta otra posible alternativa que puede resultar más versátil cuando el número de imágenes escalables es significativo, y que consiste en definir en el style.css una regla del tipo:

.escalar { width:10em; max-width:100%; }

Esta regla ocasiona el escalado de la imagen con el texto, y podría aplicarse en conjunción con otra clase más genérica que se haya creado para dar estilo a las imágenes, como por ejemplo puede ser la clase «.imagenesc» que se define a continuación:

.imagenesc { display:inline-block; margin:1em 0; text-indent:0; }

.imagenesc img { width:100%; }

Aplicadas en el documento XHTML de la forma:

<div class="imagenesc escalar"><img alt="" src="../Images/Imagen.jpg" /></div>

Así, en función de las dimensiones de las imágenes que haya que representar, se podrían crear tantas reglas del tipo «.escalar» como fueran necesarias.

Esta opción también podría utilizarse en imágenes que estén en línea con el texto, como la que se muestra a continuación para representar la runa Tyr: Imagen Imagenes_Tyr. Para ello, se ha definido una clase similar a la anterior pero añadiéndole la propiedad «vertical-align», que permite alinear verticalmente la imagen para que quede centrada respecto al texto.

style.css

.escalar { display:inline-block; width:.55em; max-width:100%; text-indent:0; vertical-align:-.1em; }

.escalar img { width:100%; }

Section0001.xhtml

<p>… la runa Tyr: <span class="escalar"><img alt="" src="../Images/Imagenes_Tyr.svg" /></span>. Para ello, …</p>

La runa Tyr: Imagen Imagenes_Tyr.

Las distintas alternativas que se han comentado para escalar una imagen son válidas para los formatos más usuales, ya sean jpg, png, gif, etc., aunque es probablemente en las imágenes SVG donde el escalado tiene mayor aplicabilidad.

Como se comenta con mayor detalle en el Tomo IV: Gráficos SVG, una imagen SVG es un gráfico vectorial, lo que hace que pueda escalarse sin que sufra pérdida de calidad cuando se redimensiona, ya que son independientes de la resolución (a diferencia de lo que ocurre con las imágenes de mapa de bits, que dependiendo de la resolución que tengan, pueden pixelarse y perder calidad al escalarlas). Esto las hace especialmente útiles a la hora de representar imágenes que contengan algún tipo de texto, como puedan ser ecuaciones, tablas, gráficos, etc.

La representación de la runa Tyr es un ejemplo de utilización de este tipo de imágenes, al igual que también lo es la ecuación que se muestra a continuación:

Para la que se han definido en el style.css las siguientes reglas (el valor de la propiedad «width» se ha ajustado para que el tamaño del texto de la expresión matemática sea similar al del texto base), que se aplican en el documento XHTML de la forma:

style.css

.imagenesc { display:inline-block; margin:1em 0; text-indent:0; }

.imagenesc img { width:100%; }

.escalarsvg { width:10em; max-width:100%; }

Section0001.xhtml

<div class="centrado">

<p class="imagenesc escalarsvg"><img alt="" src="../Images/Imagenes_eq.svg" /></p>

</div>

Pies de foto

En este epígrafe se comenta una posible alternativa para añadir un pie de foto a una imagen, de forma que se evite la separación entre ambos cuando se produzca un salto de página.

Pie de foto inferior

Pie de foto inferior

La opción más habitual es aquella en la cual el texto del pie de foto se encuentra situado en la parte inferior de la imagen.

Pie de foto inferior y centrado

En primer lugar, se considera el caso de una imagen centrada y de ancho fijo como la situada en la parte superior. Las reglas definidas en la página de estilos style.css son las siguientes:

style.css

.contenedorpie { display:inline-block; width:60%; padding:1em 0; }

.contenedorpie p { text-align:center; text-indent:0; line-height:.95em; font-size:.75em; margin:.25em .5em 0; }

.imagen { text-align:center; text-indent:0; display:block; }

.imagen img { width:100%; }

Section0001.xhtml

<div class="centrado">

<div class="contenedorpie">

<div class="imagen"><img alt="" src="../Images/Imagenes_Pie1.jpg" /></div>

<p>Pie de foto centrado</p>

</div>

</div>

Para obtener el efecto deseado, se ha utilizado una caja contenedora que englobe tanto a la imagen como al pie de foto. A dicho elemento <div> se le aplican una serie de estilos mediante el selector de clase «.contenedorpie». El valor inline-block de la propiedad «display» hace que el contenedor se comporte como si se tratara de un elemento de bloque, pero que permite la presencia de elementos adyacentes, lo que es propio de los elementos en línea. De esta forma, se puede establecer su tamaño mediante la propiedad «width» (en esta ocasión un 60% del ancho de pantalla), y a su vez nos permite alinear la caja respecto de la página (empleando para ello alguna de las clases definidas para tal efecto en el ePub Base, como la clase «.centrado» utilizada en este ejemplo). Por otro lado, también hace que la imagen y el pie permanezcan agrupados. El margen de separación con los elementos adyacentes se añade mediante la propiedad «padding». En principio, también puede utilizarse «margin» para dar esta separación, pero no siempre termina de funcionar bien en determinados dispositivos. Si se prefiere utilizar esta opción, se podría crear una clase «.centrar» que se aplicaría en lugar de la clase «.centrado» del manual, y que se definiría de manera similar pero añadiéndole la propiedad «margin».

Las propiedades que dan estilo al texto del pie se aplican mediante el selector descendente «.contenedorpie p». La regla «.imagen img» se utiliza para que la imagen ocupe todo el ancho dado al contenedor, independientemente de las dimensiones de la misma, empleando para ello un «width:100%». Si nos interesa por algún motivo que la imagen ocupe solo una parte del elemento contenedor, puede modificarse este valor a voluntad, como ocurre en el ejemplo que se muestra a continuación, donde se utiliza un «width:50%» para poder colocar dos imágenes adyacentes.

Pie de foto inferior y centrado

Pie de foto inferior y centrado

Introduciendo pequeñas modificaciones en el código de partida, se consigue que el conjunto imagen+pie escale con el tamaño de letra. Para ello, lo único que habría que hacer es añadir a la clase «.contenedorpie» un «max-width» para indicar el ancho máximo de pantalla que se permitirá ocupar a la imagen, y dar el valor de la propiedad «width» en em. Si, por ejemplo, quisiéramos que la imagen de partida escalara hasta ocupar todo el ancho de pantalla, podría definirse la clase:

.contenedorpie { display:inline-block; width:20em; max-width:100%; padding:1em 0; }

Del mismo modo, al utilizar la propiedad «float» se consigue que el texto se distribuya alrededor del conjunto:

.contenedorpie { display:block; width:60%; float:right; margin:.1em 0 .2em .5em; }

La imagen que está situada a la derecha del texto escala con el tamaño de letra hasta alcanzar un máximo del 50% del ancho de pantalla. Para este ejemplo, se han aplicado en el documento XHTML las siguientes reglas:

style.css

.contenedorpie50 { display:block; float:right; width:10em; max-width:50%; margin:.1em 0 .2em .5em; }

.contenedorpie50 p { text-align:center; text-indent:0; line-height:.95em; font-size:.75em; margin:.5em .5em 0; }

.imagen { text-align:center; text-indent:0; display:block; }

.imagen img { width:100%; }

Section0001.xhtml

<div class="contenedorpie50">

<div class="imagen"><img alt="" src="../Images/Imagenes_Pie2.jpg" /></div>

<p>Pie de foto centrado</p>

</div>

Para concluir, indicar que si al ir aumentando el tamaño de letra el conjunto imagen + pie llegara a alcanzar el 100% del alto de pantalla, comenzaría a perderse por la parte inferior de la misma. Por ello, en imágenes que ocupen gran parte del alto de pantalla es probable que para tamaños de letra medios/grandes se pierda una fracción del texto del pie. La solución en estos casos consiste en utilizar texto de tamaño fijo para el pie como se explicará en el último apartado.

Pie de foto lateral

Pie de foto lateral

Si el texto del pie de foto se encuentra situado en un lateral de la imagen, ambos se pueden alinear utilizando para ello la propiedad «vertical-align», que permite el posicionamiento y centrado de elementos en la vertical. De entre los posibles valores que puede adoptar esta propiedad, se utilizarán top/text-top (para alinear superiormente), bottom/text-bottom (para alinear inferiormente) y middle (para centrar).

Sin embargo, su aplicación tiene ciertas complicaciones. La limitación reside en que esta propiedad únicamente permite alinear o bien elementos que se encuentren dentro de una celda de una tabla, o bien elementos en línea (inline, como <img>); pero no funciona al aplicarla a elementos de bloque (block, como <div> o <p>).

Es decir, que «vertical-align» no alinea respecto al contenedor, sino respecto a la línea. Por tanto, puede aplicarse a elementos inline para centrarlos en relación a la línea en la que se insertan, pero no a un contenedor para que los elementos dentro de él se alineen verticalmente (como por ejemplo sí ocurre con la propiedad «text-align», que se aplica al contenedor, como un elemento <p> o <div>, para alinear horizontalmente su contenido formado por elementos en línea).

Así, si el texto del pie de foto es reducido, se podrían crear las siguientes clases:

style.css

.alinvimg { vertical-align:text-bottom; width:40%; margin-right:.3em; }

.alinvp { text-align:center; text-indent:0; font-size:.75em; margin:1em 0; }

Section0001.xhtml

<p class="alinvp"><img alt="" class="alinvimg" src="../Images/Imagenes_Pie1.jpg" />Pie lateral</p>

Dando como resultado la imagen que se muestra a continuación.

Imagen Imagenes_Pie1Pie lateral

En esta ocasión, la imagen tiene un tamaño fijo, pero se podría hacer que fuera flotante y/o escalable con el texto tal y como se comentaba en el apartado anterior, como por ejemplo:

.alinvimg { vertical-align:text-bottom; width:70%; margin-right:.3em; }

.alinvp { display:block; text-align:center; text-indent:0; width:20em; max-width:60%; float:right; font-size:.75em; margin-left:.5em; }

Donde el párrafo que contiene a la imagen es un elemento flotante que escalaría con el tamaño de letra hasta alcanzar un máximo del 60% del ancho de pantalla, y la imagen ocuparía el 70% del ancho dado al párrafo.

Esta solución es válida cuando el texto del pie es reducido, dado que en el momento en el que el texto tenga varias líneas, solo se alineará verticalmente una de ellas, la primera o la última, dependiendo de donde se haya colocado la imagen, delante o detrás del texto. Podría solventarse en parte añadiendo la propiedad «float» a la clase «.alinvimg», lo que permitiría que todo el texto se mantuviera en el lateral de la imagen, pero dejaría de funcionar la propiedad «vertical-align» y únicamente se alinearían superiormente.

Imagen Imagenes_Pie2Al aplicar la propiedad «float» solo se alinearán superiormente, sea cual sea el valor dado a «vertical-align»

Para hacer que se alineen verticalmente, y que además el texto quede completamente en el lateral de la imagen, puede recurrirse al valor inline-block de la propiedad «display». Como se indicaba en el apartado anterior, al aplicarlo conseguimos que el elemento genere una caja block pero que se comporta como si fuera inline. De esta forma, se puede definir el ancho de pantalla que queremos que ocupe (propio de elementos de bloque), y hacer que a su vez admita otros elementos adyacentes entre los que puede aplicarse la propiedad «vertical-align» (propio de elementos en línea). Digamos que el comportamiento se asemeja al de los elementos <img>.

Pie de texto lateral alineado inferiormente a la izquierda de la imagen

Por ejemplo, para el caso de una imagen centrada y de ancho fijo como la que se muestra arriba del texto, se han definido en el style.css las siguientes reglas (con los valores dados a la propiedad «width» se controla, respectivamente, el ancho de pantalla que ocupará tanto el pie de foto como la imagen):

style.css

p.pielat { display:inline-block; vertical-align:bottom; width:35%; text-align:right; text-indent:0; font-size:.75em; line-height:.95em; }

.imglat { width:40%; vertical-align:bottom; margin-left:1.25%; }

Section0001.xhtml

<div class="centrado salto10">

<p class="pielat">Texto del pie</p><img alt="" class="imglat" src="../Images/Imagenes_Pie1.jpg" /></div>

Para hacer que el conjunto imagen + pie escale con el tamaño de letra (y/o sea un elemento flotante), puede recurrirse a un contenedor escalable (y/o flotante) que los englobe, como el que se ha utilizado en la imagen que se muestra a continuación, que escala hasta alcanzar un máximo del 75% del ancho de pantalla.

Pie centrado a la derecha de la imagen

Para ello, se ha usado el siguiente código:

style.css

.contenedorlat { display:inline-block; width:12em; max-width:75%; padding:1em 0; }

.contenedorlat p { display:inline-block; vertical-align:middle; text-align:left; width:45%; text-indent:0; font-size:.75em; line-height:.95em; }

.contenedorlat img { width:50%; vertical-align:middle; margin-right:1%; }

Section0001.xhtml

<div class="centrado">

<div class="contenedorlat">

<img alt="" src="../Images/Imagenes_Pie2.jpg" />

<p>Texto del pie de foto</p>

</div>

</div>

En principio, el ancho dado a la imagen (50%), el texto (45%) y el margen de separación entre ambos (1%) tendría que sumar el 100% del ancho del elemento contenedor. Sin embargo, el uso de inline-block presenta una peculiaridad, y es que los elementos en los que se aplica tienden a dejar un hueco entre cada uno de ellos, espacio que depende del tipo y tamaño de letra. Por ello, si se ajusta este valor global al 100%, es muy probable que a partir de un determinado tamaño de letra la imagen y el pie dejen de disponerse de manera adyacente, pasando entonces a ubicarse el texto debajo de la ilustración (o viceversa, en función de la disposición dada).

Aunque existen varias formas (vía CSS o HTML) de suprimir dicha separación, parece que no hay una que funcione bien en todos los dispositivos. Es por ello que se recurre a disminuir este ancho global. La mayor o menor reducción dependerá del valor que hayamos dado a las propiedades «width» y «max-width» del elemento contenedor. Por lo general, un ancho global en torno al 95% puede resultar adecuado en la mayoría de los casos.

Para finalizar, indicar que si se utiliza la opción con inline-block, cuando al aumentar el tamaño de letra el alto de las líneas de texto supere el de la imagen, estas continuarán creciendo alineadas lateralmente respecto de la imagen, ya sea rebasándola superiormente (si están alineadas con bottom), inferiormente (con top) o a ambos lados (con middle), de manera análoga a lo que ocurre entre celdas de una tabla. También es aplicable lo comentado en el apartado anterior en relación a lo que ocurriría si el conjunto imagen + pie llegara a alcanzar el 100% del alto de pantalla, y a utilizar texto de tamaño fijo para el pie como se detallará a continuación.

Pie con tamaño de texto fijo

Pie con tamaño de texto fijo

En los casos citados más arriba, en los que el texto está definido en em, se puede evitar que la imagen y el pie se salgan de pantalla si el usuario utiliza un tamaño de letra grande o la cambia en el lector.

Para ello se debe fijar el tamaño del texto en valores absolutos. Aunque se pueden ajustar en puntos y píxeles, es mejor la primera opción. Los píxeles dependen de la resolución del dispositivo que puede ser muy variable. Los puntos son dependientes del tamaño en pulgadas (1 punto = 1/72 pulgadas) y son más manejables. Hay variaciones de tamaño de un lector a otro pero son controlables. Por ejemplo Sony PC muestra la letra en puntos un poco más grande que ADE, pero si se ve bien en Sony PC se ve bien también en ADE. Los valores que se acercan a la usada como tamaño medio en un lector oscila desde 10pt (letra pequeña) hasta 12pt (letra normal).

Hay dos casos según el tamaño: imagen grande tipo “cubierta” e imagen pequeña tipo “ilustra”.

Imagen grande tipo “cubierta”

En este caso, el estilo «page-break-after: always» de la clase «.cubierta» haría que el pie saltara de página y hay que definir en la CSS una clase similar a cubierta, «.imgpag», pero sin dicho estilo:

La definición del tamaño de texto se haría en la CSS en puntos en la clase «.pie». Aquí se puede establecer también la alineación del texto.

Para que el pie quede unido en la página a la imagen hay que reducir esta en cierto porcentaje, especificando su tamaño mediante la propiedad «height» (ej. «height=90%» para dos líneas de texto) de la etiqueta <img>. La reducción sería aproximadamente un 4-5% menos por cada línea de texto. Pero lo mejor es hacer pruebas de porcentaje en Sony PC como decíamos al comienzo.

Si bien el tamaño en «%» de la imagen reducida podría definirse en la CSS, en un libro con muchas imágenes y pies diferentes nos obligaría a definir varias clases «.imgpag» para ajustarlas a cada tamaño de pie. Por este motivo se define una sola clase «.imgpag» y se aplica el tamaño reducido necesario en el xhtml dentro de <img>.

style.css

.imgpag { text-align: center; margin:0; text-indent:0; max-height:100%; page-break-before:always; }

.pie, .pie p { text-indent:0; font-size:10pt; }

Section0001.xhtml

<p class="imgpag"><img alt="" height="90%" src="../Images/Imagenes_Pie3.jpg" /></p>

<p class="pie centrado">Esculturas maoríes de madera, de los siglos <small>XVIII</small> o <small>XIX</small>, <i>op. cit</i>.</p>

Se mostraría así:

Esculturas maoríes de madera, de los siglos XVIII o XIX. Extraído de A. Hamihon, op. cit.

Imagen pequeña tipo “ilustra”

En este caso, los margenes superior e inferior de la clase «.ilustra» pueden molestar. Vamos a utilizar en la CSS la clase «.imgbox» que es una clase resumida (ligera variante de la usada en los apartados precedentes) que utiliza «display:inline-block» e incluye algunas de las características de «.ilustra».

En el caso del pie, se debe indicar aquí la alineación de texto que se desee, ya que por defecto, debido a la clase «.centrado» del xhtml, quedaría centrado. El tamaño de texto está en puntos, por supuesto.

style.css

.imgbox { display:inline-block; padding:1em 0; }

.imgbox img { max-height:100%; max-width:100%; }

.pieleft, .pieleft p { text-align: left; text-indent:0; font-size:10pt; }

Section0001.xhtml

<div class="centrado">

<div class="imgbox">

<img alt="" src="../Images/Imagenes_Pie4.jpg" />

<div class="pieleft">

<p>Figura 20. <i>Kwakiutl<i/> — Figura sobre una fachada de casa que representa una mariposa (según Franz Boas).</p>

</div>

</div>

</div>

Se mostraría así:

Figura 20. Kwakiutl — Figura sobre una fachada de casa que representa una mariposa (según Franz Boas).

De esta manera, independientemente del tamaño de texto utilizado o cambiado por el usuario en el lector, las imágenes con pie siempre se mostrarán tal y como las hemos diseñado, como podemos comprobar con los ejemplos anteriores variando el tamaño de letra del lector.

Imágenes no rectangulares

Una vez explicada la forma de introducir imágenes en un texto, y las propiedades utilizadas más comúnmente, en este epígrafe se aplica lo visto al caso de tener imágenes que no tengan una apariencia rectangular.

Existen diversas formas para lograr que el texto envuelva a una imagen irregular como la que está situada a la izquierda. A continuación se describe un método que ha dado buen resultado en la mayor parte de los dispositivos de uso común (en iBooks la imagen no se muestra con el tamaño adecuado, aunque el texto se muestra perfectamente).

En primer lugar hay que definir en la hoja de estilos style.css las reglas que se necesitarán. Para ello, es importante conocer cuáles son las dimensiones de la imagen. La ilustración tomada como ejemplo tiene un ancho total de 200 px, y un alto de 275 px. Si se consideran por separado las dos partes rectangulares que la componen, el rectángulo horizontal superior tiene unas dimensiones ancho×alto de 200×123 px, y el vertical inferior de 93×152 px.

Conocidas estas magnitudes, ya se pueden crear las reglas que se utilizarán para hacer que el texto se distribuya alrededor de la imagen Alicia.gif. Se han definido las siguientes:

div.imgizq { float:left; clear:left; text-align:left; margin:0 .5em .1em 0; }

div.imgizq img { width:100%; display:block; }

div#alicia { width:200px; height:123px; margin-top:0; }

div#alicia + div.imgizq { width:93px; height:152px; margin-top:-0.1em; }

Cada regla se ha rodeado de un rectángulo a color y con distintos bordes para luego poder interpretar con mayor facilidad la forma de actuar de cada una. A continuación se indica el código utilizado para ver la imagen tal y como aparece en esta página:

<div class="imgizq" id="alicia"><img alt="" src="../Images/Alicia.gif"/></div>

<div class="imgizq"></div>

<p>Texto</p>

Veamos cómo funciona. En primer lugar se crea una caja que contenga a la imagen mediante un elemento <div>, para el que se define por medio de la clase «.imgizq» una serie de propiedades, todas ellas conocidas salvo «clear», que es un estilo que complementa a «float».

div.imgizq { float:left; clear:left; text-align:left; margin:0 .5em .1em 0; }

div.imgizq img { width:100%; display:block; }

Con «clear» se especifica que un elemento no admite un flotante sobre su izquierda (left), sobre su derecha (right) o a ambos lados (both). También se la puede usar en un elemento flotante para impedir que otros flotantes puedan quedar sobre alguno de sus costados. Más adelante se verá la implicación de no utilizarla.

Lo que se consigue al aplicar esta clase es el posicionamiento flotante de la imagen, que se desplaza al lado elegido y permite que el texto se disponga alrededor de la misma (de manera similar a como se explicaba en el apartado anterior). Así mismo, se definen los márgenes inferior y derecho (está alineada a la izquierda) para dar separación entre texto e imagen, márgenes que heredarán los elementos que se emplean posteriormente.

La segunda parte de esta regla («div.imgizq img») se utiliza para definir una serie de propiedades que afectarán únicamente a la imagen que hay dentro del <div> (mediante la etiqueta <img>). De esta forma, se consigue que la imagen se comporte como un bloque y que ocupe todo el ancho de la caja (<div>). Por defecto, si al elemento <div> no se le dan dimensiones (mediante «height» y «width») adaptará su tamaño al del contenido (en este particular a las dimensiones de la imagen), por lo que puede parecer innecesario definir el ancho «width:100%». Sin embargo, podría darse el caso de que las magnitudes que se definan para la caja que contiene a la imagen sean mayores que las dimensiones de la misma (por ejemplo, si queremos que la ilustración ocupe exactamente la mitad o todo el ancho de la pantalla), en cuyo caso, si no se utiliza este «width:100%», la imagen no rellenaría todo el espacio de la caja contenedor, como ocurre en el ejemplo que se muestra a continuación:

Una vez que tenemos nuestra imagen flotante, el segundo paso consiste en dar el tamaño deseado a la caja contenedora (y, por ende, a la imagen) e intentar que el texto ocupe la parte en blanco de la ilustración. Para ello, se define el selector de ID «#alicia».

div#alicia { width:200px; height:123px; margin-top:0; }

La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo de la almohadilla (#) en lugar del punto (.) como prefijo del nombre, y se aplican a un elemento (en esta ocasión a un <div>) mediante su atributo «id».

<div class="imgizq" id="alicia">

Se suele utilizar el selector de ID cuando se quiere aplicar un estilo a un único elemento específico (cada una de las imágenes que tengamos), porque en estos casos es un selector más eficiente; y se utiliza el selector de clase cuando se quiere aplicar un estilo a varios elementos diferentes.

El valor del atributo «id» no se puede repetir en dos elementos diferentes de un mismo documento xhtml. Es decir, el atributo «id» es similar a «class» con la diferencia de que solo puede aplicarse (identifica) a un único elemento dentro de un mismo xhtml, no a tantos como quisiéramos, como se hace con el atributo «class» (se podría utilizar en todos los Section.xhtml, pero una única vez en cada uno; en caso contrario cualquier validador de ePub arrojará un error). Un posible ejemplo de aplicación de un mismo valor del atributo «id» en distintos Section.xhtml: si cada Section es un capítulo, en situaciones donde al comienzo de cada capítulo se repita siempre la misma imagen, o aun siendo diferente la imagen que aparece al comienzo del capítulo, todas tengan las mismas dimensiones.

Otra posible utilidad que tiene el empleo de un ID único es que también se puede utilizar como una referencia. Por ejemplo, si desde cualquier parte del texto o desde la entrada correspondiente de un índice de ilustraciones que hayamos creado, queremos poner un enlace a la imagen, se podría hacer utilizando el «id="alicia"» único de la forma:

<p><a href="../Text/loquesea.xhtml#alicia">texto, nombre ilustración, … </a></p>

De cualquier forma, también podría utilizarse un selector de clase, como .alicia aplicado <div class="imgizq alicia">, no habría ningún problema (por ejemplo, pudiera ocurrir que en un mismo Section haya varias imágenes diferentes, pero que todas ellas tengan las mismas dimensiones, y que prefiramos crear una única clase para aplicarla en todos los casos en lugar de crear un ID único por imagen).

Volviendo a nuestro ejemplo, al aplicar el atributo «id="alicia"» a la caja que contiene a la imagen, se añaden tres nuevas propiedades a las ya dadas mediante la clase «.imgizq». Por un lado, se define el margen superior de separación entre imagen y texto (puede ser cualquier valor; en este caso se utiliza un margen nulo porque la imagen está al comienzo del capítulo y no tiene texto por encima), y por otro, se dan las dimensiones oportunas al elemento contenedor, lo que nos permite lograr que el texto se superponga a la imagen. Como se indicó anteriormente, si no se establece la propiedad «height» sobre el elemento <div>, su valor por defecto es la altura necesaria para que muestre completamente el contenido (en esta ocasión la imagen Alicia.gif). Por contra, si se establece una altura más pequeña que la necesaria para mostrar el contenido, digamos que este «desborda» a la caja contenedora, ya que el estándar de CSS indica que cuando los contenidos de un elemento no caben en su interior deben mostrarse aunque se salgan del elemento y se solapen con los elementos adyacentes. Es decir, que aunque el contenido se salga del contenedor y sea completamente visible, lo que sucede es que otros elementos contiguos (como un párrafo de texto <p>) se van a superponer a la parte que haya «desbordado» a la caja contenedora, como ocurre en nuestro ejemplo:

Como se puede apreciar, para el elemento <div> que contiene a la imagen se han definido unas dimensiones idénticas a las que ocupa la parte horizontal de la ilustración (200×123 px). Por tanto, la parte horizontal de la imagen queda dentro de las dimensiones de la caja contenedora y sobre ella no se superpone el texto, mientras que sí lo hace sobre el resto de la imagen que, aunque se muestra, queda fuera del elemento contenedor.

La propiedad «overflow» es la que controla el comportamiento de los contenidos que no caben en su elemento contenedor. El valor por defecto de la propiedad «overflow» es «visible», que es el comportamiento que hace que los contenidos se salgan del elemento y sean completamente visibles (y la razón por la que no se utiliza), aunque existen otros valores que modifican este comportamiento.

Para finalizar, se utiliza un elemento <div> flotante que estará vacío de contenido y al que se le darán las mismas dimensiones que tiene la parte vertical de la ilustración (93×152 px). Con ello se consigue que esta parte de la imagen se pueda ver pero sin que tenga texto superpuesto. Para llevarlo a cabo se ha definido la siguiente regla:

div#alicia + div.imgizq { width:93px; height:152px; margin-top:-0.1em; }

En lugar de un selector de clase o un selector de ID, en esta ocasión lo que se ha utilizado es lo que se denomina un selector adyacente, que es probablemente el selector más específico de todos los presentes en CSS.

Este tipo de selector se emplea para seleccionar un único elemento que es hermano y consecutivo de otro en el código XHTML (es decir, está a la misma «altura», no contenido dentro, y no hay otros elementos en medio). En su sintaxis se emplea el símbolo +, y las propiedades definidas se aplican únicamente al elemento situado más a la derecha.

El selector adyacente de nuestro ejemplo se interpreta de la siguiente forma: si en un documento xhtml hay un elemento <div> sobre el que se ha aplicado un atributo «id="alicia"» e inmediatamente a continuación hay otro elemento <div> hermano sobre el que se ha aplicado el atributo «class="imgizq"», sobre este último elemento se aplican las propiedades «width», «height» y «margin-top» definidas. Si se observa el código XHTML utilizado, vemos que el elemento <div> vacío (rectángulo verde punteado) que hay tras el <div> que contiene a la imagen (azul discontinuo) cumple este requisito:

<div class="imgizq" id="alicia"><img alt="" src="../Images/Alicia.gif"/></div>

<div class="imgizq"></div>

<p>Texto</p>

Por tanto, sobre este elemento <div> se aplican las propiedades definidas por un lado mediante el selector de clase «.imgizq» («float», «clear», «text-align» y «margin»), y por otro, mediante el selector adyacente («width», «height» y «margin-top» —en el <div> verde punteado se define un margen superior negativo para contrarrestar el margen inferior dado al <div> azul discontinuo—). La importancia de utilizar la propiedad «clear» radica en el hecho de que como tanto el elemento <div> que contiene a la imagen (azul disc.) como el elemento <div> vacío (verde punt.) son flotantes, y ambos están alineados a la izquierda, si no se indica nada se colocarán uno a continuación del otro (como se muestra en la imagen inferior). Al utilizar la propiedad «clear:left» estamos indicando que a la izquierda de un elemento flotante no puede situarse otro flotante. En consecuencia, como a la izquierda del <div> punteado no puede emplazarse ningún flotante (el <div> discontinuo en este caso), pues se situará debajo y alineado a la izquierda.

Realmente, no sería necesario utilizar un selector adyacente para lograr este efecto. Se podría emplear un selector de clase o de ID y el resultado hubiese sido el mismo. Por ejemplo, se podría haber definido en su lugar la clase:

.rectverdepunteado { width:93px; height:152px; margin-top:-0.1em; }

y aplicarla al elemento <div> vacío como:

<div class="imgizq rectverdepunteado"></div>

Sin embargo, en determinadas situaciones el uso de un selector adyacente puede ahorrar código y hacer más eficiente la edición. Por ejemplo, supongamos que queremos evitar la sangría en el párrafo que hay a continuación de cada imagen irregular. Una forma de hacerlo es utilizando la clase .asangre (habría que emplearla tantas veces como imágenes haya). Otra forma más eficiente que nos ahorraría escribir todo ese código sería mediante un selector adyacente. Así, como la última parte del código XHTML era:

<div class="imgizq"></div>

<p>Texto</p>

pues se podría definir en el style.css la siguiente regla:

div.imgizq + p { text-indent:0; }

Como los elementos <div> y <p> son elementos hermanos, y <p> está situado inmediatamente después de <div>, este primer párrafo tras la imagen irregular no estaría sangrado. Sin embargo, en esta otra situación no ocurriría lo mismo (porque aunque sean elementos consecutivos no son hermanos; <p> es un elemento hijo —está contenido dentro— del elemento <div>):

<div class="imgizq">

<p>Texto</p>

</div>

Una regla similar se ha definido para las imágenes centradas, salvo que como con ellas se utiliza la clase «.ilustra», el selector adyacente se ha definido como:

div.ilustra + p { text-indent:0; }

Si no se especifica ningún elemento sobre el que aplicar dicha clase («.ilustra + p»), la regla se cumplirá con cualquier elemento cuyo atributo «class» tome el valor «ilustra», ya sea <p>, <div>, <span>…

Por otro lado, aunque para ilustrar este ejemplo se han utilizado las dimensiones reales de la imagen, dependiendo de lo que se quisiera conseguir se podrían utilizar otras magnitudes diferentes siempre y cuando se conserven la mismas proporciones que en el original para que la imagen no se muestre deformada.

De igual forma, las medidas que se empleen para definir la altura, anchura y márgenes pueden darse en px, em o porcentaje. Si se utilizan px, el espacio que la imagen ocupará dependerá de la resolución de la pantalla del dispositivo en el que se visualice; con em, el tamaño de la ilustración variará en función del tamaño de letra; con porcentaje, se podrá indicar el espacio exacto de pantalla que ocupará la imagen, independientemente de la resolución del dispositivo.

Este método también es válido para adaptar el texto a imágenes más complejas o que tengan cierta curvatura. Únicamente hay que emplear tantos elementos <div> como sea necesario, y darles las dimensiones oportunas. Para el escudo situado a la izquierda del texto se han utilizado cajas contenedoras de pequeña altura para que se adapten al máximo a la forma de la imagen, y se dan las medidas en em para que sus dimensiones varíen con el tamaño de letra (aplicable por ejemplo con letras capitulares). Se han definido las siguientes reglas en la hoja de estilos style.css (muy similares a las descritas para la anterior imagen, aunque con alguna pequeña diferencia como la supresión del margen inferior o el haber añadido a la etiqueta <img> un «padding-top» para que el borde superior del escudo quede a ras del párrafo):

div.imgdrag { float:left; clear:left; text-align:left; margin:0 .5em 0 0; }

div.imgdrag img { width:100%; display:block; padding-top:.25em; }

div#dragon { width:4.5em; height:1em; } /*azul disc.*/

div#dragon + div.imgdrag { width:4.4em; height:1em; } /*verde cont.*/

div#dragon + div.imgdrag + div.imgdrag { width:4.25em; height:1em; } /*rojo punt.*/

div#dragon + div.imgdrag + div.imgdrag + div.imgdrag { width:4em; height:1em; } /*azul cont.*/

div#dragon + div.imgdrag + div.imgdrag + div.imgdrag + div.imgdrag { width:3.7em; height:1em; } /*verde punt.*/

div#dragon + div.imgdrag + div.imgdrag + div.imgdrag + div.imgdrag + div.imgdrag { width:3.1em; height:1em; margin-bottom:.1em; } /*rojo disc.*/

El código utilizado para ver la imagen tal y como aparece en esta página es:

<div class="imgdrag" id="dragon"><img alt="" src="../Images/Dragon.jpg"/></div> /*azul disc.*/

<div class="imgizq"></div> /*verde cont.*/

<div class="imgizq"></div> /*rojo punt.*/

<div class="imgizq"></div> /*azul cont.*/

<div class="imgizq"></div> /*verde punt.*/

<div class="imgizq"></div> /*rojo disc.*/

<p>Texto</p>

Para hacer que una imagen ocupe todo el ancho de la pantalla, independientemente de cuál sea el tamaño y la resolución del dispositivo de lectura, se puede recurrir a la utilización de medidas en porcentajes.

El primer paso consiste en determinar las dimensiones de las distintas partes en que se puede dividir la imagen. Una vez que se conocen dichas magnitudes, se procede a calcular a qué porcentaje corresponden para poder dar las medidas oportunas a los elementos <div> auxiliares.

La ilustración tomada para este ejemplo tiene una anchura total de 600 px, y en ella se distinguen tres zonas bien diferenciadas cuyas magnitudes ancho×alto son: 600×100 px (rayado horizontal), 305×127 px (punteado) y 110×157 px (rayado vertical).

Para calcular el valor de la propiedad «width» de cada contenedor auxiliar se considera que el ancho total de la ilustración se corresponde con el 100% del ancho de pantalla. Fijado este valor, el resto se calcula por regla de tres. De esta forma, a la zona del rayado horizontal le corresponde un «width=100%», a la zona punteada un «width=50.83%» (305/600) y a la zona del rayado vertical un «width=18.33%» (110/600).

El problema surge a la hora de calcular el valor de la propiedad «height». Para poder asignar una altura a cada caja auxiliar para que esta cuadre con la parte correspondiente de la imagen, es necesario conocer cuál es la resolución del dispositivo de lectura (más concretamente la relación de aspecto ancho/alto). Sin embargo, esta proporción no es un valor uniforme y podría variar de un modelo a otro.

En la mayor parte de los eReader de uso común —no así en todas las tablets— esta relación toma un valor de 3/4 (600×800; 758×1024; 768×1024; 1080×1440…). Si se adopta esta cantidad, dado que se ha supuesto que el ancho de la ilustración se corresponde con el 100% del ancho de la pantalla, el valor de referencia de la altura será de 800 px (4·600/3). Así, a la zona del rayado horizontal le corresponde un «height=12.5%» (100/800), a la zona punteada un «height=15.86%» (127/800) y a la zona del rayado vertical un «height=19.63%» (157/800).

Es por ello que, aunque el código utilizado hasta ahora funcionaría sin problemas, presenta el inconveniente de que el resultado no sería homogéneo en todos los dispositivos, sino que dependería de su resolución, ya que al variar esta puede que también lo haga la altura de los elementos <div> auxiliares. Para el ejemplo de muestra del párrafo anterior, únicamente en aquellos dispositivos con una relación de aspecto próxima a 3/4 el ajuste sería perfecto. Con proporciones mayores la altura de las cajas auxiliares sería menor que la de la parte correspondiente de imagen, y para razones menores ocurriría justo lo contrario:

Como solución alternativa, se ha optado por modificar en parte el código empleado, y en lugar de utilizar elementos <div> vacíos se recurre a imágenes auxiliares que tengan las mismas dimensiones que cada una de las partes en que se divida la ilustración. De esta forma, únicamente es necesario indicar el ancho que ha de ocupar cada una; el ajuste vertical siempre sería el idóneo independientemente de la resolución del dispositivo de lectura.

Para este ejemplo se han definido las siguientes reglas en la hoja de estilos:

/* PARTE FIJA */

div.ancho-der { width:100%; clear:both; text-align:right; page-break-inside:avoid; }

div.ancho-der img { width:100%; }

div.ancho-der div.ilustracion { width:100%; height:5px; margin:0 0 -5px; }

div.ancho-der div.sup { width:100%; float:none; visibility:hidden; margin:0 0 0.1em; } /*rayado horiz.*/

div.ancho-der div.med { float:right; clear:both; visibility:hidden; margin:-0.1em 0 0.1em 0.5em; } /*punteado*/

div.ancho-der div.inf { float:right; clear:both; visibility:hidden; margin:-0.1em 0 0.1em 0.5em; } /*rayado vert.*/

/* PARTE VARIABLE EN CADA IMAGEN */

div#img1 div.med { width:50.83%; } /*ancho punteado*/

div#img1 div.inf { width:18.33%; } /*ancho ray. vert.*/

A continuación se indica el código empleado para ver la imagen tal y como aparece en esta página:

<div class="ancho-der" id="img1">

<div class="ilustracion"><img alt="" src="../Images/Nandor.jpg"/></div>

<div class="sup"><img alt="" src="../Images/AuxNandor-sup.jpg"/></div> /*rayado horiz.*/

<div class="med"><img alt="" src="../Images/AuxNandor-med.jpg"/></div> /*punteado*/

<div class="inf"><img alt="" src="../Images/AuxNandor-inf.jpg"/></div> /*rayado vert.*/

</div>

<p>Texto</p>

En esta ocasión se ha utilizado un elemento contenedor que ocupará todo el ancho de pantalla («width:100%»), agrupando tanto a la ilustración propiamente dicha como a las tres imágenes auxiliares que se han utilizado. A este elemento se le identifica mediante el atributo «id="img1"», y para darle estilo se aplica la clase «.ancho-der». Todas las propiedades definidas en esta clase son conocidas, salvo «page-break-inside», que indica el tipo de salto de página que se incluye dentro del elemento. El valor avoid prohíbe un salto de página dentro del mismo, si es posible. Indica que se inicie el elemento en la página siguiente si no hay suficiente espacio para él en la página actual. Se emplea para tratar de evitar que se produzca un salto en alguna de las imágenes auxiliares, aunque es probable que no sea necesario utilizarla dado que los lectores suelen impedir el salto entre elementos flotantes consecutivos.

Este contenedor padre engloba a los cuatro elementos <div> que contienen a las imágenes. En la primera de las cajas (<div class="ilustracion">) se incluye la ilustración propiamente dicha; ocupa todo el ancho de pantalla y no es un elemento flotante. A este <div> se le asigna una altura muy reducida («height=5px») para que la práctica totalidad de la ilustración se muestre fuera de su contenedor, de tal forma que puedan superponerse sobre ella las restantes cajas que contienen a las imágenes auxiliares. Por último, se le asigna un «margin-bottom» negativo de la misma magnitud que la altura dada a la caja (-5 px), para que el borde superior de la primera imagen auxiliar (rayado horizontal) coincida exactamente con el de la ilustración al superponerse sobre ella.

A continuación se añaden los elementos contenedores de las imágenes auxiliares, por orden y tantos como sean necesarios. El que se agrega en primer lugar (<div class="sup">) no es un flotante, y también ocupa todo el ancho de la pantalla. A los restantes, se les asigna el ancho calculado y se flotan al lado correspondiente. En todos ellos se utiliza la propiedad «visibility». Este estilo únicamente permite hacer visibles o invisibles las cajas generadas por un elemento (así como a sus elementos interiores), pero haciendo que los otros elementos adyacentes respeten la posición de este y reserven su espacio. El valor hidden hace invisible la caja para que no muestre sus contenidos, pero el resto de elementos contiguos se muestran como si la caja todavía fuera visible, por lo que en el lugar donde originalmente se mostraba la caja invisible, ahora se muestra un hueco vacío (como si el elemento fuera absolutamente transparente). De esta forma, hacemos invisibles a las imágenes auxiliares, permitiendo que se muestre completamente la ilustración pero evitando además que el texto adyacente se superponga a la misma, puesto que el elemento <p> respeta el hueco generado por los <div> auxiliares.

La utilidad de identificar la ilustración mediante el atributo «id="img1"» es doble. Por un lado, permite referenciar la misma desde cualquier parte del texto o desde un índice de ilustraciones, y por otro, hace más eficiente la escritura del código cuando se tienen varias imágenes de este tipo. Si se observan las reglas definidas en la hoja de estilos, hay una parte de las mismas que es fija y aplicable en todos los casos, por lo que para cada nueva ilustración únicamente habría que definir un nuevo selector «#img2», «#img3», etc., e ir indicando el ancho correspondiente. En lo que respecta al código XHTML, bastaría con sustituir el valor del atributo «id» y el nombre de los archivos de imagen. De todas formas, su uso no es imprescindible. Como se comentaba anteriormente, puede emplearse un selector de clase si se prefiere al selector de ID, como en el caso de ilustraciones que tengan las mismas dimensiones (o si todas las imágenes tienen idéntica magnitud, incluir el ancho en las reglas que dan estilo a los elementos <div class="med"> y <div class="inf">).

Por último, indicar que no con todas las imágenes puede ser factible hacer que ocupen todo el ancho de pantalla, dependerá fundamentalmente de sus dimensiones. Por ejemplo, en el caso de los eReader con una relación de aspecto de 3/4, con aquellas imágenes que sean altas y estrechas (una proporción ancho/alto menor a 3/4) ocurrirá que al escalarlas para que ocupen todo el ancho, la altura de la ilustración será mayor que la resolución vertical del dispositivo, por lo que parte de la misma quedará fuera de la pantalla. Si para que el texto se distribuya alrededor de la imagen se utilizan los elementos <div> vacíos, el texto permanecerá en la misma página que la ilustración; si se recurre a las imágenes auxiliares, tanto el texto como los contenedores auxiliares saltan a la página siguiente.

La imagen que se ha tomado como ejemplo tiene unas dimensiones de 450×741 px (relación de aspecto de 0.6, inferior a 3/4). En ambos casos, al escalar la imagen para que ocupe el 100% del ancho, una gran parte de la raíz de la planta queda fuera de la pantalla. Sin embargo, mientras que el <div> vertical vacío permanece en la misma página que la ilustración, la imagen auxiliar vertical tiene unas dimensiones excesivas y salta a la siguiente página junto con el texto.

Esta opción de recurrir a imágenes auxiliares también puede utilizarse cuando se pretenda que la ilustración ocupe un porcentaje cualquiera del ancho de pantalla. Para ello, únicamente habría que eliminar el «width:100%» de la regla «div.ancho-der», añadir la propiedad «float:right» en las reglas «div.ancho-der div.ilustración» y «div.ancho-der div.sup», e indicar los porcentajes adecuados en las reglas que dan estilo a los elementos <div> que contienen a las imágenes. De la misma forma, también funcionaría con medidas en px o en em, pero posiblemente sea una manera de hacerlo más costosa y menos eficiente al tener que recurrir a imágenes auxiliares.

Aunque en teoría se podría adaptar el texto a imágenes con una apariencia cualquiera, en la práctica existe una importante limitación.

Hasta ahora, las imágenes que se han utilizado como ejemplo tienen formas y dimensiones diferentes, si bien coinciden en el hecho de que en todas ellas el ancho de la ilustración va de más a menos. Sin embargo, los dispositivos cuyo motor de renderizado esté basado en Adobe Digital Editions (ADE) no interpretan bien este tipo de código cuando el ancho de la ilustración va de menos a más, como ocurre (parcial o totalmente) en aquellas con forma circular, elíptica, o en L, entre otras:

Dado que el motor de lectura de una gran parte de los dispositivos de uso común está basado en ADE, se desaconseja por el momento el empleo del código propuesto, o similar, en imágenes de este tipo.

FUENTES TIPOGRÁFICAS

Conceptos generales

Carácter

Los caracteres son entidades abstractas sin una imagen concreta pero con una identidad claramente definida: Parte del alfabeto, una letra, un dígito, un ideograma o un símbolo. Los ordenadores almacenan caracteres en su memoria por medio de códigos numéricos (ASCI, Unicode). Un archivo de texto contiene secuencias de códigos de este tipo que representan cadenas de caracteres. Cualquier imagen que se considere que tiene el mismo significado representa el mismo carácter.

Glifo

Es la imagen concreta que se muestra en la pantalla o que se imprime. Típicamente un glifo es una representación gráfica de un carácter, en cierta medida, el equivalente al tipo de imprenta. Sin embargo, una misma fuente puede incluir varios glifos que son representaciones gráficas diferentes de un mismo carácter. También un glifo puede representar varios caracteres, como por ejemplo en una ligadura (Æ).

En resumen, los caracteres son componentes abstractos y conceptuales del texto, mientras que los glifos son los componentes concretos y visuales del texto. Además de la apariencia visual (la imagen del glifo) un glifo también tiene representación digital. Un glifo puede representarse mediante un mapa de bits y más comúnmente mediante imágenes vectoriales (splines de Bézier) que permiten reproducir exactamente la imagen del glifo en cualquier tamaño.

Fuente

Una fuente es un modelo concreto de un alfabeto, un conjunto de glifos diseñados con una misma idea de diseño gráfico. También es un archivo digital (o varios archivos en el caso de familias) que contiene una representación digital de la fuente. Una fuente contiene una colección ordenada de glifos en una tabla con su código numérico especifico, junto con información adicional que define las relaciones espaciales entre los glifos (métrica, dimensiones e interletraje) además de parámetros centrales, como nombres de fuente, información de autor, valores de espaciado, etc. (encabezado de fuente).

Familia de fuentes

Una familia de fuentes es una colección variable de archivos (de uno o más) que comparten un diseño común, pero varían en inclinación (normal, o cursiva), grosor del trazo (fina, normal o negrita), terminaciones del trazo (serif o sans-serif) o en otros aspectos estilísticos como versalitas y variantes especificas.

Hay que distinguir dos definiciones para cada familia de fuentes:

Estilo («font-style»): Define el tipo de inclinación u otra apariencia de los glifos. Los más comunes son el estilo normal (regular) y la cursiva (italic), pero puede haber bastante más como subrayado, tachado, etc.

Grosor («font-weight»): Define el grosor de la línea. Los más comunes son el normal y la negrita (bold), pero puede haber toda una variedad, desde el ultrafino al extranegro.

Cuando una fuente tiene diferentes estilos y grosores (regular, negrita, etc.) si queremos que funcione con las etiquetas <i> o <b> el nombre de familia debe ser el mismo para todos los archivos de esa familia. Si no se hace así el comportamiento de los lectores es imprevisible. O bien muestra la fuente por defecto del lector o solo uno cualquiera de los estilos de la fuente.

Definición de Familia

Para definir una familia de fuentes en la CSS debe especificarse cada uno de los tipos y su archivo de fuente correspondiente. Como hemos dicho antes el nombre de familia será igual para todos: Ej. font-family: "times"

Normal

@font-face { font-family:"times"; font-style:normal; font-weight:normal; src:url(../Fonts/times.ttf) }

Cursiva

@font-face { font-family:"times"; font-style:italic; font-weight:normal; src:url(../Fonts/timesi.ttf) }

Negrita

@font-face { font-family:"times"; font-style:normal; font-weight:bold; src:url(../Fonts/timesb.ttf) }

Cursiva-Negrita

@font-face { font-family:"times"; font-style:italic; font-weight:bold; src:url(../Fonts/timesbi.ttf) }

Y la clase en CSS, única para toda la familia, sería:

.times { font-family:"times", times, serif; }

Nota: En la definición de @font-face la forma «estandar» es no incluir el «;» de cierre final tras «url(../Fonts/xxxx.ttf)». Hay que señalar que su inclusión, no obstante, no tiene ninguna repercusión para mostrar correctamente la fuente incrustada.

En el próximo apartado se detallara más la forma de añadir una fuente a un ePub.

Añadir fuentes tipográficas

Vamos a aprender a añadir una fuente tipográfica diferente a las estándar que vienen en nuestros ePubs.

Hay que tener mucho cuidado con qué fuente añadimos, porque no todas son compatibles con la mayoría de los lectores. Existe un listado con las fuentes que están probadas y aprobadas en «Ediciones y colaboraciones», subforo de «Pruebas de códigos y fuentes», que se puede consultar en el foro de «Editores y colaboradores». Si la fuente no estuviera contemplada en el listado, se pueden solicitar las pruebas correspondientes abriendo un hilo en este mismo subforo.

Además, conviene recordar que los lectores permiten elegir la fuente a la hora de leer, cosa que no será posible si incrustamos una. Por ese motivo, no se permite aplicar una fuente tipográfica a todo el texto, salvo que por motivos de la propia maquetación, no sea posible evitarlo.

NOTA: En el css del ePub Base vienen predefinidas algunas fuentes estándar que suelen visualizarse correctamente en los lectores sin necesidad de ser incluídas en el ePub, como son sans-serif, serif y monospace. No obstante se ha detectado que los lectores Kobo no visualizan la monospace, por lo que en caso de utilizar una de estas fuentes, es aconsejable añadirlas igualmente si queremos garantizar su visualización.

Vamos a incrustar la fuente Papyrus como ejemplo, que ya hemos comprobado que está aprobada, en nuestro ePub:

Lo primero que tenemos que hacer es añadir el archivo de fuentes, en nuestro ejemplo PAPYRUS.TTF en Sigil, en la carpeta «fuentes».

Añadir en style.css el siguiente código para la fuente:

@font-face { font-family:"PAPYRUS"; font-style:normal; font-weight:normal; src:url(../Fonts/PAPYRUS.TTF) }

Y el código que llama a la clase para la fuente:

.papiro { font-family:"PAPYRUS", PAPYRUS; }

Y este es el resultado:

Así es como quedaría un párrafo con la fuente papyrus incrustada

Generalizando:

style.css

@font-face { font-family:"nombrearchivo"; src:url(../Fonts/nombrearchivo.extensión) }

.nombreclase { font-family:"nombrearchivo", nombrearchivo; }

En el fichero xhtml se usa como cualquier otra clase:

Section0001.xhtml

<span class="papiro">Palabras</span>

<p class="papiro">Párrafo</p>

<div class="papiro">Sección</div>

Es muy importante respetar las MAYÚSCULAS Y MINÚSCULAS en el nombre de archivo y su extensión. Recordar además que el nombre incluido entre comillas en font-family NO debe contener espacios.

Hay que tener en cuenta que PAPYRUS.TTF y PAPYRUS.ttf son cosas diferentes. Además este nombre de archivo debe coincidir con el del archivo de la fuente aprobada.

El iBook no es capaz de leer fuentes incrustadas de esta forma, por lo que hay que crear un archivo llamado «com.apple.ibooks.display-options» en la carpeta «Misc» de Sigil para que lo haga. El ePLValidator la crea automáticamente en la plantilla antigua. En el nuevo ePub_Base r2.0 ya va siempre incorporado el archivo «com.apple.ibooks.display-options.xml». Si por error se hubiera eliminado, el ePLValidator lo detecta y lo incluye automáticamente, como medida de seguridad.

Identificar una fuente

En el caso de que queramos incorporar una fuente concreta a nuestro ePub pero desconozcamos cual es, existen páginas en las que podemos identificarlas:

MyFonts.com

WhatFontIs.com

Para ello, necesitaremos un archivo de imagen con un ejemplo de texto en esa fuente. Es tan sencillo como subirlo a la web y dejar que te identifique los tipos de fuente que más se aproximan a la que buscas.

Probar una nueva fuente

Hay un subforo llamado «Pruebas de códigos y fuentes» en donde los editores pueden solicitar que se prueben nuevas fuentes. El procedimiento es el siguiente:

Se abre un hilo poniendo el nombre del archivo de la fuente que se quiere probar. Y en el primer post se pone lo siguiente:

Un enlace al archivo de la fuente que queremos probar.

Un enlace al ePub de pruebas que encontramos en este mismo subforo, con la nueva fuente incrustada.

Un listado de los lectores más comunes, que también encontraremos en este subforo, y que iremos editando para marcar los lectores que se van revisando.

Si se ve bien en todos los lectores, la nueva fuente se añadirá al listado de «Fuentes aprobadas». En caso de que falle en alguno de los lectores, dicha fuente no se podrá utilizar.

Aunque una fuente tenga el mismo nombre, no necesariamente tiene que coincidir con la aprobada en el foro, por eso es muy IMPORTANTE usar las fuentes disponibles para su descarga en el mismo, en lugar de buscarlas en otro sitio.

Modificación y retocado de fuentes

Generalidades

Muchas de las fuentes existentes en Internet han sido retocadas utilizando programas free o shareware. Estos programas (ALLTYPE, FontForge, etc) resultan bien para Windows, Word o Adobe pero las inutilizan para Sony y otros lectores y no son válidos para ePub. Por lo cual son especialmente desaconsejados.

Sin embargo el funcionamiento del programa FontLab, (y su antecesor Fontographer), que es profesional, es perfecto en nuestro caso. La mayoría de las fuentes con caracteres especiales que tenemos en las fuentes aprobadas han sido retocadas y/o reducidas con FontLab.

En muchos casos es posible reparar una fuente realizada con los programas share citados arriba simplemente abriéndola con FonLab y volviéndola a generar con este programa. El propio programa genera la fuente correcta.

En otros casos existen errores en la definición de nombres de familia y estilos que se pueden corregir con FontLab y funcionan perfectamente después. Mediante Menu/File/FontInfo, aparece un formulario que te permite poner el nombre de familia (en la primera caja) y establecer el estilo real más abajo. Esto último no suele hacer falta, pero a veces está mal o sin establecer. Abajo del todo hay una especie de diamante verde que genera el resto de denominaciones necesarias y al lado un signo de ying-yang para validarlas si son correctas.

Este tutorial no pretende sustituir a la ayuda del programa, sino detallar las más importantes tareas básicas.

Reducción de glifos a los necesitados

Se puede tomar cualquier fuente y dejar solo los glifos a utilizar borrando el resto. De esta manera ocupa menos. Para ello simplemente se seleccionan los glifos a eliminar y con el botón derecho del ratón seleccionamos Delete en el menú emergente.

Existe una utilidad en Calibre que reduce la fuente a los glifos utilizados. En algunos casos se ha detectado que elimina alguno. Por otro lado si se añade alguno después no se visualizará y en todo caso es una fuente no probada e inútil para el resto de editores. No podemos aconsejarlo desde el Manual y dicha utilidad se usará bajo la exclusiva responsabilidad del editor responsable.

Copiar glifos

También se puede copiar un glifo (dibujo) de un lugar a otro pegándolo donde quieras. Se puede hacer con dos fuentes abiertas copiando de una y pegando en la otra.

Generación de la Información de cabecera de la fuente

Este es el más importante de los parámetros a definir cuando se ha retocado, modificado o creado una fuente. Para ello se utiliza el formulario Menu/File/FontInfo.

En FamilyName debe estar el nombre de la familia de fuentes, el mismo para toda la familia. Igualmente debe estar especificado el estilo y el grosor (weight) real de la fuente. Haciendo clic en BuildNames con el símbolo del diamante se generan automáticamente los nombres necesarios. Si pinchamos en el símbolo de ying-yang a la derecha se validan si son correctos. Este es uno de los aspectos más importantes para el correcto funcionamiento de la fuente.

En este apartado se especifican los nombres adicionales. No es necesario corregirlo, pero en algunas fuentes retocadas es mejor eliminarlo pinchando en el símbolo X.

El siguiente apartado «Copyright information» puede ser modificado o eliminado si se desea.

Aquí se puede modificar el número de versión de la fuente creada/modificada a nuestro gusto (no necesario). Si se modifica, clic en el botón de diamante para generar el nombre de versión para TrueType.

En este apartado se establece el identificador único para TrueType. Esto es importante porque depende del nombre señalado en el primer apartado. Simplemente se necesita pinchar en el botón del diamante para generarlo.

Aquí se especifican los codepages soportados. El Botón de diamante los especifica. Puede suceder que se borren todos, pero al menos debe estar «1252 Latin 1» ya que los códigos de espacio (0020, 00A0), carácter por defecto (.notdef), salto de línea (CR) y Null, pertenecientes a este codepage no deben ser eliminados.

Este apartado es más importante que el anterior, ya que especifica los rangos reales de códigos Unicode soportados y tiene influencia en los caracteres mostrados en el visor de fuentes de Windows. Botón de diamante: establece automáticamente los rangos reales.

El resto de apartados, especialmente los de Metrics and Dimensions y Hinting Settings, es mejor dejarlo como están para principiantes.

Generar Fuente

Para generar la fuente, no se utiliza el Save (genera un archivo propio del programa), sino File/Generate Font. A veces dice que existen dos tablas de caracteres. En este caso siempre generar como binario.

Técnicas avanzadas de creación de Fuentes

En el apartado anterior se trataban las tareas básicas de modificación y retocado de fuentes con FontLab. En este se esbozan algunas de las técnicas avanzadas que son posible realizar con ese programa.

Generar Estilos

Se puede generar un estilo a partir de otro, mejor partiendo del normal o regular.

En el Menú Tools hay un submenú Action, que permite todo tipo de transformaciones en la fuente.

Para la cursiva en Contour/Slant y clicando en Aplicar a toda la fuente. (También se puede poner un ángulo distinto de Slant directamente desde el cuadrito de Transformation).

Para la negrita en Effects/Bold y clicando también en Aplicar a toda la fuente.

En el submenú citado hay herramientas para desplazar, girar, etc. tanto un glifo como la fuente completa. Pero para utilizar estas herramientas es importante leerse la ayuda y practicar bastante.

Glifos Nuevos

También se pueden dibujar glifos nuevos, más fácil a partir de los ya hechos en la fuente (hacerlos completamente nuevos es más complicado y hay que conocer un poco sobre los dibujos de curvas). Con las herramientas de Action/Contour se pueden generar glifos nuevos partiendo de antiguos, simplemente girandolos, desplazándolos o uniéndolos.

Para que las fuentes sean escalables y ocupen poco no se guardan como mapa de bits, sino como tablas de contornos o curvas y al dibujarse en pantalla los controladores de fuentes rellenan el fondo y color, pero el contorno permanece muy definido al margen del tamaño.

Estas curvas (splines o curvas Bézier) son dibujadas por segmentos que consisten cada uno en una representación paramétrica que interpola una serie de puntos mediante polinomios, de grado cúbico (cuatro puntos) para las otf o postscript y cuadrático (grado 2 pero dobles = grado 4, cinco puntos) para las ttf. De ahí la mejor calidad y definición de ttf.

De estos puntos dados como parámetros, el primero y el último marcan el comienzo y final de la curva y el resto (fuera de ella) actúan como puntos de control o imanes que atraen una parte de la curva hacia ellos modificando su dirección según su proximidad.

La demostración matemática es muy compleja (con muchas matrices) y el polinomio resultante también. Pero el código de programación es sencillísimo (unas pocas líneas de código) y para desarrollar el polinomio basta seguir el orden de las filas del triángulo de Pascal según el grado de la curva. Empieza en grado 0 (1 punto) y el grado 1 (2 puntos) es una recta.

Lo anterior es solo teórico o informativo, pero no es necesario dominarlo para dibujar. Si se quiere probar a modificar un dibujo (doble clic para mostrarlo) veréis que solo es preciso pinchar con el ratón en un punto y moverlo para que la curva se modifique. En cuanto a borrar o añadir puntos y curvas remitimos al archivo de ayuda de FontLab.

Índice temático

Si tienes dudas, nosotros tenemos las preguntas.

Sobre el código usado en los ePub

¿Qué es una «caja»? >>

¿Qué es eso de «en bloque» y «en línea»? >>

¿Cómo se trabaja con elementos en bloque? >>

¿Cómo se trabaja con elementos en línea? >>

¿Cómo puedo poner un subtítulo? >>

¿Cómo puedo poner unos asteriscos para separar las escenas? >>

¿Cómo puedo poner una letra capitular? >>

¿Cómo puedo poner la sangría francesa? >>

¿Cómo puedo forzar un salto de página? >>

¿Cómo puedo hacer que no se separen dos palabras al final de la línea? >>

¿Cómo puedo representar poemas? >>

¿Cómo puedo poner los números de los versos a los poemas? >>

¿Cómo puedo hacer una notación al margen? >>

¿Cómo puedo poner una línea horizontal? >>

¿Cómo puedo poner una línea vertical? >>

¿Cómo puedo poner un recuadro? >>

¿Puedo poner un link en una imagen? >>

¿Cómo poner títulos dentro de una lista ordenada sin perder el orden? >>

¿Puedo usar start y value en las listas? >>

¿Puedo usar background? >>

¿Puedo usar small-caps? >>

¿Puedo usar pseudoelementos? >>

¿Cómo se pone una lista no numerada? >>

¿Cómo se pone una lista numerada? >>

¿Cómo se pone una lista con varios párrafos en cada punto? >>

¿Cómo se pone una lista anidada? >>

¿Cómo se pone una lista de definiciones? >>

¿Cómo se centra un bloque de texto? >>

Sobre las imágenes

¿Cómo puedo hacer que el texto rodee a una imagen situada a la izquierda o la derecha? >>

¿Cómo puedo hacer que se vea más grande una imagen cuando se aumenta el tamaño de la letra en el lector? >>

¿Cómo puedo poner un texto explicativo debajo de una imagen? >>

¿Cómo puedo poner un texto explicativo a un lado de una imagen? >>

¿Cómo puedo hacer que el texto rodee a una imagen situada a la izquierda o la derecha cuando la imagen no es rectangular? >>

¿Cómo poner una imagen antes del título del capítulo? >>

Sobre las fuentes

¿Qué es una fuente tipográfica? >>

¿Cómo puedo añadir una fuente nueva para mi libro? >>

¿Qué tengo que hacer para usar una fuente no aprobada? >>

¿Se pueden modificar las fuentes tipográficas? >>

¿Cómo puedo crear mi propia fuente tipográfica? >>

¿Cómo averiguo el nombre de una fuente tipográfica que me gusta mucho y que he visto en una portada? >>

Sobre las tablas

¿Qué es una tabla y cómo se ponen? >>

¿Cómo se ponen los títulos en las tablas? >>

¿Cómo se ponen los bordes en las tablas? >>

¿Cómo se pueden unir celdas de una tabla? >>

¿Qué hago con los saltos de página dentro de una tabla? >>

¿Cómo alineo horizontalmente una tabla? >>

¿Cómo alineo verticalmente una tabla? >>

¿Cómo separo filas y columnas unas de otras dentro de una tabla? >>

¿Cómo cambio el tamaño de las filas y columnas de una tabla? >>

¿Puedo usar las tablas para poner un poema? >>

¿Puedo usar las tablas para poner el texto en varias columnas? >>

¿Puedo usar las tablas para poner las numeraciones al margen? >>

Agradecimientos (Ed. 2018)

Quisiera dar las gracias a barbanegra y Rusli por tomarse la molestia de revisar la documentación existente y organizar las pruebas para el nuevo ePub Base, sin cuya actualización este nuevo manual no hubiera sido posible (o hubiera sido totalmente diferente). Y especialmente a Horus, por redactar el manual sobre las etiquetas HTML.

También agradecer a Sagitario y Sedna su intensa revisión de todo el manual, a la búsqueda de aquellas cosas ya obsoletas o incompatibles con el nuevo estándar, actualizando etiquetas, eliminando estilos no usados y renovando algunas imágenes.

Y, como siempre, a todos aquellos que han colaborado en las pruebas del ePub Base, el ePLValidator y demás herramientas en el foro, o bien reportando erratas y errores del propio manual. Sin vuestra ayuda, esto no hubiera sido posible.

Muchas gracias a todos los que con vuestro tiempo e ilusión hacéis posible este Proyecto. Espero que podamos seguir compartiendo nuestra afición por muchos años y veamos muchas y mejoradas revisiones de todas las herramientas EPL.

Más libros, más libres.

Fénix

Agradecimientos (Ed. 2015)

Este manual ha sido elaborado por y para la comunidad del Proyecto Scriptorium, y no habría sido posible sin la colaboración desinteresada de muchas personas, algunas de las cuales paso a nombrar. No están todas las que son, pero son todas las que están. Espero que aquellas que inadvertidamente he omitido, me perdonen por ello.

Para empezar, quisiera dar las gracias a TaliZorah, por organizarlo cuando yo no tenía tiempo para ello, y a Mowgli, Cthulhu e Insaciable, por su colaboración inicial. A Sedna por su incansable búsqueda de códigos CSS para una maquetación avanzada. A gertdelpozo y a los demás integrantes del equipo gráfico, por los apartados de portadas y edición de imágenes. A emiferro, Horus, triangulín y Áuryn, por encargarse entre todos de darle forma. A Trujano, por su breve pero intensa colaboración a la hora de redactar los apartados que no quería nadie. A barbanegra, por tomarse la molestia de revisar y unificar el desaguisado que habíamos montado entre todos. Y finalmente, a aquellos colaboradores que han preferido permanecer en el anonimato, y que espero sigan colaborando en futuras revisiones.

Asimismo, quisiera agradecer también a todos aquellos que con sus consejos y manuales en el foro, y su deseo de mejorar continuamente las herramientas existentes, han ayudado a mejorar la calidad de la biblioteca e, inadvertidamente, también la del presente manual. Y muy especialmente a los encargados de crear y mantener dichas herramientas: Carlos., Jugaor, betatron, Tarloth, Mcphist y capitancebolleta.

Por último, pero no por ello menos importante, me gustaría nombrar a Werth, cuyo manual inicial, en una página ya desaparecida, fue la semilla que sirvió de base para crear la excelente herramienta para la maquetación que tienes ahora entre tus manos.

Muchas gracias a todos los que con vuestro tiempo e ilusión hacéis posible este Proyecto. Espero que podamos seguir compartiendo nuestra afición por muchos años y veamos muchas y mejoradas revisiones de todas las herramientas EPL.

Más libros, más libres.

Fénix

PROYECTO SCRIPTORIUM (23 de abril de 2013).

El Proyecto Scriptorium surgió cuando un grupo de editores fueron expulsados de la página en la que se encontraban por protestar por los cambios que, tras la venta de la página, se realizaron sin consultarles. Cambios que incluían la implantación de malware en las descargas, lucro (para los nuevos dueños) y censura.

Por ese motivo, en octubre de 2012 se creó un foro de emergencia (conocido como el «tk», ya que esa era su extensión), para tratar de seguir con su hobby, la maquetación de libros electrónicos, y para buscar una forma de ponerlos a disposición de todo el mundo de forma libre y gratuita.

El 23 de abril de 2013, tras 7 meses de gestación y coincidiendo con la celebración del día del libro, el escaparate del proyecto, la web epublibre.org, abrió sus puertas.

En el tiempo transcurrido, ha habido gente que se ha distanciado del proyecto, y otros nuevos han llegado para ocupar su lugar, convirtiéndose en algo dinámico y vivo, y que esperamos permanezca mucho tiempo, bajo la forma que sea, como un faro de referencia a nivel cultural y de calidad en las maquetaciones.

Más libros, más libres.

Partiendo del supuesto de que el saber es una de las 402a cosas más valiosas y dignas de estima y que ciertos saberes son superiores a otros bien por su rigor bien por ocuparse de objetos mejores y más admirables, por uno y otro motivo deberíamos con justicia colocar entre las primeras la investigación en torno al alma. Más aún, parece que el conocimiento de esta contri5buye notablemente al conjunto del saber y muy especialmente al que se refiere a la Naturaleza: el alma es, en efecto, como el principio de los animales. Por nuestra parte, intentamos contemplar y conocer su naturaleza y su entidad así como cuantas propiedades la acompañan: de estas las hay que parecen ser afecciones exclusivas del alma mientras que otras parecen afectar además, y en virtud de ella, a los animales 10como tales[…]

Volver a Códigos útiles.