Estilos CSS para Sigil「Tutorial」

Está a punto de cumplir un año desde que hice el tutorial para maquetar ebooks con Sigil y hoy os traigo un pequeño suplemento para decorar nuestros ebooks y dejarlos aún más bonitos. Yo hablaré poco, por no decir nada, ya que la autora de esta guía para sobrevivir con los estilos CSS en Sigil es Laura Herranz Hernández, escritora y autora del relato corto Soldado (¡gratis en Lektu!) que ha montado con Sigil.

Como me enteré que sabía de códigos, le pedí que me echase una mano para ampliar esa ridiculez que os puse en el tutorial. Y, para mi sorpresa, me hizo una guía de oro. En serio, Laura, muchísimas gracias.

El formato ebook no es un diseño fijo como un libro físico, hay que tener en cuenta que es un diseño fluido, como si fuese un pergamino. No existe el concepto de página y por eso hay que trabajar cada parte en un archivo diferente. También hay que tener en cuenta que aunque trabajemos el diseño, la mayoría de lectores electrónicos van a imponer sus tipografías, interlineados y márgenes.

Con esto claro, vamos con la parte de los estilos o CSS.

Hay distintas partes del libro a las que les podemos dar el aspecto que queramos, aunque hay que tener en cuenta que esto se verá más reflejado en la versión epub o PDF que en la mobi, porque esta última al ser el formato nativo de Amazon utiliza sus propias tipografías y no se verá igual que lo que hayamos creado en Sigil.

Por partes, ¿qué es cada elemento?:

  • head = cabecera, parte no visible que almacena metadatos. Aquí es donde se enlaza la página de estilos. Se puede hacer manual con la vista de código o con la nueva versión de Sigil seleccionamos el archivo .xhtml que queremos con botón derecho y elegimos la opción “Enlazar hojas de estilos…”.
  • body = cuerpo del texto, engloba tanto a los títulos de texto como a los párrafos.
  • h1, h2, h3, h4, h5, h6 = Títulos de texto. Van por jerarquías, de mayor a menor tamaño. El más grande es h1 y es el más importante de todos, es el que debería tener asignado el título de nuestra obra y ningún otro texto más ha de usarlo. Si se hace no pasa nada, pero mejor respetar las jerarquías.
  • p = párrafo, la P va en minúscula. El texto principal de nuestro escrito.
  • span = etiqueta invisible para asignar estilos, id o clases a una parte específica del texto.

Una vez claras las partes básicas que más vamos a utilizar, pasamos a cómo darles estilos a estas partes.

Cada vez que queramos darle estilos a una parte hay que utilizar llaves para abrir y cerrar el “diálogo”, son estas { }. El orden quedaría así:

  1. A qué queremos darle estilo.
  2. Abrir llave.
  3. Escribir los estilos separados por punto y coma.
  4. Cerrar llave.

Ejemplo:

p {text-align: justify;

    font-size: 12px;

}

Con la estructura básica, ahora hay que saber qué cosas podemos poner. Las básicas vienen ya con el propio Sigil y simplemente con tener escrito p { } y dejar el cursor entre las llaves, podemos clicar en las opciones de estilo y se escribirán automáticamente.

Pero si te gusta escribir código y quieres más opciones que las básicas de negrita, cursiva, subrayado, tachado o alineación de texto, también puedes usar estas otras.

Para darle color al texto utilizaremos código hexadecimal y para ello podemos crear nuestro color utilizando la paleta de Adobe y copiando el código HEX, pondremos delante almohadilla y después los 6 números (https://color.adobe.com/es/create/color-wheel/ )

Ejemplo para texto negro:

p {color: #000000;

}

Propiedades para las fuentes utilizando font:

font-family: cuando queremos asignar una tipografía. Podemos poner tipografías genéricas o una específica. Para las genéricas, se utiliza Serif, Sans-serif o Monospace. Para las específicas se suele poner el nombre entre comillas rectas, como podría ser ‘Montserrat’.

Ejemplo para Times New Roman y Georgia:

p {font-family: Serif;

}

Ejemplo para Arial y Verdana:

p {font-family: Sans-serif;

}

Ejemplo para Courier New y Lucida Console:

p {font-family: Monospace;

}

font-size: tamaño de la fuente, lo asignaremos en píxeles (px), aunque también se puede asignar en em. El em es una medida para los navegadores, que equivale al tamaño estándar de la fuente, 1m=16px. Pero para hacerlo más fácil por ahora usaremos los píxeles.

p {font-size: 20px;

}

font-style: el estilo de la fuente. Puede ser normal, italic u oblique, pero esta última es menos soportada.

Ejemplo de cursiva:

p {font-style: italic;

}

font-weight: grosor de la fuente. Puede ser normal, bold, bolder, lighter o ir entre el 100 y el 900 de 100 en 100.

Ejemplos:

p {font-weight: 400;

}

p {font-weight: bold;

}

font-variant: variantes de la fuente, puede ser normal o small-caps (versalitas).

p {font-variant: small-caps;

}

Así quedaría el código completo para indicar cómo queremos un texto como el siguiente:

p {font-family: Serif;

    font-size: 50px;

    font-style: italic;

    font-weight: 900;

    font-variant: small-caps;

    color: #FF530D;

}

Si queremos que solo una parte de nuestro texto tenga estas propiedades, entonces tendremos que utilizar la etiqueta span en la vista de código de nuestro archivo xhtml y después reflejar la clase asignada en la hoja de estilos.

Ejemplo en la vista de código del archivo xhtml:

<span class=”final”>Fin</span>

Las clases llevan un punto delante de la palabra asignada como el identificador de la clase. Si el texto es párrafo después irá la p, si es un título irá la h correspondiente.

Ejemplo en la hoja de estilos:

.final p {font-size: 100px;

    color: #242424;

    font-weight: bolder;

}

Algo importante si no queremos ir párrafo por párrafo asignando la sangría de la primera línea en todo el cuerpo de nuestro escrito, es utilizar text-indent. En este caso sí utilizaremos la medida em para definir el tamaño de la sangría en la primera línea.

Ejemplo:

body p {text-align: justify;

    text-indent: 1.7em;

}

También podemos controlar el interlineado utilizando line-height. Se puede definir con número, longitud o porcentaje.

Ejemplo con número:

body p {line-height: 1.2;

}

Ejemplo con longitud:

body p {line-height: 25px;

}

Ejemplo con porcentaje:

body p {line-height: 80%;

}

Si se quiere asignar una tipografía propia que tengamos descargada en nuestro ordenador, lo primero que hay que hacer es ir a la carpeta Fonts, botón derecho y “Añadir archivos existentes…”. Después en la hoja de estilos pondremos las diferentes formas de los archivos que hayamos importado.

Para la tipografía Century Gothic quedarían así:

@font-face {

font-family: ‘Century Gothic’;

font-style:normal;

font-weight:normal;

src : url(“../Fonts/GOTHIC.TTF”);

}

@font-face {

font-family: ‘Century Gothic’;

font-style:normal;

font-weight:bold;

src : url(“../Fonts/GOTHICB.TTF”);

}

@font-face {

font-family: ‘Century Gothic’;

font-style:italic;

font-weight:bold;

src : url(“../Fonts/GOTHICBI.TTF”);

}

@font-face {

font-family: ‘Century Gothic’;

font-style:oblique;

font-weight:bold;

src : url(“../Fonts/GOTHICBI.TTF”);

}

@font-face {

font-family: ‘Century Gothic’;

font-style:italic;

font-weight:normal;

src : url(“../Fonts/GOTHICI.TTF”);

}

@font-face {

font-family: ‘Century Gothic’;

font-style:oblique;

font-weight:normal;

src : url(“../Fonts/GOTHICI.TTF”);

}

Hay muchísimas más opciones a la hora de dar estilos y puedes adornarlo todo lo que desees.

Si quieres saber más, esta web es la más completa que hay sobre CSS https://www.w3schools.com/css/default.asp

Los estilos que más podrías utilizar son estos:


Muchísimas gracias, Laura, por el tutorial. Si queréis conocerla mejor, os dejo su blog de escritora y su Twitter.

Anuncios

Un comentario en “Estilos CSS para Sigil「Tutorial」

Deja aquí tu comentario :)

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.