Text alignment/spacing for Songbook - Page 2

cybmole · 08-10-2015, 02:10 AM

that method is ingenious and should work perfectly , but it looks very labour intensive . if the OP wants to do a whole book full of songs, I'd still suggest prep in word, convert, patch up as needed with lots of   !
maybe some regex fu could crack it; a chord name is one of A,B,C,D,E,F,G with an optional b or # followed by some more optional stuff ( which can rarely be quite complex, like Dm7b5. the regex trick would be to spot the chord names and place them in spans. depends somewhat on what the OP is using for source, if he were to use the chordpro format, as linked to above then the chord names are easy to locate; but iif it's a text grap from internet ,then much harder.

PS rambling on... there's more than one way to denote chords, In olden times the jazz guys had some quick to write shorthand, like D- for Dm, C +5 -9 for C #5b9 , a little inverted triangle for maj7.... but most on-sale pop/rock chordbooks don't use that system. You will still see it in some jazz play-along books though

Turtle91 · 08-10-2015, 08:52 AM

I've been involved in Music for a couple decades...although I have never looked at guitar music, just woodwinds...I should have realized they would use the same note/chord designations...

I don't know what source the OP's using. If they have a clean text of lyrics then it is very simple to click on where you want the chord and insert like so:

D-What you want baby,C+ I got it

Then highlight the chord and use a built-in function for putting the tags around the chord. Both Sigil and Calibre Editor have buttons for that - I assume most software packages would.

...I just thought of something... Sigil has a function called "Clips". You can create a button to automatically insert text at the cursor position. It would take about 5 minutes to create a "Clip" of every chord - and a clip of each "extra optional stuff" - that already includes the tag (e.g. Name:"A#" Text:"A#"). Then you just click on the insert point, click on the appropriate button...done! I have the Clips bar located at the top of the screen - plenty of room for all those notes. I made the following in about 1.5 minutes:

Hey KevinH....what do you think of the option to have multiple Clips bars...so you can view/hide the bar needed for specific projects?

cybmole · 08-10-2015, 11:11 AM

I am impressed- hope the OP is still paying attention

the most popular guitar chords ( easiest to play on acoustic) are these 5 major chords E A D G C and these 3 minor chords Em Am Dm

theducks · 08-10-2015, 12:00 PM

Quote:

Originally Posted by Turtle91

I've been involved in Music for a couple decades...although I have never looked at guitar music, just woodwinds...I should have realized they would use the same note/chord designations...

I would expect a Pilot to play a WIND instrument

Turtle91 · 08-10-2015, 09:42 PM

I gave up after being told I broke it too often!!

Doitsu · 08-11-2015, 09:03 AM

Quote:

Originally Posted by waschtl

I don't want to make sheet music with notes, but just lyrics with Chord letters above [...]

In that case check out the <ruby> tag. IMHO, it's perfect for guitar chords. It's supported by ADE2 (or higher) and the corresponding RMSDK based apps as well as KF8-enabled Kindles (K3 or higher).

Code:

<body>
   <h4>Alle meine Entchen</h4>
   <p><ruby>Alle <rt>G</rt></ruby> meine Entchen</p>
   <p><ruby>schwimmen <rt>C</rt></ruby> auf dem <ruby>See <rt>G</rt></ruby></p>
   <p><ruby>schwimmen <rt>C</rt></ruby> auf dem <ruby>See <rt>G</rt></ruby></p>
   <p><ruby>Köpfchen <rt>D7</rt></ruby> in das <ruby>Wasser <rt>G</rt></ruby></p>
   <p><ruby>Schwänzchen <rt>D7</rt></ruby> in die <ruby>Höh <rt>G</rt></ruby></p>
</body>

cybmole · 08-11-2015, 09:21 AM

Needs very good eyesight. The ruby tag is for small annotations. Chord names need to be as large as, or larger, than the lyrics .
Also, can it be positioned precisely over a syllable. A whole word will often have two chords...

Doitsu · 08-11-2015, 09:40 AM

Quote:

Originally Posted by cybmole

Needs very good eyesight. The ruby tag is for small annotations.

Ruby tags can be styled like any other tag. For example, the chords in the screenshot were styled as:

Code:

rt {font-size: .65em}

I.e., making them as large as you want is a trivial matter.

Quote:

Originally Posted by cybmole

Also, can it be positioned precisely over a syllable.

Ruby text can't be positioned exactly over a particular syllable of a word, however, nothing prevents you from splitting up a word into separate ruby tags for each syllable.

Turtle91 · 08-13-2015, 08:25 AM

Ruby? Wow... I didn't know about that one. I see that it is part of HTML5. Is it supported by other than ADE2+/RMSDK/K3+ ?

I was able to get this result:

With this style:
rt {font-size:1em; text-align:left; color:blue}

and this code:
53 people sat around singing a s<ruby>o<rt>V1</rt></ruby>ng

I tried to style the text alignment, but it appears to only accept "center". So I did as above and got the tag to be above a particular letter...unfortunately it made spaces on either side. I then added negative margins to both the left and right side and got rid of the spaces. Unfortunately the negative margins need to be adjusted for the width of each chord. I think the min-width of the <ruby> is defaulted to the width of the <rt>.

rt {font-size:1em; color:blue; margin:0 -.3em}

Anyway...that was fun learning that new tag! Thanks Doitsu!

EDIT:
I found a setting for the <ruby> that would allow left alignment:
ruby {ruby-align:start}

That would then only require the right margin to be adjusted. There is talk about allowing the <rt> to overhang adjacent text - but it is not yet part of the draft spec.

Turtle91 · 08-13-2015, 08:34 AM

I forgot to mention - the Clips functionality in Sigil would make the <ruby> just as easy to enter as the :

Name: "A#"
Text: "<ruby>\1<rt style="margin:0 --em">A#</rt></ruby>"

will place highlighted text (the "o" in song from above) at the \1 point with the other tags around it. Then all you need to do is replace the "--" with the correct negative value to eliminate the spaces. A little more involved than the , but certainly do-able.

Jellby · 08-13-2015, 11:50 AM

What happens if you set "width:0" for <rt>?

Turtle91 · 08-13-2015, 08:03 PM

Quote:

Originally Posted by Jellby

What happens if you set "width:0" for <rt>?

Well.... huh.... I THOUGHT I tested that...

Yes...just checked again. On the W3Schools website the Tryit Editor width:0 does nothing. However in Sigil width:0 removes the spaces.

Makes you wonder how well it's supported in older devices.

waschtl · 08-21-2015, 08:07 AM

Quote:

Originally Posted by Tex2002ans

<pre></pre>:
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.
...
Seems like someone on Stack Exchange asked this same exact question as your initial post
...
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.

I will look into that, seems to be the same as monospaced font, right? Should be working, the following posts seem to be more promising, though

Quote:

Originally Posted by Turtle91

Wider letter spacing can be accomplished with "letter-spacing: 2px" in your css.
I'm pretty sure wider letters would need a different font.
You can even add extra spacing between words with "word-spacing:5px"

That's cool, thanks!

Quote:

Originally Posted by cybmole

I am impressed- hope the OP is still paying attention

I am ;D Both payig attention and being impressed

Quote:

Originally Posted by Turtle91

Here's my idea:

- Use and tags to define a vertical-align above or below
- insert chord () at the appropriate location (I randomly inserted to show variation)
- insert chorus () at the appropriate location (also randomly inserted)
- I used a   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)

That looks very promising! What's the benefit of the <ruby>Text<rt>chord</rt></ruby> syntax over / syntax?

My sources are scanned pages of a songbook, ocr'ed astonishingly good with tesseract-ocr. It doesn't preserve the alignment, though, as it interprets every line on it's own. Just for me, because I want a digital copy to not have to carry the originals around, plus lighting and searching a song becomes so much easier...

What this means:
-I have to rework every song, regardless if I put it in Word or Sigil or if I generate pdf or epub/mobi.
-Reflowable would be nice, but all Songs will be formatted to fit in one page in a readable font size, as it's done in the source.

Thanks a lot already, this has been very enlightening. Looking forward for the next answers

Turtle91 · 08-21-2015, 09:23 AM

Quote:

Originally Posted by waschtl

What's the benefit of the <ruby>Text<rt>chord</rt></ruby> syntax over / syntax?

I'm not sure there is any "benefit" - just another way to get the job done. <ruby> is a way to provide explanatory text next to other text... from what I understand it's used mostly in providing translations for different languages. It has the ability to be put above, below, or to the side (for vertical languages) of words. It is fairly new, so may not be as widely supported as the , tags. It also requires a little more coding than sup/sub, but if you set up the "Clips Bar" in Sigil as mentioned above that is a trivial difference.

As for workflow...
To make it reflowable I would recommend getting basic text for the lyrics and then just inserting the / tags where needed by reference to the original sheet. Use the Clips bar in Sigil...I imagine it will go very quickly.

You mentioned you wanted it all "in one page in a readable font size"...that pretty much implies you want fixed format - which would be a nightmare to code - or just use a pdf. If you use pdf then you won't have to recode anything, but you will lose control over the font size.

Choices, choices...

Cheers,

JSWolf · 05-21-2017, 05:19 AM

hey Turtle91, this thread is not all that useful since none of the images are showing. Please fix this. Thanks.

08-10-2015, 02:10 AM	#16
cybmole Wizard Posts: 3,720 Karma: 1759970 Join Date: Sep 2010 Device: none	that method is ingenious and should work perfectly , but it looks very labour intensive . if the OP wants to do a whole book full of songs, I'd still suggest prep in word, convert, patch up as needed with lots of   ! maybe some regex fu could crack it; a chord name is one of A,B,C,D,E,F,G with an optional b or # followed by some more optional stuff ( which can rarely be quite complex, like Dm7b5. the regex trick would be to spot the chord names and place them in <sup> spans. depends somewhat on what the OP is using for source, if he were to use the chordpro format, as linked to above then the chord names are easy to locate; but iif it's a text grap from internet ,then much harder. PS rambling on... there's more than one way to denote chords, In olden times the jazz guys had some quick to write shorthand, like D- for Dm, C +5 -9 for C #5b9 , a little inverted triangle for maj7.... but most on-sale pop/rock chordbooks don't use that system. You will still see it in some jazz play-along books though

08-10-2015, 08:52 AM	#17
Turtle91 A Hairy Wizard Posts: 3,094 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	I've been involved in Music for a couple decades...although I have never looked at guitar music, just woodwinds...I should have realized they would use the same note/chord designations... I don't know what source the OP's using. If they have a clean text of lyrics then it is very simple to click on where you want the chord and insert like so: <p>D-What you want baby,C+ I got it</p> Then highlight the chord and use a built-in function for putting the tags around the chord. Both Sigil and Calibre Editor have buttons for that - I assume most software packages would. ...I just thought of something... Sigil has a function called "Clips". You can create a button to automatically insert text at the cursor position. It would take about 5 minutes to create a "Clip" of every chord - and a clip of each "extra optional stuff" - that already includes the <sup> tag (e.g. Name:"A#" Text:"<sup>A#</sup>"). Then you just click on the insert point, click on the appropriate button...done! I have the Clips bar located at the top of the screen - plenty of room for all those notes. I made the following in about 1.5 minutes: Hey KevinH....what do you think of the option to have multiple Clips bars...so you can view/hide the bar needed for specific projects? Last edited by Turtle91; 08-10-2015 at 08:59 AM.

08-13-2015, 08:25 AM	#24
Turtle91 A Hairy Wizard Posts: 3,094 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	Ruby? Wow... I didn't know about that one. I see that it is part of HTML5. Is it supported by other than ADE2+/RMSDK/K3+ ? I was able to get this result: With this style: rt {font-size:1em; text-align:left; color:blue} and this code: 53 people sat around singing a s<ruby>o<rt>V1</rt></ruby>ng I tried to style the text alignment, but it appears to only accept "center". So I did as above and got the tag to be above a particular letter...unfortunately it made spaces on either side. I then added negative margins to both the left and right side and got rid of the spaces. Unfortunately the negative margins need to be adjusted for the width of each chord. I think the min-width of the <ruby> is defaulted to the width of the <rt>. rt {font-size:1em; color:blue; margin:0 -.3em} Anyway...that was fun learning that new tag! Thanks Doitsu! EDIT: I found a setting for the <ruby> that would allow left alignment: ruby {ruby-align:start} That would then only require the right margin to be adjusted. There is talk about allowing the <rt> to overhang adjacent text - but it is not yet part of the draft spec. Last edited by Turtle91; 08-13-2015 at 09:03 AM.

08-13-2015, 08:34 AM	#25
Turtle91 A Hairy Wizard Posts: 3,094 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	I forgot to mention - the Clips functionality in Sigil would make the <ruby> just as easy to enter as the <sup>: Name: "A#" Text: "<ruby>\1<rt style="margin:0 --em">A#</rt></ruby>" will place highlighted text (the "o" in song from above) at the \1 point with the other tags around it. Then all you need to do is replace the "--" with the correct negative value to eliminate the spaces. A little more involved than the <sup>, but certainly do-able.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Text alignment in Sigil	wdaly	Sigil	34	01-24-2013 02:45 PM
Text Alignment Options	cnote	Kindle Formats	5	01-14-2013 03:39 AM
text alignment issue	shaina	Sigil	41	12-02-2011 10:07 PM
Image alignment and spacing	Derek R	Kindle Formats	5	06-25-2011 12:57 PM
Text alignment	James_Wilde	iRiver Story	0	10-25-2010 04:22 AM

08-10-2015, 11:11 AM	#18
cybmole Wizard Posts: 3,720 Karma: 1759970 Join Date: Sep 2010 Device: none	I am impressed- hope the OP is still paying attention the most popular guitar chords ( easiest to play on acoustic) are these 5 major chords E A D G C and these 3 minor chords Em Am Dm

08-10-2015, 09:42 PM	#20
Turtle91 A Hairy Wizard Posts: 3,094 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	I gave up after being told I broke it too often!!

08-11-2015, 09:21 AM	#22
cybmole Wizard Posts: 3,720 Karma: 1759970 Join Date: Sep 2010 Device: none	Needs very good eyesight. The ruby tag is for small annotations. Chord names need to be as large as, or larger, than the lyrics . Also, can it be positioned precisely over a syllable. A whole word will often have two chords...

08-13-2015, 11:50 AM	#26
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	What happens if you set "width:0" for <rt>?

05-21-2017, 05:19 AM	#30
JSWolf Resident Curmudgeon Posts: 73,970 Karma: 128903378 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	hey Turtle91, this thread is not all that useful since none of the images are showing. Please fix this. Thanks.

Advert

Advert