Konzeptionelle Frage zu Pagination

Igäl

Erfahrenes Mitglied
Werte Tutorialisten

Teilweise werden auf meiner Page sehr lange Texte angezeigt und bislang ist das so gelöst, dass sich der User einen Ast abscrollt. Zwar verschwinden die Designelemente nicht mehr, seit ich einen scrollbaren Container eingefügt habe. Doch wäre es mir lieber, wenn der Text wie in einem Buch gelesen werden kann. Sprich der User "blättert" am Ende der Seite entweder durch Wischen auf kleinen Viewports oder aber mittels diskreten Buttons auf Grösseren.

Nun habe ich das konzeptionelle Problem, dass man dann ja ermitteln müsste, wie viele Character auf den Viewport passen, nur diese Anzahl Characters in den Viewport geladen werden, beim "Blättern" ermittelt werden muss, an welcher Stelle der User gerade ist und wiederum nur so viele Character aus dem darauf folgenden Text in den Viewport geladen werden, dass dieser voll, aber nicht übervoll, ist.

Für das Ermitteln der passenden Anzahl Character habe ich noch kein Rezept, da es eine Unzahl verschiedener Viewports, da Bildschirmgrössen, gibt. Ausserdem noch Usereinstellungen für die Anzeigegrössen und und und. Beim Auslesen des Textes hätte ich auf die SQL-Funktion MID() in Verbindung mit LEN() gesetzt.

Zusätzlich kommt die Problemstellung hinzu, dass ein Wort nicht zerschnitten werden soll. Also dass das erste Wort, das nicht mehr auf die "alte" Seite passt, dann auf der "neuen" Seite dargestellt wird, wenngleich noch "free Character" auf der alten Seite verfügbar wären. Das wäre wahrscheinlich mit RegEx, das auf Leerschläge schaut, irgendwie zu bewerkstelligen.

Weiter möchte der User möglicherweise auf Seite 21 einsteigen, weil er dort mit dem Lesen aufgehört hat. Entsprechend müsste ich dann auch wissen, wie viele Pages es überhaupt gibt. Das hätte ich so gelöst, dass ich die ermittelte Anzahl der Character genommen und durch die Anzahl der anzeigbaren Character geteilt hätte. Aber das weist wieder eine gewisse Unschärfe auf, nämlich dann, wenn ganze - möglicherweise lange - Wörter auf einer neuen Seite angezeigt werden, anstatt teilweise auf der Alten.

Es ist noch zu sagen, dass die Texte kapitelweise in einer Zelle in der Datenbank gespeichert sind. Diese Kapitel können mehrere Tausend Zeichen umfassen.

Falls jemand so etwas schonmal umgesetzt hat oder darüber nachgedacht hat oder masterbrainmässig gerade eine Idee hat, wie das umgesetzt werden könnte, wäre ich dankbarer Abnehmer von Ratschlägen. Wie immer brauche ich keinen fertigen Code (wenn überhaupt Code), sondern Denkanstösse.

Ich bedanke mich bereits vorab manierlich für die geleistete Denkarbeit.

So long

Dä Igäl
 
Besten Dank für die sorgfältig formulierte Antwort. Es scheint, als hätte ich mein Anliegen missverständlich ausgedrückt und dass der Kern desselben nicht durchgekommen ist.

Wie eine Pagination grundsätzlich aufgebaut wird, ist mir durchaus bekannt. Der Kern meines Problems ist nicht die Pagination per se. Vielmehr suche ich Ideen, wie ich einen Fliesstext, der einem einzelnen Feld in einer Datenbanktabelle entspringt, auf mehrere Pages aufteilen kann. Und zwar in der Art, dass pro Page immer nur so viel Text angezeigt wird, dass der User nicht scrollen muss. Egal wie gross der Viewport ist, egal wie die userseitigen Einstellungen bezüglich Schriftgrösse etc. aussehen.

Also eigentlich das, was ein E-Reader mit einem Buch macht. Aber nach E-Reader like Website habe ich noch nicht gegoogelt... von dem her hat mir deine Antwort doch etwas geholfen.

Falls noch andere Ideen da sind, gerne. Ausser Bing und DuckDuckGo... habe ich auch schon probiert.

Allenthalben ein schönes Wochenende.
 
Es scheint, als hätte ich mein Anliegen missverständlich ausgedrückt und dass der Kern desselben nicht durchgekommen ist.
Ich denke, dass ich schon verstanden habe, was Du erreichen willst. Allerdings ist eine Lösung nicht so ganz einfach. Man kommt nicht daran vorbei, die Abmessungen eines Textes zu ermitteln. Dafür sind hier mehrere Lösungen beschrieben:
Calculate text width with JavaScript
Dann kannst Du ausrechnen, wie viele Wörter in den Viewport passen. Zusätzliches Problem dabei: Durch die Zeilenumbrüche entsteht leerer Raum, der auch berücksichtigt werden muss.

Andere Lösung: Nicht rechnen sondern Try and Error: Den Text Wort für Wort in den Container eintragen und prüfen, wann er überläuft. Wenn Du dann das letzte Wort wieder entfernst, hast Du den Container gefüllt.

Edit: Wenn ich mich richtig erinnere, gibt es in jQuery eine Funktion, die das macht und zwar nach dem zweiten Verfahren.
 
Zurück