Come suddividere i documenti HTML in pagine per ebook?

Question

Per un'applicazione ebook per iPhone ho bisogno di rompere documenti HTML arbitrariamente lunghi in pagine che si adattano esattamente su uno schermo. Se uso semplicemente UIWebView per questo, le righe più profonde tendono a essere visualizzate solo parzialmente: il resto scompare dal bordo della vista.

Quindi presumo che avrei bisogno di sapere quante linee complete (o caratteri) verrebbero visualizzate da UIWebView, dato l'HTML sorgente, e quindi fornirle esattamente la giusta quantità di dati. Questo probabilmente richiede molti calcoli e l'utente deve anche essere in grado di cambiare tipi di carattere e dimensioni.

Non ho idea se questo sia possibile, anche se app come Stanza accettano file HTML (epub) e li impaginano piacevolmente. È passato molto tempo da quando ho guardato JavaScript, sarebbe un'opzione che vale la pena guardare?

Qualsiasi suggerimento molto apprezzato!

aggiornamento

Così ho colpito su una possibile soluzione, utilizzando JavaScript per annotare il DOM-albero con dimensioni e posizioni di ogni elemento. Dovrebbe quindi essere possibile ristrutturare l'albero (usando XSLT o JavaScript incorporato), tagliandolo in pagine che si adattano esattamente allo schermo.

Il problema rimanente qui è che questo interrompe sempre la pagina sui limiti del paragrafo, poiché non vi è accesso al testo ad un livello inferiore rispetto all'elemento P. Forse questo può essere risolto analizzando il testo in parole, incapsulando ogni parola in un tag SPAN, ripetendo la procedura di misurazione sopra, e quindi visualizzando solo gli elementi SPAN che si adattano allo schermo, inserendo i rimanenti nella parte anteriore del successivo pagina.

Tutto ciò suona piuttosto complicato. Sto parlando di senso? c'è un modo più facile?

Answer 1

Si dovrebbe guardare il modulo PagedMedia CSS:. http://www.w3.org/TR/css3-page/ CSS3 supportano anche i layout a più colonne (google per "css3-Multicol" Io non ho abbastanza Karma per includere un secondo link qui :-)

Informazioni sul tuo aggiornamento: come eseguire il layout di una singola pagina, quindi utilizzare un DIV con overflow: nascosto per la parte di testo. La prossima cosa sarebbe quella di sovrapporre un oggetto trasparente in cima a quello, che potrebbe scorrere verso il basso o verso il basso il contenuto interno dei pixel DIV PAGE_HEIGHT in base ad alcuni controlli di navigazione (o gesti).

Answer 2

L'altra opzione è quella di avere un genitore <div> con più colonne css3: link1, link2.
Questo funziona su 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> 

Answer 3

I suggerimenti CSS Multicol sono molto interessanti! Tuttavia, e spero che sia giusto rispondere con un'altra domanda: come passare dalla suddivisione di uno o più elementi lunghi <p> in colonne per il rendering di un particolare di queste colonne in una WebView? Il DOM non è cambiato, quindi non puoi scegliere un elemento e renderlo. Cosa mi manca?