nicht angemeldet michaah
Rolf B
michaah
Rolf B
michaah
Rolf B
michaah
Matthias Apsel
Gunnar Bittersmann
Wie ich eben feststelle beeinflusst "line-height" keineswegs die Ausdehnung der Box direkt um die Buchstaben, sondern sorgt ggf. nur für Abstand zwischen diesen Textblöcken mit HG.
Gibt es eine Möglichkeit diesen Raum um die Buchstaben zu vergrößern? Eine Art "padding" um diese Blöcke.
So habe ich diese Textblöcke nun in ein span gepackt und dieses mit padding: 3px; formatiert. Das klappt.
Aber gäbe es dafür einen eigenen selector?
Aber gäbe es dafür einen eigenen selector?
Man könnte sich was basteln. Das hier zeigt das beispielhaft, sogar auf halbe Buchstaben. Es geht zwar um die Farbe, aber das Grundkonzept lässt sich natürlich auf alles anwenden.
Hallo Mia,
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
Man sollte erwähnen, dass es den Wert "text" von background-clip nur in der mit -webkit- gepräfixten Version gibt. Das ist schon recht alt (2008), aber es findet sich in keiner regulären Spec, lediglich in einem Draft der Spec für Backgrounds and Borders Level 4, das ausdrücklich "Not ready for implementation" verkündet, wenn man das Dokument aufruft.
-webkit-text-fill-color wird bei MDN ausdrücklich als "Not on an standards track" gelistet und ist bei WhatWG als "Compatibility" gelistet. Die Browser-Unterstützung ist breit genug, aber es ist trotzdem Nonstandard.
Daher würde ich in beiden Fällen sagen: don't try this, except at home.
Rolf
letter-spacingword-spacingErgänzend zu meinem vorherigen Beitrag:
letter-spacing und word-spacing sind Properties, keine Selektoren.em, ex oder ch.p {
letter-spacing: 0.25em;
}
Anmerkung: Die Maßeinheit lh, die sich auf die Linienhöhe bezieht, ist leider noch Zukunftsmusik.
Hi an alle,
der eigentliche Text soll ja nicht verändert werden, also kein letter-spacing oder word-spacing. Es geht wirklich nur darum die Textbox zu vergrößern so dass sie mehr Platz einnimmt als die Buchstaben benötigen.
Euren Antworten entnehme ich, dass es dafür keinen selector properties gibt. Da scheint mir meine Lösung mit dem formatierten span die einfachste.
Danke.
Gruß
M
Hallo michaah,
tja soweit ich das sehe, gibt es das wirklich nicht. Eine Box mit inline-Inhalt wird in Line-Boxen zerlegt, deren Höhe von der Höhe der inline-Elemente abhängt, die darzustellen sind. Mit line-height gibst Du eine minimale Höhe dieser Line-Boxen vor, aber nicht die Höhe der inline-Elemente.
Die Wirkung von line-height auf einem inline-Element ist die, dass es bei der Berechnung der Line-Boxen sagt, welche Minimalhöhe dieses Inline-Element in einer Line-Box benötigt. Das inline-Element selbst wird nicht vergrößert.
Die Höhe des inline-Elements (bzw. der Fragmente dieses Elements, die auf die Line-Boxen umgebrochen werden) wird vom Inhalt bestimmt (d.h. font-size bei Text). Und natürlich vom Padding. Deswegen ist deine Lösung erstmal richtig.
Was nicht passiert, ist ein horizontales Padding an Umbruchstellen. Wenn ich bspw. padding:0.25em 0.5em; schreibe, bekommt jedes inline-Fragment ein vertikales Padding. Das horizontale Padding ist aber nur ganz am Anfang und ganz am Ende. Das kann teils zu unschönen Ergebnissen führen. Abstände bei Umbrüchen werden von CSS noch nicht gut gehandhabt, bei Flexbox mit Wrap ist es ähnlich.
Rolf
Hallo Rolf B,
Was nicht passiert, ist ein horizontales Padding an Umbruchstellen. Wenn ich bspw.
padding:0.25em 0.5em;schreibe, bekommt jedes inline-Fragment ein vertikales Padding. Das horizontale Padding ist aber nur ganz am Anfang und ganz am Ende. Das kann teils zu unschönen Ergebnissen führen. Abstände bei Umbrüchen werden von CSS noch nicht gut gehandhabt, bei Flexbox mit Wrap ist es ähnlich.
Dafür gibt es box-decoration-break: clone.
Bis demnächst
Matthias
So ganz klar ist mir nun nicht, was Du vor hast.
Und ich bezweifle, dass die Semantik Deines HTML richtig ist.
Kannst Du eine Skizze bzw. Screenshot mit Anmerkung und Dein zugehöriges HTML hier posten?
Ich schiebe mittels negativen margin Text auf eine img-Box.
Wie von Rolf ausführlich beschriebenen ist eine Textbox genau so groß wie der verwendete Font mit Ober- und Unterlängen.
Bei schwarzer Schrift vor weißem Text-HG auf einer Graphik, die vornehmlich schwarz-weiß-Elemente darstellt kann es passieren dass Buchstaben direkt an schwarzem Graphikinhalt "kleben" oder sich damit überschneiden was optisch unschön ist und die Lesbarekeit negativ beeinflußt. Um dies zu verhindern benötige ich dieses "Textblock-padding" (wie ich es sinnbildlich hier mal nenne). Dieses padding, in meinem Fall gerade mal 2px breit, sorgt eben für eine feine optische Trennung und ungestörte Lesbarkeit. Diese Trennung ist insbesondere deshalb auch wichtig, weil die Lage des Textes auf der Graphik bei responsive design je nach viewport leicht variiert.
Die Variante den Textblock mit einem padding zu versehen bevorzuge ich gegenüber der Variante dem "p" Element einen HG zu geben, weil ersteres wirklich nur den Textblock dünn abpolstert, im Grunde nicht mehr als einen trennenden Spalt erzeugt, p+HG aber einen größeren rechteckigen Kasten erzeugen würde, der unnötig und unschön viel Graphik abdecken würde. (Soviel zur Semantik)
Ich hoffe mal dass dies in groben Zügen meinen Anwendungsfall hinreichend erklärt.
Hallo michaah,
das klingt jetzt aber nicht so, als wäre eine Hintergrundfarbe für den Text die Lösung, die Du brauchst.
Möchtest Du es einmal mit text-shadow versuchen?
https://jsfiddle.net/Rolf_b/cshejkz4/
Ich verwende dort einen vierfachen Textschatten:
text-shadow: 1px 1px 2px white,
-1px 1px 2px white,
1px -1px 2px white,
-1px -1px 2px white;
Jeder einzelne Schatten ist diagonal um ein Pixel gegenüber dem Text versetzt, in alle 4 Richtungen. Durch den Blur-Radius von 2px verschwimmen die Schatten zu einem. Und Dein Text hat einen weißen Rahmen.
Man kann auch einen einfachen Schatten verwenden: text-shadow: 0px 0px 3px white;, aber der ist mir zu schwach. Es wäre einfacher, wenn text-shadow einen spread-radius kennen würde, so wie der box-shadow. Das gibt's aber nicht. Daher der Würgherum mit den 4 Schatten.
Probiere es mal durch, mit unterschiedlichen Abständen vom Schatten zum Text und verschiedenen blur-radius Werten. Mit gefällt die im Fiddle gezeigte Version am besten.
Rolf
Hallo michaah,
das klingt jetzt aber nicht so, als wäre eine Hintergrundfarbe für den Text die Lösung, die Du brauchst.
Naja, ich denke dass das sehr vom Bild (flächig-homogen / strukturiert) abhängt auf welches du Text schiebst.
Möchtest Du es einmal mit text-shadow versuchen?
Das ist auf jeden Fall ein gute Idee, und ich werde das testen. Aber im gegeben Fall bin ich skeptisch. Du hast deine Schrift ja auf flächigem Bild-HG positioniert. In diesem Fall schaut der HG in den Buchstabenzwischenräumen und Hohlformen wirklich gut aus. Aber lineare Bildstrukturen in diesen Bereichen werden vermutlich stören. Muß man mal mit breiterem shaddow-Radius testen.
Grundsätzlich aber jedenfalls eine Option. Danke dafür.
Gruß
M
Bei schwarzer Schrift vor weißem Text-HG auf einer Graphik, die vornehmlich schwarz-weiß-Elemente darstellt kann es passieren dass Buchstaben direkt an schwarzem Graphikinhalt "kleben" oder sich damit überschneiden was optisch unschön ist und die Lesbarekeit negativ beeinflußt.
Schau Dir folgende Properties an und beachte dabei wie sie mit weiteren zusammenspielen:
shape-image-thresholdshape-outsideshape-marginIch schiebe mittels negativen margin Text auf eine img-Box.
Bei oben genannten Properties musst Du dies dann überdenken.
Ich schiebe mittels negativen margin Text auf eine img-Box.
Bei schwarzer Schrift vor weißem Text-HG auf einer Graphik, die vornehmlich schwarz-weiß-Elemente darstellt kann es passieren …
Ein CSS-Grid (display: grid; …) kann hier auch eine Lösung sein.
Denn Überlappungen sind möglich. Konkret würde das Bild das komplette Grid ausfüllen und der Text nur eine oder mehr Boxen.
Hallo michaah,
Ich schiebe mittels negativen margin Text auf eine img-Box.
Möchte das Bild dann nicht lieber eine Hintergrundgrafik sein?
Bis demnächst
Matthias
@@michaah
Um dies zu verhindern benötige ich dieses "Textblock-padding"
Meinst du sowas?
😷 LLAP
Hallo Gunnar Bittersmann,
Meinst du sowas?
Hatte ich auch schon erwähnt.
Bis demnächst
Matthias
@@michaah
Um dies zu verhindern benötige ich dieses "Textblock-padding"
Meinst du sowas?
😷 LLAP
Nein.
Aber dein Beispiel zeigt mir, dass das Problem ein ganz anderes ist. Denn eigentlich sollte ja die Textbox (darunter verstehe ich die weiße HG-box, die den Text umgibt) wie in deinem Beispiel größer (= höher und breiter) sein als die Großbuchstaben. Über dem oberen Querbalken des "T" ist in dem Beispiel noch weißer Raum.
Irgendwie habe ich es geschafft dass der bei mir fehlt.
Man braucht dieses ganze "Textblock-padding" gar nicht, das ist einfach der Normalzustand. Nur eben nicht in diesem Textblock. Da endet der weiße HG exakt mit dem Querbalken des "T". Aber zumindest ist damit klar warum wir doch etwas an einander vorbei geredet haben bzw. keine Lösung die richtige war.
In anderen Textboxen hier ist das nicht der Fall, aber bei dieser Textbox habe ich irgend einen Hack gefunden die Textbox niedriger zu schrumpfen, nur habe ich keine Ahnung wie der geht :-) (Die Schriften sind alle gleich groß und fett).
Weia, das ist nichts für Samstag Abend.
Gruß
M
Hallo michaah,
Meinst du sowas?
Nein.
Wo kann man sich anschauen, was du meinst?
Aber dein Beispiel zeigt mir, dass das Problem ein ganz anderes ist. Denn eigentlich sollte ja die Textbox (darunter verstehe ich die weiße HG-box, die den Text umgibt) wie in deinem Beispiel größer (= höher und breiter) sein als die Großbuchstaben. Über dem oberen Querbalken des "T" ist in dem Beispiel noch weißer Raum.
Die Höhe einer inline-Box richtet sich nach der Höhe der Schrift. Die besteht (vereinfacht) aus Ober-, Mittel- und Unterlänge. Die Größe der im HTML-Dokument gerenderten Box richtet sich (wenn die Schriftart das vorsieht) nach dem größten Buchstaben. Und da ist bei vielen Schriften über dem T eben noch Platz. Zum Beispiel für das Â. Selbst das k ist häufig höher als das T (siehe auch https://www.typolexikon.de/schriftlinien/, dort Schriftlinien in der angewandten Typografie).
Ich habe nach wie vor den Eindruck, du möchtest ein Webprodukt mit der Genauigkeit eines Printprodukts erstellen. Das wäre verschwendete Zeit und Liebesmüh.
Bis demnächst
Matthias
@@Matthias Apsel
Selbst das k ist häufig höher als das T (siehe auch https://www.typolexikon.de/schriftlinien/, dort Schriftlinien in der angewandten Typografie).
… oder auch in der Wikipedia.
😷 LLAP
Hallo Matthias Apsel,
Ich habe nach wie vor den Eindruck, du möchtest ein Webprodukt mit der Genauigkeit eines Printprodukts erstellen. Das wäre verschwendete Zeit und Liebesmüh.
Ergänzung: Deine Webseite ist auf den Browsern dieser Welt nur zu Gast und muss sich an die Vorlieben und Gepflogenheiten des Gastgebers halten. Der kann die Vorgaben automatisiert anpassen (Leseansicht)
oder aber manuell einstellen.
Dann sieht das Forum so aus:
Und Personen mit Wahrnehmungsschwierigkeiten werden sich ihren Browser so oder so ähnlich konfigurieren.
Bis demnächst
Matthias
Hallo michaah,
Meinst du sowas?
Nein.
Wo kann man sich anschauen, was du meinst?
Das müßte ich nachbauen ;-) , aber das obige "nein" habe ich mittlerweile (siehe zweite Antwort) gestrichen.
Aber dein Beispiel zeigt mir, dass das Problem ein ganz anderes ist. Denn eigentlich sollte ja die Textbox (darunter verstehe ich die weiße HG-box, die den Text umgibt) wie in deinem Beispiel größer (= höher und breiter) sein als die Großbuchstaben. Über dem oberen Querbalken des "T" ist in dem Beispiel noch weißer Raum.
Die Größe der im HTML-Dokument gerenderten Box richtet sich (wenn die Schriftart das vorsieht) nach dem größten Buchstaben. Und da ist bei vielen Schriften über dem T eben noch Platz.
Ich verwende in der gesamten Website eine einzige fette Schrift { font: 1.2rem/1.3 Helvetica Neue, Helvetica, Arial, sans-serif;font-weight: bold;} in einer einheitlichen Höhe. Alle Textboxen haben Platz über dem T, nur diese nicht, kein vertical-align gesetzt.
Ich habe nach wie vor den Eindruck, du möchtest ein Webprodukt mit der Genauigkeit eines Printprodukts erstellen. ...
Dieser Eindruck ist unzutreffend. Es sollte für jedermann nachvollziehbar sein, dass Buchstaben, die an gleichfarbigen Hintergrundstrukturen kleben ästhetisch unschön und potenziell schlechter zu lesen sind. Das ist ja der Grund warum eigentlich die erzeugte Textbox höher ist als die Oberlängen.
@@michaah
Um dies zu verhindern benötige ich dieses "Textblock-padding"
Meinst du sowas?
😷 LLAP
Doch. Im Prinzip würde das passen (von dann neuen Ausrichtungsproblemen mal abgesehen).
Nur kleben bei mir die Buchstaben bei diesem (recht verschachtelten) Element aus unbegreiflichen Gründen oben an der Textbox, dafür ist unten reichlich Platz, und das ist wohl das eigentliche Problem. Es ist nirgends ein vertical-align gesetzt, ich habe im inspector danach gefiltert.
Das schiebe ich jetzt erstmal vor mir her, bis ich mir das anschaue.
Danke soweit.
