Comment découper des documents HTML en pages pour ebook?

Question

Pour une application ebook iPhone, je dois découper des documents HTML arbitrairement longs dans des pages qui correspondent exactement sur un écran. Si j'utilise simplement UIWebView pour cela, les lignes les plus basses ont tendance à ne s'afficher que partiellement: le reste disparaît du bord de la vue.

Je suppose donc que j'aurais besoin de savoir combien de lignes complètes (ou de caractères) seraient affichées par UIWebView, étant donné le code source HTML, puis de lui fournir exactement la bonne quantité de données. Cela implique probablement beaucoup de calculs, et l'utilisateur doit également être en mesure de changer les polices et les tailles.

Je ne sais pas si c'est même possible, bien que des applications comme Stanza prennent des fichiers HTML (epub) et les paginent bien. Il y a longtemps que j'ai regardé JavaScript, serait-ce une option qui vaut la peine d'être regardée?

Des suggestions très appréciées!

mise à jour

J'ai donc trouvé une solution, en utilisant JavaScript pour annoter les DOM-arbre avec des tailles et des positions de chaque élément. Il devrait alors être possible de restructurer l'arbre (en utilisant XSLT ou JavaScript), en le découpant dans des pages qui correspondent exactement à l'écran.

Le problème restant ici est que cela casse toujours la page sur les limites de paragraphe, puisqu'il n'y a pas d'accès au texte à un niveau inférieur à l'élément P. Peut-être y remédier en analysant le texte en mots, en encapsulant chaque mot dans une balise SPAN, en répétant la procédure de mesure ci-dessus, puis en affichant uniquement les éléments SPAN qui correspondent à l'écran, en insérant ceux restants au début du suivant page.

Tout cela semble plutôt compliqué. Est-ce que je parle n'importe quel sens? Y a-t-il un moyen plus simple?

Answer 1

Vous devriez regarder le module CSS PagedMedia. http://www.w3.org/TR/css3-page/ CSS3 soutiennent également mises en page multicolonnes (google pour "css3-Multicol" Je n'ai pas assez Karma pour inclure un second lien ici :-)

A propos de votre mise à jour: que diriez-vous de faire la mise en page d'une seule page, puis utilisez un DIV avec débordement: caché pour la partie de texte. La prochaine chose serait de superposer un élément transparent par-dessus cela, qui ferait défiler par programmation le contenu interne des pixels DIV PAGE_HEIGHT vers le haut ou vers le bas selon certains contrôles de navigation (ou gestes).

Answer 2

L'autre option est d'avoir un parent <div> avec plusieurs colonnes CSS3: link1, link2.
Cela fonctionne sur 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

Les suggestions de Multicol CSS sont très intéressants! Cependant, et j'espère que vous pouvez répondre à une autre question: comment allez-vous séparer un ou plusieurs longs éléments <p> en colonnes pour que l'une de ces colonnes soit rendue dans un WebView? Le DOM n'a pas changé, donc vous ne pouvez pas choisir un élément et le rendre. Qu'est-ce que je rate?