Šuplík Honzy Hučína

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á.