¿Cómo dividir documentos HTML en páginas para libros electrónicos?

Para una aplicación de libro electrónico de iPhone, necesito dividir los documentos HTML arbitrariamente largos en páginas que se ajusten exactamente a una pantalla. Si simplemente uso UIWebView para esto, las líneas inferiores tienden a mostrarse solo parcialmente: el resto desaparece del borde de la vista.¿Cómo dividir documentos HTML en páginas para libros electrónicos?

Así que supongo que necesitaría saber cuántas líneas completas (o caracteres) se mostrarían en UIWebView, dado el código fuente HTML, y luego alimentarlo con la cantidad exacta de datos. Esto probablemente implica muchos cálculos, y el usuario también debe poder cambiar las fuentes y los tamaños.

No tengo ni idea de si esto es posible, aunque aplicaciones como Stanza toman archivos HTML (epub) y los paginan muy bien. Ha pasado mucho tiempo desde que miré JavaScript, ¿sería una opción que vale la pena mirar?

¡Todas las sugerencias son muy apreciadas!

actualización

así que he dado con una posible solución, utilizando JavaScript para anotar el DOM-árbol con tamaños y posiciones de cada elemento. Entonces debería ser posible reestructurar el árbol (usando XSLT o JavaScript incorporado), dividiéndolo en páginas que se ajusten exactamente a la pantalla.

El problema restante aquí es que esto siempre rompe la página en los límites de párrafo, ya que no hay acceso al texto en un nivel inferior al elemento P. Quizás esto se puede remediar analizando el texto en palabras, encapsulando cada palabra en una etiqueta SPAN, repitiendo el procedimiento de medición anterior, y luego solo mostrando los elementos SPAN que se ajustan a la pantalla, insertando los restantes al frente de la siguiente página.

Todo esto suena bastante complicado. ¿Estoy hablando de algún sentido? ¿Hay alguna forma más simple?

Fuente

2010-05-04 radnoise

Usted debe mirar el módulo PagedMedia CSS:. http://www.w3.org/TR/css3-page/ CSS3 también el apoyo de los diseños de varias columnas (Google de "css3-multicol" no tengo suficiente Karma para incluir un segundo enlace aquí :-)

Acerca de su actualización: ¿qué le parece hacer el diseño de una sola página, luego use un DIV con desbordamiento: oculto para la parte de texto. Lo siguiente sería superponer un elemento transparente encima de eso, que desplazará por programación el contenido interno de los PÍGINOS DE PÁGINA DIV de DIV hacia arriba o hacia abajo de acuerdo con algunos controles de navegación (o gestos).

Fuente

2010-05-09 13:24:24 user336639

Gracias, sugerencia útil! Es una lástima que WebKit no implemente ni siquiera la regla de página @ CSS2. El soporte de múltiples columnas es aparentemente experimental, pero tal vez pueda jugar un poco con eso. No sé si puedo tener un UIWebView que sea lo suficientemente amplio para la cantidad de columnas que necesito para representar (1 por página), pero vale la pena investigarlo. – radnoise

No he intentado @page en el iPhone, pero ciertamente espero que Apple lo soporte en el iPad, al menos en una próxima actualización. multicolumn funciona muy bien en las versiones recientes de webkit (no estoy seguro acerca de iphone tho). – user336639

La otra opción es tener un padre <div> con múltiples columnas css3: link1, link2.
Esto funciona en Android:

<style type='text/css'> 
div { 
    width: 1024px; // calculated 
    -webkit-column-gap: 0px; 
    -webkit-column-width: 320px; // calculated 
    } 
p { 
    text-align: justify; 
    padding:10px; 
    } 
</style>

Fuente

2010-05-12 02:19:29 yanchenko

Sí, una sugerencia anterior implicaba el uso de columnas CSS. Lo probé en Safari 3.1 y se ve bien, así que lo investigaré para el iPhone. – radnoise

¿Cómo calcular el ancho de div? – HelloWorld

Usar P relleno versus usar -webkig-column-gap fue la mejor idea. Webkit column gap agrega píxeles extra imprevistos en cada navegador diferente ... – BIOHAZARD

Las sugerencias CSS MULTICOL son muy interesantes! Sin embargo, y espero que esté bien responder con otra pregunta: ¿cómo pasaría de dividir uno o más elementos largos <p> en columnas a tener una de estas columnas en particular en un WebView? El DOM no ha cambiado, por lo que no puedes elegir un elemento y renderizarlo. ¿Qué me estoy perdiendo?

Fuente

2010-05-19 23:06:10 dunken69

No he analizado esto en profundidad todavía, y no sé de qué forma renderizar una sola columna. Pero supongo que puede usar JavaScript para desplazarse a la columna que desea. Siempre que su ventana gráfica esté dimensionada para las dimensiones de la columna, solo esa columna estará visible. Por supuesto que espero que todo esto no dé lugar a requisitos de memoria escandalosos. – radnoise

¿Cómo dividir documentos HTML en páginas para libros electrónicos?

Respuesta

Cuestiones relacionadas