[HowTo] Get song chord to be shown above lyrics

Perceval Blake · 05-20-2017, 10:42 AM

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 !

Doitsu · 05-20-2017, 06:14 PM

Have a look at this old thread. It describes two methods for creating interlinear text.
With some fiddling one of them might work for your purposes.

Turtle91 · 05-20-2017, 10:00 PM

Also, here is a thread where we discussed this exact problem. Although looking at it, all the pictures of the results are no longer showing... I wonder what happened??

In any case, it worked really well - at least in Sigil. I didn't test on anything else.

stumped · 05-21-2017, 12:06 AM

why not buy a kindle songbook, or download a sample, then reverse engineer it - use their code

JSWolf · 05-21-2017, 10:37 AM

Quote:

Originally Posted by Turtle91

Also, here is a thread where we discussed this exact problem. Although looking at it, all the pictures of the results are no longer showing... I wonder what happened??

In any case, it worked really well - at least in Sigil. I didn't test on anything else.

Since you posted the images, can you fix them?

Turtle91 · 05-21-2017, 07:23 PM

Quote:

Originally Posted by JSWolf

Since you posted the images, can you fix them?

No. That's what I meant by "I don't know what happened." The pictures are no longer there.

Just imagine perfect verse with the chord being directly above a specified word...it was quite fun to create.

I imagine the OP could just copy/paste the CSS and HTML to recreate the image...

JSWolf · 05-22-2017, 01:17 PM

Quote:

Originally Posted by Turtle91

No. That's what I meant by "I don't know what happened." The pictures are no longer there.

If I am not mistaken, the images came from Dropbox.

Turtle91 · 05-22-2017, 09:43 PM

Quote:

Originally Posted by Turtle91

I imagine the OP could just copy/paste the CSS and HTML to recreate the image...

Yes, I do know where I put the images....they are no longer there......

JSWolf · 05-23-2017, 07:44 AM

Quote:

Originally Posted by Turtle91

Yes, I do know where I put the images....they are no longer there......

Do you still have the images?

Turtle91 · 05-26-2017, 07:24 PM

Quote:

Originally Posted by JSWolf

Do you still have the images?

Quote:

Originally Posted by Turtle91

Yes, I do know where I put the images....they are no longer there......

Quote:

Originally Posted by Turtle91

No. That's what I meant by "I don't know what happened." The pictures are no longer there.

One more time:
I do know where I put the images... in dropbox.

The images are no longer there... in dropbox.

I do not have them in a box. I do not have them with a fox...

I imagine the OP (or anyone) could just copy/paste the CSS and HTML to recreate the image... If you wish to do that and PM the images to me, I'd be glad to try and re-post them in the appropriate message.

Perceval Blake · 05-27-2017, 08:54 AM

Thks for all your time,

I will try the solution mentionned above right now and let you know if my problem is solved

EDIT: I know for sure that "display:inline-block" is not supported by epub (and my kobo device) -> already tried.
I try right now the <sup>/<sup> way to go and let you know.

EDIT: It is working !!! Thanks a lot guys.

Turtle91 · 05-29-2017, 10:10 AM

Quote:

Originally Posted by Perceval Blake

Thks for all your time,

I will try the solution mentionned above right now and let you know if my problem is solved

EDIT: I know for sure that "display:inline-block" is not supported by epub (and my kobo device) -> already tried.
I try right now the <sup>/<sup> way to go and let you know.

EDIT: It is working !!! Thanks a lot guys.

No worries - glad you got it working!

Just a little clarification: "display:inline-block" is supported by epub - it works fine on my device. I would think that if there was an issue it was with the Kobo.

05-27-2017, 08:54 AM	#11
Perceval Blake Junior Member Posts: 2 Karma: 10 Join Date: May 2017 Device: EPUB on KOBO	Thks for all your time, I will try the solution mentionned above right now and let you know if my problem is solved EDIT: I know for sure that "display:inline-block" is not supported by epub (and my kobo device) -> already tried. I try right now the <sup>/<sup> way to go and let you know. EDIT: It is working !!! Thanks a lot guys. Last edited by Perceval Blake; 05-27-2017 at 11:21 AM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Chord Charts for ukulele ebook	bazmaz	Self-Promotions by Authors and Publishers	11	06-02-2013 08:48 AM
PRS-650 Will a 650 usb chord work on a T1?	Rizla	Sony Reader	3	03-04-2012 03:44 PM
iLiad chord input	axel77	iRex Developer's Corner	0	07-31-2008 02:39 PM
Reference DADGAD and Drop-D Guitar Chord Charts	eskin	BBeB/LRF Books	2	04-21-2007 02:25 PM

05-20-2017, 06:14 PM	#2
Doitsu Grand Sorcerer Posts: 5,726 Karma: 24031401 Join Date: Dec 2010 Device: Kindle PW2	Have a look at this old thread. It describes two methods for creating interlinear text. With some fiddling one of them might work for your purposes.

05-20-2017, 10:00 PM	#3
Turtle91 A Hairy Wizard Posts: 3,347 Karma: 20171571 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	Also, here is a thread where we discussed this exact problem. Although looking at it, all the pictures of the results are no longer showing... I wonder what happened?? In any case, it worked really well - at least in Sigil. I didn't test on anything else.

05-21-2017, 12:06 AM	#4
stumped Wizard Posts: 3,305 Karma: 10259306 Join Date: May 2016 Device: kobo forma, Kobo Libra, Huawei media Tab, fire HD10, PW3 HDX8.9,	why not buy a kindle songbook, or download a sample, then reverse engineer it - use their code

Advert

Advert