Hi,
This is an unusual question, so I hope I phrase it accurately - here goes…
I design a site for a local musician and he has some pages where he provides lyrics and accompanying chords. The chords have to be placed over the appropriate word and the spacing is seldom consistent.
Example:
A..........Cmin................... D
The big brown dog jumped over the lazy cat.
*Note: I had to use the dots (.) because this editor ignores the spaces.
I tried creating an image from a word processor, but the image distorts because not all of the songs have the same number of characters in a line, so that some will be distorted. So I moved on…
Currently, I’m using a one column table and used the " " tag to provide the necessary spacing in the chord line, but aside from being kinda’ goofy coding, it is a lot of work.
If anyone has an easier, faster, cleaner method, I’m all ears.
Or is there something obvious I’ve overlooked?
Thanks in advance,
Jake
I play guitar and somehow this strikes close to home. I think the problem lies in the way you are thinking or structuring the information.
when you think about it each chord accompanies a PHRASE of the song so A may be over"The big" Cm maybe over “brown dog jumped over th” while D"lazy cat"
You could structure these as chunks
<p class=“chunk><b class"chord”>A</b><span class=“lyr”>The big"</span></p>
.chunk {float:left;}
.chunk span, chunk b{display:block}
.chord { typography styles}
.lyr { typography styles}
it’s not as easy to do do as far as data entry but it would make the display easy to read and easy to style… which is what matters. Also I used P tags , but any block level tag will do… I just think with styles off it may be beneficial for the t information to be displayed as "
A The Big
Cmin bown dog jumped over
… and so forth
hope that helps
What you say makes a lot of sense, but in his case, the chords do not always accompany a phrase. Some of his songs do not even repeat phrases, and there is an over-all lack of symmetry. He is an old garage band-er from the '60s who write his own songs and somehow or another he makes it work with a fairly loyal fan base.
Thanks, though. I might be able to use this idea in another way or two that I can think of.
Regards…
J
I would use <pre>, which should preserve whitespace. Your whitespace will still be based on your font choice, but I’ve seen people use <pre> for poetry.
This is the best things I’ve seen thus far.
Thanks!
J