Matthias Scharwies: Zitate im SELF-Wiki auszeichnen

0 53

Zitate im SELF-Wiki auszeichnen

Matthias Scharwies
  • css
  1. 0
    Tabellenkalk
    1. 0
      Matthias Scharwies
    2. 0
      Rolf B
  2. 0
    Gunnar Bittersmann
    • css
    • design
    • internationalisierung
    1. 0
      Rolf B
  3. 0
    ottogal
    1. 0
      Rolf B
      1. 0
        Gunnar Bittersmann
      2. 0
        Der Martin
        1. 0
          Rolf B
          1. 0
            Der Martin
            1. 0
              tk
              1. 0
                Der Martin
                1. 0
                  Rolf B
                  1. 0
                    Der Martin
                2. 0
                  tk
                  1. 0
                    Der Martin
                    1. 0
                      tk
                      1. 0
                        Rolf B
                        1. 0
                          Der Martin
                          1. 0
                            kai345
                            1. 0
                              Der Martin
          2. 0
            Gunnar Bittersmann
            • design
            • selfhtml
            • typografie
            1. 0
              Der Martin
            2. 0
              Rolf B
      3. 0
        ottogal
  4. 0
    Rolf B
    1. 0
      Matthias Scharwies
      1. 0
        Gunnar Bittersmann
        • design
        1. 0
          Rolf B
          1. 0
            Gunnar Bittersmann
            • font
            • svg
            1. 0
              Rolf B
      2. 0
        Rolf B
    2. 0
      Gunnar Bittersmann
      • design
      • html
      1. 0
        Rolf B
        1. 0
          Gunnar Bittersmann
          • html
          1. 1
            Rolf B
            1. 0
              Gunnar Bittersmann
              1. 0
                Rolf B
                1. 1
                  Rolf B
                  1. 0
                    Matthias Scharwies
                    1. 0
                      Rolf B
                2. 0
                  Gunnar Bittersmann
                  1. 0
                    Rolf B
                    1. 0
                      Der Martin
                    2. 0
                      Gunnar Bittersmann
                      1. 0
                        Rolf B
                        1. 0
                          Gunnar Bittersmann
                    3. 0
                      1unitedpower
                      • meinung
                      1. 0
                        Rolf B
                    4. 0
                      Gunnar Bittersmann
                      • design
                      1. 0
                        Rolf B

Servus!

Ich habe im Test-Wiki mal versucht, Zitate, die mit blockquote ausgezeichnet sind, mit CSS zu gestalten:

CSS/Custom_properties_(CSS-Variablen)

Vorbild war diese Seite im Wiki:

Was haltet ihr davon? Was könnte man besser machen? Sollen wir das so übernehmen?

Herzliche Grüße

Matthias Scharwies

--
Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
  1. Hallo,

    Was haltet ihr davon?

    Wenig.
    Habe es mir auf dem Smartphone angetan: Gänsefüßchen und Balken sind zu massiv und die Farbe ist zu signalfarben.
    Der Gänsefuß verdeckt vorherigen Text und der Inhalt ragt nach rechts aus dem Sichtbereich hinaus.

    Gruß
    Kalk

    1. Servus!

      Hallo,

      Was haltet ihr davon?

      Wenig.
      Habe es mir auf dem Smartphone angetan: Gänsefüßchen und Balken sind zu massiv und die Farbe ist zu signalfarben.
      Der Gänsefuß verdeckt vorherigen Text und der Inhalt ragt nach rechts aus dem Sichtbereich hinaus.

      Danke!

      Herzliche Grüße

      Matthias Scharwies

      --
      Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    2. Hallo Tabellenkalk,

      Wenig.

      Ich finde deine Kritik einseitig, am Punkt vorbei und unkonstruktiv. Das angesprochene Problem lässt sich durch passendes CSS, sprich: Media-Queries oder prozentuale Angaben, sicherlich heilen.

      Die Idee eines hervorgehobenen Zitat-Layouts finde ich durchaus gelungen dargestellt, vor allem, wenn wir genau so etwas an anderer Stelle als Beispiel bringen. Die eigene Medizin an sich selbst anzuwenden spricht schließlich für die Medizin.

      Die Abstände und Größen lassen sich sicherlich noch feintunen; ich finde den Abstand zwischen Quote-Symbol und Text zu groß und den Abstand nach oben zu klein, aber das ist Design-Kleinkram. Wenn auch wichtiger Kleinkram - genau hier muss man mit unterschiedlichen Viewportgrößen testen.

      Rolf

      --
      sumpsi - posui - obstruxi
  2. @@Matthias Scharwies

    CSS/Custom_properties_(CSS-Variablen)

    Was haltet ihr davon? Was könnte man besser machen? Sollen wir das so übernehmen?

    Die Anführungszeichen der Roboto sind in dieser Größe potthässlich. Da müsste man eine andere Schriftart wählen, wo die Anführungszeichen wie Doppel-6 aussehen.

    Womit wir beim nächsten Problem sind: Doppel-6 ist fürs Deutsche falsch; das öffnende Anführungszeichen sollte wie Doppel-9 aussehen. Das heißt, man müsste unterschiedliche Angaben für blockquote::before (Deutsch ist Default) und blockquote:lang(en)::before machen. Einen Sprachwechsel innerhalb der Seite muss man ja immer angeben, also bspw. <blockquote lang="en">.

    Zuallererst sollte man sich aber die Frage stellen, ob die Idee mit den großen Anführungszeichen nicht schon zu abgelutscht ist. Tausendmal gesehen.

    Möglicherweise gibt’s ja andere Gestaltungsmöglichkeiten, Zitate vom anderen Text abzuheben: kursiv, andere Schriftart (d.h. Serifenschrift), …

    😷 LLAP

    --
    „Guten Tag, mein Name ist Karl-Heinz. Ich will mich nicht impfen lassen und erwarte, dass die Solidargemeinschaft, die wegen Leuten wie mir weniger Freiheit hat, meine Tests weiter finanziert. Und das nenne ich dann Eigenverantwortung.“
    — @Hoellenaufsicht
    1. Hallo Gunnar,

      Tausendmal gesehen.

      Und deshalb vertraut. Muss man zwanghaft Design neu erfinden?

      Doppel-6 vs Doppel-9

      Es ist ein technisches Wiki, keine typographische Lehrveranstaltung. Viele Texte, die im Wiki in Anführungszeichen stehen (und ich meine nicht Sourcecode), verwenden die einfachen \u0022 Quotes, auch wenn der Editor diese Quotes anbietet.

      Für ein Schmuckelement sollte man es natürlich richtig machen. Das Wiki an sich ist ja deutsch, es gibt die Artikel nicht in einer englischen Parallelversion. Muss man, wenn man englischen Text in einem deutschen Dokument zitiert, das Zitat nach englischen Regeln in Anführungszeichen setzen? Oder sollte man zum Einleiten des fremdsprachlichen Zitats nicht die Sprache des Rahmendokuments anwenden?

      Du hattest dazu mal irgendwann einen Vortrag von Dir verlinkt (aus beyond Tellerrand, möglicherweise), aber den finde ich gerade nicht wieder.

      Rolf

      --
      sumpsi - posui - obstruxi
  3. Hallo Matthias,

    auf meinem Smartphone sieht das so aus: zitatgestaltung Nicht so doll...
    (Freilich schon so beim Vorbild aus dem Wiki.)

    Viele Grüße
    ottogal

    1. Hallo ottogal,

      dass das rote Anführungszeichen in den Text hineinlangt, schaffe ich im Browser nicht, egal in welcher Viewportgröße. Welches OS, welcher Brauser ist das? Irgendeine spezielle Zoomstufe eingestellt? Ein spezieller Font?

      Rolf

      --
      sumpsi - posui - obstruxi
      1. @@Rolf B

        dass das rote Anführungszeichen in den Text hineinlangt, schaffe ich im Browser nicht, egal in welcher Viewportgröße. Welches OS, welcher Brauser ist das?

        Alle?

        😷 LLAP

        --
        „Ohne die Meinungsfreiheit würde man die Idioten nicht erkennen.“
        — @MvSommerdune
      2. Hallo Rolf,

        dass das rote Anführungszeichen in den Text hineinlangt, schaffe ich im Browser nicht, egal in welcher Viewportgröße.

        ich schon, meine beiden Alltagsbrowser zeigen es genau so an. Einschließlich des Merkmals, dass das untere Stück des Anführungszeichens abgeschnitten ist.

        Welches OS, welcher Brauser ist das? Irgendeine spezielle Zoomstufe eingestellt? Ein spezieller Font?

        a) Pale Moon 29.4.0 unter Linux Mint 18
        b) Firefox 88.0[1] unter Linux Mint 18

        Beide Fälle im Vollbildmodus (1600x1200). Aber auch wenn ich das Fenster verkleinere, bleibt der Effekt. Bei einigen Fenstergrößen rutscht sogar der rote Balken unter dem Zitat noch teilweise in den Text rein:

        Screenshot im Firefox

        Mir ist auch nicht bewusst, dass ich irgendwas Besonderes eingestellt hätte ... äh doch: 120% Zoom als Grundeinstellung im Pale Moon, aber im Firefox AFAIK nicht. Dafür werden die Icons an der rechten Seite in beiden Browsern zur Hälfte vom Scrollbalken verdeckt.

        Live long and pros healthy,
         Martin

        --
        Klein φ macht auch Mist.

        1. Ja, ich bin gerade noch auf der alten Kiste unterwegs, die seit April keine Updates mehr bekommt. Gewohnheitstier ... ↩︎

        1. Hallo Martin,

          unter Android ist es bei mir auch falsch. Da gibt's die Windows Fonts Segoe UI und Calibri nicht, und mit denen tritt der Effekt nicht auf.

          Welcher Font wird bei Dir real genutzt? In der Liste steht

          "Segoe UI",Roboto,Calibri,-apple-system,BlinkMacSystemFont,"PT Sans",Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

          Rolf

          --
          sumpsi - posui - obstruxi
          1. n'Abend Rolf,

            unter Android ist es bei mir auch falsch. Da gibt's die Windows Fonts Segoe UI und Calibri nicht, und mit denen tritt der Effekt nicht auf.

            hmm, ich hätte nicht vermutet, dass es am verwendeten Font liegt.

            Welcher Font wird bei Dir real genutzt?

            Boah, keine Ahnung, wie ich das rausfinden soll. Die Frage hab ich mir sowohl im Browser als auch in Office-Programmen schon oft gestellt: Welchen Font verwendet das System da wirklich? Ich kriege immer nur raus, welcher da verwendet werden sollte.

            "Segoe UI",Roboto,Calibri,-apple-system,BlinkMacSystemFont,"PT Sans",Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

            Dann müsste es bei mir Ubuntu sein. Das ist die erste in der Aufzählung, die mein System kennt.

            Live long and pros healthy,
             Martin

            --
            Klein φ macht auch Mist.
            1. Hallo Martin,

              Welcher Font wird bei Dir real genutzt?

              Boah, keine Ahnung, wie ich das rausfinden soll.

              Über die Entwicklertools: die Eigenschaften des Pseudoelements aufrufen und dann rechts unter „Computed“ (Vivaldi bzw. Blink-Engine) bzw. „Schriftarten“ (Firefox) nachschauen, dort steht welche Schriftart verwendet wird – bei mir (Mint 20.2) ist das „Ubuntu“.

              Gruß,
              Tobias

              1. Hallo,

                Welcher Font wird bei Dir real genutzt?

                Boah, keine Ahnung, wie ich das rausfinden soll.

                Über die Entwicklertools: die Eigenschaften des Pseudoelements aufrufen und dann rechts unter „Computed“ (Vivaldi bzw. Blink-Engine) bzw. „Schriftarten“ (Firefox) nachschauen, dort steht welche Schriftart verwendet wird

                nö, da steht nur die Liste der nach Auswertung aller zutreffenden Stylesheets gewünschten Schriftarten, und das ist genau die Liste, die Rolf schon aufgezählt hat (Pale Moon).
                Welchen dieser Fonts mein System wirklich verwendet, erkenne ich daraus nicht.

                bei mir (Mint 20.2) ist das „Ubuntu“.

                Das hatte ich ja auch schon theoretisch abgeleitet.
                Und wie mache ich das z.B. in LibreOffice?

                Live long and pros healthy,
                 Martin

                --
                Klein φ macht auch Mist.
                1. Hallo Martin,

                  von Libreoffice weiß ich nichts, aber im Browser mach ich das so, dass ich in der CSS Regel der Reihe nach die gelisteten Fontnamen kaputt mache (einfach ein x reinzimmern). Sobald sich was ändert, kann ich mutmaßen, dass dieser Font der verwendete war.

                  Rolf

                  --
                  sumpsi - posui - obstruxi
                  1. Hallo,

                    von Libreoffice weiß ich nichts

                    schade, denn ich habe oft schon den Fall gehabt, dass ich ein Dokument von einem Windows-Nutzer bekam (oder ein Windows-Nutzer von mir), und dann wird in den allermeisten Fällen ein anderer Font zur Anzeige verwendet, als der Autor eigentlich gemeint hat. Manchmal habe ich dann schon gedacht, hey, sieht eigentlich ansprechender aus als im Original. Welchen Font sehe ich da wirklich?

                    aber im Browser mach ich das so, dass ich in der CSS Regel der Reihe nach die gelisteten Fontnamen kaputt mache (einfach ein x reinzimmern). Sobald sich was ändert, kann ich mutmaßen, dass dieser Font der verwendete war.

                    Primitiv, aber effektiv. 😉

                    Live long and pros healthy,
                     Martin

                    --
                    Klein φ macht auch Mist.
                2. Hallo Martin,

                  nö, da steht nur die Liste der nach Auswertung aller zutreffenden Stylesheets gewünschten Schriftarten, und das ist genau die Liste, die Rolf schon aufgezählt hat (Pale Moon).
                  Welchen dieser Fonts mein System wirklich verwendet, erkenne ich daraus nicht.

                  Dann schau nochmal genau hin :-) Da werden die tatsächlich verwendeten Werte angezeigt, eben auch die tatsächlich verwendete Schriftart: verwendete Schriftart in Entwicklertools (Screenshot aus Vivaldi, in Firefox ist das analog, nur eben der andere Tab)

                  Und wie mache ich das z.B. in LibreOffice?

                  Keine Ahnung. Wenn die Schriftart in dem entsprechenden Feld in normaler Schrift (also nicht kursiv) dargestellt wird, ist das wohl die verwendete Schriftart. Falls die Schriftart in kursiv dargestellt wird, gibt es die eingestellte Schriftart auf dem aktuellen Rechner nicht – welche dann aber verwendet wird, weiß ich auch nicht.

                  Gruß
                  Tobias

                  1. Hallo Tobias,

                    nö, da steht nur die Liste der nach Auswertung aller zutreffenden Stylesheets gewünschten Schriftarten, und das ist genau die Liste, die Rolf schon aufgezählt hat (Pale Moon).
                    Welchen dieser Fonts mein System wirklich verwendet, erkenne ich daraus nicht.

                    Dann schau nochmal genau hin :-) Da werden die tatsächlich verwendeten Werte angezeigt, eben auch die tatsächlich verwendete Schriftart:

                    leider nein:

                    Screenshot im Inspector von Pale Moon

                    Und wie mache ich das z.B. in LibreOffice?

                    Keine Ahnung. Wenn die Schriftart in dem entsprechenden Feld in normaler Schrift (also nicht kursiv) dargestellt wird, ist das wohl die verwendete Schriftart.

                    Ja, genau. Wenn aber LO Writer in kursiv Tahoma anzeigt, dann weiß ich nur: Da sollte eigentlich Tahome verwendet werden, geht aber nicht. Aus diesem Grund habe ich auch auf meinem Linux-System ein paar häufig verwendete Windows-Fonts zusätzlich installiert.

                    Falls die Schriftart in kursiv dargestellt wird, gibt es die eingestellte Schriftart auf dem aktuellen Rechner nicht – welche dann aber verwendet wird, weiß ich auch nicht.

                    Schade.

                    Live long and pros healthy,
                     Martin

                    --
                    Klein φ macht auch Mist.
                    1. Hallo Martin,

                      leider nein:

                      da müsste es neben Rules, Computed und Animations noch mehr Tabs geben – in meinem Firefox (91) gibt es zumindest noch mehr: Screenshot Entwicklertools Firefox

                      Gruß
                      Tobias

                      1. Hallo tk,

                        hab ich jetzt im Firefox auch entdeckt. Und hey - sogar Chrome hat es, auf dem "Computed" Tab, UNTER der Liste der Attribute versteckt.

                        Thanks 😀

                        Rolf

                        --
                        sumpsi - posui - obstruxi
                        1. Hallo,

                          hab ich jetzt im Firefox auch entdeckt. Und hey - sogar Chrome hat es, auf dem "Computed" Tab, UNTER der Liste der Attribute versteckt.

                          tja, der bleiche Mond hat's nicht. 🙁

                          Live long and pros healthy,
                           Martin

                          --
                          Klein φ macht auch Mist.
                          1. printf('Hallo %s!', ['Du', 'ihr', 'Welt', 'zusammen'][rand(0, 3)]);

                            hab ich jetzt im Firefox auch entdeckt. Und hey - sogar Chrome hat es, auf dem "Computed" Tab, UNTER der Liste der Attribute versteckt.

                            tja, der bleiche Mond [hat's nicht]

                            Also, meiner schon. Der Tab „Fonts“ zeigt die aktuelle Schriftart an. Zuerst war es „Segoe UI“ und als ich diese in der font-family des body invalidiert hatte, zeigte der bleiche Mond auch wunderbar „Calibri“ als verwendete Schriftart.

                            Und mein Mond ist schon lange nicht mehr aktualisiert worden, gibt es anscheinen schon länger…

                            /K

                            --
                            Klingonen sind doof. Sie rufen ständig nach einem Kaplan und wollen nach dem Tod in Styropor® sein.
                            1. Moin,

                              hab ich jetzt im Firefox auch entdeckt. Und hey - sogar Chrome hat es, auf dem "Computed" Tab, UNTER der Liste der Attribute versteckt.

                              tja, der bleiche Mond [hat's nicht]

                              Also, meiner schon. Der Tab „Fonts“ zeigt die aktuelle Schriftart an.

                              ihr habt recht, jetzt habe ich es auch gefunden. Man muss das Inspektor-Fenster nur breit genug ziehen, sonst bleibt dieser zusätzliche Button/Tab verborgen.

                              Dann kann ich Ubuntu hiermit bestätigen.

                              Live long and pros healthy,
                               Martin

                              --
                              Klein φ macht auch Mist.
          2. @@Rolf B

            "Segoe UI",Roboto,Calibri,-apple-system,BlinkMacSystemFont,"PT Sans",Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

            Will SELFHTML eigentlich so beliebig daherkommen? Oder sollte man nicht ein corporate design machen, wozu auch eine Schriftart (bzw. mehrere) gehört? Also Webfonts für alle Leser verwenden?

            😷 LLAP

            --
            „Ohne die Meinungsfreiheit würde man die Idioten nicht erkennen.“
            — @MvSommerdune
            1. Hallo,

              "Segoe UI",Roboto,Calibri,-apple-system,BlinkMacSystemFont,"PT Sans",Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif

              Will SELFHTML eigentlich so beliebig daherkommen? Oder sollte man nicht ein corporate design machen, wozu auch eine Schriftart (bzw. mehrere) gehört? Also Webfonts für alle Leser verwenden?

              für jemanden, der regelmäßig fragt "Do web sites have to look the same in every browser?" ist das eine gewagte Frage.

              Okay, eine ordentliche CI hat schon was für sich. Aber wichtiger finde ich, dass ein Webauftritt (oder auch eine Print-Publikation) in sich einheitlich wirkt. Und das haut bei SELFHTML ganz gut hin, oder nicht?

              Live long and pros healthy,
               Martin

              --
              Klein φ macht auch Mist.
            2. Hallo Gunnar,

              Will SELFHTML eigentlich so beliebig daherkommen?

              Morgen 20:15 ist der nächste Stammtisch, bring die Frage gern mit. Oder nach Hamburg. Das wird mir hier im Thread etwas zu viel Topic.

              (Falls jemand mitdiskutieren will - der Stammtisch ist offen und nicht für Vereinsmitglieder oder Dauerposter reserviert. Die Einladung zum Discord-Server ist hier).

              Rolf

              --
              sumpsi - posui - obstruxi
      3. Hallo Rolf, späte Antwort (wg Urlaubsmodus):

        Android 11
        Firefox 91.3.0
        kein eigener Font
        ganz wenig reingezoomt

        Grüße!
        ottogal

  4. Hallo,

    ich habe Matthias Idee etwas modifiziert. Bitte guckt es euch mal an.

    Relevante Änderungen:

    • „ Zeichen als Quote-Symbol, nicht “
    • Quote-Symbol bekommt line-height:100%, damit das ::before-Element genauso groß wie das Zeichen ist (vorher wurde line-height geerbt)
    • Dadurch sollte eine font-unabhängige, relativ konsistente Positionierung mit top:-0.6em möglich sein. Vorher wurde eine Box mit ca 24px Höhe positioniert, und je nach Font ragte das das Anführungszeichen (weil es das obere Anführungszeichen war) mehr oder weniger weit daraus hervor. Mein Versuch verwendet das Anführungszeichen "unten", das an der baseline liegt.
    • Um wirklich unabhängig von Fonts und Fontsize zu sein bräuchte man eigentlich ein SVG Bild mit einer exakt bemessenen Boxgröße.
    • Der horizontale Strich ist kein Minuszeichen mehr (das die gleichen Positionierungsprobleme bei Fontveränderungen hätte), sondern ein ::before-Element für <cite>. Um cite rechtsbündig zu positionieren, habe ich es in ein div gesteckt.

    Besser wäre ein Konstrukt dieser Art:

    <figure class="selfquote">
      <blockquote>
        text
      </blockquote>
      <figcaption>
        <cite>blabla</cite>
      </figcaption>
    </figure>
    

    Das könnte man als Flexbox oder Grid übereinander anordnen und die figcaption mit align:self rechtsbündig setzen.

    Problem: Das figure-Element ist kein erlaubtes Wikimedia-HTML, dafür bräuchte man eine Extension. Das ist kein Hexenwerk, solche Extensions gibt es, aber es müsste eben passieren. Und solange wir über das Layout an sich zanken, lohnt diese Mühe nicht. Aber es könnte so aussehen.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. Servus!

      Hallo,

      ich habe Matthias Idee etwas modifiziert. Bitte guckt es euch mal an.

      Das sieht gut aus.

      Relevante Änderungen:

      • „ Zeichen als Quote-Symbol, nicht “
      • Quote-Symbol bekommt line-height:100%, damit das ::before-Element genauso groß wie das Zeichen ist (vorher wurde line-height geerbt)
      • Dadurch sollte eine font-unabhängige, relativ konsistente Positionierung mit top:-0.6em möglich sein. Vorher wurde eine Box mit ca 24px Höhe positioniert, und je nach Font ragte das das Anführungszeichen (weil es das obere Anführungszeichen war) mehr oder weniger weit daraus hervor. Mein Versuch verwendet das Anführungszeichen "unten", das an der baseline liegt.
      • Um wirklich unabhängig von Fonts und Fontsize zu sein bräuchte man eigentlich ein SVG Bild mit einer exakt bemessenen Boxgröße.

      Das konnte ich nächste Woche zeichnen. 6er oder 9er?

      • Der horizontale Strich ist kein Minuszeichen mehr (das die gleichen Positionierungsprobleme bei Fontveränderungen hätte), sondern ein ::before-Element für <cite>. Um cite rechtsbündig zu positionieren, habe ich es in ein div gesteckt.

      Besser wäre ein Konstrukt dieser Art:

      <figure class="selfquote">
        <blockquote>
          text
        </blockquote>
        <figcaption>
          <cite>blabla</cite>
        </figcaption>
      </figure>
      

      Das könnte man als Flexbox oder Grid übereinander anordnen und die figcaption mit align:self rechtsbündig setzen.

      Problem: Das figure-Element ist kein erlaubtes Wikimedia-HTML, dafür bräuchte man eine Extension. Das ist kein Hexenwerk, solche Extensions gibt es, aber es müsste eben passieren. Und solange wir über das Layout an sich zanken, lohnt diese Mühe nicht. Aber es könnte so aussehen.

      Da würde ich trotzdem verzichten wollen. Wir sollten versuchen, unser Wiki so schlank wie möglich zu lassen.

      Andererseits: wäre es möglich, mit vertretbarem Aufwand Iframes für Youtube, etc einzubauen?

      Herzliche Grüße

      Matthias Scharwies

      --
      Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
      1. @@Matthias Scharwies

        • Um wirklich unabhängig von Fonts und Fontsize zu sein bräuchte man eigentlich ein SVG Bild mit einer exakt bemessenen Boxgröße.

        Das konnte ich nächste Woche zeichnen.

        Zeichnen? Sollte das man nicht denen überlassen, die sich mit sowas auskennen – also Schriftgestaltern‽

        Warum nicht ein bestehendes Anführungszeichen aus einer ausgewählten Schriftart als SVG verwenden?

        6er oder 9er?

        Der Unterschied ist ein scale: -1.

        😷 LLAP

        --
        „Ohne die Meinungsfreiheit würde man die Idioten nicht erkennen.“
        — @MvSommerdune
        1. Hallo Gunnar,

          Warum nicht ein bestehendes Anführungszeichen aus einer ausgewählten Schriftart als SVG verwenden?

          D.h. den benötigten Glyph aus dem gewünschten Font herausholen und ins SVG einbetten? Welches Tool macht das?

          Rolf

          --
          sumpsi - posui - obstruxi
          1. @@Rolf B

            D.h. den benötigten Glyph aus dem gewünschten Font herausholen und ins SVG einbetten? Welches Tool macht das?

            Google Font to Svg Path

            😷 LLAP

            --
            „Ohne die Meinungsfreiheit würde man die Idioten nicht erkennen.“
            — @MvSommerdune
            1. Hallo Gunnar,

              danke 😀

              Das habe ich für eine neue Version benutzt.

              Markup ist zunächst noch div-suppe, d.h. es geht zunächst um's Aussehen.

              <div class="fancy-quote">
                <blockquote>
                  Custom properties (sometimes referred to as CSS <mark>variables</mark>
                  or cascading variables) … You can define multiple fallback values when
                  the given <mark>variable</mark> is not yet defined.
                </blockquote>
                <div class="attribution">
                  MDN:
                  <cite>Using CSS custom properties (variables)</cite>
                  <sup id="cite_ref-9" class="reference"><a href="#cite_note-9">[9</a>]</sup>
                </div>
              </div>
              

              Das Quote-Zeichen ist ein SVG-Bild als data-url, gesetzt als Hintergrundbild des fancy-quote. Der Strich ist als ::before des .attribution-Elements noch drin, aber mit Opacity um unaufdringlicher zu sein.

              Es sollte nun zu keinerlei störenden Überlappungen mehr kommen. Das Anführungszeichen kommt aus dem Google-Font Merienda - da gibt's natürlich jetzt viel Freiraum und ich hoffe, dass es keine rechtlichen Probleme gibt wenn man das so macht.

              Das <sup> Element ist Wiki-Output, im Wiki ist es <ref>MDN:[https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties Using CSS custom properties (variables)]</ref>. Wikimedia generiert daraus die Fußnote und am Ende des Artikels einen Link, ohne <cite>. Das würde ich aber nicht ändern wollen, das ist idiomatisch für Wikimedia-Wikis.

              Rolf

              --
              sumpsi - posui - obstruxi
      2. Hallo Matthias,

        In einem Atemzug von schlankem Wiki und iframes für Youtube zu reden ist schon beachtlich 😂

        YT-iframes sind etwas Arbeit, weil man youtube nicht direkt einbetten darf, ohne Cookie-Stress auszulösen. Man darf ein Bild zeigen, mit einem Abspiel-Symbol drauf. Das Bild muss klar machen, dass ein Klick auf "Abspielen" Youtube öffnet, mit allen datenschutrechtlichen Konsequenzen. Und dann darf ein Script das Bild nach Klick durch den YT-iframe ersetzen.

        Um sowas zu bauen, braucht man entweder eine Mediawiki-Extension, die das passende Markup generiert, oder man macht es wie bei "Verbergen" und schreibt JavaScript, das sich auf Standardmarkup des Wikis registriert und den benötigten Umbau durchführt. Ohne JS ist's einfach ein YT-Link. Beides ist nicht schwierig - man muss nur ein DSGVO-festes Vorgehen zur Implementierung haben.

        Bei den Zitaten würde ich die Lösung mit "Live-Umbau durch JS" eher nicht bevorzugen. Eine Extension ist schnell gemacht, das ist bei Mediawiki ganz gut beschrieben und es lässt sich im Offline-Wiki gut testen.

        Rolf

        --
        sumpsi - posui - obstruxi
    2. @@Rolf B

      • Der horizontale Strich

      trennt Zitat und Quellenangabe so stark, dass beides gar nicht mehr als zusammengehörige Einheit wahrgenommen wird.

      Ich würde da keine Trennlinie dazwischen machen. Und auch die Quellenangabe nicht rechtsbündig, sondern linksbündig zum Zitat (d.h. wie dieses eingerückt).

      Besser wäre ein Konstrukt dieser Art:

      <figure class="selfquote">
        <blockquote>
          text
        </blockquote>
        <figcaption>
          <cite>blabla</cite>
        </figcaption>
      </figure>
      

      IMHO sollte das Markup für ein Zitat so aussehen:

      <blockquote>
        I have a dream.
        <footer>
          <cite>Martin Luther King</cite>
        </footer>
      </blockquote>
      

      Oder noch eingepackt: <p>I have a dream.</p>.

      Im Englischen ist das üblich:

      <blockquote>
        I have a dream.
        <footer>
          &mdash; <cite>Martin Luther King</cite>
        </footer>
      </blockquote>
      

      Im Deutschen eher so:

      <blockquote>
        Ich habe einen Traum.
        <footer>
          (<cite>Martin Luther King</cite>)
        </footer>
      </blockquote>
      

      Kein figcaption und auch kein figure drumherum.

      😷 LLAP

      --
      „Ohne die Meinungsfreiheit würde man die Idioten nicht erkennen.“
      — @MvSommerdune
      1. Hallo Gunnar,

        jetzt hab ich nochmal recherchiert.

        TL;DR: Der Gebrauch von figure, um Blockquote und Bequellung zu verbinden, ist unstreitig. Die Quelle gehört nicht ins Blockquote hinein. Diskutiert wird über footer vs figcaption, und da gibt es starke Hinweise auf figcaption für klare Quellenangaben und footer für unspezifische Zusätze.

        Ausführlicher:

        • Das Pattern mit figure und figcaption findet sich in der Spec
        • Bei Stackoverflow finden sich Hinweise, dass die Spec widersprüchliche Beispiele hätte (mal figcaption, mal footer)
        • Im Stackoverflow-Thread meinte jemand, die Spec würde es offenlassen und man solle zwischen figcaption und footer je nach korrekter Semantik entscheiden:

        For your content, do you see the information about the quoted text as an integral part of the figure, or as an annotation of the figure. Use footer for the former, figcaption for the latter.

        • Jedenfalls ist die Spec sehr klar darin, dass das <cite> Element nicht in das <blockquote> Element hineingehört. Im Blockquote steht nur der zitierte Text, nicht die Attributierung. Die Quelle zum Zitat kann man in einem cite-Attribut verlinken - allerdings ist das nicht wirklich hilfreich, weil der Browser damit nichts zu tun scheint.

        Konsens schien zu sein, dass <figure> das richtige Tool ist, um Zitat und Attributierung zu verbinden, die Frage ist nur, ob figcaption oder footer für die Attributierung richtig ist. Es hat auch zu einem WhatWG Issue geführt, ohne wirkliches Resultat. Die Verwendung von figcaption für die Attributierung wurde dort jedenfalls nicht als krass falsch empfunden, während es durchaus Zweifel gab, ob eine figure überhaupt einen footer haben dürfe - mit dem Ergebnis: ja, darf, figure ist ein sectioning element.

        Tab Atkins meinte dazu nur: Leute, das ist doch Haarspalterei.

        Beispiele in der Spec zeigen blockquote jedenfalls als Zitatelement in Foren (wie hier auch). Ein Beispiel benutzte den Footer, um vom Zitat auf den zitierten Thread zu verlinken. Ein anderes Beispiel benutzte figcaption, um die Herkunft zu nennen. Und das <cite> Element führt die Spec ganz ausdrücklich dafür an, das Werk zu benennen, aus dem zitiert wird, aber nicht den Autor. Demnach ist dein <cite>MLK</cite> definitiv falsch. Oder, wie die Spec es herrlich punny schreibt:

        A person's name is not the title of a work — even if people call that person a piece of work

        Was man im Fall von Matthias Beispiel als cite anführt, ist mir allerdings nicht ganz klar. Ist das Werk die MDN Site? Oder der verlinkte Artikel? Ich würde zum Artikel tendieren.

        Und zu Matthias' Meinung, dass das Wiki so schlank wie möglich sein sollte: Ja, einverstanden. Aber auch nicht schlanker.

        Rolf

        --
        sumpsi - posui - obstruxi
        1. @@Rolf B

          jetzt hab ich nochmal recherchiert.

          TL;DR: Der Gebrauch von figure, um Blockquote und Bequellung zu verbinden, ist unstreitig. Die Quelle gehört nicht ins Blockquote hinein.

          Ach ja?

          WHATWG:
          “Attribution for the quotation, if any, must be placed outside the blockquote element.”

          W3C:
          Attribution for the quotation, may be be placed inside the blockquote element, but must be within a cite element for in-text attributions or within a footer element.”

          Könnte die WHATWG mal das Schreiben der HTML-Spezifikation denen überlassen, die sich mit sowas auskennen?


          Auch WHATWG:
          “The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”

          Click auf sectioning root:
          “Certain elements are said to be sectioning roots, including blockquote and td elements.”

          Die WHATWG-Spec ist in sich widersprüchlich. 😡


          Lange Rede, kurzer Sinn. Mein TL;DR ist ein anderes als deins (was daran liegen könnte, dass ich in die Specs schaue, während du auf Stackoverflow unterwegs bist):

          Die W3C-Spec erlaubt ausdrücklich die Quellenangabe zu einem Zitat innerhalb des blockquote-Elements. Die WHATWG-Spec erlaubt es an einer Stelle und verbietet es an einer anderen.

          😷 LLAP

          --
          „Ohne die Meinungsfreiheit würde man die Idioten nicht erkennen.“
          — @MvSommerdune
          1. Hallo Gunnar,

            was daran liegen könnte, dass ich in die Specs schaue, während du auf Stackoverflow unterwegs bist

            Irrtum. Ich habe natürlich nicht auf SO vertraut, sondern die Spec gegengelesen. Im Gegensatz zu Dir habe ich aber in die richtige Spec geschaut, und nicht in die, die sich selbst als superseded bezeichnet.

            Am Anfang von https://www.w3.org/TR/html52/ steht ein Link:

            Latest published version of HTML:

            https://www.w3.org/TR/html/

            Klick den mal an.

            Könnte die WHATWG mal das Schreiben der HTML-Spezifikation denen überlassen, die sich mit sowas auskennen?

            W3C scheint der Meinung zu sein, dass WHATWG das kann. Oder WHATWG hat sich diese Meinung beim W3C gekauft.

            Dass es dabei dann zu solchen Differenzen kommt, bzw. dass es Widersprüche bei WHATWG gibt, ist natürlich Käse. Ich würde aber im Zweifelsfall der W3C Meinung folgen und sagen, dass WHATWG sagt, wo es lang geht.

            Was Du von WHATWG zitierst, sehe ich aber noch nicht als Widerspruch. Es besagt:

            • ein blockquote ist sectioning content (was ich eigentlich für merkwürdig halte)
            • ein blockquote darf einen footer haben (eine figure aber auch)
            • ein cite gehört nicht in ein blockquote-Element
            • der footer darf typically sagen, wer's geschrieben hat (who wrote it)

            Anderswo steht noch, wie vorhin zitiert:

            • der Autor gehört nicht ins <cite> Element, sondern das Werk.

            Korollar: Ein footer im Blockquote ist erlaubt, aber nicht mehr(!) zu dem Zweck, die Quelle zu benennen. In der W3C Fassung war das noch eine Kann-Regelung. Attributierung im Footer ist generell zulässig, in der Kombination <blockquote><footer></footer></blockquote> aber nicht.

            Wie gesagt: Käse. Es ist Käse, wenn man das Do and Don't so zusammenstückeln muss, und solche subtilen Änderungen in erlaubter und nicht erlaubter Semantik sind Tretminen.

            Ich würde aber angesichts der Weiterleitung des W3C an WHATWG die Beispiele bei WHATWG als currently better practice ansehen wollen (zu einem best mag mich ich nicht versteigen).

            Oh Mann. Sind wir Webentwickler oder Theologen, dass wir aus drölf Abschnitten der Heiligen Specschrift zusammenknobeln müssen, was richtig ist und was nicht? Theologen haben immerhin den Vorteil, dass ihre Heilige Schrift uralt ist und nicht mehr überarbeitet wird.

            Ich bleibe also dabei - dies {{Blockzitat|Autor=Martin Luther King|Werk=|I have a dream}} sollte als

            <figure class="bequelltes-zitat">
            <blockquote>I have a dream</blockquote>
            <figcaption>Martin Luther King</figcaption>
            </figure>
            

            gerendert werden. Und {{Blockzitat|Three Rings for the Elven-kings under the sky,<br> Seven for the Dwarf-lords in their halls of stone|Autor=J.R.R. Tolkien|Werk=The Lord of the Rings}} als

            <figure class="bequelltes-zitat">
            <blockquote>Three Rings for the Elven-kings under the sky,<br>
            Seven for the Dwarf-lords in their halls of stone</blockquote>
            <figcaption>J.R.R. Tolkien, <cite>The Lord of the Rings</cite></figcaption>
            </figure>
            

            Der Rest ist CSS-Tuning.

            Ein Markup, dass sich aber nur mit Hilfe einer Wiki-Extension erzeugen lässt. Ohne eine solche Extension muss man figure und figcaption als div-Suppe erzeugen 😟

            Rolf

            --
            sumpsi - posui - obstruxi
            1. @@Rolf B

              Irrtum. Ich habe natürlich nicht auf SO vertraut, sondern die Spec gegengelesen. Im Gegensatz zu Dir habe ich aber in die richtige Spec geschaut, und nicht in die, die sich selbst als superseded bezeichnet.

              Hab ich das nicht? Magst du vielleicht erklären, wie ich es geschafft haben soll, beide Specs miteinander zu vergleichen, ohne in die WHATWG-Spec geschaut zu haben?

              Was Du von WHATWG zitierst, sehe ich aber noch nicht als Widerspruch. Es besagt:

              • ein blockquote ist sectioning content (was ich eigentlich für merkwürdig halte)

              Nein, das besagt es nicht. Sectioning content ≠ sectioning root.

              Anderswo steht noch, wie vorhin zitiert:

              • der Autor gehört nicht ins <cite> Element, sondern das Werk.

              Auch da sagt die W3C-Spec was anderes: “The cite element represents a reference to a creative work. It must include the title of the work or the name of the author (person, people or organization) or …”

              Ich kann mich an eine Diskussion erinnen, wo’s darum ging, dass das sinnvoll so ist. Aber sinnvoll und WHATWG-Spec sind zwei Paar Schuhe.

              Korollar: Ein footer im Blockquote ist erlaubt, aber nicht mehr(!) zu dem Zweck, die Quelle zu benennen. In der W3C Fassung war das noch eine Kann-Regelung. Attributierung im Footer ist generell zulässig, in der Kombination <blockquote><footer></footer></blockquote> aber nicht.

              Anders gesagt: Ein footer im blockquote ist erlaubt. Ein footer dient u.a. dazu, die Quelle zu benennen. Außer wenn ein footer im blockquote ist.

              Das ist doch gequirlte Scheiße! Womit nicht deine Schlussfolgerung aus der WHATWG-Spec gemeint ist, sondern die WHATWG-Spec an sich.

              Wie gesagt: Käse. Es ist Käse, wenn man das Do and Don't so zusammenstückeln muss, und solche subtilen Änderungen in erlaubter und nicht erlaubter Semantik sind Tretminen.

              Was du „Tretminen“ nennst, nenne ich: Fehler in der Spec.

              😷 LLAP

              --
              „Ohne die Meinungsfreiheit würde man die Idioten nicht erkennen.“
              — @MvSommerdune
              1. Hallo Gunnar,

                nun gut, danke für die Klarstellungen.

                Aber was heißt das jetzt für uns? Wir können nicht die WHATWG Spec als gequirlte Scheiße bezeichnen und die W3C Spec als die einzige Wahrheit hochhalten. W3C verlinkt auf WHATWG als "aktuelle Spec".

                Derzeit ist es dem nu Validator des w3c egal ob cite im blockquote steht oder nicht. Aber das Ding nennt sich ja ein "ongoing experiment", ich will nicht ausschließen, dass cite im blockquote irgendwann als invalid html gekennzeichnet wird. Aber das ist dann ja schnell gefixt.

                Das CSS, das ich für die figure-Version erstellt hatte, bleibt gültig, wenn man es so aufbaut:

                <blockquote class="fancy-quote" 
                   cite="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">
                Custom properties (sometimes referred
                to as CSS <mark>variables</mark> or cascading variables) … You can
                define multiple fallback values when the given <mark>variable</mark>
                is not yet defined.
                <div class="attribution">
                MDN: <cite>Using CSS custom properties (variables)</cite><ref>(...)</ref>
                </div>
                </blockquote>
                

                Es muss leider div sein, weil <footer> kein im Wiki erlaubtes Tag ist und es auch keine Mediawiki-Syntax zum Generieren von lokalen Footern gibt. Also entweder div oder eine Extension schreiben.

                Eine passende Vorlagensyntax dazu kann man sich noch überlegen...

                Wie gefällt das Design jetzt? Klammern hatte ich mal gesetzt, aber wieder entfernt, weil die Attributierung selbst schon welche enthielt. Die Trennlinie ist nun blasser und niedriger.

                Rolf

                --
                sumpsi - posui - obstruxi
                1. Hallo Rolf,

                  Eine passende Vorlagensyntax dazu kann man sich noch überlegen...

                  done

                  Rolf

                  --
                  sumpsi - posui - obstruxi
                  1. Servus!

                    Hallo Rolf,

                    Eine passende Vorlagensyntax dazu kann man sich noch überlegen...

                    done

                    Vielen Dank!

                    Das sieht sehr gut aus! auch das SVG!

                    Herzliche Grüße

                    Matthias Scharwies

                    --
                    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
                    1. Hallo Matthias,

                      mein Dankeschön an Gunnar für die lehrreiche Verständnisdiskussion zur HTML Semantik und für den Tipp mit Google Font To SVG Path.

                      Was für mich noch nicht ganz erledigt ist, ist die rechtliche Frage. Darf man dieses Anführungszeichen einfach so aus dem Merienda Font holen? Ich habe in common.css gerade diesen Text eingebaut. Als Attributierung im Sinne der OFL müsste das hinreichen, glaube ich. Aber Glaube und Anwälte sind inkompatibel. Und wer hat den OFL-Autoren ins Gehirn geschispustet, als sie die Fontgröße für diese Seite festgelegt haben?!?!? fontsize 8pt ist schon frech.

                      .fancy-quote {
                      	margin: 0;
                      	padding: 1em 0 0 5em;
                      	width: calc(100% - 6em);
                      	/* Quote glyph extracted from Merienda font at https://fonts.google.com/specimen/Merienda,
                      	   using https://danmarshall.github.io/google-font-to-svg-path/ and a bit of manual tweaking 
                      	*/
                      	background: no-repeat 1em 1em / 3em 3em url("data:...");
                      }
                      

                      Rolf

                      --
                      sumpsi - posui - obstruxi
                2. @@Rolf B

                  <blockquote class="fancy-quote" 
                     cite="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">
                  Custom properties (sometimes referred
                  to as CSS <mark>variables</mark> or cascading variables) … You can
                  define multiple fallback values when the given <mark>variable</mark>
                  is not yet defined.
                  <div class="attribution">
                  MDN: <cite>Using CSS custom properties (variables)</cite><ref>(...)</ref>
                  </div>
                  </blockquote>
                  

                  Es muss leider div sein, weil <footer> kein im Wiki erlaubtes Tag ist und es auch keine Mediawiki-Syntax zum Generieren von lokalen Footern gibt.

                  Das Markup macht IMHO gar keinen Sinn. Im Gegensatz zu footer hat div keine Semantik. Der Inhalt des divs ist damit Bestandteil des Zitats – was er aber nicht sein soll.

                  Dann doch die Quellenangabe außerhalb von blockquote.


                  Wie gefällt das Design jetzt? […] Die Trennlinie ist nun blasser und niedriger.

                  Immer noch störend. Wozu an der Stelle eine Trennlinie?

                  😷 LLAP

                  --
                  „Ohne die Meinungsfreiheit würde man die Idioten nicht erkennen.“
                  — @MvSommerdune
                  1. Hallo Gunnar,

                    Dann doch die Quellenangabe außerhalb von blockquote.

                    Das würde eine figure bedeuten, um eine Klammer um blockquote und Attributierung zu schaffen?

                    In beiden Fällen stellt Mediawiki die gleiche Hürde: Dieses Markup ist mit Bordmitteln nicht generierbar, das ist nicht vorgesehen. Man muss eine Extension dafür erstellen. Und das will Matthias nicht - was ich verstehen kann, denn Extensions müssen gepflegt werden und brauchen jemanden, der sich mit Mediawiki-Extensions auskennt. Die „Alternative“ wäre, $wgRawHtml=true zu setzen, aber das darf man nur in redaktionell erstellten Wikis tun, denn damit sind auch <script> Elemente möglich. In einem offenen Wiki wie unserem wäre das unverantwortlich.

                    Welches Mediawiki-generierbare Markup würde sich noch anbieten? Kann man alternativ dem div eine role zuweisen? Ich hatte zuerst an contentInfo gedacht, aber das scheint auch nicht richtig.

                    (Trennlinie) Immer noch störend. Wozu an der Stelle eine Trennlinie?

                    Die Trennlinie ist Teil von Matthias Designvorschlag, und ich persönlich finde sie ebenfalls ganz schick. Gibt es noch andere Meinungen dazu?

                    Rolf

                    --
                    sumpsi - posui - obstruxi
                    1. Hallo,

                      (Trennlinie) Immer noch störend. Wozu an der Stelle eine Trennlinie?

                      Die Trennlinie ist Teil von Matthias Designvorschlag, und ich persönlich finde sie ebenfalls ganz schick. Gibt es noch andere Meinungen dazu?

                      die Trennlinie an sich finde ich auch in Ordnung, aber nicht so prominent, so dick und fett wie im ersten Vorschlag von Matthias. Jetzt ist sie vom Farbton her etwas dezenter, und den Gradienten finde ich auch schick.

                      Aber für meinen Geschmack durfte die Linie noch etwas dünner sein.

                      Live long and pros healthy,
                       Martin

                      --
                      Klein φ macht auch Mist.
                    2. @@Rolf B

                      Dann doch die Quellenangabe außerhalb von blockquote.

                      Das würde eine figure bedeuten, um eine Klammer um blockquote und Attributierung zu schaffen?

                      Nicht unbedingt. Ich bin mir auch gar nicht sicher, ob figure wirklich angebracht ist.

                      In beiden Fällen stellt Mediawiki die gleiche Hürde: Dieses Markup ist mit Bordmitteln nicht generierbar, das ist nicht vorgesehen.

                      Dann so?

                      <div class="quote" lang="en">
                        <blockquote>
                          I have a dream.
                        </blockquote>
                        <p>
                          &mdash; Martin Luther King
                        </p>
                      </div>
                      

                      😷 LLAP

                      --
                      „Ohne die Meinungsfreiheit würde man die Idioten nicht erkennen.“
                      — @MvSommerdune
                      1. Hallo Gunnar,

                        guter Hinweis: Sprachcode.

                        Ich habe die Vorlage um einen Parameter "sprache" (alternativ: lang) erweitert, sowie um einen Schalter "strich" mit den Werten "oben" und "links". Default ist "links".

                        Der mdash a.k.a. Geviertstrich ist ganz schön breit - die deutsche Wikipedia verwendet den Halbgeviertstrich in ihrer "Zitat" Vorlage. Allerdings wollte ich deren Template nicht kopieren, es ist viel umfangreicher, tut für unsere Zwecke viel zu viel und delegiert auch einiges an Arbeit auf weitere Vorlagen. Ich habe mich aber an deren Zitat-Stil orientiert, was die Einrückung der "strich=links" Version angeht.

                        Rolf

                        --
                        sumpsi - posui - obstruxi
                        1. @@Rolf B

                          guter Hinweis: Sprachcode.

                          Der war nun nicht neu.

                          😷 LLAP

                          --
                          „Ohne die Meinungsfreiheit würde man die Idioten nicht erkennen.“
                          — @MvSommerdune
                    3. (Trennlinie) Immer noch störend. Wozu an der Stelle eine Trennlinie?

                      Die Trennlinie ist Teil von Matthias Designvorschlag, und ich persönlich finde sie ebenfalls ganz schick. Gibt es noch andere Meinungen dazu?

                      Ich empfinde sie auch eher als störend.

                      1. Hallo 1unitedpower,

                        na meinetwegen. Es gibt jetzt Stilvarianten 😂

                        Rolf

                        --
                        sumpsi - posui - obstruxi
                    4. @@Rolf B

                      (Trennlinie) Immer noch störend. Wozu an der Stelle eine Trennlinie?

                      Die Trennlinie ist Teil von Matthias Designvorschlag, und ich persönlich finde sie ebenfalls ganz schick. Gibt es noch andere Meinungen dazu?

                      Es bei Design nicht um „schick“. Es geht um „funktioniert“.

                      Die Frage ist: Hilft die Trennlinie den Lesern dabei, den Inhalt bestmöglich wahrzunehmen? IMHO tut sie das nicht. Im Gegenteil: sie zerstört den Zusammenhang zwischen Zitat und Autor.

                      Ohne Trennlinie sähe es so aus:

                      Screenshot

                      Ich hab da noch den Autor in kleinerer Schriftgröße gesetzt und den Abstand nach unten vergrößert.

                      So wird Zitat und Autor als zusammengehörig wahrgenommen.

                      😷 LLAP

                      PS: Funfact: Beim Tagesspiegel haben wir eine Linie zwischen Zitat und Autor. Allerdings hebt sich da der Block durch andere Gestaltungsmerkmale vom Text darüber und darunter ab.

                      --
                      „Ohne die Meinungsfreiheit würde man die Idioten nicht erkennen.“
                      — @MvSommerdune
                      1. Hallo Gunnar,

                        den kleineren Font und den Extramargin habe ich umgesetzt. Das Wiki hat (bei mir) einen Defaultfont von 17.6px (offenbar steht irgendwo eine root-Fontsize von 110%) und das reduziere ich mit font-size: 86% auf 15px. Kleiner ist nicht gut. Passt das?

                        Das Layout hat jetzt zwei Schalter mit je drei Ausprägungen: stil=balken oder stil=symbol für einen Balken links oder das Quote-Symbol. Kann man auch weglassen, dann gibt's nichts. Und dann herkunft=trennlinie und herkunft=spiegelstrich, um Trennlinie oder Spiegelstrich darzustellen. Kann man weglassen, dann gibt's nichts.

                        Vor dem Anschauen ggf. den Cache leeren (oder Strg+F5 drücken).

                        Ergibt dreimaldrei = 9 Layoutvarianten 😂

                        Und morgen beim Stammtisch können wir dann festlegen, ob eine dieser Varianten für's Wiki vorgeschrieben ist, oder ob man es offen lassen möchte.

                        Quote und Spiegelstrich gefällt mir im Moment am besten. Ja, doch.

                        Rolf

                        --
                        sumpsi - posui - obstruxi