Webseitebegutachtung

[Rolf B]

Hallo Martin (oder Ingelis?!),

die Zeilenumbrüche, die Martin bemängelte, entstehen vor allem, wenn man die Seite nicht auf einem FullHD Bildschirm anzeigt. Aber offenbar sind sie beabsichtigt, der Text ist keine reine Prosa, jeder Zeilenumbruch scheint geplant und beabsichtigt.

Wenn das tatsächlich als künstlerischer Ausdruck beabsichtigt ist, dann müsstest Du mit Ingelis erarbeiten, wie sich dieser Ausdruck auf schmaleren Bildschirmen ergeben soll.

Ihr braucht dafür ein Markup, das die Zeilen darstellt (weil die each-line Option für text-indent noch kein Browser kennt und weil text-indent zusammen mit white-space:pre-line gar nicht funktioniert), z.B. so:

<p class="lyrisch">
<x-l>ICH bin eine Weberin aus Norddeutschland,</x-l>
<x-l>zuhause zwischen Ost- und Nordsee.</x-l>
<x-l>Meine innere Heimat ist das Natuschutzgebiet Lauenburg</x-l>
<x-l>mit seinen Seen, Wäldern und stillen Mooren.</x-l>
</p>

Das kann man dann so im CSS stylen:

.lyrisch x-l {
  display: block;
  padding: 0 0 0 2em;
  text-indent: -2em;
}

<x-l> ist ein Vorschlag, den Gunnar mal gemacht hat. Es ist ein "custom element" im HTML, Elementnamen mit Minus drin werden niemals "offiziell" definiert werden. Du kannst ein x-l Element darum stylen, wie Du es brauchst, und der Browser wird Dir nie reinfunken.

Mit display:block sorgst Du für den Zeilenumbruch, mit padding:0 0 0 2em sorgst Du für eine Einrückung jeder Zeile um 2em, und mit text-indent: -2em rückst Du die erste Zeile wieder 2em zurück. Es wäre schöner, wenn text-indent:2em hanging schon funktionierte, aber das ist zu neu. Dem Vernehmen nach funktioniert diese Darstellung sogar im Internet Explorer.

Der nächste Punkt ist die Frage nach der Spaltenzahl. Ihr nutzt column-count:3, um Text und Bild nebeneinander zu setzen. zeigt den About-Text zweispaltig an. Bei schmaleren Bildschirmen führt das zu unleserlichen Textschläuchen. Hier bietet sich der zusätzliche Gebrauch von column-width an, um eine Mindestbreite vorzugeben (bzw. die Kombi-Eigenschaft columns).

Das Bild als dritte Spalte zu setzen - kann man machen, aber seine Größe hängt dann sehr von der Fenstergröße ab. Wird die Seite am Handy abgerufen, steht es ganz am Ende, unter dem Text. Hier kann man eigentlich kaum einen Rat geben, da müsstet ihr erstmal ein Konzept entwickeln, wie die Seite bei unterschiedlichen Fenster-/Anzeigegrößen (englisch: Viewports) aussehen soll.

Ich würde das Bild im Markup vermutlich vor den Text stellen und es mit float:right an die rechte Seite schieben - und damit reinfallen. In einem column-Layout landet das Bild dann in der ersten Spalte.

Also Flexbox: guck mal hier: https://jsfiddle.net/Rolf_b/0cashbm4/

Die vertikale Trennung kann man verschieben und damit verschiedene Breiten ausprobieren.

Mit Hilfe einer @media-Abfrage kannst Du für schmale Viewports die Anordnung von Text und Bild ggf. verändern (z.B. die Flexbox in den Modus flex-direction:column schalten).

Rolf