[HTML/CSS]Dwa indeksy na przodzie jednego znaku

Dla specjalistów Webmastering
#1

Witam.

Czy istnieje możliwość przedstawienia indeksu górnego i dolnego na przodzie jednego znaku?

(Mam do dyspozycji wyłącznie XHTML 1.0 Strict i Css3, nie chcę umieszczać obrazka)

Konkretnie chodzi mi o zapis cząsteczki helu:

f6abdbac1dfbe.bmp

Próbowałem zrobić to (pozornie) dostawiając spację o zerowej szerokości przed “2He” ale nie wygląda to ładnie.

HTML

​42He


[/code]




[b]CSS[/b]

[code] span.igora{ vertical-align: super; font-size: xx-small; } span.idol{ vertical-align: sub; font-size: xx-small; }

Nie chcę odsuwać marginesów tych indeksów, bo nie wiem dokładnie o ile odsuwa je “vertical-align” w danej przeglądarce, a chciałbym żeby indeksy były równo.

Może cyfry 4 i 2 umieścić jako osobny blok obok He, i zamknąć obydwie rzeczy w kolejnym bloku?

Albo nakryć He tą spacją?

Jakieś pomysły jak zrobić to równo?

Jeśli czegoś nie rozumiem w działaniu tych indeksów, to proszę pisać, bo htmla uczę się od niedawna.

#2

A może wrócić by do tabelek? Jedna kolumna z dwoma rzędami, druga kolumna z colspanem ustawionym na 2? :slight_smile:

#3

Na to nie wpadłem ale czy do takich rzeczy zwykło się używać tabele?

#4

Nie jest to może mistrzowskie rozwiązanie, ale działa.

42_He


.dop { color:rgba(0,0,0,0); }

.above { position:absolute; margin-top:-6px; margin-right:10px; color:rgba(0,0,0,1); }

.below { position:absolute; margin-top:6px; margin-right:10px; color:rgba(0,0,0,1); }[/code]
#5

WooQash , działa i jest zgrabne :slight_smile: Nigdy nie musiałem tych oznaczeń pakować na www. A tak… zawsze człowiek mądrzejszy :slight_smile:

#6

Taki myk też powinien zadziałać (wersja dla “oszczędnych” w ilości znaków, dla bardziej ekstremalnych można wywalić ten margines jedno-pikselowy ;))

W html:

42He[/code]


W css:

[code].sup {font-size: x-small; vertical-align: top; margin-right: -5px;} .sub {font-size: x-small; vertical-align: bottom; margin-right: 1px;}

Ewentualnie za “top” dać “super”, a za “bottom” wstawić “sub” (poszerzy to “szczelinę” między cyframi o jakieś 0.5-1px… na oko ;))

#7

Poza tym im większa rozdzielczość tym gorzej to będzie wyglądać.

#8

No to tak, to co podałem (z top i bottom):

-w IE9 i O12 indeksy nieznacznie nachodzą na siebie (w zasadzie to się stykają)

-w Fx17 i GC23 wyglądają w sumie tak samo, jest między nimi przerwa

-ogólnie wynik niewiele się na tych przeglądarkach różni i można by stwierdzić, że jest najbardziej optymalny w takim rozwiązaniu

Podmiana na super i sub:

-dla IE, Fx, GC wynik jest zbliżony, szczelina między indeksami się powiększa -względem pierwotnego- między 0.5-1.5px

-w O jest już bardzo widoczna różnica, na oko jest gdzieś 3 lub 4 piksele

Alternatywnie, zamiast top, super, bottom, sub, możesz określić vertical-align w pikselach (albo w procentach, jeśli nimi będzie Tobie łatwiej).

Dla górnego indeksu byłoby to 6px, dla dolnego -3px, dzięki czemu powinieneś mieć identyczny odstęp między indeksami na każdej z wymienionych przeglądarek.

Ogólnie dobrze byłoby, gdybyś sprawdził rozwiązania i kombinacje, dzięki czemu wybierzesz sobie najbardziej optymalną wersję, bo raczej nie masz dużych szans by całościowo wyglądało to tak samo wszędzie, co do joty… ale może wyglądać bardzo podobnie :wink:

#9

Rozumiem.

Bardzo dziękuję za pomysły. Na pewno skorzystam z jednego z nich.

Jeszcze raz dziękuję za pomoc. :slight_smile: