English-only | Jenom česky | Bilingual/Dvojjazyčně
There are many ways to display chords in song lyrics on the web. Often the PRE text is used, formatting the lyrics in non-proportional font, which keeps the chords on their positions above the text.
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.
However, sometimes we may need a better-looking solution to display lyrics with chords using a proportional font. Let me show one possible way to do that.
Each part of text which a chord belongs to is tagged as span. Chords are placed inside the text, beeing tagged as strong. Their brackets are tagged as span to be hidden later.
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> </span>
</div>
...
This is how the lyrics looks without formatting:
Takto vypadá text písně bez formátování:
Part of the text with the chord, marked as span, has position:relative (which makes its ancestors be positioned). Then, the part making chord sign is absolutely positioned (it's removed from the text, and no empty space is left). It is positioned to coordinates 1em above the left upper corner of the part of "chorded" text. See the CSS making the job:
Ú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;
}
The "chorded" part of text must contain — except the chord sign — at least one non-empty character, or it remains empty after the chord is removed and the positioning then works only in MSIE (God only knows why). If there is anything but a whitespace, it works everywhere.
And this is how the same code looks with CSS:
Ú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:
Using CSS, text can be broken into lines, it's selectable, its font size can be increased and decreased, while chords are still displayed at their position above the text.
I tested it in MSIE/Win, Gecko-browsers (Mozilla, Firefox, Camino), Opera, and Safari. The text, of course, can be formated in much more ways, the principles stay the same. See the source code for more details.
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.