Text wie in einem Buch blättern können

[Igäl]

Werte Gemeinde

Momentan schreibe ich eine Geschichte für ein D&D-Abenteuer, die ich meiner Gruppe gerne zugänglich machen möchte. Dazu kann sich der User aus einer virtuellen Bibliothek ein Buch nehmen und sich die Geschichte anzeigen lassen. Soweit sogut.

Die Kapitel, die in der DB liegen sind teilweise um die 10'000 Zeichen lang. Diese könnte ich nun natürlich in einem scrollbaren DIV auf dem Hintergrund, der ein Buch darstellt, anzeigen lassen. Das finde ich aber wenig benutzerfreundlich und eigentlich auch hässlich, weil die zweite Seite ja dann leer bleibt.

Lieber würde ich beide Buchseiten des Hintergrunds - das aufgeklappte Buch - mit Text füllen. Und zwar nur so viel Text wie in dem DIV Platz hat. Wenn der User fertig gelesen hat, soll er umblättern können. Dann wird wieder Text nachgeladen und zwar von dem Punkt an, an welchem auf der letzten Seite Schluss war. Und wieder so viel, wie im DIV Platz hat. Das ganze sollte dynamisch auf verschiedenen Viewportgrössen funktionieren.

Nur steh ich auf dem Schlauch, wie ich das konzeptionell lösen soll und wäre froh um Inputs (keine fertigen Scripte, nur Schupse in die richtige Richtung).

Konkret: Wie kann ich einen Text von 10k Zeichen so unterteilen, dass er Stück für Stück, in passender Mengenanzahl von Zeichen, ausgegeben wird?

Herzlichen Dank für Denkanstösse.

Es grüsst, dä Igäl

PS: Bootstrap habe ich im Einsatz (jaja, über Sinn und Unsinn kann man sich streiten... mir gefällts), falls dort jemand einen Kniff kennt.

 

[Sempervivum]

Hallo Igäl,
Denkanstoß von meiner Seite, eine fertige Implementierung habe ich sowieso nicht:
Die Größe des Containers fest vorgeben, so dass er eine Bildschirmseite ausfüllt. Dann die Zeichen Wort für Wort in den Container eintragen und prüfen ob er voll ist. Das geht z. B. indem du die vorgegebene Höhe mit scrollHeight vergleichst. Passt der Text nicht mehr hinein wird scrollHeight größer als die vorgegebene Größe. Zweispaltiges Layout wie in einem Buch kannst Du mit einem Mehr-Spalten-Layout erreichen:
CSS multi-column layout - CSS: Cascading Style Sheets | MDN
oder auch mit zwei Containern.
Wenn es sich um Text handelt, sind 10k Zeichen eigentlich nicht besonders viel und ein dynamisches Nachladen vom Server wahrscheinlich nicht nötig.

 

[Igäl]

Danke, genau diesen Input habe ich gebraucht. Werde wohl mit zwei Containern arbeiten und dann stoppen, wenn der zweite Container voll ist.

Mal schauen, was ich mir da mit JS zusammenbasteln kann.

War ein Verschreiber. Ein durchschnittliches Kapitel ist so um die 10k Worte lang. Aber auch das sollte kein Performanceproblem sein, zumal nur fünf andere Leute darauf zugreifen werden

Danke dir und ein schönes Wochenende.

 

[Sempervivum]

Immer gern, ich wünsche ebenfalls ein schönes Wochenende!

 

[Igäl]

Habe nochmals ein konzeptuelles Anliegen. Nach ersten Überlegungen würde ich den ganzen Text in ein hidden field laden, dort die Anzahl Wörter in einen sichtbaren Container übertragen (soviel bis der Container gerade nicht scrollbar wird) und die gleiche Anzahl Wörter am Anfang des Datensatzes im hidden field löschen. Bei erneutem "umblättern" dann wieder und wieder bis der ganze Text aus dem hidden field verschwunden ist.

Klingt das erfolgsversprechend oder gibt es da smartere Ansätze?

Ich nehme an, dass ich die Viewporthöhe auch auslesen kann oder? Weil ich die Sache auch für Mobiltelefone / Tablets zugänglich machen möchte. Dann dürfte die scrollHeight einfach nicht grösser sein als die ausgelesene Viewport-Höhe. Richtig überlegt?

 

[Sempervivum]

Ich denke schon, dass das erfolgversprechend ist und auf den ersten Blick würde ich es genau so machen.

Zur zweiten Frage: Da Du nach der Höhe des Viewport fragst, nehme ich an, dass Du nur dieses Buch auf der Seite darstellen willst und weiter nichts, nicht wahr? In dem Fall ist es gar nicht mal erforderlich, die Höhe auszulesen, denn mit diesem CSS:

html, body {
    height: 100%;
}

Kannst Du den Body so einstellen, dass er genau den Viewport ausfüllt. Oder ggf. auch noch einen Container darin. Dann kannst Du nach dem Verfahren, das Du beschrieben hast, vorgehen.

 

[Igäl]

Meine Idee ist es, das Buch als Modal über die Seite zu legen. Aber da wird mir sicher noch was einfallen.

Frage nur so doof, weil meine Berührungspunkte mit JS bis jetzt marginal waren. Das haben jeweils andere erledigt. Aber prima vista ist es ja nichts, was man nicht lernen kann. Ich denke ich werde das so lösen. Bin gerade dabei zu ermitteln, wie ich den swap vom hidden field in das Anzeige-DIV hinkriege.

Macht es Sinn, den ganzen Text als Einzelwörter in ein Array zu laden? Das wäre natürlich deluxe, weil ich ja gut ermitteln kann, wie viele Wörter ich im Container sichtbar gemacht habe und dann die Anzahl einfach, ab Arraybeginn, löschen kann.

Alternativ - wenn ich den Text im hidden field als String behandle - könnte ich mir vorstellen, dass der Text im hidden field "gescannt" wird, vermutlich irgendwie mit RegExp mit Fokus auf Leerschläge, und ich so die Anzahl Wörter ermittle. Wenn dann der swap zwischen den Feldern erledigt ist, kann ich die ja auch zählen und dann in der gleichen Anzahl vom Anfang des Strings löschen.

Den Text im hidden field als String zu behandeln, erscheint mir da umständlicher. Allerdings werden sich ab einer bestimmten Textlänge wohl Performanceprobleme einstellen, wenn ich solch grosse Arrays erstelle, denke ich. Habe da keine realistische Vorstellung, was der Server aushält und wo er bockig wird

 

[Sempervivum]

Meine Idee ist es, das Buch als Modal über die Seite zu legen.

Auch wenn Du ein Modal absolut positionierst, wahrscheinlich mit fixed, kannst Du dich bei der Höhe und Breite auf das Elternelement beziehen, z. B. so:

        html,
        body,
        .modal {
            height: 100%;
        }

Jedenfalls wenn es ein direktes Kind des Body ist.

Was dieses "String vs. Array" betrifft, fehlt mir der Einblick in die Innereien von PHP oder JS. Ich erinnere mich jedoch, dass ich mal damit konfrontiert wurde, dass Handling von Strings performance-intensiver war als das von Arrays, ich glaube es war im Zusammenhang mit PHP.

Es gibt jetzt sicher mehrere Wege, wie man das Ganze aufziehen kann. Z. B. auf dem Server den Text mit explode (wenn es denn PHP ist) zerlegen und als JSON-Array ausliefern. Dann hast Du sofort die Worte als Array. Oder den Text ausliefern und auf dem Client mit split zerlegen.

Möglicher Weise muss man dann noch Feinheiten mit Satzzeichen beachten aber auf den ersten Blick scheint es mir so, dass Komma, Punkt, Semikolon zu dem Wort davor gehören. Und Klammern ähnlich.