Comment implémenter des documents HTML paginés en deux dimensions pour les lecteurs EPub à l'aide de JavaScript et CSS ?

Documents HTML paginés en deux dimensions pour les lecteurs EPub

Problème :

Comment afficher un document HTML dans un WebKit navigateur dans des "pages" qui ont la taille de l'écran et contiennent des lignes de texte complètes, afin qu'elles puissent être lues comme un livre ?

Solution :

Utilisation de JavaScript et CSS :

var desiredHeight;
var desiredWidth;
var bodyID = document.getElementsByTagName('body')[0];
totalHeight = bodyID.offsetHeight;
pageCount = Math.floor(totalHeight/desiredHeight) + 1;
bodyID.style.padding = 10; //(optional) prevents clipped letters around the edges
bodyID.style.width = desiredWidth * pageCount;
bodyID.style.height = desiredHeight;
bodyID.style.WebkitColumnCount = pageCount;

Cette solution consiste à définir les dimensions de l'élément body et à activer la disposition par colonnes à l'aide de "WebkitColumnCount" pour créer plusieurs pages avec le nombre de colonnes souhaité.

En calculant la hauteur totale du corps et en la divisant par la hauteur de page souhaitée, le nombre de pages est déterminé. Ensuite, le corps reçoit une largeur spécifique (déterminée par la largeur de page souhaitée) multipliée par le nombre de pages, et une hauteur égale à la hauteur de la page. Enfin, le nombre de colonnes est défini sur le même nombre de pages.

Cette approche garantit que le contenu est divisé en morceaux de la taille de l'écran, sans qu'aucune ligne de texte ne soit coupée dans les limites de l'écran. Il permet également de créer plusieurs pages de manière transparente dans un seul document HTML, offrant ainsi une expérience de pagination semblable à celle d'un livre pour les navigateurs basés sur WebKit.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!