MobileRead Forums
Register Guidelines E-Books Today's Posts Search

Go Back   MobileRead Forums > E-Book Formats > ePub
Reload this Page [HowTo] Get song chord to be shown above lyrics

Notices

Reply
 
Thread Tools Search this Thread
Old 05-20-2017, 11:42 AM   #1
Perceval Blake
Junior Member
Perceval Blake began at the beginning.
 
Posts: 2
Karma: 10
Join Date: May 2017
Device: EPUB on KOBO
[HowTo] Get song chord to be shown above lyrics
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 !
Perceval Blake is offline   Reply With Quote
Old 05-20-2017, 07:14 PM   #2
Doitsu
Grand Sorcerer
Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.Doitsu ought to be getting tired of karma fortunes by now.
 
Doitsu's Avatar
 
Posts: 5,763
Karma: 24088559
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.
Doitsu is offline   Reply With Quote
Advert
Old 05-20-2017, 11:00 PM   #3
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,397
Karma: 20212733
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.
Turtle91 is offline   Reply With Quote
Old 05-21-2017, 01:06 AM   #4
stumped
Wizard
stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.stumped ought to be getting tired of karma fortunes by now.
 
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
stumped is offline   Reply With Quote
Old 05-21-2017, 11:37 AM   #5
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 80,789
Karma: 150249619
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by Turtle91 View Post
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?
JSWolf is offline   Reply With Quote
Advert
Old 05-21-2017, 08:23 PM   #6
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,397
Karma: 20212733
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
Quote:
Originally Posted by JSWolf View Post
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...
Turtle91 is offline   Reply With Quote
Old 05-22-2017, 02:17 PM   #7
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 80,789
Karma: 150249619
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by Turtle91 View Post
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.
JSWolf is offline   Reply With Quote
Old 05-22-2017, 10:43 PM   #8
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,397
Karma: 20212733
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
Quote:
Originally Posted by Turtle91 View Post
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......
Turtle91 is offline   Reply With Quote
Old 05-23-2017, 08:44 AM   #9
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 80,789
Karma: 150249619
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by Turtle91 View Post
Yes, I do know where I put the images....they are no longer there......
Do you still have the images?
JSWolf is offline   Reply With Quote
Old 05-26-2017, 08:24 PM   #10
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,397
Karma: 20212733
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
Quote:
Originally Posted by JSWolf View Post
Do you still have the images?
Quote:
Originally Posted by Turtle91 View Post
Yes, I do know where I put the images....they are no longer there......
Quote:
Originally Posted by Turtle91 View Post
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.
Last edited by Turtle91; 05-26-2017 at 08:27 PM.
Turtle91 is offline   Reply With Quote
Old 05-27-2017, 09:54 AM   #11
Perceval Blake
Junior Member
Perceval Blake began at the beginning.
 
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 12:21 PM.
Perceval Blake is offline   Reply With Quote
Old 05-29-2017, 11:10 AM   #12
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,397
Karma: 20212733
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
Quote:
Originally Posted by Perceval Blake View Post
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.
Turtle91 is offline   Reply With Quote
Reply

« Previous Thread | Next Thread »

Forum Jump

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 09:48 AM
PRS-650 Will a 650 usb chord work on a T1? Rizla Sony Reader 3 03-04-2012 04:44 PM
iLiad chord input axel77 iRex Developer's Corner 0 07-31-2008 03:39 PM
Reference DADGAD and Drop-D Guitar Chord Charts eskin BBeB/LRF Books 2 04-21-2007 03:25 PM


All times are GMT -4. The time now is 11:08 PM.

Contact Us - FAQ - Guidelines - Privacy - Top

MobileRead.com is a privately owned, operated and funded community.