nicht angemeldet heinetz
Matthias Apsel
Gunnar Bittersmann
Rolf B
Matthias Apsel
Rolf B
heinetz
Matthias Apsel
Rolf B
heinetz
Gunnar Bittersmann
Hallo Forum,
ich überlege, ob sich das hier …
... konkret die unterbrochene Linie und das Anführungszeichen ohne zusätzliches Markup nur als Pseudo-Element ":before" bzw. ":after" umsetzen lässt.
was meint Ihr?
gruss, heinetz
Hallo heinetz,
das geht.
Bis demnächst
Matthias
@@Matthias Apsel
das geht.
😂
Nach dem Wie war zwar nicht gefragt; ich finde das aber dennoch nicht uninteressant, was du da im Sinn hast.
LLAP 🖖
Hallo Gunnar,
immer diese Herausforderungen…
Das hier sieht so aus wie gewünscht, aber ist es auch gut so?
Die Herausforderung war, das Zitat zu finden und zu vervollständigen 😂
Edit: Wieso ist die Linienstärke des Quote-Strichs, wenn sie per background-size: 100% 0.05em; hergestellt wird, bei :before und :after nicht immer gleich (Chrome unter Windows)? Ich habe sie jetzt in Pixel gesetzt.
Rolf
Hallo Rolf B,
Das hier sieht so aus wie gewünscht, aber ist es auch gut so?
Das hatte ich auch so im Sinn.
Edit: Wieso ist die Linienstärke des Quote-Strichs, wenn sie per
background-size: 100% 0.05em;hergestellt wird, bei :before und :after nicht immer gleich (Chrome unter Windows)? Ich habe sie jetzt in Pixel gesetzt.
Das ist ein Rendering-Problem, dies kann ich beim Vergrößern der Seite auch beobachten, wenn Pixel verwendet werden.
PS: Pseudoelemente bekommen zwei Doppelpunkte.
Bis demnächst
Matthias
Hallo Matthias,
immerhin leiden Feuerfiffi und Crom am gleichen Käferbefall. Ist wohl unvermeidlich unter GDI, wenn alles Fließkomma ist.
<rant>
: und :: - da hat sich Spec eine Footgun gebaut. Ein potenzieller breaking-change zum paamayim-nekudotayim, einfach nur der „Klarheit“ wegen, um Pseudoelemente und Pseudoklassen zu unterscheiden - das ist für mich eine Elfenbeinturm-Entscheidung. Es wird hoffentlich niemals so etwas wie x:foo und x::foo geben, wobei die Semantik je nach Anzahl der Nekudotayim verschieden ist und die :after/:before Kompatibilität noch erhalten bleibt - das wäre gruselig. Und dann ist es doch wurscht, ob ich x:after oder x::after schreibe. Der Name hinter dem Doppelpunkt macht klar, was gemeint ist.
</rant>
Ich hab's halt geändert 😕
Rolf
Hallo Matthias,
Das hier sieht so aus wie gewünscht, aber ist es auch gut so?
Fast. Es ist schon sehr nah am Layout. Allerdings hat der Übergang nach weiss in der Linie einen Verlauf.
(Wie) kriege ich den weg?
gruss, heinetz
Hallo heinetz,
Fast. Es ist schon sehr nah am Layout. Allerdings hat der Übergang nach weiss in der Linie einen Verlauf.
(Wie) kriege ich den weg?
Indem du Colorstops an derselben Position setzt. https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder/linear-gradient()
Bis demnächst
Matthias
Hallo heinetz,
den fand ich schick und hab ihn absichtlich reingesetzt 😀
Guck dir den linar-gradient des Box-Hintergrundes an, der hat harte Übergänge.
Rolf
1000 Dank!
gruss, heinetz
@@Rolf B
Das hier sieht so aus wie gewünscht, aber ist es auch gut so?
Die Linien mit linear-gradient – hm, das ist ein Hack. Das sollte anders gehen.
Ich hatte erst im Sinn, die Höhe des Pseudoelements auf eins, zwei Pixel festzulegen und die Linien mit border-left und border-right zu erzeugen. Das Anführungszeichen wird in seiner vollen Pracht auch außerhalb der Box des Pseudoelements dargestellt. Mir ist es nur nicht gelungen, das Ding vertikal passend zu den Linien auszurichten.
SVG zur Hilfe! Damit kriegt man schnell zwei Linien hin und auch das Anführungszeichen dazwischen. ☞ So sieht’s aus.
Die Anführungszeichen werden entsprechend der Sprache gedreht: „“ für Deutsch, “” für Englisch, …
LLAP 🖖
Hallo Gunnar,
data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-6%200%2012%204%22%3E%3Ctext%20x%3D%220%22%20y%3D%222%22%20text-anchor%3D%22middle%22%20font-family%3D%22Georgia%22%20font-size%3D%223%22%20fill%3D%22hsl%28224%2C%2060%25%2C%2060%25%29%22%3E%E2%80%9E%3C%2Ftext%3E%3Cg%20stroke-width%3D%220.1%22%20stroke%3D%22hsl%28224%2C%2060%25%2C%2060%25%29%22%3E%3Cline%20x1%3D%226%22%20x2%3D%221.5%22%20y1%3D%222%22%20y2%3D%222%22%2F%3E%3Cline%20x1%3D%22-6%22%20x2%3D%22-1.5%22%20y1%3D%222%22%20y2%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
/* <svg xmlns="http://www.w3.org/2000/svg" viewBox="-6 0 12 4"><text x="0" y="2" text-anchor="middle" font-family="Georgia" font-size="3" fill="hsl(224, 60%, 60%)">„</text><g stroke-width="0.1" stroke="hsl(224, 60%, 60%)"><line x1="6" x2="1.5" y1="2" y2="2"/><line x1="-6" x2="-1.5" y1="2" y2="2"/></g></svg> */
äh, ja, in etwa so sah mein letzter Alptraum aus. Darum der Gradient. DEN versteh ich 😂
Und wieso Georgia? Kann SVG den Font nicht vom Container erben?
Die Nummer mit der 180° Drehung ist entweder genial oder Irrsinn. Kann man die Punktsymmetrie der Anführungszeichen in lang(de) und lang(en) garantieren?
Rolf
@@Rolf B
äh, ja, in etwa so sah mein letzter Alptraum aus.
Das prozentcodierte Zeugs schreib ich auch nicht mit der Hand. (Das SVG schon – das ist ja nicht so schwer.)
Und wieso Georgia?
Du kannst gerne eine andere Schrift nehmen.
Kann SVG den Font nicht vom Container erben?
Nein. Nicht, wenn’s ein Hintergrundbild per CSS ist. Wenn’s ein svg-Element im Markup wäre, dann ja.
Die Nummer mit der 180° Drehung ist entweder genial oder Irrsinn.
Was ist der Unterschied? 😉
Darüber hab ich mal gedichtet:
„Genie und Wahnsinn dicht bei dicht
beleuchtet nun das Rampenlicht
und vermag ’s doch nicht zu trennen.
Es ist kein Unterschied zu erkennen,
denn – es gibt ihn nicht.“
Kann man die Punktsymmetrie der Anführungszeichen in lang(de) und lang(en) garantieren?
Ich nehm die Frage mal mit zum nächsten Typografie-Stammtisch. Für dekorative Zwecke sollte es OK sein, das Ding gedreht wiederzuverwenden.
LLAP 🖖