Mam słowo, które ma zarówno indeks górny, jak i dolny. Teraz renderuję to w następujący sposób: word<sub>1</sub><sup>2</sup> Otrzymuję: HTML: czy mogę umieścić tekst indeksu dolnego tuż pod indeksem górnym?
word12 .
Jak mogę umieścić indeks dolny pod indeksem górnym?
Cóż, nie można tego zrobić za pomocą zwykłego, waniliowego HTML. Jak już wspomniano, użyj CSS. Ale będziesz potrzebował również pewnej pozycji!
Jest wiele sposobów na zrobienie tego z CSS, a każdy ma swoje zalety i wady. Jednym ze sposobów byłoby użycie względnego pozycjonowania. Szybkie Przykładem może działać tak:
<span class="fraction">
<span class="numerator">3</span>
<span class="denominator">4</span>
</span>
a CSS, aby przejść wraz z tym:
span.fraction { }
/* Or child selector (>) if you don't care about IE6 */
span.fraction span.numerator {
position:relative;
top:-0.5em;
}
span.fraction span.denominator {
position:relative;
top:0.5em;
left:-0.5em; /* This will vary with font... */
}
Ten konkretny przykład będzie działać lepiej, jeśli używasz szeryfową czcionki.
Ale tutaj przesunięcie w lewo zależy od rozmiaru indeksu górnego i dolnego. Ale co, jeśli nominator ma 31234 a mianownik to 56547? Czy istnieje zunifikowana decyzja, która nie działa w zależności od rozmiaru indeksu górnego i dolnego? – netimen
@netimen To dobry punkt i pomyślałem o tym po tym, jak podniosłem powyższy przykład. W skrócie: nie, nie ma magicznej wartości. Jest to jedna z okazji, w których może się przydać moduł CSS3 Ruby. –
@netimen Byłoby możliwe obliczenie poprawnego przesunięcia przy użyciu JavaScript, a następnie zastosowanie go do każdej instancji super/podskryptu. Co próbujesz reprezentować? Frakcje? Związki chemiczne? –
Oto czyste rozwiązanie. Utworzyć dwie klasy CSS:
.nobr {
white-space: nowrap;
}
.supsub {
display: inline-block;
margin: -9em 0;
vertical-align: -0.55em;
line-height: 1.35em;
font-size: 70%;
text-align: left;
}
Możecie już mają "nobr" klasy jako <nobr> wymiany. Teraz wyrazić wzór cząsteczkowy dla siarczanu, użyć klasy „supsub” w następujący sposób:
<span class="nobr">SO<span class="supsub">2-<br />4</span></span>
Oznacza to, że otaczają swój indeks górny/indeks w klasie „supsub” i umieścić < br/> między nimi. Jeśli podoba Ci się indeks górny/indeks dolny nieco większy lub mniejszy, dostosuj rozmiar czcionki, a następnie majstruj z pionowym wyrównaniem i wysokością linii. Ustawienie -9em w ustawieniu marginesu ma na celu utrzymanie dodawania indeksów górnych/dolnych do wysokości wiersza zawierającego je; każda duża wartość wystarczy.
Użyj stylu tabeli CSS (z wyjątkiem IE8 i poniżej). HTML:
<span class="over-under">
<span class="over">sup</span>
<span class="under">sub</span>
</span>
CSS:
span.over-under {
position: relative;
top: 1em;
display: inline-block;
}
span.over-under > .over {
display: table-row;
}
span.over-under > .under {
display: table-row;
}
Fiddle: https://jsfiddle.net/FredLoney/Loxxv769/4/
Poza tym jest prostsze niż względnych pozycji szczypie, takie rozwiązanie pozwala uniknąć zakłóceń układu, które wynikają z tych alternatyw. Patrz np. https://jsfiddle.net/FredLoney/da89nyk2/1/.
Jak to zrobić? – netimen