Nur in CSS hochgestellt?

Wie kann ich hochgestellt werden, nur in CSS?

Ich habe ein Stylesheet, in dem ich die externen Links mit einem hochgestellten Zeichen markiere, aber es fällt mir schwer, das Zeichen richtig auszurichten.

Was ich aktuell habe, sieht folgendermaßen aus:

a.external:after {
  font-size: 50%;
  vertical-align: top;
  content: "+";
}

aber es funktioniert nicht.

Natürlich würde ich den <sup>-tag nur verwenden, wenn contentHTML zulässig wäre ...

Sie können hochgestellt mit vertical-align: super(plus einer begleitenden font-sizeReduzierung).

Allerdings sollten Sie auf die anderen Antworten lesen hier, vor allem diejenigen , die durch paulmurray und cletus , für nützliche Informationen.

Ehrlich gesagt sehe ich keinen Sinn darin, hochgestellt / tiefgestellt nur in CSS zu arbeiten. Es gibt kein praktisches CSS-Attribut dafür, nur eine Reihe von selbst erstellten Implementierungen, darunter:

.superscript { position: relative; top: -0.5em; font-size: 80%; }

oder mit vertikaler Ausrichtung oder ich bin sicher, andere Möglichkeiten. Die Sache wird langsam kompliziert:

• Hochgestellter CSS-Abstand auf der Zeilenhöhe;
• Hüten Sie sich vor CSS für Hochgestellte / Subcript auf , warum Sie wohl nicht sollte Stil Exponent / Index mit CSS überhaupt ;

Der zweite Punkt ist hervorzuheben. In der Regel ist hochgestellt / tiefgestellt kein Styling-Problem, sondern ein Hinweis auf die Bedeutung.

Randnotiz: Es lohnt sich, diese Liste von Entitäten für gebräuchliche mathematische hochgestellte und tiefgestellte Ausdrücke zu erwähnen , obwohl sich diese Frage nicht darauf bezieht.

Die Sub / Sup-Tags sind in HTML und XHTML. Ich würde nur diese verwenden.

Wie für den Rest Ihres CSS werden die Attribute: after pseudo-element und content nicht allgemein unterstützt. Wenn Sie dies wirklich nicht manuell in den HTML-Code einfügen möchten, ist eine Javascript-basierte Lösung Ihrer Meinung nach die nächstbeste Wahl. Mit jQuery ist dies so einfach wie:

$(function() {
  $("a.external").append("<sup>+</sup>");
};

Die CSS-Dokumentation enthält branchenübliches CSS-Äquivalent für alle HTML-Konstrukte. Das heißt: Die meisten Web - Browser in diesen Tagen nicht explizit behandeln SUB, SUP, B, Iund so weiter - sie ( ein bisschen sorta) in umgewandelt SPANElemente mit entsprechenden CSS - Eigenschaften und die Rendering - Engine befasst sich nur mit diesem.

Die Seite ist Anhang D. Standard-Stylesheet für HTML 4

Die Bits, die Sie wollen, sind:

small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }

Ich habe an einer Seite mit dem Ziel gearbeitet, klar lesbaren Text zu haben, wobei hochgestellte Elemente den oberen und unteren Rand der Zeile NICHT verändern - mit den folgenden Beobachtungen:

Wenn Sie line-height: 1.5embeispielsweise einen Haupttext für Ihren Haupttext haben , sollten Sie die Zeilenhöhe Ihres hochgestellten Textes verringern, damit er korrekt angezeigt wird. Ich habe benutzt line-height: 0.5em.

Funktioniert vertical-align: superauch in den meisten Browsern gut, aber in IE8 wird der Rest dieser Zeile nach unten gedrückt, wenn ein hochgestelltes Element vorhanden ist. Also habe ich stattdessen vertical-align: baselinezusammen mit einem Negativ verwendet topund position: relativeden gleichen Effekt erzielt, der in allen Browsern besser zu funktionieren scheint.

Also, um zu den "hausgemachten Implementierungen" hinzuzufügen:

.superscript {
    font-size: .83em;
    line-height: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}

http://htmldog.com/articles/superscript/ Im Wesentlichen:

position: relative;
bottom: 0.5em;
font-size: 0.8em;

Funktioniert in der Praxis gut, soweit ich das beurteilen kann.

Folgendes stammt aus der internen Datei html.css von Mozilla Firefox:

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

In Ihrem Fall wäre es also etwas wie:

.superscript {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

Dies ist eine weitere saubere Lösung:

sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;} /* use em becasue they adapt to parent font-size */
sup {top: -0.6em;} /* use em becasue they adapt to parent font-size */

Auf diese Weise können Sie weiterhin Sup / Sub- Tags verwenden, aber Sie haben ihr idiöses Verhalten korrigiert, um die Höhe der Absatzzeilen immer zu erhöhen .

Jetzt können Sie also Folgendes tun:

  <p>This is a line of text.</p>
  <p>This is a line of text, <sub>with sub text.</sub></p>
  <p>This is a line of text, <sup>with sup text.</sup></p>
  <p>This is a line of text.</p>

Und Ihre Absatzzeilenhöhe sollte nicht durcheinander geraten.

Getestet auf IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9

Ich habe mit a getestet p {line-height: 1.3;}(das ist eine gute Zeilenhöhe, es sei denn, Sie möchten, dass Ihre Linien zu eng bleiben) und es funktioniert immer noch, da "-0.6em" eine so kleine Menge ist, dass auch bei dieser Zeilenhöhe der Unter- / Untertext passt und nicht über einander gehen.

Ich habe ein Detail vergessen, das relevant sein könnte. Ich verwende immer DOCTYPE in der ersten Zeile meiner Seite (insbesondere verwende ich HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). Daher weiß ich nicht, ob diese Lösung gut funktioniert, wenn sich der Browser aufgrund eines Mangels an DOCTYPE oder eines DOCTYPE, der den Standard- / Fast-Standard-Modus nicht auslöst, im Quirk-Modus (oder nicht im Standardmodus) befindet.

Wenn Sie die Schriftgröße ändern, möchten Sie möglicherweise die Verkleinerung mit dieser Regel beenden:

sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}

Ich bin nicht sicher, ob dies zusammenhängt, aber ich habe mein Problem mit ²HTML-Entitäten gelöst , da ich keine anderen HTML-Tags innerhalb eines <label>Tags hinzufügen konnte . Die Idee war also, ASCII-Codes anstelle von CSS- oder HTML-Tags zu verwenden.

Überprüfen Sie: http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

wenn es so aussieht, als ob Sie "vertikal ausrichten: Text oben" möchten

Die CSS-Eigenschaft font-variant-positionwird derzeit geprüft und ist möglicherweise die Antwort auf diese Frage. Ab Anfang 2017 wird dies jedoch nur von Firefox unterstützt.

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

Siehe MDN .

Verwandte oder möglicherweise nicht verwandte, die Verwendung von hochgestelltem Text als HTML-Element oder als span + css im Text kann zu Problemen bei der Lokalisierung führen - in Lokalisierungsprogrammen.

Zum Beispiel sagen wir mal „3 ^rd Party - Software“:

3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software

Wie können Übersetzer "rd" übersetzen? Sie können es für mehrere kyrrilische Sprachen leer lassen, aber was ist mit anderen exotischen oder RTL-Sprachen?

In diesem Fall ist es besser, hochgestellte Zeichen zu vermeiden und einen vollständigen Wortlaut wie "Software von Drittanbietern" zu verwenden. Oder, wie hier in anderen Kommentaren erwähnt, Pluszeichen in hochgestelltem Text über jQuery hinzufügen.

.superscript {
  position: relative;
  top: 5px;
  font-size: 90%;
  vertical-align: super;
}

Hier ist die genaue Art und Weise, wie sup verwendet:

.superscript{
    vertical-align:super;
    font-size:smaller;
}

Fand dies über Google Chrome Inspect Element.