Hi,
I want to create a numerical version of my favorite songs to be able to play them on guitare from my Kindle.
I would like to achieve something like that:
http://www.boiteachansons.net/Partit.../Amsterdam.php
I tried many possibility without success : Impossible to show the guitare chords above the corresponding text on my kindle/kobo devices (even if Sigil preview them correctly).
I use EPUB2.
Here is m CSS:
Code:
.song div {
float:left;
}
.song.r {
width:100%;
font-weight: bold;
margin-bottom:1.7em;
}
.song.c {
width:100%;
margin-bottom:1.1em;
}
.song em {
display:table-row;
font-style:normal;
text-decoration:underline;
}
.song p {
display:inline;
margin: 0;
float: left;
margin-left: 1%;
margin-right: 1%;
}
.song p div {
display:inline-table;
float:none;
vertical-align:bottom;
}
.song span {
display: none;
}
.show-chords span {
display:table-row;
color:#00F;
font-style: italic;
font-weight: bold;
font-size: 0.8em;
margin-left:1em;
}
And Here is a lyrics page:
Code:
<body>
<div class="song_header">
<span class="title">Puisque tu pars</span>
<a class="author" href="goldman_toc.xhtml">Goldman</a>
<a class="level" href="level2_toc.xhtml">Intermediaire</a>
<a class="home" href="../index.xhtml">Home</a>
</div>
<div class="song c">
<p class="show-chords">
<div><span>Ré</span><em>Pui</em></div>sque l'ombre gagne,
<br/>puisqu'il <div><span>Sim</span><em>n'est</em></div> pas de montagne
<br/>Au-de<div><span>Sol</span><em>là</em></div> des vents,
<br/>plus haute que les mar<div><span>Mim</span><em>ches</em></div> de l'oubli
<br/><div><span>La</span><em>Pui</em></div>squ'il faut apprendre,
<br/>à <div><span>Ré</span><em>défaut</em></div> de le compr<div><span>Sol</span><em>end</em></div>re
<br/><div><span>Mim</span><em>A rê</em></div>ver nos désirs et vivre de<div><span>La</span><em>s "</em></div>ainsi soit-il"
<br/><div><span>Ré</span><em></em></div>
</p>
<p>
<div><span>Ré</span><em>Et</em></div> puisque tu penses
<br/>Comme une <div><span>Sim</span><em>in</em></div>time évidence
<br/>Que p<div><span>Sol</span><em>arf</em></div>ois même tout donner
<br/>n'est pas f<div><span>Mim</span><em>orc</em></div>ément suffire
<br/><div><span>La</span><em>Pui</em></div>sque c'est ailleurs
<br/>Qu'i<div><span>Ré</span><em>ra</em></div> mieux battre <div><span>Sol</span><em>ton</em></div> cœur
<br/><div><span>Mim</span><em>Et</em></div> puisque nous t'aimons trop pour te re<div><span>La</span><em>ten</em></div>ir
<br/>Puisque tu <div><span>Ré</span><em>par</em></div>s
</p>
</div>
<div class="song c">
<p class="show-chords">
<div><span>Do</span><em>Que</em></div> les vents te mènent
<br/>où d'au<div><span>Lam</span><em>tres</em></div> âmes plus belles
<br/> Sauront <div><span>Fa</span><em>t'ai</em></div>mer mieux que nous
<br/>puisque l'on <div><span>Rém</span><em>ne</em></div> peut t'aimer plus
<br/><div><span>Sol</span><em>Que</em></div> la vie t'apprenne
<br/> Mais que <div><span>Do</span><em>tu</em></div> restes le <div><span>Fa</span><em>mêm</em></div>e
<br/> Si <div><span>Rém</span><em>tu</em></div> te trahissais,
<br/>nous t'aurions <div><span>Sol</span><em>tout</em></div> à fait perdu
<br/> (Mais pas trop <div><span>Do</span><em>tard)</em></div>
</p>
</div>
<div class="song r">
<p class="show-chords">
<div><span>Sol</span><em>Dan</em></div>s ton histoi<div><span>Do</span><em>re,</em></div> garde en mémoir<div><span>Lam</span><em>e</em></div>
<br/> Notre au revo<div><span>Fa</span><em>ir</em></div> puisque tu <div><span>Rém</span><em>pars</em></div>
<br/> <div><span>Sol</span><em></em></div>
</p>
</div>
<div class="song c">
<p>
<div><span>Do</span><em>J'a</em></div>urais pu fermer, oubli<div><span>Lam</span><em>er</em></div> toutes ces portes
<br/><div><span>Fa</span><em>Tou</em></div>t quitter sur un simple geste, mais tu<div><span>Rém</span><em> ne</em></div> l'as pas fait
<br/><div><span>Do</span><em>J'a</em></div>urais pu donner tant d'a<div><span>Lam</span><em>mou</em></div>r et tant de force
<br/><div><span>Fa</span><em>Mai</em></div>s tout ce que je pouvais, ça n'était <div><span>Rém</span><em>pas</em></div> encore assez
</p>
<p class="show-chords">
Reprise 02 : (2x)
<br/> Pas ass<div><span>Do</span><em>ez,</em></div> pas as<div><span>Lam</span><em>sez</em></div>, pas ass<div><span>Fa</span><em>ez</em></div>
<br/> <div><span>Rém</span><em></em></div>
</p>
</div>
</body>
All help will be greatly accepted !