Bert El: <sup> bzw. <sub> an einen css Selector im Stylesheet anhängen?

Hallo,

Habe ein ziemlich großes Datenset, welches in HTML mit class Attributen versehen und dann über entsprechende Selektoren im Stylesheet angesteuert wird.

...daher: gibt es ein entsprechendes Äquivalent für <sup>Ich bin up</sup> respektive <sub>Ich bin down</sub> ?

Daher

/* DUMMY CODE */

.hochgestellt {
 display: sup;
}

Danke! Bert El.

  1. Hallo

    Hallo,

    Habe ein ziemlich großes Datenset, welches in HTML mit class Attributen versehen und dann über entsprechende Selektoren im Stylesheet angesteuert wird.

    ...daher: gibt es ein entsprechendes Äquivalent für <sup>Ich bin up</sup> respektive <sub>Ich bin down</sub> ?

    Nicht, dass ich wüsste. Man könnte zwar die Positionierung irgendeines Elements mit dem Text und dessen Schriftgröße per CSS beeinflussen, aber dann kann man auch die für genau diesen Zweck vorgesehenen HTML-Elemente benutzen. Die Elemente sub und sup kann man natürlich ebenso per CSS formatieren, aber selbst ohne CSS markieren sie eine Zeichenkette in einem Dokument als tief- oder hochgestellt.

    Eine dedizierte, zu deinem Wunsch passende CSS-Eigenschaft gibt es meines Wissens nach jedenfalls nicht.

    Tschö, Auge

    --
    „Habe ich mir das nur eingebildet, oder kann der kleine Hund wirklich sprechen?“ fragte Schnapper. „Er behauptet, nicht dazu imstande zu sein“ erwiderte Victor. Schnapper zögerte (…) „Nun …“ sagte er schließlich, „ich schätze, er muss es am besten wissen.“ Terry Prattchett, Voll im Bilde
  2. Servus!

    ...daher: gibt es ein entsprechendes Äquivalent für <sup>Ich bin up</sup> respektive <sub>Ich bin down</sub> ?

    Daher

    /* DUMMY CODE */
    
    .hochgestellt {
     display: sup;
    }
    

    @Auge hat recht - ich würde auch sup-Elemente verwenden.

    Ansonsten: Hilft evtl: CSS/Tutorials/Typografie/Textausrichtung#vertical-align

    Herzliche Grüße

    Matthias Scharwies

    --
    Ich habe heute rausgefunden, dass in das Pizzafach meines Rucksacks auch ein Laptop passt!
  3. Hallo Bert El,

    suchst Du vielleicht vertical-align:sub und vertical-align:sup zusammen mit font-size:smaller?

    Zumindest steht das im Chrome-Stylesheet für sub und sup, sagen mir die Entwicklertools.

    Den Vorteil von <span class="hochgestellt"></span> gegenüber <sup></sup> sehe ich allerdings auch nicht, es sei denn, du wendest deine hochgestellt-Klasse auf drölf verschiedene Elementtypen an…

    Die Erfahrung, die ich mit vertical-align:sub/sup gemacht habe, ist allerdings, dass sich damit die Zeilenhöhe verändert und es zu unerwünschten Verschiebungen kommen kann. Eine Alternative ist die Verwendung von OpenType-Features, wie ich das hier mit Gunnar diskutiert habe, oder die Verwendung von

    .hochgestellt {
       font-size: smaller;
       position: relative;
       top: -0.2em;     /* Wert passend einstellen */
    }
    

    bzw.

    sup {
       vertical-align: inherit;
       font-size: smaller;
       position: relative;
       top: -0.2em;            /* Wert passend einstellen */
    }
    

    Wenn Du sup überschreibst, ist font-size:smaller eigentlich schon browserseitig drin, aber sicher ist sicher...

    Rolf

    --
    sumpsi - posui - obstruxi
  4. @@Bert El

    ...daher: gibt es ein entsprechendes Äquivalent für <sup>Ich bin up</sup> respektive <sub>Ich bin down</sub> ?

    /* DUMMY CODE */
    
    .hochgestellt {
     display: sup;
    }
    

    Ja. Fast so. Nur etwas anders. Mit OpenType-Features:

    .hochgestellt {
      font-variant-position: super;
    }
    

    Bzw., da das in Edge noch nicht funktioniert:

    .hochgestellt {
      font-feature-settings: 'sups';
    }
    

    Entsprechend:

    .tiefgestellt {
      font-variant-position: sub;
      font-feature-settings: 'subs';  
    }
    

    Siehe Beispiel.

    Das setzt natürlich die Verwendung einer OpenType-Schrift voraus, aber das sollte 2023 kein Problem sein.

    S.a. diesen Subthread

    🖖 Живіть довго і процвітайте

    --
    „Ukončete, prosím, výstup a nástup, dveře se zavírají.“
    1. @@Gunnar Bittersmann

      Das setzt natürlich die Verwendung einer OpenType-Schrift voraus

      Um Missverständnisse auszuschließen: Das heißt bei Webfonts nicht, dass diese als OTF-Dateien zu verwenden seien, sondern schon komprimiert als WOFF2.

      🖖 Живіть довго і процвітайте

      --
      „Ukončete, prosím, výstup a nástup, dveře se zavírají.“