OKblog

Výška řádku a indexy

Pátek, 28. prosince 2007 18.15 Webdesign

Použití horního (i dolního) indexu se občas nedá vyhnout. Například při zápisu kvadratických nebo kubických jednotek. A když už jej někde použijeme, není to vždycky úplně tak, jak bychom chtěli.

Pokud se indexy nachází ve víceřádkovém odstavci, je problém na světě – mezi řádky vznikne větší mezera, než potřebujeme. Pokud má odstavec navíc nastavenou větší výšku řádku (line-height), hodnoty normálního řádku a řádku s indexem se sčítají. (V CSS se tomu říká dědičnost vlastností.)


<p> … lorem auctor<sup>2</sup> ante… </p>

Podívejte se na příklad:

Dolní index

Abych nechodil dlouho kolem horké kaše – řešení je jednoduché: stačí pomocí CSS vynulovat výšku řádku samotného indexu. Tedy:


p sup, p sub { line-height: 0; }

Jako mávnutím kouzelného proutku jsou všechny řádky stejně vysoké. Vizte příklad:

Dolní index

Různě vysoké řádky ruší plynulý tok textu a kromě toho to ani moc dobře nevypadá. Přitom stačí maličký kousek kódu a vše je zase v pořádku.

předchozí další


Související články

Komentáře (8)

 
pátek, 28. prosince 2007 21:23:59

Díky, to budu potřebovat, to jsi vymyslel sám?

 
pátek, 28. prosince 2007 21:37:40

Vyhledávač Google vás na dotaz „hl=cs“ přivedl na tuto stránku. Pokud jste zde nenašli, co jste potřebovali, nezoufejte – pořád se můžete vrátit zpět.

Ale kdepak dotaz, jen jsem přilezl z google readeru na iGooglu :)

 
pátek, 28. prosince 2007 21:48:14

[1] Evča: Přiznám se, že ne. Ale zrovna jsem to potřeboval vyřešit a něco jsem o tom našel. Už ale nevím, kde to bylo.

Ale to je zase jedno z těch řešení, u kterých se plácneš do čela se slovy: „Proč jsem na to nepřišel sám?“ :D A fakt, je to úplně jednoduché, přesto si myslím, že se to někomu může hodit…

 
sobota, 29. prosince 2007 17:57:34

Tak tohle by mě ani nenapadlo… Ale mockrát díky za upozornění. Hned si to přidám do CSS :)

 
sobota, 29. prosince 2007 20:43:32

Dobré řešení, ale má jeden nedostatek, a to, že nefunguje v IE 6 (nejspíše i v nižších verzích).

Stejný problém řešil před nedávnou dobou Lukáš Havrlant – http://atd.havrlant.net/stylovani-hornich-a-dolnich-indexu jeho řešení funguje i v IE :)

 
neděle, 13. ledna 2008 14:36:33

Super ;) to se bude hodit.

 
pátek, 25. ledna 2008 11:57:33

Pro dolní indexy až do čísla 3 existují entity.
Například „&sup3;“

 
neděle, 24. února 2008 18:04:36

zrovna sem jednom webu mam nehezky rozlezly radky a porad mi vrtalo hlavou jak to postelovat. tak moc dik za clanek… uz je v obenych

K tomuto článku již není možné přidávat komentáře.