"Linie unten" auf Schriftlinie

[citytypo]

Hallo zusammen,

ich habe einen mehrzeiligen Text in einem div und möchte, dass jede Zeile eine "Linie unten" hat, und zwar vom linken bis zum rechten Rand des divs.

Es genügt leider nicht, den Text nur zu unterstreichen, da der Zeilenumbruch unterschiedlich ist. Ebenso wenig genügt es, jede Zeile in eine Tabelle zu packen, da das div dynamisch gefüllt wird.

Hat jemand eine Idee?

Danke im Voraus,

Oli

[Dave]

Hi,
du könntest dem div ein Hintergrundbild geben das diese linie anzeigt und entsprechend hoch ist das es immer unter der Textzeile ist.
Problem ist nur wenn jemand die Textgröße verändert.

Was anderes fällt mir da leider nicht ein.

~dave

[Thomas Luethi]

Hallo Oli,

Soweit ich mich mit CSS (2.1) auskenne, ist das nicht möglich.

Evtl. wäre eine Kombination aus Blocksatz und Unterstrichung möglich,
dann wären zumindest mal alle Zeilen gleich lang.
p.spezial { text-align:justify; text-decoration:underline; }

Wenn Dir egal ist, dass die Benutzer mit alten MS IE (<= 6.0)
den Text nicht vergrössern können, dann wäre noch eine Lösung
mit einem Hintergrundbild à la Linienpapier möglich, wobei die
Schriftgrösse und der Zeilenabstand in Pixel (px) angegeben werden.

Gruss, Thomas

[ChrisB]

Hi,

ich habe einen mehrzeiligen Text in einem div und möchte,

... stattdessen einen vernünftigen Textabsatz benutzen. OK, go.

dass jede Zeile eine "Linie unten" hat, und zwar vom linken bis zum rechten Rand des divs.

Es genügt leider nicht, den Text nur zu unterstreichen, da der Zeilenumbruch unterschiedlich ist. Ebenso wenig genügt es, jede Zeile in eine Tabelle zu packen, da das div dynamisch gefüllt wird.

Ein wiederholtes Hintergrundbild wäre eine Möglichkeit - aber eine schlechte, weil damit die Schriftgrösse absolut angegeben werden müsste; und damit das ganze bei Schriftvergrösserung auch problematisch wird.
Und auch wenn die Schriftgrösse nicht geändert wird, wird das bspw. im FF leicht problematisch - weil der (zumindest in meinem damaligen Test) für die Zeilenhöhe keine unbedingt ganzzahligen Pixelwerte benutzt, sondern teilweise auch Nachkommastellen. Und daraus ergeben sich bei längeren Texten dann auch wieder Verschiebungen.

Eine andere Möglichkeit wäre, den Inhalt in Zeilen aufzusplitten und bspw. in SPANs zu packen, und diese als block darstellen zu lassen (und dann mittels border die Linie zu realisieren). Sollte natürlich clientseitig per JavaScript erfolgen, weil erst dort der Platzbedarf des Textes bekannt ist (und man nicht die HTML-Struktur wegen eines visuellen Effektes versauen möchte). Dabei will natürlich bedacht werden, wie mit Elementinhalten umzugehen ist, die über mehr als eine Zeile dargestellt werden (bspw. längere Linktexte). Und es ist ggf. auch wieder unflexibel bei Schriftgrössenänderung.

Kurz: Dieser Effekt erfordert mit den derzeitigen Möglichkeiten noch ziemlich grossen Aufwand.

MfG ChrisB

[Gunnar Bittersmann]

@@citytypo:

nuqneH

Ebenso wenig genügt es, jede Zeile in eine Tabelle zu packen, da das div dynamisch gefüllt wird.

Tabelle?? div?? Das nährt die Befüchtung, Tabellenlayout und Divitis sind dir geläufig, <http://de.selfhtml.org/html/text/index.htm@title=semantisches Markup> jedoch fremd.

Also tun wir den Fließtext doch wie es sich für Fließtext gehört in ein 'p'-Element, wie ChrisB schon sagte.

Hat jemand eine Idee?

Entgegen Thomas’ Unmöglichkeitsvermutung geht es doch mit CSS 2.1 – zumindest in Browsern, die generierten Inhalt auch positionieren können (Firefox 3.5 kann es):

p  
{  
  overflow: hidden;  
  position: relative;  
}  
  
p:before  
{  
  color: gray; /* Farbe der Unterstreichung; entfällt bei Unterstreichung in Textfarbe */  
  content: "\A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  \A0  ";  
  position: absolute;  
  text-decoration: underline;  
}

Anstatt der 42 Wiederholungen von '\A0  ' müssen es hinreichend viele sein, lieber ein paar zu viel als zu wenig. Und ja: zwei Leerzeichen; das erste beendet das Escape.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Ergänzung: p:before { z-index: -1 }, damit der Text markierbar ist.

Qapla'

[Thomas Luethi]

Hallo Gunnar,

Danke für die erneute Erweiterung meines Horizonts - und schon
wieder hast Du eine kreative Lösung/Spielerei mit :before bereit ...

Ergänzung: p:before { z-index: -1 }, damit der Text markierbar ist.

Dein Online-Beispiel sieht ja neben Firefox 3.5 auch in
MS IE 8 wie gewünscht aus, allerdings ist im MS IE 8 trotz dem
z-index der Text nicht mit der Maus markierbar.

Auch sonst ist es ja wohl eher ein "proof of concept" als ein
(heute) praxistauglicher Vorschlag, da z.B. auch die Darstellung
im Firefox 3.0 recht merkwürdig ist: zuerst ca. 25 leere rote Linien,
dann erst der Text. Also wären wohl Browserweichen o.ä. notwendig,
wenn man so etwas auf die Welt loslassen möchte ...

Aber als originelle Spielerei schätze ich solche Vorschläge sehr!

Freundliche Grüsse,
Thomas

[Beat]

Auch sonst ist es ja wohl eher ein "proof of concept" als ein
(heute) praxistauglicher Vorschlag, da z.B. auch die Darstellung
im Firefox 3.0 recht merkwürdig ist: zuerst ca. 25 leere rote Linien,
dann erst der Text. Also wären wohl Browserweichen o.ä. notwendig,
wenn man so etwas auf die Welt loslassen möchte ...

Die Methode versagt, wenn im Text <sup> oder dergleichen mal die Lineheight ausnahmsweise vergrössert.

Nur ein ::line Pseudoelement könnte das Gewünschte anpacken.

mfg Beat

[ChrisB]

Hi,

Die Methode versagt, wenn im Text <sup> oder dergleichen mal die Lineheight ausnahmsweise vergrössert.

Dieser Effekt ist in der Tat äusserst unschön - bspw. bei den Fussnoten-Verlinkungen in der Wikipedia stört mich das immer wieder, dass eine solche im Fliesstext dafür sorgt, dass die Zeile einen grösseren Abstand zur vorherigen einnimmt, als die restlichen.

Deshalb bin ich dazu übergegangen, SUP und SUB per vertical-align auf der baseline auszurichten, und dann per relativer Positionierung ein Stückchen nach oben/unten zu verschieben (mit auf die Schriftgrösse bezogener Einheit).

MfG ChrisB

[Beat]

Dieser Effekt ist in der Tat äusserst unschön - bspw. bei den Fussnoten-Verlinkungen in der Wikipedia stört mich das immer wieder, dass eine solche im Fliesstext dafür sorgt, dass die Zeile einen grösseren Abstand zur vorherigen einnimmt, als die restlichen.

Deshalb bin ich dazu übergegangen, SUP und SUB per vertical-align auf der baseline auszurichten, und dann per relativer Positionierung ein Stückchen nach oben/unten zu verschieben (mit auf die Schriftgrösse bezogener Einheit).

Ich stelle bei sup und sub die line-height:1 ein. Da ich in sonstigem Text gerne line-heights von 1.4 bis 1.5 verwende, gibt das gute Resultate.
Aber ich gebe zu, dass relative Positionierung wohl sauberer ist.

mfg Beat

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Deshalb bin ich dazu übergegangen, SUP und SUB per vertical-align auf der baseline auszurichten, und dann per relativer Positionierung ein Stückchen nach oben/unten zu verschieben (mit auf die Schriftgrösse bezogener Einheit).

Ich bevorzuge die richtigen Superscript- und Subscript-Zeichen zu verwenden: SO₄²⁻. Dann ist das Ganze auch ohne CSS ansehnlich und die Information bleibt bei C&P erhalten; aus 'SO<sub>4</sub><sup>2&minus;</sup>' würde unleserliches "SO42−" werden.

Qapla'

[ChrisB]

Hi,

Ich bevorzuge die richtigen Superscript- und Subscript-Zeichen zu verwenden: SO₄²⁻. Dann ist das Ganze auch ohne CSS ansehnlich

Das hier in der verwendeten Schriftart (bei mir zumindest) kaum lesbare Zeichen ² ist alles andere als ansehnlich.

MfG ChrisB

[Patrick Andrieu]

Hallo ChrisB!

Das hier in der verwendeten Schriftart (bei mir zumindest) kaum lesbare Zeichen ² ist alles andere als ansehnlich.

Genauso wenig wie Gunnars Fragezeichen-Fliegenschiss :)

Viele Grüße aus Frankfurt/Main,
Patrick

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Das hier in der verwendeten Schriftart (bei mir zumindest) kaum lesbare Zeichen ² ist alles andere als ansehnlich.

Die hier verwendete Schriftart (Courier New, bei mir zumindest) ist alles andere als ansehnlich. ;-)

Zum Glück werden anderswo andere Schriftarten verwendet; dann sind auch Superscript- und Subscript-Zeichen gut lesbar.

Qapla'

[Beat]

Hat jemand eine Idee?

ja. Mache einen Vorschlag für kommende CSS-Standards für ein neues Pseudoelement ::line

mfg Beat