2010-11-17 10 views
8

Estoy tomando datos de texto de archivos XML, y quiero que se muestren en formato de página de libro dentro de un UIWebView en iPad. Los archivos XML provienen de un .epub, y cada uno contiene un solo capítulo de un libro, dividido solo por etiquetas p.Paginación Ereader-Style

Quiero paginar dinámicamente estos archivos en páginas similares a libros en función del tamaño de UIWebView, que es una pantalla completa de iPad, así como por tamaño de fuente seleccionado por el usuario. Actualmente estoy cargando una página html en blanco con css relacionado en un UIWebView, tomando párrafos basados ​​en el número de caracteres como Cadenas del XML e imprimiéndolos en el html usando StringByEvaluatingJavaScriptFromString y la propiedad innerHTML.

Obviamente, hacerlo por número de caracteres crea páginas mal formateadas y de formato incorrecto, pero no estoy seguro de cómo "paginar" el texto.

Lo que estoy buscando hacer es algo parecido a la aplicación "eReader" en el iPad: http://www.ereader.com/. Parece que están dividiendo un archivo en páginas dinámicamente y lo están cargando en UIWebView s. ¿Cómo se hace esto?

Respuesta

2

La mayoría de los lectores EPUB que se basan en UIWebView simplemente usan columnas CSS3 para paginar el documento.

Esto se puede ver en acción en http://www.quirksmode.org/css/multicolumn.html

La idea básica es que columnize '' el documento y luego desplazarse horizontalmente a través de él para mostrar una página específica.

Después de haber hecho esto para una aplicación de eReader popular (canadiense) en el iPhone y iPad, puedo decirles que la técnica funciona, pero que está lejos de ser ideal.

+0

Esto es muy interesante y definitivamente útil. Las preguntas de seguimiento son entonces: si CSS "columnas" todo el capítulo, ¿hay alguna manera de acceder y editar el contenido de la columna a través de DOM, con el fin de cambiar dinámicamente los números de página, etc.? Además, ¿cómo se restringe al usuario el desplazamiento libre horizontalmente a través de la vista, de modo que se "bloquea" para mirar una página a la vez? – Chris

+0

Además, las columnas CSS3 parecen actuar de forma extraña cuando se desea un ancho de columna mayor (por ejemplo, aproximadamente el tamaño de una ventana de iPad). ¿Cuál es tu solución? Hice una pregunta por separado aquí: http: //stackoverflow.com/questions/4217936/css3-columns-and-uiwebview – Chris

+0

que es un enfoque realmente interesante. ¿Podrías manejar las columnas integradas de EPUB usando ese enfoque o eso rompería el truco de la 'paginación'? –

1

El código ya está hecho. Se llama epubjs. Es Javascript solamente lector de epub.

+0

Esto es bastante ostentoso. Revisé el svn y lo ejecuté con un par de .epubs diferentes. El problema es que cuando obtengo los archivos en Xcode y hago que UIWebView cargue index.html todo se desmorona. solo el contenido de la etiqueta de información es visible y no tiene estilo. – Chris

+0

Otra opción es utilizar las funciones de desplazamiento suave en Motools, Jquery, etc. Renderice su página web en varias columnas y luego busque etiquetas hash. Hay una buena demostración en el sitio web de Jquery de desplazamiento a cualquier contenido en una página web. –

0

Utilice UITextView con PageviewController. (especifique sus dudas, si corresponde)