Akordy v html

Problém byl zapsat akordy nad text tak aby při zúžení textového rámce byly správně přesunuty i se slovem nad kterým měly zůstat.

Hlavně to bylo pro čtečku, která je i za tmy dobře použitelná.

Inspirace
Inspirací a správnou cestou bylo: https://stackoverflow.com/questions/4154014/styling-text-to-make-it-appear-above-the-line-for-chords-above-the-lyrics

nebo

http://jsfiddle.net/654ct/13/ včetně linků

Style.css
p {
    font-size: 11pt;
    font-family: "Courier New";
}

h1 {
    font-size: 14pt;
    font-family: "Arial";
    font-style: normal;
}

h2 {
    font-size: 8pt;
    font-family: "Arial";
    font-style: normal;
}

.chord {
position: absolute
}

.chord .inner {
position: relative;
    top: -1em;
font-weight: bold;
}


 <p><span class="chord"><span class="inner">Ami</span></span>Vzhůru na palubu,<span class="chord"><span class="inner">G</span></span>dálky volají, vítr už příhodný vane <span class="chord"><span class="inner">Ami</span></span>nám.</p>

  <p><span class="chord"><span class="inner">Ami</span></span>Tajemné příběhy nás teď čekají,<span class="chord"><span class="inner">G</span></span>tvým domovem bude oce<span class="chord"><span class="inner">Ami</span></span>án.</p>

Generátor kytarových akordů pro zobrazení na web

http://jtab.tardate.com/examples.htm

https://chordbook.com/guitar-chords/

Bitmapové

http://akordiky.cz

Kytarové zdroje

https://clanky.rvp.cz/clanek/c/UV/20923/KYTARA-A-VZDELAVACI-TECHNOLOGIE-1.html/

Pro web

jQuery Chord Transpose Plugin pro web

Nauka akordů
http://vlcakuv-zpevnik.websnadno.cz/Akordy.html
---