Indeks górny tylko w CSS?

Jak mogę zrobić indeks górny, tylko w CSS?

Mam arkusz stylów, w którym zaznaczam łącza zewnętrzne za pomocą znaku indeksu górnego, ale trudno mi poprawnie wyrównać znak.

To, co mam obecnie, wygląda następująco:

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

ale to nie działa.

Oczywiście <sup>użyłbym -tag, tylko jeśli contentpozwoliłby na HTML ...

Możesz zrobić indeks górny za pomocą vertical-align: super(plus towarzyszące mu font-sizezmniejszenie).

Pamiętaj jednak, aby przeczytać inne odpowiedzi tutaj, szczególnie te autorstwa paulmurray i cletus , aby uzyskać przydatne informacje.

Szczerze mówiąc, nie widzę sensu w tworzeniu indeksu górnego / dolnego tylko w CSS. Nie ma dla niego przydatnego atrybutu CSS, tylko kilka własnych wdrożeń, w tym:

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

lub używając wyrównania pionowego lub jestem pewien, że inne sposoby. Rzecz w tym, że zaczyna się komplikować:

• Odstępy w indeksie górnym CSS na wysokości linii;
• Strzeż CSS dla Superscript / Subcript dlaczego ty zapewne nie powinno styl górny / dolny z CSS w ogóle ;

Drugi punkt jest wart podkreślenia. Zazwyczaj indeks górny / indeks dolny nie jest tak naprawdę kwestią stylu, ale wskazuje na znaczenie.

Uwaga dodatkowa: Warto wspomnieć o tej liście encji dla typowych matematycznych wyrażeń w indeksie górnym i dolnym, nawet jeśli to pytanie nie odnosi się do tego.

Tagi sub / sup są w HTML i XHTML. Po prostu bym ich użył.

Jeśli chodzi o resztę twojego CSS, atrybuty: after pseudoelement i content nie są szeroko obsługiwane. Jeśli naprawdę nie chcesz wstawiać tego ręcznie do kodu HTML, myślę, że najlepszym rozwiązaniem będzie rozwiązanie oparte na JavaScript. Z jQuery jest to tak proste, jak:

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

Dokumentacja CSS zawiera standardowy w branży odpowiednik CSS dla wszystkich konstrukcji HTML. To znaczy: większość przeglądarek internetowych w dzisiejszych czasach nie jawnie obsłużyć SUB, SUP, B, Ii tak dalej - oni (troche sorta) są przekształcane na SPANelementy o odpowiednich właściwościach CSS, a silnik renderowania zajmuje się tylko tym.

Strona jest dodatkiem D. Domyślny arkusz stylów dla HTML 4

Bity, które chcesz to:

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

Pracowałem nad stroną w celu uzyskania czytelnego tekstu, z elementami górnymi NIE zmieniającymi górnego i dolnego marginesu linii - z następującymi spostrzeżeniami:

Na przykład w przypadku tekstu głównego line-height: 1.5emnależy zmniejszyć wysokość wiersza tekstu indeksu górnego, aby wyświetlał się poprawnie. Kiedyś line-height: 0.5em.

Również vertical-align: superdziała dobrze w większości przeglądarek, ale w IE8 kiedy masz Element górny prezent, reszta tej linii jest popychany w dół. Zamiast tego użyłem vertical-align: baselinerazem z negatywem topi position: relativedo osiągnięcia tego samego efektu, który wydaje się działać lepiej w różnych przeglądarkach.

Tak więc, aby dodać do „domowych wdrożeń”:

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

http://htmldog.com/articles/superscript/ Zasadniczo:

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

O ile wiem, działa dobrze w praktyce.

Poniższy fragment pochodzi z wewnętrznego pliku html.css przeglądarki Mozilla Firefox:

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

W twoim przypadku byłoby to coś takiego:

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

To kolejne czyste rozwiązanie:

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

W ten sposób nadal możesz używać znaczników sup / sub , ale naprawiłeś ich idiotyczne zachowanie, aby zawsze przekręcać wysokość linii akapitu .

Teraz możesz zrobić:

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

A wysokość linii akapitu nie powinna się zepsuć.

Testowane na IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9

Przetestowałem przy użyciu p {line-height: 1.3;}(to jest dobra wysokość linii, chyba że chcesz, aby twoje linie trzymały się zbyt blisko) i nadal działa, ponieważ „-0,6 em” jest tak małą ilością, że również przy tej wysokości linii zmieści się podtekst / pod tekst i nie przekraczajcie się.

Zapomniałem o szczegółach, które mogą być istotne. Zawsze używam DOCTYPE w pierwszym wierszu mojej strony (konkretnie używam HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). Nie wiem więc, czy to rozwiązanie działa dobrze, gdy przeglądarka działa w trybie quirkmode (lub w trybie innym niż standardowy) z powodu braku DOCTYPE lub DOCTYPE, który nie uruchamia trybu Standard / Prawie Standard.

Jeśli zmieniasz rozmiar czcionki, możesz przestać zmniejszać rozmiary za pomocą tej reguły:

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

Nie jestem pewien, czy jest to powiązane, ale rozwiązałem problem z ²jednostkami HTML, ponieważ nie byłem w stanie dodać żadnych innych tagów HTML wewnątrz <label>tagu. Pomysł polegał na użyciu kodów ASCII zamiast znaczników css lub HTML.

Sprawdź: http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

jeśli wygląda na to, że chcesz „wyrównać w pionie: tekst do góry”

Właściwość CSS font-variant-positionjest rozważana i może ostatecznie być odpowiedzią na to pytanie. Jednak na początku 2017 r. Obsługuje go tylko Firefox.

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

Zobacz MDN .

Powiązane lub może nie powiązane, użycie indeksu górnego jako elementu HTML lub zakresu + css w tekście może powodować problemy z lokalizacją - w programach lokalizacyjnych.

Na przykład załóżmy, że „3 ^rd oprogramowania Party”:

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

Jak tłumacze mogą tłumaczyć „rd”? Mogą pozostawić puste dla kilku języków cyrylowych, ale co z innymi językami egzotycznymi lub RTL?

W takim przypadku lepiej unikać stosowania indeksów górnych i stosować pełne sformułowanie, takie jak „oprogramowanie innych firm”. Lub, jak wspomniano tutaj w innych komentarzach, dodając znaki plus w indeksie górnym za pomocą jQuery.

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

Oto dokładny sposób, w jaki używa sup:

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

Znaleziono to za pośrednictwem elementu Google Chrome Inspect.