Erledigt - Gedicht mit automatischem Zeilenumbruch

draupnir · 14.02.2023

Hallo zusammen,
ich bin auf der Suche – und habe auch schon fleissig bei Google & Co. geschaut – nach einer reinen CSS-Lösung für Gedichte, bei denen die Gedichtzeilen linksbündig geschrieben werden, doch sollte der Platz nicht reichen, dann sollen die überzähligen Worte automatisch rechtsbündig unter der zugehören Zeile erscheinen.

Beispiel für genug Platz:
und in ebensoviel Sätzen
läßt sich Bandwurmweisheit schwätzen.

Und wenn das Fenster zu klein oder die Schrift zu groß ist, dann so:
und in ebensoviel Sätzen
läßt sich Bandwurmweisheit
...............................schwätzen.

(Die Punkte musste ich hier einfügen, um das Wort ans Zeilenende zubekommen. Natürlich sollen diese nicht benutzt oder angezeigt werden.)

Wie könnte man das lösen und es sollte keine Speziallösung sein, die nur in einem bestimmten Browser funktioniert.

Freue mich auf Lösungsansätze oder die Lösung selbst,
– j.

buerzel · 14.02.2023

Ist das:

CSS-Eigenschaft text-align-last

Die CSS-Eigenschaft text-align-last definiert die Ausrichtung der letzten Zeile des Textes. Lesen Sie mehr über Eigenschaftswerte und sehen Sie sich Beispiele an.

de.w3docs.com

hilfreich?

draupnir · 14.02.2023

Leider nein, denn das bezieht sich nur auf die letzte Zeile eines Textes oder Gedichtes und erzwingt in jedem Fall für diese letzte Zeile eine Ausrichtung z. b. rechtsbündig. Ich brauche es jedoch flexible für jede mögliche, sprich zu lange Gedichtzeile.

buerzel · 14.02.2023

Dann müsste man ans Ende jeder Zeile ein <div> einfügen ... :rolleyes:

(bzw. vor den Anfang jeder neuen Zeile)

draupnir · 14.02.2023

Das bringt nix. Ich brauche linksbündige Zeile, die wenn der Platz nicht reicht, in der zusätzlichen Zeile rechtsbündig werden. Wo der Umbruch passiert, weiss ich nicht, ich kann also keine div oder span einfügen.

buerzel · 14.02.2023

draupnir schrieb:
Wo der Umbruch passiert, weiss ich nicht ...

Musst du auch gar nicht wissen. Probiers doch mal im W3-Editor am Beispiel aus: Setze text-align auf left und im Text mal divs an beliebigen Stellen dazwischen, die deine Gedichtzeilen simulieren ...

draupnir · 15.02.2023

Einen Text mit DIVs unterbrechen ist nicht gerade im Sinn des Ganzen. :-(
Mit ist heute Nacht etwas eingefallen, aber noch nicht getestet. CSS könnte die Worte in der Zeile mit float:left (nur das erste Wort) bzw. alle anderen Worte float:right setzen. Mal sehen, ob diese Idee was bringt.

Myhar · 15.02.2023

Das funktioniert so nicht mit CSS, da wirst du eigene wrapper mit JS für die letzte Zeile erstellen müssen und dann die Zeile rechtsbündig anordnen.

draupnir · 15.02.2023

Oh, das ist nicht gut. Denn es geht um das Verhalten / Darstellung in E-Books. Im ePub mag Javascript noch gehen, aber was ist mit .awz (Amazon-Format)?

draupnir · 15.02.2023

So, ich habe eine sehr einfache, schnelle Lösung gefunden. Im Safari läuft es gut.
Falls jemand in einem anderen Browser Probleme hat, lasst es mich bitte wissen.

HTML-Dokument zum Testen:
Datei von filehorst.de laden

Und hier der HTML bzw. CSS-Quellcode:


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test für Gedicht</title>
    <style>
        .poem p::first-line {  background-color: yellow; text-align: right; }
        .poem p:nth-of-type(n+1) { text-align: justify; }
        .poem {width: 50%; margin-left: 5em; }
    </style>
</head>
<body>
<h1>Eine Gedichtzeile</h1>
<p> mit rechtbündigen Zeilenumbruch. Verändere die Breite des Fenster und sieh, wie die Zeilen umbrechen. Die gelbe Hintergrundfarbe dient hier nur um Erkennen, welches die erste Zeile ist.</p>
<div class="poem">
    <p> 1aaaaaaa  2bbbbbbbb 3cccccccccc 4dddddddd  5eeeeeeee  6 fffff  7gggggggggggg  8 hhhhhhh. </p>
</div>
</body>
</html>

Dudlhofer · 15.02.2023

Getestet unter Windows 10 mit Firefox, Chrome und Edge, jeweils aktuelle Version: funktioniert nicht - die letzte Zeile bleibt immer linksbündig.

draupnir · 15.02.2023

ja danke für's testen. Mist, wenn's nur in Safari funktioniert. Suche jetzt nach einem Trick, damit es auch in Firefox und Edge läuft.

draupnir · 15.02.2023

Das lange testen und suchen ist beendet. So wie es aussieht, benutzen FireFox und Edge intern den Befehl »display: flex« und werten daher nicht alle Befehle korrekt aus. Jedenfalls wird das Verhalten von Apple Safari durch »display: flex« gleich dem Verhalten der anderen Webbrowser.

Ich habe jetzt noch automatische Zeilennummern hinzugefügt, dazu brauche ich in jedem Fall »display: flex«. Um mit den linken Zeilenumbrüchen zu leben, habe ich den Abstand zwischen echten Zeilen größer gemacht, so erkannt man gut, dass die Umbrüche zur Zeile darüber gehören. Hier mein Ergebnis in drei Browsern:

greatblock · 15.02.2023

Edit: Oh, ich sehe gerade, es hat sich erledigt.

Hm, also bei mir funktioniert's.


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test für Gedicht</title>
    <style>
        .poem p::first-line {  background-color: yellow; text-align: right; }
        .poem p:nth-of-type(n+1) { text-align: justify; }
        .poem {width: 50%; margin-left: 5em; }

        @media screen and (max-width: 1195px) {
        .p1  {text-align: right!important;}
        }

    </style>
</head>
<body>
<h1>Eine Gedichtzeile</h1>
<p> mit rechtbündigen Zeilenumbruch. Verändere die Breite des Fenster und sieh, wie die Zeilen umbrechen. Die gelbe Hintergrundfarbe dient hier nur um Erkennen, welches die erste Zeile ist.</p>
<div class="poem">
    <p class="p1"> 1aaaaaaa  2bbbbbbbb 3cccccccccc 4dddddddd  5eeeeeeee  6 fffff  7gggggggggggg  8 hhhhhhh. </p>
</div>
</body>
</html>

Du kannst auch deine CSS Datei mit:


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

resetten.

draupnir · 15.02.2023

greatblock schrieb:
Hm, also bei mir funktioniert's.

Stimmt, jedoch nur dank der Zeile
.poem p {text-align: right!important;}
dann klappt es in Safari, Firefox und Edge. – Vielen Dank für den Tipp.
Mal sehen, ob ich das in die Version mit den Zeilennummern auch noch einbauen kann, dass es dort dann auch funzt.

greatblock · 15.02.2023

FireFox, Microsoft Edge, Chrome.
Funktioniert.

Ab der festen Größe entsteht automatisch ein Zeilenumbruch und dann vergebe ich der Class ein


Text-align: right!important

Ich kann unendlich mal minimieren und maximieren. Es wird beim auf und ab linksbündig und dann wieder rechtsbündig. So wie du es haben wolltest.

Ich weiß allerdings nicht wie es bei deinem Endprodukt ausschaut. Ich müsste mir dein Code anschauen.

Edit: Ich sehe du hast für jede Zeile ein <p> eingepflegt. Ist das gewollt?

draupnir · 15.02.2023

Darfst gerne mal reinschauen:
Datei von filehorst.de laden

Ist »display: flex« drin, dann wird alles linksbündig, sprich Befehle werden ignoriert. Ohne »display: flex« geraten jedoch Zeilen unter die Zeilennummerung, was unschön ist.

greatblock · 15.02.2023

Schau, ich habe Etwas gefunden:

Text-align justify but to the right?

We want to make text-align:justify, to take all the width of the column, but it should start from the right side. Is there any way to make it with css or somehow?. EDIT: As suggested http://jsf...

stackoverflow.com

Mit Zeilen Umbruch

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net


text-align-last: right;
-moz-text-align-last: right;

Das ist es:

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

draupnir · 15.02.2023

ok, danke. werde es morgen testen.

draupnir · 16.02.2023

prima, jetzt klappt es in Safari, Edge und Firefox auch mit dem Umbruch rechts unter den Zeilen. Noch mal dank an greatblock.
Hier das Ergebnis in Firefox und der Quellcode:

P. S. Jetzt stellt sich nur die Frage, welche Version ist besser zu lesen? Umbruch der Gedichtzeilen links oder rechts unter der Hauptzeile?