SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Text alignment

  1. #1
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text alignment

    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

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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

  3. #3
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the best things I've seen thus far.

    Thanks!
    J


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •