Rolf B: Zitate im SELF-Wiki auszeichnen

Beitrag lesen

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