English-only | Jenom česky | Bilingual/Dvojjazyčně

Řešení CSS: Formátování akordů

Je mnoho způsobů, jak na webu zobrazit písňové texty i s akordy. Často se používá PRE-formátovaný text, který akordy na správném místě nad textem udržuje prostřednictvím neproporčního písma.

   Yesterday

   F        Emi      A7                Dmi    Dmi/C 
   Yesterday all my troubles seemed so far away 
   Bb     C                       F 
   now it looks as though they're here to stay 
   C/E Dmi  G7       Bb    F 
   oh  I believe in yesterday.

Ale občas můžeme potřebovat i nějaké lépe vypadající řešení, abychom mohli text s akordy zobrazit proporčním písmem. Nabízím jeden z možných způsobů, jak to lze udělat.

Úsek textu, ke kterému patří akord, je vždy označen jako span. Akordy jsou umístěny přímo v textu a jsou označené jako strong. Hranaté závorky jsem navíc označil jako span, aby se mohly s CSS skrýt.

   <div class="chordline">
      <span><strong><span>[</span>F<span>]</span></strong>Yesterday</span>
      <span><strong><span>[</span>Emi<span>]</span></strong>all my</span>
      <span><strong><span>[</span>A7<span>]</span></strong>troubles seemed so</span>
      <span><strong><span>[</span>Dmi<span>]</span></strong>far away</span>
      <span><strong><span>[</span>Dmi/C<span>]</span></strong>&nbsp;</span>
   </div>
   ...

Takto vypadá text písně bez formátování:

Yesterday

[F]Yesterday [Emi]all my [A7]troubles seemed so [Dmi]far away [Dmi/C] 
[Bb]now it [C]looks as though they're [F]here to stay
[C/E]oh [Dmi]I beli[G7]eve in [Bb]yester[F]day.

Úsek textu s akordem, označený jako span, má nastaveno relativní pozicování (to zajistí, že prvky uvnitř mohou být vůči němu absolutně pozicovány). Část tvořící text akordu je potom absolutně pozicována (z textu je vyjmuta, takže po ní nezbude prázdné místo) a posunuta na souřadnice 1em nad levý horní roh úseku textu. CSS, které dělá to, co potřebujeme, vypadá takto:

    .chordline {
       line-height:2.5
       }
    .chordline span {
       position:relative;
       }
    .chordline span strong {
       position:absolute;
       top:-1em; left:0;
       font:bold 75%/1 sans-serif;
       color:green;
       }
    .chordline span strong span {
       display:none;
       }

Úsek textu s akordem musí kromě akordové značky obsahovat ještě alespoň jeden znak — po vyjmutí akordu na pozicování by jinak zůstal prázdný a pozicování pak (bůhvíproč) funguje jen v MSIE. Pokud je zde alespoň jeden znak, bude to fungovat všude.

A takto vypadá stejný kód s použitím CSS:

Yesterday

[F]Yesterday [Emi]all my [A7]troubles seemed so [Dmi]far away [Dmi/C] 
[Bb]now it [C]looks as though they're [F]here to stay
[C/E]oh [Dmi]I beli[G7]eve in [Bb]yester[F]day.

S CSS formátováním funguje zalamování textu na nové řádky, text se dá označit a kopírovat, velikost písma lze libovolně zvětšovat a zmenšovat. Akordy budou přitom stále umístěny na určené pozici nad textem.

Testoval jsem to v MSIE/Win, Gecko-browserech (Mozilla, Firefox, Camino), Opeře a Safari. Pochopitelně je možné text zformátovat tisícem dalších způsobů — princip ale zůstane stejný. Pro podrobnosti viz zdrojový kód.