Wie implementiert man zweidimensionale paginierte HTML-Dokumente für EPub-Reader mithilfe von JavaScript und CSS?

Zweidimensionale paginierte HTML-Dokumente für EPub-Reader

Problem:

So zeigen Sie ein HTML-Dokument in einem WebKit an Browser in „Seiten“ umwandeln, die die Größe des Bildschirms haben und komplette Textzeilen enthalten, sodass sie wie ein Buch gelesen werden können?

Lösung:

Verwendung von JavaScript und 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;

Diese Lösung beinhaltet das Festlegen der Abmessungen des Körperelements und das Aktivieren des spaltenbasierten Layouts mithilfe von „WebkitColumnCount“, um mehrere Seiten mit der gewünschten Anzahl von Spalten zu erstellen.

Durch die Berechnung der Gesamthöhe des Textes und deren Division durch die gewünschte Seitenhöhe wird die Anzahl der Seiten ermittelt. Anschließend erhält der Textkörper eine bestimmte Breite (bestimmt durch die gewünschte Seitenbreite), multipliziert mit der Anzahl der Seiten, und eine Höhe, die der Seitenhöhe entspricht. Abschließend wird die Spaltenanzahl auf die gleiche Seitenzahl eingestellt.

Dieser Ansatz stellt sicher, dass der Inhalt in bildschirmgroße Abschnitte unterteilt wird, ohne dass Textzeilen innerhalb der Bildschirmgrenzen abgeschnitten werden. Es ermöglicht auch die nahtlose Erstellung mehrerer Seiten in einem einzigen HTML-Dokument und bietet so ein buchähnliches Paginierungserlebnis für WebKit-basierte Browser.

Das obige ist der detaillierte Inhalt vonWie implementiert man zweidimensionale paginierte HTML-Dokumente für EPub-Reader mithilfe von JavaScript und CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!