20/5/2019 Estilos CSS para Sigil「Tutorial」 – Celia A
” Celia Añó
Escritora de fantasía · Dibujante
Estilos CSS para Sigil「Tutorial」
EN 11 SEPTIEMBRE, 201831 OCTUBRE, 2018 / POR CELIA
AÑÓ Está a punto de cumplir un año desde que hice el tutorial para maquetar ebooks con Sigil (h ps://labrujadelteatro.wordpress.com/2017/10/03/enmaquetar-un- ebook-con-sigil-tutorial/) 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 (h ps://lektu.com/l/lhh-writing/soldado/9806)!) 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. 20/5/2019 Estilos CSS para Sigil「Tutorial」 – Celia A
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. 20/5/2019 Estilos CSS para Sigil「Tutorial」 – Celia A
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 (h ps://color.adobe.com/es/create/color-wheel/ (h ps://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: 20/5/2019 Estilos CSS para Sigil「Tutorial」 – Celia A
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:
20/5/2019 Estilos CSS para Sigil「Tutorial」 – Celia A
.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í:
20/5/2019 Estilos CSS para Sigil「Tutorial」 – Celia A
@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”); 20/5/2019 Estilos CSS para Sigil「Tutorial」 – Celia A
@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 h ps://www.w3schools.com/css/default.asp (h ps://www.w3schools.com/css/default.asp)
Los estilos que más podrías utilizar son estos:
Colores: h ps://www.w3schools.com/css/css_colors.asp (h ps://www.w3schools.com/css/css_colors.asp) Bordes: h ps://www.w3schools.com/css/css_border.asp (h ps://www.w3schools.com/css/css_border.asp) Texto: h ps://www.w3schools.com/css/css_text.asp (h ps://www.w3schools.com/css/css_text.asp) Fuentes: h ps://www.w3schools.com/css/css_font.asp (h ps://www.w3schools.com/css/css_font.asp) Listas: h ps://www.w3schools.com/css/css_list.asp (h ps://www.w3schools.com/css/css_list.asp) Tipografías propias: h ps://www.w3schools.com/css/css3_fonts.asp (h ps://www.w3schools.com/css/css3_fonts.asp) Sangría: h ps://www.w3schools.com/cssref/pr_text_text- indent.asp (h ps://www.w3schools.com/cssref/pr_text_text- indent.asp) Interlineado: h ps://www.w3schools.com/cssref/pr_dim_line- height.asp (h ps://www.w3schools.com/cssref/pr_dim_line- height.asp)
Y aquí otro tutorial que puede resultarnos útil:
HTML y CSS básico para hacer epub2 con Sigil
(h ps://dieguintosh.gitbooks.io/html-y-css-basico-para-hacer- epub2-con-sigil-/index.html) 20/5/2019 Estilos CSS para Sigil「Tutorial」 – Celia A
Muchísimas gracias, Laura, por el tutorial. Si queréis conocerla mejor,
os dejo su blog de escritora (h ps://aijin869.wordpress.com/) y su Twi er (h ps://twi er.com/aijin869).
Anuncios
REPORT THIS AD
Un comentario en “Estilos CSS
para Sigil「Tutorial」”
1. Laura Herranz Hernández (@aijin869)
Un placer colaborar contigo ^_^
11 SEPTIEMBRE, 2018 A LAS 17:05 RESPONDER
This site uses Akismet to reduce spam. Learn how your comment data is processed.
