Akordy – formátování pomocí CSS
Toto řešení najde využití v jakémkoli zpěvníku. Oproti zápisu stylem „řádek akordů, řádek textu…“ má tu výhodu, že akordové značky „drží“ stále na svém místě a nepohne s nimi ani změna velikosti písma.
Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Petr Staníček. Bližší popis najdete v článku Chords Formatting / Formátování akordů.
CSS
.pisen
{
font-family: verdana, sans-serif;
}
.sloka
{
margin: 1em 0;
color: #383;
}
.sloka .radek
{ /* zvětšíme výšku řádku, aby se do něho vešly akordové značky */
line-height: 2.5;
}
.sloka .radek span
{ /* obalový SPAN napozicujeme relativně */
position: relative;
}
.sloka .radek span strong
{ /* napozicujeme a naformátujeme akordovou značku */
position: absolute; top: -1em; left: 0;
font: bold 80%/1 sans-serif; font-style: italic;
color: #b55;
}
.sloka .radek span strong span
{ /* a nakonec skryjeme hranaté závorky */
display: none;
}
XHTML
<html>
<body>
<div class=“pisen“>
<div class=“sloka“>
<div class=“radek“>
<span><strong><span>[</span>F <span>]</span></strong></span>
Michelle,
<span><strong><span>[</span>Bmi7 <span>]</span></strong></span>
ma belle,
<span><strong><span>[</span>Eb6 <span>]</span></strong></span>
these are words that
<span><strong><span>[</span>D0 <span>]</span></strong></span>
go together
<span><strong><span>[</span>C <span>]</span></strong></span>
well,
<span><strong><span>[</span>G7/9 <span>]</span></strong></span>
my Mi
<span><strong><span>[</span>C <span>]</span></strong></span>
chelle
</div>
</div>
</div>
</body>
</html>
