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 content
pozwoliłby na HTML ...
content
zezwolono na HTML, ucierpiałby na tym problem.Odpowiedzi:
Możesz zrobić indeks górny za pomocą
vertical-align: super
(plus towarzyszące mufont-size
zmniejszenie).Pamiętaj jednak, aby przeczytać inne odpowiedzi tutaj, szczególnie te autorstwa paulmurray i cletus , aby uzyskać przydatne informacje.
źródło
font-size
należy go zmniejszyć, aby uzyskać rzeczywisty efekt indeksu górnego.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:
lub używając wyrównania pionowego lub jestem pewien, że inne sposoby. Rzecz w tym, że zaczyna się komplikować:
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:
źródło
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
,I
i tak dalej - oni (troche sorta) są przekształcane naSPAN
elementy 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:
źródło
line-height
. IMHO jedynym sposobem, aby nie spieprzyć,line-height
jest użycieposition:relative
zgodnie z sugestią Cletus: stackoverflow.com/a/501689/260080Pracował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.5em
należy zmniejszyć wysokość wiersza tekstu indeksu górnego, aby wyświetlał się poprawnie. Kiedyśline-height: 0.5em
.Również
vertical-align: super
dział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łemvertical-align: baseline
razem z negatywemtop
iposition: relative
do 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ń”:
źródło
http://htmldog.com/articles/superscript/ Zasadniczo:
O ile wiem, działa dobrze w praktyce.
źródło
Poniższy fragment pochodzi z wewnętrznego pliku html.css przeglądarki Mozilla Firefox:
W twoim przypadku byłoby to coś takiego:
źródło
To kolejne czyste rozwiązanie:
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ć:
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.źródło
Jeśli zmieniasz rozmiar czcionki, możesz przestać zmniejszać rozmiary za pomocą tej reguły:
źródło
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.źródło
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”
źródło
Właściwość CSS
font-variant-position
jest rozważana i może ostatecznie być odpowiedzią na to pytanie. Jednak na początku 2017 r. Obsługuje go tylko Firefox.Zobacz MDN .
źródło
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”:
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.
źródło
źródło
Oto dokładny sposób, w jaki używa sup:
Znaleziono to za pośrednictwem elementu Google Chrome Inspect.
źródło