Akordy – formátování pomocí CSS

7. listopadu 2005

•

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“>
[F ]
Michelle,
[Bmi7 ]
ma belle,
[Eb6 ]
these are words that
[D0 ]
go together
[C ]
well,
[G7/9 ]
my Mi
[C ]
chelle
</div>
</div>
</div>
</body>
</html>