05-20-2017, 10:42 AM | #1 |
Junior Member
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; } 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> |
05-20-2017, 06:14 PM | #2 |
Grand Sorcerer
Posts: 5,607
Karma: 23185369
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. |
Advert | |
|
05-20-2017, 10:00 PM | #3 |
A Hairy Wizard
Posts: 3,119
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 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 |
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
|
05-21-2017, 10:37 AM | #5 | |
Resident Curmudgeon
Posts: 74,585
Karma: 130140792
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
Advert | |
|
05-21-2017, 07:23 PM | #6 |
A Hairy Wizard
Posts: 3,119
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
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... |
05-22-2017, 01:17 PM | #7 |
Resident Curmudgeon
Posts: 74,585
Karma: 130140792
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
05-22-2017, 09:43 PM | #8 |
A Hairy Wizard
Posts: 3,119
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
|
05-23-2017, 07:44 AM | #9 |
Resident Curmudgeon
Posts: 74,585
Karma: 130140792
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
05-26-2017, 07:24 PM | #10 | ||
A Hairy Wizard
Posts: 3,119
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
Quote:
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 07:27 PM. |
||
05-27-2017, 08:54 AM | #11 |
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. |
05-29-2017, 10:10 AM | #12 | |
A Hairy Wizard
Posts: 3,119
Karma: 18727091
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
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. |
|
|
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 |