Problemas en kepubs

[JIPG]

Leyendo en mi kobo H2O, tienden a gustarme más cómo se ven los libros en formato kepub que en formato epub a secas. Sin embargo hay algunos libros que me dan problemas. Por ello, tengo algunas preguntas para los que controláis los estilos y demás zarandajas de los fichero kepub:

1. Los comandos page-break-after: always y page-break-before: always; no se muestran correctamente en los kepub (p.e capítulos "decorados" que empiezan con una imagen en una página y el texto ya va en la siguiente). El mismo código se ve bien en epub, pero en el kepub sale todo seguido, sin salto de página. ¿Se puede utilizar algún código equivalente para que el kepub se vea igual?
2. Cuando leo un kepub y selecciono en el menú Aa que el texto esté justificado, las imágenes que deberían aparecer centradas, se van hacia la izquierda.
3. Si selecciono No justificar en el menú Aa, las imágenes que se iban a la izquierda al justificar, ahora sí aparecen centradas. ¿Como puedo hacer para seleccionar justificar y que las imágenes salgan correctamente centradas? (ver también la pregunta siguiente).
4. Al elegir No justificar en el menú Aa, no me usa guiones para partir palabras (silabeo). ¿Cómo se puede hacer que haga silabeo, esté justificado y las imágenes salgan correctamente centradas? (que es lo que finalmente quiero).

La verdad es que a veces cambio de formato según las imágenes o "decoraciones" que tenga el libro, pero me obliga a tener en elector los dos ficheros, el epub y el kepub, para ver cual se ve mejor según el contenido.

Os agradecería cualquier indicación.

[surquizu]

Yo no se, pero también llevo el epub y el kepub del mismo libro en el lector jajaja

[cavy]

Para justificar y mantener los guiones usa el parche `Set KePub hyphenation` de libnickel. Con el texto justificado por el css, desactiva la alineación en Aa. Con eso te mantiene los estilos centrados.
Del primer punto ni idea.

[Terisa]

Leyendo en mi kobo H2O, tienden a gustarme más cómo se ven los libros en formato kepub que en formato epub a secas. Sin embargo hay algunos libros que me dan problemas. Por ello, tengo algunas preguntas para los que controláis los estilos y demás zarandajas de los fichero kepub:

1. Los comandos page-break-after: always y page-break-before: always; no se muestran correctamente en los kepub (p.e capítulos "decorados" que empiezan con una imagen en una página y el texto ya va en la siguiente). El mismo código se ve bien en epub, pero en el kepub sale todo seguido, sin salto de página. ¿Se puede utilizar algún código equivalente para que el kepub se vea igual?

¿Tienes ejemplo de esto? Me suena haberlo leído pero no he sido capaz de verlo.

1. Cuando leo un kepub y selecciono en el menú Aa que el texto esté justificado, las imágenes que deberían aparecer centradas, se van hacia la izquierda.

Cuando le pones justificado ignora cualquier otra alineación que le pongas (no hay concepto de texto como tal sino de tags.

1. Si selecciono No justificar en el menú Aa, las imágenes que se iban a la izquierda al justificar, ahora sí aparecen centradas. ¿Como puedo hacer para seleccionar justificar y que las imágenes salgan correctamente centradas? (ver también la pregunta siguiente).

No puedes.

1. Al elegir No justificar en el menú Aa, no me usa guiones para partir palabras (silabeo). ¿Cómo se puede hacer que haga silabeo, esté justificado y las imágenes salgan correctamente centradas? (que es lo que finalmente quiero).

Creo que hay una opción en el KoboTouch Extended Driver para dividir con guiones. No sé si funciona porque no uso guiones, pero es lo único que se me ocurre.

[jcn363]

Leyendo en mi kobo H2O, tienden a gustarme más cómo se ven los libros en formato kepub que en formato epub a secas. Sin embargo hay algunos libros que me dan problemas. Por ello, tengo algunas preguntas para los que controláis los estilos y demás zarandajas de los fichero kepub:

1. Los comandos page-break-after: always y page-break-before: always; no se muestran correctamente en los kepub (p.e capítulos "decorados" que empiezan con una imagen en una página y el texto ya va en la siguiente). El mismo código se ve bien en epub, pero en el kepub sale todo seguido, sin salto de página. ¿Se puede utilizar algún código equivalente para que el kepub se vea igual?
2. Cuando leo un kepub y selecciono en el menú Aa que el texto esté justificado, las imágenes que deberían aparecer centradas, se van hacia la izquierda.
3. Si selecciono No justificar en el menú Aa, las imágenes que se iban a la izquierda al justificar, ahora sí aparecen centradas. ¿Como puedo hacer para seleccionar justificar y que las imágenes salgan correctamente centradas? (ver también la pregunta siguiente).
4. Al elegir No justificar en el menú Aa, no me usa guiones para partir palabras (silabeo). ¿Cómo se puede hacer que haga silabeo, esté justificado y las imágenes salgan correctamente centradas? (que es lo que finalmente quiero).

A ver si hay suerte y no te (me) lio/confundo, y soy capaz de exponerlo todo sin que se me olvide nada (al menos nada relevante).
Echa un vistazo a:
https://github.com/kobolabs/epub-spec#css
https://github.com/kobolabs/epub-spe...sed-fxl-reader

Respuesta larga:

Contenido oculto:

Los CSS se pueden implementar en:

a) instrucción en tag html (ALTAMENTE NO RECOMENDADO POR KOBO)

<p style="font-weight: bold;text-size: xx-large;">No lo uses en los documentos que vayas a leer en tu Kobo.</p>

b) cabecera de archivo html (No recomendado por Kobo)

 <head>
...
  <style type="text/css" title="override_css">
  @page {
    padding: 0;
    margin: 0;
    }
body {
    orphans: 0;
    widows: 0;
    text-align: justify;
    padding-top: 0.2em;
    text-indent: 1.5em;
  }
    .kobito {font-weight: bold;text-size: xx-large;}
  </style>
</head>
<body>
    <p class="kobito">Este formato NO está recomiendado por Kobo.</p>

Mirar:
https://gist.github.com/JayPanoz/b9c54ec28935de81f068

c) archivo css referenciado dentro de un html del libro (en la sección estilos dentro de un ePub)
En la cabecera del html tendremos una referencia al archivo donde se encuentra la clase que queremos usar:

<head>
...
  <link href="../stylesheet.css" rel="stylesheet" type="text/css"/>
</head>

En el archivo stylesheet.css está la descripción de la clase a utilizar:

.kobito {font-weight: bold;text-size: xx-large;}

y en el archivo html la intrucción para usar la clase:

<p class="kobito">Este formato es el que recomienda Kobo.</p>

d) archivo del propietario (adobe,apple,etc.) dentro del ePub
Adobe usa un archivo XPGT (p.ej. page-template.xpgt)
Apple lo denomina com.apple.ibooks.display-options.xml

e) programa lector de documentos (o en un archivo del mismo)
En el caso de Kobo, se encuentran repartidos en los programas y librerías que usa.
Principalmente nickel y libnickel además de poder leer archivos externos como kobo_extra.css.

f) además, los programas (e) suelen usar un motor/interprete (p.ej. el RMSDK de Adobe)
En el caso de Kobo, nickel usa uno para KePub y otro diferente para ePub (de aquí las discrepancias entre la presentación de un KePub y su correspondiente ePub).

Están ordenados jerárquicamente y secuencialmente (en teoría) :-"

Hay que tener en cuenta que al añadir !important al final de una propiedad se está dando preferencia sobre aquellos que no la tienen. Es decir, si la altura de una imagen está definida en varios sitios pero en uno de ellos se encuentra !important la de este tendrá preponderancia.

div.figure img {
  width: 100% !important;
  height: auto !important;
}

El silabeo se aplica, en principio, sólo para el justificado. Pero hay algún parche que lo soluciona.
Si tienes preguntas de código... pon ejemplos o manda privado.
Si sigues teniendo problemas...
Vamos por partes
Utiliza clases diferentes para el centrado y para el resto (break)

Contenido oculto:

  <div class="ladrillo centrado">
    <img class="a" alt="Portada" src="images/image-5.jpeg"/>
  </div>

[Terisa]

​
Utiliza clases diferentes para el centrado y para el resto (break)

Contenido oculto:

  <div class="ladrillo centrado">
    <img class="a" alt="Portada" src="images/image-5.jpeg"/>
  </div>

Yo tengo clases diferentes y le da igual

[jcn363]

Yo tengo clases diferentes y le da igual

Esto tampoco?

Contenido oculto:

.pnueva {
  page-break-before: always;
}
.pgcentro {
  margin-top: 50%;
  margin-bottom: 50%;
  text-align: center;
  text-indent: 0;
}

  <div class="pnueva pgcentro">

    <img alt="Portada" src="images/image-5.jpeg"/>

  </div>

[JIPG]

Lo primero, muchas gracias a todos por vuestras respuestas.

El problema lo tengo en muchos libros, y andar cambiando css por todos lados me parece una tarea ardua (aunque de hecho siempre cambio algo , pero iré haciendo pruebas en libros nuevos en la dirección que me indicáis.
Mientras tanto, para resolver el problema del justificado en kepub que hace que algunas imágenes salgan justificadas a la izquierda en vez de centradas, estoy instalando el patch `Un-Force user text-align in div,p tags in KePubs`, que al menos hace que funcione igual que en los epub. Ya os contaré que tal.

En cuanto al tema del page-break-after: always; tengo este ejemplo (ver spoiler), que en un epub muestra el título y el dibujo, hace un salto de página y luego ya viene el texto en la página siguiente. Sin embargo, en el kepub (sacado del epub con kepubify), sale todo seguido.

Contenido oculto:

En el cuerpo del capítulo:
<head>
<title></title>
<link href="../Styles/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<h1 class="capitulo" title="I. Nada que perder">I</h1>

<p class="capitulo2">NADA QUE PERDER</p>

<p class="dibujocap"><img alt="dibujocap" src="../Images/dibujocap.png"/></p>

<p class="salto25 ">Año 340 a. de C.</p>

En style.css:

.dibujocap {
display: block;
page-break-after: always;
text-align: center;
text-indent: 0;

.dibujocap img {
width: 50%;

.salto25 {
padding-top: 2.5em;

[jcn363]

En cuanto al tema del page-break-after: always; tengo este ejemplo (ver spoiler), que en un epub muestra el título y el dibujo, hace un salto de página y luego ya viene el texto en la página siguiente. Sin embargo, en el kepub (sacado del epub con kepubify), sale todo seguido.

Contenido oculto:

En el cuerpo del capítulo:
<head>
<title></title>
<link href="../Styles/style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<h1 class="capitulo" title="I. Nada que perder">I</h1>

<p class="capitulo2">NADA QUE PERDER</p>

<p class="dibujocap"><img alt="dibujocap" src="../Images/dibujocap.png"/></p>

<p class="salto25 ">Año 340 a. de C.</p>

En style.css:

.dibujocap {
display: block;
page-break-after: always;
text-align: center;
text-indent: 0;

.dibujocap img {
width: 50%;

.salto25 {
padding-top: 2.5em;

¿Has intentado?

Contenido oculto:

.pnueva {
  page-break-before: always;
}
<p class="salto25 pnueva">Año 340 a. de C.</p>

[Terisa]

Esto tampoco?

Contenido oculto:

.pnueva {
  page-break-before: always;
}
.pgcentro {
  margin-top: 50%;
  margin-bottom: 50%;
  text-align: center;
  text-indent: 0;
}

  <div class="pnueva pgcentro">

    <img alt="Portada" src="images/image-5.jpeg"/>

  </div>

¿Dos clases diferentes? No puedo decirte, no suelo tenerlo. Puede que funcione.