Textarea Zeilenumbruch

  • Guten Tag miteinander.

    Ich habe momentan ein Problem mit einem Textarea.


    Mein Projekt:

    Ich möchte ein Gedicht als Grafik Speichern.

    Das erzeugen der Grafik funktionier problemlos.

    Dafür muss allerdings die maximale Zeilenlänge fest sein, da der Text sonst über das Bild hinaus geht.

    Wenn ich einen Text eingebe und schön am Ende der Zeile Enter drücke, wird auch ein Zeilenumbruch eingefügt und mit nl2br in <br> geändert.
    Ich trenne den Text bei <br> und speichere diesen in einem Array.

    Aus den einzelnen Einträgen wird jetzt das Bild generiert.


    Das Problem:

    Wenn ich am Ende der Zeile nicht Enter drücke, wird zwar in der nächsten Zeile weitergeschriben (wrap), allerdings kein Zeilenumbruch eingefügt.


    Hat jemand eine Idee wie ich das Problem lösen kann?


    MfG

    Olli ;)

  • Das meiste in PHP.

    Viel Code habe ich bei der Texteingabe noch nicht.


    PHP
    <form action="<?php echo $PHP_SELF ?>" method="post">
        <textarea name="message"  cols="30" rows="30" wrap="hard"></textarea>
        <input type="submit" value=" Speichern " />
    </form>
    
    <?php
            if (isset($_POST['message'])) {
                echo nl2br($_POST['message']);
            }
     ?>
  • Evtl. ist die Frage falsch rübergekommen.

    Die Grafik kann ich problemlos aus einem Text, der in einer MySQL DB steht, generieren. Dieser hat als Zeilenumbruch die Zeichenkette "<br>"


    Mein Problem liegt darin den Text, der vom Benutzer eingegeben wird, richtig zu speichern.

    Die wrap Funktion in dem Textarea fügt leider keinen Zeilenumbruch hinzu. Wenn ich Enter drücke füge ich diesen ja manuell hinzu. Damit funktioniert es auch.


    MfG

    Olli

  • Hier wird eine Funktion angeboten, die beim Zeichnen des Textes die Zeilenumbrüche automatisch einfügt:

    https://www.php.net/manual/de/function.imagettfbbox.php

    (nach "Automatic line breaks" suchen).

    Möglicher Weise könntest Du die Texte ohne Zeilenumbrüche in der DB speichern und sie mit Hilfe dieser Funktion erst beim Zeichnen hinzu fügen. Würde auch insofern Sinn machen, weil Du für die Zeilenumbrüche die Fontsize und die verfügbare Breite brauchst, die mehr an die Grafik gebunden sind.

    Oder es clientseitig machen, indem Du die Funktion oben nachbildest, indem Du den Text in einen HTML-Container schreibst.

  • Erstmal vielen Dank.

    Mit der Idee habe ich mich auch schon befasst.

    Da es sich um Gedichte handelt, ist es besonders wichtig die Formatierung des Benutzer zu übernehmen.

    Deswegemuss ich den Zeilenumbruch mit speichern. Ob automatisch oder manuell hinzugefügt.

    Gibt es evtl. mit jquery oder js eine möglichkeit?



    MfG

    Olli

  • Du könntest den Zeilenumbruch des Benutzers in der DB speichern und die zusätzlichen erst beim Zeichnen hinzu fügen. Die Funktion kann man sicher so erweitern, dass sie vorhandene Zeilenumbrüche beibehält.


    Zitat

    Gibt es evtl. mit jquery oder js eine möglichkeit?

    Ich wüsste nicht, wie man aus einer Textarea die automatisch eingefügten Zeilenumbrüche heraus lesen könnte. Aber es wäre eine Möglichkeit, das Verfahren, das ich oben angedeutet habe, zu verwenden: Den Text in einen Hilfscontainer zu schreiben und ständig zu prüfen, ob der Text nicht hinein passt und in dem Fall den Text umzubrechen.

  • Um sicher zu gehen, habe ich das mit der Textarea mal untersucht und konnte bei den automatischen Umbrüchen keine Steuerzeichen finden.

    Darauf hin habe ich eine Demo mit dem Verfahren gemacht, das ich beschrieben habe. Ist nicht besonders kompliziert und scheint gut zu funktionieren:

  • Also es funktioniert schon recht gut :)

    Das einzige Problem ist, wenn ich ein längeres Wort/Zeichenkette als 200px habe.



    Hallo Welt!

    Zum testen hier etwas mehr Text!


    Dieser Text wird nach "mehr" in die nächste Zeile gebrochen.
    Füge ich jetzt eine Zeichenkette hinzu, die länger als 200px ist passiert folgendes



    Hallo

    Welt!

    Zum

    testen

    hier

    etwas

    mehr

    Text!

    1111111111111111111111111111111111111



    Ich bin zwar nicht so fitt in JavaScript.

    Probiere es gerade zu lösen. 8)


    MfG

    Olli

  • Verstehe, das ist natürlich ein Problem. Eine hundertprozentige Lösung wäre eine automatische Silbentrennung, aber das ist eine Wissenschaft für sich und nicht so auf die Schnelle zu machen. Vielleicht nur den Fall erkennen und dem Benutzer einen Hinweis geben, dass er manuell einen Umbruch einfügen soll?

  • PS: Mir scheint, ich habe das vorhin noch nicht richtig verstanden: Das Problem ist, dass das Skript vom Ende gesehen das erste Leerzeichen durch ein <br> ersetzt, so dass dort Zeilenumbrüche hinkommen, wo keine sein sollen. Wenn Du es nicht lösen kannst, melde dich wieder.

  • Guten Tag.

    Ich habe es heute nochmals probiert. Leider konnte ich bislang keine Lösung finden.

    Meine Überlegung war, den Text zeilenweise zu bearbeiten und das letzte Leerzeichen durch <br> zu ersetzen. Bzw. wenn keins vorhanden ist dort direkt ein <br> einfügen.


    MfG

    Olli

  • Hallo Olli,

    ich bin mal folgender Maßen vorgegangen: Das letzte Wort, d. h. hinter Leerzeichen oder <br> ermitteln und prüfen, ob es in eine Zeile passt. Wenn nicht, Hinweis an den Benutzer ausgeben. Hat man den Fehlerfall erst Mal erkannt, kann man auch andere Reaktionen programmieren, z. B. zwangsweise einen Zeilenumbruch einzufügen.

    Wenn das Wort passt, kann man ganz normal beim ersten Leerzeichen vom Ende aus gesehen einen Zeilenumbruch einfügen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!