Znacznik HTML <sup /> wpływający na wysokość wiersza, jak sprawić, by był spójny?

133

Jeśli mam <sup>znacznik w znaczniku wieloliniowym <p>, wiersz z indeksem górnym ma większy odstęp między wierszami nad nim niż inne wiersze, niezależnie od wysokości linii, którą umieściłem w <p>.

Edytuj dla wyjaśnienia : nie mam na myśli, że mam wiele <p>s, z których każdy jest w jednym wierszu. Mam singiel <p>z wystarczającą zawartością, aby spowodować zawijanie w wielu wierszach. Gdzieś (gdziekolwiek) w tekście może znajdować się <sup>lub <sub>. Wpływa to na wysokość linii dla tej linii, dodając dodatkowe odstępy powyżej / poniżej. Jeśli ustawię większą wysokość linii, <p>nie ma to znaczenia dla problemu. Wysokość linii jest zwiększona, ale dodatkowe odstępy pozostają.

Jak mogę to uczynić spójnym - tj. Wszystkie linie mają takie same odstępy, niezależnie od tego, czy zawierają znak, <sup>czy nie?

Twoje rozwiązania muszą działać w różnych przeglądarkach (IE 6+, FF, safari, opera, chrome)

Andrew Bullock
źródło

Odpowiedzi:

174

line-height to naprawia, ale być może będziesz musiał zrobić to dość duże: w moich ustawieniach muszę zwiększyć wysokość linii do około 1,8, zanim <sup>przestanie to przeszkadzać, ale będzie się to różnić w zależności od czcionki.

Jednym z możliwych sposobów uzyskania spójnych wysokości linii jest ustawienie własnego stylu indeksu górnego zamiast domyślnego vertical-align: super. Jeśli topgo użyjesz , nie doda niczego do pola liniowego, ale może być konieczne dalsze zmniejszenie rozmiaru czcionki, aby pasowała:

sup { vertical-align: top; font-size: 0.6em; }

Innym hackem, którego możesz spróbować, jest użycie pozycjonowania, aby przesunąć go nieco w górę bez wpływu na linię:

sup { vertical-align: top; position: relative; top: -0.5em; }

Oczywiście stwarza to ryzyko uderzenia w powyższą linię, jeśli nie masz wystarczającej wysokości linii.

bobince
źródło
1
Vertical-Align naprawił to, dzięki. Nawet ogromna wysokość linii 300% + nie naprawia tego w IE8, Chrome 3 lub FF 3.5. Nadal mam 1-2 piksele różnicy.
Andrew Bullock
Jak wspomniano, to nie zawsze działa, jeśli wysokość linii jest zbyt mała.
Ric,
5
@simPod: Ta sama sytuacja vertical-align: bottom(chociaż to nie daje ci aż tyle top), a potem position:relative;z pozytywem top.
bobince
właściwie wolałbym {vertical-align: super}, ponieważ zapobiega to niektórym błędom wyświetlania z wysokością linii w IE8, o ile pamiętam. Starałbym się nie używać często pozycjonowania, jeśli istnieją lepsze alternatywy. Nieostrożne pozycjonowanie na górze może skutkować kaskadowymi problemami w dalszej części projektu.
Wszystkie bity równe
91
sup {
    line-height: 0;

    /* The following rules (or similar) likely come from browser 
     * style and are not needed
     */
    font-size: 0.83em;
    vertical-align: super;
}

Sztuczka polega na ustawieniu <sup>wysokości linii na 0. @Scott powiedział, że używa normalnego, ale to nie zawsze działa.

Oznacza to, że nie musisz zmieniać wysokości wiersza otaczającego tekstu, aby pomieścić tekst z indeksem górnym. Przetestowałem to w IE7 + i innych głównych przeglądarkach.

Ric
źródło
2
+1. Jak wspomniano, zapobiega to konfliktom z innymi line-heightatrybutami. Oczywiście nadal może powodować przecięcia z poprzednią linią, jeśli ogólna line-heightwartość jest oczywiście mała.
Chris Krycho
fantastyczne rozwiązanie sprawia, że ​​chrom już się nie zachowuje! Najprostsza jak dotąd odpowiedź.
Aktau
Właśnie sobie uświadomiłem, że wpłynie to na inne niż domyślne wysokości wierszy otaczającego tekstu. Użyj line-height: 100%w tym przypadku.
Matthias Hauert
To działa doskonale. Dodatkowo, możliwe wartości dla line-heightI to 0, 1, 1em i 100%. Wszystkie z pewnością działają w przeglądarce Chrome i Firefox.
ClarkeyBoy
Wolę również tę odpowiedź w moim przypadku użycia: Ta odpowiedź działa w wiadomościach e-mail w Gmailu, zaakceptowana odpowiedź nie. stackoverflow.com/questions/21118072/…
Mshnik
8

Miałem ten sam problem i żadna z podanych odpowiedzi nie zadziałała. Ale znalazłem zobowiązanie git z poprawką, która działała dla mnie:

sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}
PiTheNumber
źródło
3

zachowaj spokój:

sup { vertical-align: text-top; }

[ rozmiar czcionki zależny od indywidualnego kroju czcionki ]

Milingu Kilu
źródło
2
sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}
Anup Puri
źródło
3
Podaj wyjaśnienie wraz z kodem, aby OP mógł się z niego uczyć.
EBH
2

Wolę rozwiązanie sugerowane tutaj , czego przykładem jest ten jsfiddle :

CSS:

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.2em;
}

sub {
  top: 0.2em;
}

HTML:

<span>The following equation is perhaps the most well known of all: </span><span id="box">E<sub>a</sub> = mc<sup>2</sup></span><span>.  And it gives an opportunity to try out a superscript and even throw in a superfluous subscript!  I'm sure that Einstein would be pleased.</span>.

Piękno tego rozwiązania polega na tym, że możesz dostosować pionowe położenie indeksu górnego i dolnego, aby uniknąć kolizji z linią powyżej lub poniżej ... w powyższym, po prostu zwiększ lub zmniejsz, 0.2emaby dopasować do swoich wymagań.

drmrbrewer
źródło
1

Wolę używać lengthna wyrównaniu w pionie. Spowoduje to wyrównanie linii bazowej elementu na danej długości powyżej linii bazowej elementu nadrzędnego.

sup {
   font-size: .83em;
   vertical-align: 0.25em;
   line-height: 0;
}
Dallas
źródło
1

Powód, dla którego <sup>znacznik wpływa na odstępy między dwoma wierszami, ma związek z wieloma czynnikami. Czynnikami są: wysokość wiersza, rozmiar indeksu górnego w stosunku do zwykłej czcionki, wysokość wiersza indeksu górnego i wreszcie, co jest dolnym indeksem górnym wyrównane z ... Jeśli ustawisz ... wysokość wiersza zwykłego tekstu, aby znalazł się w „pasmach tunelu” (tak to nazywam) o 135%, a zwykły tekst (100%) zostanie wypełniony białą o 35% więcej bieli. W przypadku akapitu wygląda to tak:

 p
    {
            line-height: 135%;
    }

Jeśli następnie nie zaznaczysz indeksu górnego na biało ... (tj. Utrzymasz wysokość linii na 0), indeks górny ma tylko szerokość własnego tekstu ... jeśli następnie poprosisz indeks górny, aby był procentem zwykłej czcionki przykład 70%) i wyrównujesz go ze środkiem zwykłego tekstu (tekst pośrodku), możesz wyeliminować problem i uzyskać indeks górny, który wygląda jak indeks górny. Oto ona:

sup
{
    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;
}
n-ty
źródło
0

Aby wszystkie wiersze były wyższe i wyglądały tak samo, jak wiersz z indeksem górnym, zdefiniuj większy line-heightdla całego akapitu

<p style='line-height:150%'>

lub jakakolwiek wartość daje pożądany efekt.

Może to wyglądać dziwnie, ale tak właśnie opisałeś swoje wymagania.

EDYCJA: Aby wszystkie wiersze wyglądały tak samo, gdy tylko jeden potrzebuje więcej odstępu w pionie niż inne , WSZYSTKIE wiersze w akapicie będą musiały być wyższe.

Jak powiedziałem, może to nie być atrakcyjne rozwiązanie. Może coś można zrobić o rozpiętości co tylko tekst z Sub / SuperScript mniejszy , poza tym nie wierzę, co chcesz może zostać osiągnięty. Ale chciałbym zobaczyć rozwiązanie kogoś innego.

EDIT2: Nawiasem mówiąc, próbowałem małego pliku html zawierającego

<html>
<head>
<title>line-height</title>
<style>
p {
    line-height : 1.5em;
    width : 25em;
}
</style>
</head>
<body>
<p>Mary had a little lamb, its fleece<sup>1</sup> was white as snow, 
and everywhere that Mary went, the lamb<sub>2</sub> was sure to go.
</p>
</body>
</html>

Wszystkie linie mają tę samą wysokość w FF3.0.14 i Konquerorze (nie mogę mówić o innych przeglądarkach)

pavium
źródło
1
Powiedziałem w pytaniu, że to nie rozwiązuje problemu. Dodałem wyjaśnienie na wypadek, gdybyś źle zrozumiał
Andrew Bullock,
tak, rozumiem, że jeśli potrzebuję więcej miejsca na jedną linię, dla spójności muszę dodać więcej miejsca do innych, to oczywiste. Mówię o tym, że wysokość linii tego nie naprawia, to zwiększa przestrzeń, tak, ale wciąż jest dodatkowe miejsce z sup
Andrew Bullock,
Być może jest różnica między przeglądarkami - w końcu odpowiedź, którą zaakceptowałeś, zaczyna się „wysokość linii naprawia to”, ale nie wiemy, jakiej przeglądarki używał Bobince.
pavium
0

Używałem line-height: normal dla indeksu górnego, który działa dobrze dla mnie w Safari, Chrome i Firefox, ale nie jestem pewien co do IE.

Scott Chandler
źródło
0

Wykorzystaj to szczególnie w biuletynie -

<sup style="font-size:9px; line-height:8px;">&reg;</sup>
HADI
źródło
0

Podoba mi się rozwiązanie Milingu Kilu, ale w tym samym duchu, który wolę

sup { vertical-align:top; line-height:100%; }
Bigmat
źródło
0

& sup1, & sup2 itd. mogą załatwić sprawę. to sztuczka HTML do indeksu górnego

Rizzoli
źródło
0

Odpowiedź z tego miejsca działa zarówno w phantomjs, jak i w HTML-u osadzonym w wiadomości e-mail:

Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">&reg;</sup>

TheZver
źródło