Šuplík Honzy Hučína

Skok na navigaci (menu)

Tento blog je v současné době uzavřen.
Pokračování blogu na bloguje.cz jsem zrušil. Pokud budu někdy pokračovat, bude to spíš tady.

Komentovaný článek

Internet a vše kolem
23. 11. 2004

Akordické značky pozicováním

Text a k němu na některých místech připíchnuté značky, to je obecný popis problému, s nímž se setkávají nejen webmasteři internetových zpěvníků. Jak to udělat tak, aby značky seděly na svém místě i tehdy, když si uživatel mění velikost písma nebo šířku okna?

Jednoduché řešení, s nímž se většinou vystačí, využívá elementu <pre>. Právě ten byl totiž určen k vypisování předem zformátovaných textů, zachovává například přesný počet mezer a odřádkování. A vypisuje se zpravidla neproporcionálním písmem, tudíž všechny znaky jsou stejně široké – to velmi usnadňuje horizontální zarovnávání. V praxi to tedy vypadá tak, že se celý text písničky dá do elementu <pre>, vždy se nejprve vypíše řádek s akordy, pod něj řádek textu, zase akordy atd.

Element <pre> má však dvě nevýhody:

  1. estetická: neproporcinální písmo není příliš hezké.
  2. stabilita formátování: při příliš dlouhém řádku a úzkém okně se zalomí řádek s akordy a až pod ním se zalomí text, což znesnadňuje orientaci.

Žádná z nevýhod není nijak kritická, dá se s tím dobře žít. Ale je dobré vědět, že obě lze odstranit pomocí pozicování.

Myšlenka je následující. Každé místo, k němuž patří akordická značka, se označí jako samostatný omezující blok pomocí vlastnosti position:relative. Stačí třeba jen jeden znak textu písničky. Akordická značka se pak v tomto bloku napozicuje o řádek výš pomocí position:absolute a top:-1em. Nesmíme zapomenout na to, že text musí mít větší řádkování, aby se mezi řádky akordické značky vůbec vešly.

Tedy například:

<div><span><sup>C</sup>L</span>idé o ní

<span><sup>Ami</sup>ř</span>íkají...</div>

se při stylopisu

div {line-height:2}
div span {position:relative}
div span sup {position:absolute; font-size:100%; font-weight:bold;
top:-1em; left:0px; text-indent:0px}

zobrazí takto:

CLidé o ní Amiříkají...

Ptáte se, proč používám tag <sup> a ne třeba další <span>? To je pro případ, kdy by si někdo zobrazil stránku bez stylů. Díky <sup> budou akordické značky zobrazeny na správných místech jako horní indexy, což je docela dobře použitelné.

Aktualizace: Zjistil jsem, že jsem objevil již objevené. Oproti řešení Pixyho se liším použitím jiného tagu <sup>, ale jinak je myšlenka stejná.

Vložit vlastní komentářNávrat k článkuRSS komentářů tohoto článku

Komentáře

[1] 23. 11. 2004, 16:34 – Vasek

Viz take Pixyho reseni: http://www.wellstyled.com/css-chords-formatting.html

K tomuto článku není možné vkládat komentáře.

© Honza Hučín 2004–6

Šuplík běží na PIPNI.CZ. Díky!

sber.cermat.cz

RSS Šuplíku

RSS komentářů – souhrnně

U každého článku je samostatný RSS kanál pro komentáře.

Výběr článků

Posledních 10 článků

nebo podle data:

nebo hledání fulltextem:

Archiv všech článků

Poslední komentáře

Zabili mě, parchanti [2]

8. 8. 16:48 | Pepa

Cestou kolem blogu [2]

7. 8. 21:26 | Honza Hučín

Cestou kolem blogu [1]

7. 8. 21:02 | Honza

Vrtulník nad hlavou [3]

6. 8. 14:29 | Pepa

Taková hra na volby [1]

3. 8. 18:29 | Honza

Nejčtenější

Žádné údaje nejsou k dispozici.

O mně

*1967, absolvent MFF UK v Praze (1991)

statistik, analytik, programátor, učitel, hudebník

nyní Ústav pro informace ve vzdělávání

Životopis (RTF)

Napište mi