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

[Bert El]

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.

[Auge]

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

[Matthias Scharwies]

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

[Rolf B]

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

[Gunnar Bittersmann]

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

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

[Gunnar Bittersmann]

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

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