Text alignment/spacing for Songbook

[waschtl]

Hi,

I want to write a Songbook in Sigil, i.e there's always one line with chords above one line with text, then an empty line and starting over. So what I need is to align the line of chords to the exact word or even letters of the word in the next line.
Another thing is that I would need (horizontally) wider letters and spaces to make alignment of chords and text easier to see.

I can do it with spaces which works in Sigil, but that goes against everything I ever learned about text formatting. Tabs didn't work that good, and I still have to use spaces. What I would prefer is a solution that works independent of the device an text size/font.

I hope You can help me
thanks, basti

[theducks]

Originally Posted by waschtl

Hi,

I want to write a Songbook in Sigil, i.e there's always one line with chords above one line with text, then an empty line and starting over. So what I need is to align the line of chords to the exact word or even letters of the word in the next line.
Another thing is that I would need (horizontally) wider letters and spaces to make alignment of chords and text easier to see.

I can do it with spaces which works in Sigil, but that goes against everything I ever learned about text formatting. Tabs didn't work that good, and I still have to use spaces. What I would prefer is a solution that works independent of the device an text size/font.

I hope You can help me
thanks, basti

IMHO the wrong tool for this job. Or at least mostly wrong.

Make each bar (is bar the correct term for the music and words together?) into an Image with your favorite tools, then you could assemble a 'book of bars'

[cybmole]

Assuming you are using chord names, not pictures, over lyrics
Prepare as docx in word, which is how I make song sheets.
Then convert to epub, which I do not do, and see how well it works

Actually this is well suited to pdf, for full author control over layout.

Look also to see how apps like guitartapp manage layout

[cybmole]

http://www.845tools.com/blog/

[waschtl]

Originally Posted by theducks

IMHO the wrong tool for this job. Or at least mostly wrong.

Make each bar (is bar the correct term for the music and words together?) into an Image with your favorite tools, then you could assemble a 'book of bars'

I suppose there's a misunderstanding about what I want to do... I don't want to make sheet music with notes, but just lyrics with Chord letters above -like this http://tabs.ultimate-guitar.com/m/me...atters_crd.htm

Originally Posted by cybmole

Assuming you are using chord names, not pictures, over lyrics
Prepare as docx in word, which is how I make song sheets.
Then convert to epub, which I do not do, and see how well it works

Actually this is well suited to pdf, for full author control over layout.

Look also to see how apps like guitartapp manage layout

Yes, I do. PDF's an option, I'll look into that and try the epub plugin.
I'd want it to look like guitartapp, that's how it's done in most songbooks for guitar. It's more the way to get there that's unclear than the expected result

[theducks]

[QUOTE=waschtl;3142837]I suppose there's a misunderstanding about what I want to do... I don't want to make sheet music with notes, but just lyrics with Chord letters above -like this http://tabs.ultimate-guitar.com/m/me...atters_crd.htm

QUOTE]

Shows you how much I know about Music publishing

Still, the Image snips may be the simplest method as any Reflow or variable pitch font would soon make a hash of it.

[cybmole]

[QUOTE=theducks;3142990]

Originally Posted by waschtl

.. I don't want to make sheet music with notes, but just lyrics with Chord letters above -like this

which is what the guitartapp app already does, in reflowable code, probably far better than you will be able to do it
study the links I gave you for HOW they do it, or buy the full app like I did, it's cheap & there may even be an ad-funded free version

PS I bought the full app as I was most impressed with the layout, and i recommend it now to my guitar students

[waschtl]

[QUOTE=cybmole;3143557]

Originally Posted by theducks

which is what the guitartapp app already does, in reflowable code, probably far better than you will be able to do it
study the links I gave you for HOW they do it, or buy the full app like I did, it's cheap & there may even be an ad-funded free version

PS I bought the full app as I was most impressed with the layout, and i recommend it now to my guitar students

The thing is that I want it for the Kindle Paperwhite. I don't think the app would run on it even if I jailbreaked it...

[cybmole]

youa re right - it won't run an a PW, but my point was that those guys have solved the problem of how to have chords above lyrics and still have everything reflowable. They did it by reworking an old format called chord pro
so you could look at how they did it - explained on their web site, then make something similar, maybe
but actually if I make a chords over words word doc & then send to kindle,i.e. email that doc to the kindle address, I should get a mobi file that looks OK on my kindle devices ( I do not have a PW but the method shoudl be valid for all kindles).

UPDATE: hmm. may need a little fine tuning. I sent one test doc , which appears as azw on my fire tablet after a few seconds. But the chords alighment is not perfect, some need moving further to the right. I guess that is because I use a mixture of spaces and tabs within word. Could be you have to make it with all spaces for a perfect conversion
But try it.

another approach is to go to ultimate guitar tabs, choose a chords arrangement, chosoe print version, inspect html source in browser . e.g. I see this , but I don't get how those spans are preserving the alignments :
view-source:http://tabs.ultimate-guitar.com/a/ar...espect_crd.htm

Verse 1:

	<span>G7</span>               <span>F7</span>
	   What you want    baby, I got it
	<span>G7</span>               <span>F7</span>
	   What you need    you know I got it
	<span>G7</span>                <span>F7</span>
	   All I'm askin'    is for a little
	    <span>C7</span>                                     <span>F7</span>
	Respect when you come home           hey, baby
	                 (just a little bit)           (just a little bit)
	               <span>C7</span>                        <span>F7</span>
	When you come home                    Mister
	                 (just a little bit)           (just a little bit)

[Tex2002ans]

Originally Posted by theducks

Shows you how much I know about Music publishing

Exact same thoughts I had. I was having a tough time knowing exactly what waschtl meant, and a quick search of "guitar tabs" in Google Images showed images of pages full of notes + lyrics. I was instantly going to link the SVG musical notes topic/discussion a while back.

That "individual images" solution in Post #2 sounded absolutely dreadful though...

Originally Posted by cybmole

another approach is to go to ultimate guitar tabs, choose a chords arrangement, chosoe print version, inspect html source in browser . e.g. I see this , but I don't get how those spans are preserving the alignments :
view-source:http://tabs.ultimate-guitar.com/a/ar...espect_crd.htm

The entire thing is wrapped in a <pre></pre>:

http://www.w3schools.com/tags/tag_pre.asp

This means that the text appears in a fixed-width font, and all of the odd spacing they placed in the code stays exactly the same.

If the device becomes too narrow, and/or the font size becomes too large, the text will go off the edge of the screen though. You may be able to use this CSS to help the <pre> text wrap:

pre{
    white-space: pre-wrap;
}

This <pre> "solution" does not keep the notes/words together though. Once the lines start wrapping, everything breaks apart and becomes impossible to read. You lose track of which note goes with which word.

Originally Posted by waschtl

[...] there's always one line with chords above one line with text, then an empty line and starting over. So what I need is to align the line of chords to the exact word or even letters of the word in the next line.

Seems like someone on Stack Exchange asked this same exact question as your initial post:

https://stackoverflow.com/questions/...ove-the-lyrics

Don't know how well this would work on actual devices (especially if the users can fiddle around with line-heights). But it may help you get started on the right track.

Are you just trying to create this MOBI copy for yourself? Or are you planning on distributing this anywhere?

I fear that this sort of book may just be one of those subsets that are not well-suited for EPUB/MOBI, and would be better suited as PDF/physical books. Although maybe I am wrong. Maybe there are some fantastic music EPUBs out there.

[cybmole]

there are several different free/ cheap lyrics and chord apps which all display perfectly on my fire tablet so I take that as evidence that it CAN be done. I guess apple store has similar ones. I would assume they are using reflowable html.
SITES LIKE ULTIMATE GUITAR have chord sheets and also tabs, and browser source code is viewable
tabs are done with 6 horizontal lines ( 1 per string) , containing fret numbers for notes +++++e.g.
------1------
------1----2--
--------------
--------------
--------------
--0---1---------

numbers that align vertically are notes to be played together. this needs to be rendered in monospace font which not all readers have; on PC courier new seems to be the font of choice

once again, I have seen it done well in tablet apps. I have not really bothered with e-ink tests.

[cybmole]

PS the guitarappp approach uses a song format called chordpro,

https://linkesoft.com/songbook/chordproformat.html.

the coding challenge is to lift out what is in square brackets and position it on a preceding line ( not a trivial exercise even if justification is turned off .

you will see that in the example copy / pasted below , MR renders the example wrongly - chord names are not aligned correctly, but on the linkesoft URL given, the same example works . maybe their source code is worth examining also ?

In the chordpro format chords are denoted in square brackets [] in the text, e.g.

[Em]Alas, my [G]love, you [D]do me [Bm]wrong,

SongBook will render this as

Em G D Bm
Alas, my love, you do me wrong,

i checked their code for the above & on this example it is simple padding used to space out the chord names
<tt>Em&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;G& nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;D &nbsp;&nbsp;&nbsp;&nbsp;Bm<br> Alas, my love, you do me wrong,</tt><p>

so it is still possible that converting a word doc, but using only spaces when writing that, no tabs, and using monospace font, you may get a good conversion

[Turtle91]

Here's my idea:

- Use <sup> and <sub> tags to define a vertical-align above or below
- insert chord (<sup>) at the appropriate location (I randomly inserted to show variation)
- insert chorus (<sub>) at the appropriate location (also randomly inserted)
- I used a <span>&nbsp;</span> set to the appropriate width for an exact spacer (you may wish to add 'style="width: xx" ' in the span tag for individual spacing - or remove the span for no spacing at all)
- In the example below I left a bottom border (red) for easier viewing



I used display:inline-block so that I could define the width...then I used a negative right margin to bring the following text back to the left that exact amount so you wouldn't see any big spaces.

CSS:

p      {line-height:2.5; text-indent:0; text-align:left; margin:.5em 0 0; 
        padding:0; font-size:1em; border-bottom:1px solid red}

p sup  {display:inline-block; vertical-align:1.5em; font-size:0.9em;    
        width:2em; margin-right:-2em; line-height:1}

p sub  {display:inline-block; vertical-align:-1em; font-size:0.9em; 
        width:7em; margin-right:-7em; line-height:1}

p span {display:inline-block; width:7em}

HTML:

<p><sup>G7</sup>What you want baby,<span>&nbsp;</span><sup>F7</sup> I got it</p>

  <p>What you<sup>G7</sup> need <span>&nbsp;</span>you know I got it<sup>F7</sup></p>

  <p><sup>G7</sup>All I'm askin'<span>&nbsp;</span> is for<sup>F7</sup> a little</p>

  <p>Respect<sup>C7</sup> when you come<sub>(just a little bit)</sub> home<span>&nbsp;</span> hey,<sup>F7</sup> <sub>(just a little bit)</sub>baby</p>


  <p>When<sup>C7</sup> you <sub>(just a little bit)</sub>come home<span>&nbsp;</span> <sub>(just a little bit)</sub>Mister<sup>F7</sup></p>

NOTE: I did not test this on any devices - not positive that they all support vertical-align (although that is defined in CSS-1 so SHOULD be), or negative margins...but it's worth a shot!

Cheers,

[Turtle91]

Originally Posted by waschtl

Another thing is that I would need (horizontally) wider letters and spaces to make alignment of chords and text easier to see.

Wider letter spacing can be accomplished with "letter-spacing: 2px" in your css.

I'm pretty sure wider letters would need a different font.

Cheers,

edit:
You can even add extra spacing between words with "word-spacing:5px"

[Turtle91]

Just thinking.... I'm bored...

Here's the code cleaned up a little bit with no spans for spacing and letter-spacing added:

p      {line-height:4; text-indent:0; text-align:left; margin:.5em 0 0; 
        padding:0; font-size:1em; letter-spacing:3px; 
        border-bottom:1px solid red}

sub, sup {display:inline-block; font-size:.9em; line-height:1; letter-spacing:0}
p sup    {vertical-align: 1.5em; width:2em; margin-right:-2em}
p sub    {vertical-align:-1.0em; width:7em; margin-right:-7em}


  <p><sup>G7</sup>What you want baby, <sup>F7</sup>I got it</p>

  <p>What you<sup>G7</sup> need you know I got it<sup>F7</sup></p>

  <p><sup>G7</sup>All I'm askin' is for<sup>F7</sup> a little</p>

  <p>Respect<sup>C7</sup> when you <sub>(just a little bit)</sub>come home hey,<sup>F7</sup> <sub>(just a little bit)</sub>baby</p>

  <p>When<sup>C7</sup> <sub>(just a little bit)</sub>you come home <sub>(just a little bit)</sub>Mister<sup>F7</sup></p>

With letter spacing looks like: