heinetz: Komplexes Layout ohne zusätzliches Markup

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

  1. Hallo heinetz,

    das geht.

    Bis demnächst
    Matthias

    -- Rosen sind rot.
    1. @@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 🖖

      -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. 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

        -- sumpsi - posui - clusi
        1. 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

          -- Rosen sind rot.
          1. 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

            -- sumpsi - posui - clusi
          2. 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

            1. 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

              -- Rosen sind rot.
            2. 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

              -- sumpsi - posui - clusi
              1. 1000 Dank!

                gruss, heinetz

        2. @@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 🖖

          -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. 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

            -- sumpsi - posui - clusi
            1. @@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 🖖

              -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory