Edición de CSS con Sigil

Sigil es un editor EPUB gratuito y de código abierto que facilita la edición y optimización de archivos EPUB después de la exportación desde InDesign.

Instalación de Sigil

Descargar:

• Sitio oficial: https://sigil-ebook.com/
• Disponible para Windows, macOS y Linux
• Completamente gratuito y de código abierto

Características principales:

• Editor WYSIWYG y vista de código
• Editor CSS integrado
• Validación EPUB integrada
• Búsqueda y reemplazo con expresiones regulares
• Gestión de metadata
• Plugins extensibles

Abrir y Navegar en Sigil

Abrir un EPUB:

1. Inicia Sigil
2. Archivo > Abrir y selecciona tu archivo .epub
3. O arrastra el archivo .epub a la ventana de Sigil

Estructura del navegador:

• Text: Archivos XHTML de contenido
• Styles: Hojas de estilo CSS
• Images: Archivos de imagen
• Fonts: Fuentes embebidas
• Audio: Archivos de audio
• Video: Archivos de video
• Misc: Otros archivos (OPF, NCX, etc.)

Editar CSS

Acceder al CSS:

1. En el navegador, expande la carpeta Styles
2. Haz doble clic en el archivo CSS (generalmente stylesheet.css o similar)
3. El editor CSS se abrirá

Optimizaciones comunes de CSS:

1. Simplificar CSS generado por InDesign

InDesign puede generar CSS redundante o innecesariamente complejo. Revisa y simplifica:

/* CSS generado por InDesign (complejo) */
p.para-1 {
  font-family: "Adobe Garamond Pro", serif;
  font-size: 1em;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 1em;
  text-align: justify;
  text-indent: 1.5em;
}

/* CSS optimizado (más simple) */
p {
  font-family: serif;
  margin-bottom: 1em;
  text-indent: 1.5em;
}

/* CSS generado por InDesign (complejo) */
p.para-1 {
  font-family: "Adobe Garamond Pro", serif;
  font-size: 1em;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 1em;
  text-align: justify;
  text-indent: 1.5em;
}

/* CSS optimizado (más simple) */
p {
  font-family: serif;
  margin-bottom: 1em;
  text-indent: 1.5em;
}

2. Eliminar estilos que afectan accesibilidad

Según las directrices de HarperCollins y mejores prácticas:

/* ❌ ELIMINAR - Afecta accesibilidad */
p {
  line-height: 1.2; /* Usuarios deben poder ajustar */
  font-size: 14px;  /* Debe ser relativo, no fijo */
  text-align: justify; /* Dificulta lectura para algunos usuarios */
}

/* ✅ MEJOR - Accesible */
p {
  /* line-height: heredado o ajustable por usuario */
  /* font-size: heredado o en unidades relativas (em, %) */
  text-align: left; /* O sin especificar */
}

/* ❌ ELIMINAR - Afecta accesibilidad */
p {
  line-height: 1.2; /* Usuarios deben poder ajustar */
  font-size: 14px;  /* Debe ser relativo, no fijo */
  text-align: justify; /* Dificulta lectura para algunos usuarios */
}

/* ✅ MEJOR - Accesible */
p {
  /* line-height: heredado o ajustable por usuario */
  /* font-size: heredado o en unidades relativas (em, %) */
  text-align: left; /* O sin especificar */
}

3. Mejorar contraste y legibilidad

/* Asegurar contraste suficiente (mínimo 4.5:1) */
body {
  color: #1a1a1a; /* Casi negro */
  background-color: #ffffff; /* Blanco */
}

/* Para tema oscuro */
@media (prefers-color-scheme: dark) {
  body {
    color: #e0e0e0;
    background-color: #1a1a1a;
  }
}

/* Asegurar contraste suficiente (mínimo 4.5:1) */
body {
  color: #1a1a1a; /* Casi negro */
  background-color: #ffffff; /* Blanco */
}

/* Para tema oscuro */
@media (prefers-color-scheme: dark) {
  body {
    color: #e0e0e0;
    background-color: #1a1a1a;
  }
}

4. Optimizar para dispositivos móviles

/* Imágenes responsivas */
img {
  max-width: 100%;
  height: auto;
}

/* Tablas responsivas */
table {
  width: 100%;
  border-collapse: collapse;
}

td, th {
  padding: 0.5em;
  text-align: left;
}

/* Imágenes responsivas */
img {
  max-width: 100%;
  height: auto;
}

/* Tablas responsivas */
table {
  width: 100%;
  border-collapse: collapse;
}

td, th {
  padding: 0.5em;
  text-align: left;
}

5. Estilizar elementos de accesibilidad

/* Separadores de contexto */
hr {
  border: none;
  border-top: 2px solid #ccc;
  margin: 2em auto;
  width: 50%;
}

/* Enlaces claros */
a {
  color: #0066cc;
  text-decoration: underline;
}

a:hover, a:focus {
  color: #004499;
  outline: 2px solid #0066cc;
}

/* Notas al pie */
.footnote {
  font-size: 0.9em;
  border-top: 1px solid #ccc;
  padding-top: 1em;
  margin-top: 2em;
}

/* Separadores de contexto */
hr {
  border: none;
  border-top: 2px solid #ccc;
  margin: 2em auto;
  width: 50%;
}

/* Enlaces claros */
a {
  color: #0066cc;
  text-decoration: underline;
}

a:hover, a:focus {
  color: #004499;
  outline: 2px solid #0066cc;
}

/* Notas al pie */
.footnote {
  font-size: 0.9em;
  border-top: 1px solid #ccc;
  padding-top: 1em;
  margin-top: 2em;
}

Guardar Cambios

Sigil guarda automáticamente los cambios en el archivo EPUB. Para guardar manualmente:

• Archivo > Guardar (Cmd/Ctrl + S)
• O Archivo > Guardar como para crear una nueva versión

Validación de Accesibilidad

La validación es crucial para asegurar que tu EPUB cumple con estándares de accesibilidad y formato.

EPUBCheck

EPUBCheck es el validador oficial del formato EPUB, desarrollado por el consorcio IDPF/W3C.

Qué valida:

• Conformidad con especificación EPUB 3
• Estructura de archivos correcta
• HTML/XHTML bien formado
• Referencias de archivos válidas
• Metadata requerido

Uso en Sigil:

1. Herramientas > Validar EPUB con EPUBCheck
2. Revisa los errores y advertencias
3. Corrige los problemas identificados

Uso en línea de comandos:

# Instalar EPUBCheck (requiere Java)
# Descargar de https://github.com/w3c/epubcheck/releases

# Validar EPUB
java -jar epubcheck.jar mi-libro.epub

# Instalar EPUBCheck (requiere Java)
# Descargar de https://github.com/w3c/epubcheck/releases

# Validar EPUB
java -jar epubcheck.jar mi-libro.epub

Errores comunes y soluciones:

Daisy ACE

Daisy ACE (Accessibility Checker for EPUB) es un validador específico de accesibilidad desarrollado por el consorcio DAISY.

Qué valida:

• Conformidad con WCAG 2.0/2.1
• Metadata de accesibilidad
• Texto alternativo de imágenes
• Estructura de encabezados
• Contraste de color
• Roles ARIA
• Navegación por teclado

Instalación:

# Requiere Node.js
npm install -g @daisy/ace

# Requiere Node.js
npm install -g @daisy/ace

Uso:

# Validar EPUB
ace mi-libro.epub

# Generar reporte en carpeta específica
ace -o reporte-accesibilidad mi-libro.epub

# Validar EPUB
ace mi-libro.epub

# Generar reporte en carpeta específica
ace -o reporte-accesibilidad mi-libro.epub

Interpretar resultados:

Daisy ACE genera un reporte HTML con:

• Violations: Errores que deben corregirse
• Warnings: Advertencias que deberían revisarse
• Passes: Verificaciones exitosas

Categorías de problemas:

Críticos (deben corregirse):

• Imágenes sin texto alternativo
• Encabezados fuera de secuencia
• Contraste insuficiente
• Metadata de accesibilidad faltante

Advertencias (revisar):

• Texto alternativo potencialmente inadecuado
• Estructura de tabla compleja
• Posibles problemas de navegación

Validadores en Línea

EPUB Validator (Pagina)

• URL: http://validator.idpf.org/
• Validación rápida sin instalación
• Útil para verificaciones rápidas

Ace by DAISY (versión web)

• Algunas organizaciones ofrecen versiones web de Ace
• Menos completo que la versión de línea de comandos

Pruebas con Lectores de Pantalla

Probar tu EPUB con lectores de pantalla reales es esencial para verificar accesibilidad práctica.

Thorium Reader

Thorium es un lector EPUB de escritorio con excelente soporte de accesibilidad.

Características:

• Soporte completo de EPUB 3
• Compatible con lectores de pantalla
• Navegación por encabezados
• Ajustes de accesibilidad integrados
• Gratuito y de código abierto

Instalación:

• Descargar de: https://www.edrlab.org/software/thorium-reader/
• Disponible para Windows, macOS y Linux

Pruebas en Thorium:

1. Abrir el EPUB en Thorium
2. Verificar navegación:
   • Usa la tabla de contenidos
   • Navega por encabezados (generalmente con teclas de navegación)
3. Verificar imágenes:
   • Activa lector de pantalla
   • Verifica que alt text se lea correctamente
4. Verificar orden de lectura:
   • Lee el contenido secuencialmente
   • Asegura que el orden sea lógico

NVDA (Windows)

NVDA (NonVisual Desktop Access) es un lector de pantalla gratuito para Windows.

Instalación:

• Descargar de: https://www.nvaccess.org/
• Completamente gratuito

Uso básico:

Iniciar NVDA:

• Ejecuta NVDA
• Se iniciará leyendo automáticamente

Comandos básicos:

• Ctrl: Detener lectura
• Insert + Flecha abajo: Leer todo
• H: Navegar al siguiente encabezado
• K: Navegar al siguiente enlace
• G: Navegar a la siguiente imagen
• T: Navegar a la siguiente tabla

Probar EPUB con NVDA:

1. Abre el EPUB en Thorium Reader
2. Inicia NVDA
3. Navega por el contenido usando comandos de teclado
4. Verifica que:
   • Encabezados se anuncian correctamente
   • Texto alternativo de imágenes se lee
   • Orden de lectura es lógico
   • Enlaces son descriptivos
   • Tablas se navegan correctamente

VoiceOver (macOS/iOS)

VoiceOver es el lector de pantalla integrado en dispositivos Apple.

Activar VoiceOver:

• macOS: Cmd + F5 (o Cmd + Touch ID tres veces)
• iOS: Configuración > Accesibilidad > VoiceOver

Comandos básicos (macOS):

• VO + A: Leer todo
• VO + Flecha derecha/izquierda: Navegar entre elementos
• VO + H: Navegar entre encabezados
• VO + Cmd + H: Abrir selector de encabezados

Probar EPUB con VoiceOver:

1. Abre el EPUB en Apple Books
2. Activa VoiceOver
3. Navega y verifica accesibilidad

JAWS (Windows)

JAWS (Job Access With Speech) es el lector de pantalla más usado en Windows (comercial).

Comandos básicos:

• Insert + Flecha abajo: Leer todo
• H: Siguiente encabezado
• Shift + H: Encabezado anterior
• Insert + F6: Lista de encabezados
• Insert + F7: Lista de enlaces

Herramientas de Validación Adicionales

Accessibility Insights

Accessibility Insights de Microsoft ayuda a identificar problemas de accesibilidad.

• Disponible como extensión de navegador
• Útil para verificar contenido HTML del EPUB
• Genera reportes detallados

axe DevTools

axe DevTools es una extensión de navegador para pruebas de accesibilidad.

• Extensión para Chrome, Firefox, Edge
• Analiza páginas HTML
• Identifica problemas WCAG

Uso para EPUBs:

1. Extrae el EPUB (.epub → .zip)
2. Abre archivos XHTML en navegador
3. Ejecuta axe DevTools
4. Revisa y corrige problemas

Optimización de Tamaño de Archivo

Reducir el tamaño del archivo EPUB mejora la experiencia de descarga y distribución.

Optimizar Imágenes

1. Comprimir imágenes

• Usa herramientas como ImageOptim (Mac), FileOptimizer (Windows)
• Reduce calidad JPEG a 80-85% (generalmente imperceptible)
• Convierte PNG a JPEG cuando no se necesita transparencia

2. Dimensiones apropiadas

• No incluyas imágenes más grandes de lo necesario
• Para pantallas estándar: máximo 1400-2000px en el lado más largo
• Para imágenes decorativas pequeñas: 600-800px

3. Formato apropiado

• JPEG: Fotografías y imágenes con muchos colores
• PNG: Gráficos con transparencia, ilustraciones con colores planos
• SVG: Gráficos vectoriales, iconos, diagramas simples

Limpiar Código

1. Eliminar CSS no usado

Sigil tiene un plugin para esto:

• Plugins > Edit > Remove Unused CSS Selectors

2. Minimizar archivos

Reduce espacios en blanco y comentarios innecesarios (con cuidado, puede dificultar edición futura).

3. Consolidar archivos CSS

Si tienes múltiples archivos CSS pequeños, considera consolidarlos en uno solo.

Verificar Tamaño Final

Tamaños recomendados:

• Novela de texto: 500 KB - 2 MB
• Libro con imágenes: 5 MB - 20 MB
• Libro ilustrado/cómic: 20 MB - 100 MB

Nota: Algunas plataformas tienen límites de tamaño (ej: Amazon tiene límite de 650 MB).

Checklist de Post-Procesamiento

Antes de considerar el EPUB finalizado:

• ✅ CSS revisado y optimizado en Sigil
• ✅ Estilos que afectan accesibilidad eliminados
• ✅ Atributos epub:type y role añadidos a secciones
• ✅ Estructura de tablas mejorada con <th> y scope
• ✅ Validado con EPUBCheck (sin errores)
• ✅ Validado con Daisy ACE (violaciones críticas corregidas)
• ✅ Probado con lector de pantalla (NVDA, VoiceOver o JAWS)
• ✅ Probado en Thorium Reader
• ✅ Probado en múltiples dispositivos (Kindle, iPad, Android)
• ✅ Imágenes optimizadas
• ✅ Tamaño de archivo verificado
• ✅ Metadata de accesibilidad completo y correcto
• ✅ Orden de lectura verificado
• ✅ Contraste de color verificado

El post-procesamiento cuidadoso transforma un EPUB funcional en un EPUB profesional, accesible y optimizado.