Stylování horních a dolních indexů

2006-09-14 00:23 napsal Lukáš Havrlant

Nedávno jsem zprovoznil nový web o matematice a tudíž jsem ne úplně nečekaně začal používal i značky, které jsem dřív moc nepoužíval, konkrétně tedy horní a dolní indexy – <sup> a <sub>. Ovšem tyto dvě značky v sobě ukrývají jistou zradu. Schválně si prohlédněte pokusnou stránku. Použil jsem tam v textu obě dvě značky a text začal okamžitě trpět jistým neduhem. Řádky, ve kterých jsou indexy použity, se natáhly na výšku a vytvořily mezi sebou nehezkou škvíru, která kazí dojem z jinak celistvého textu. Přitom indexy by byly hezky vidět, i kdyby se řádky takhle blbě neposunuly.

Takže musely přijít na řadu kaskádové styly. Letmým náhledem do specifikace zjistíme, že poloha indexů se řídí vlastností vertical-align s hodnotou buď super anebo sub. Tyto vlastnosti tedy nejprve musíme vyrušit, takže jim hodíme hodnotu baseline, která je výchozí pro běžný text.

sub, sup {
vertical-align:baseline;
}

A pokračujeme dále. Nyní jsou indexy v jedné rovině s textem. Posunovat obekty bez toho, aniž by tyto objekty ovlivňovaly zbytek stránky mívá na starost pozicování, v tomto případě bude nejlepší řešení relativní pozicování. S absolutním by to šlo opravdu ztuha. Takže upravíme CSS:

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

No a teď už jen stačí posunout sup o pár pixelů nahoru a sub o stejný počet pixelů dolů. Může být klidně i různý, podle toho, jak to bude vypadat.

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

Pokud aplikujeme tyto styly, bude stránka s indexy vypadat asi takto. Podle mého názoru tedy daleko přívětivěji. Při vypnutých stylech samozřejmě zůstane funkčnost indexů nezměněná.

Linkuj.cz!

Komentáře

# Elenor
14. September 2006, 07:46

K čemu jsou dobrý tagy sup a sub?

# Buchtič
14. September 2006, 07:56

[1] Na horní a dolní index. Abys mohl psát krásný rovnice, chemické vzorce apod. ;)

# Jiří Bureš
14. September 2006, 08:49

[1] A taky anglické datumy a pořadové číslovky (takové to 1st, 22nd atp.).

# Shaman
14. September 2006, 08:56

Prima článek. O té chybě vím, ale nikdy jsem se nedostal k tomu, abych se na to pořádně podíval. Ušetřil jsi mi práci. Díky.

# myf
14. September 2006, 09:11

Pěkné : ) Přidal jsem si to do Stylishe. Myslím, že po vstupu Telefóniky na místní trh se u nás množství SUBů znásobí.… i když teď koukám, že i na cz.o2.com to v textu používají tupě bez indexu. Ostuda!

# Tokugawa
14. September 2006, 11:17

Ještě bych o nějaké procento zmenšil velikost indexů a zvětšil mezery mezi řádky. Takhle se může stát, že nepoznám, jestli je to dolní index horního řádku nebo horní index dolního řádku.

# habendorf
14. September 2006, 12:16

To je sice také řešení, ale to pozicování se mi dvakrát nelíbí, prostě ho nemám rád :o)

Zkus třeba toto:

p {line-height:120%;} sup {vertical-align:40%;} sub {vertical-align:-40%;}

# Lukáš Havrlant
14. September 2006, 12:24

habendorf
No ale takhle se mi ty řádky posunou také, to jsem to mohl nechat tak jak to bylo…

# habendorf
14. September 2006, 12:27

Timy: já to zkoušel (pravda jen v IE) a ta line-height to udržela, jinak bych to sem nepsal :o)

# Lukáš Havrlant
14. September 2006, 12:33

habendorf
V tom případě musím něco dělat blbě, protože mi to nejde ani v IE :o) příklad (režim na to vliv nemá)

# Malis
14. September 2006, 12:40

Indexy jsou prevít, obszvláště pokud mají být součástí odkazů (potřeba vyhrát si s pozicí podtržítka).

OT: Co že je ten web o matematice v xhtml a ne v tvém originálním „já-vám-ukážu-co-všechno-je-validní“ kódu? ;-)

# Lukáš Havrlant
14. September 2006, 12:46

Malis
Protože jsem tam chtěl využít jednu z těch výhod XHTML a použít MathML. A vlastně ještě pořád chci, akorát bych musel sepsat nějakou příkladovou část a do toho se mi nějak nechce… Pravděpodobně o tom brzy taky napíšu :-).

# habendorf
14. September 2006, 12:57

Timy: aha, sorry, já si zvolil zrovna tak vhodný text, že se mi suby a supy vzájemně vykompenzovaly a mezery mezi řádky byly stejné :o). Při ++ písma už to je vidět.

V tom případě je rel. pozice asi nejlepší řešení.

# dgx
14. September 2006, 13:59

Tohle mě taky vždycky rozčilovalo. Řešíval jsem to pravidlem

sub, sup { line-height: 0 }

Ale pravda je, což jsem odhalil až dnes, že pro SUP & IE to nepomáhá.

# MzK
14. September 2006, 18:57

Velmi dobře vyřešeno :-), asi použiju při zapisování přednášek ve škole :-)

# dusoft
16. September 2006, 16:11

Nepaci sa mi toto riesenie. Namiesto toho, aby text ostal citatelny je index natlaceny na riadok vyssie a straca sa. Omnoho pristupnejsi sa mi javi nestylovany dokument, kde je vyhladanie pouzitia napr. horneho indexu zalezitost rychleho prejdenia textu ocami – kde je riadok odsadeny, tam je index.

# filer
16. September 2006, 23:51

Lenze vacsinou pouzivas indexy v texte ako odkaz na zdroj dalsich informacii a nie ako ciel nejakej informacie, cize ich „nachadzas“ pri citani textu a nevyhladavas ich globalne v celom texte.

Komentáře jsou uzavřeny