2

I would like to ensure that my chords above words are separated nicely by multiple white space.

The issue is that when I use pre, it comes out pre-formatted and hence not what I wanted.

Also, with  , the code looks very ugly.

What is the best method to solve this?

<pre>Chorus: Em A A common love for each other F#m Bm A common gift to the Saviour </pre> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Em &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;A &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; D &nbsp; &nbsp; D7 A common bond holding us to the Lord

Here is the link to the url: http://teach.sg/blog/a-common-love/

enter image description here

Improve this question

2 Answers 2

Reset to default
2

There are some white space characters like &emsp; will be useful. You can use &#09; for tab. You can also use CSS for this.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I see, what would I need to incorporate for CSS to allow for the multiple white spaces?
try something like style="padding-left:10px;"
I understand that padding left will help for the spacing of the first chord. But for the remaining chords, I'll then have to use &emsp;?
No. Place other chords in separate <div> tags and write css for them with padding-left.
1

I have an alternative solution, please see if it is suitable for your purposes:

I have nested all chords in a <span class = 'chord'> element, and then used CSS style rules to move the chords up and to the left a little bit. There is a little bit of ugly whitespace with this method, but it is more concise and definitely much more elegant than spamming space characters.

.chord { position: relative; font-size: 0.8em; bottom: 1.5em; right: 2em; width: 0.5em; } p { line-height: 2em; }
<body> <p>A common love <span class='chord'>Em</span> for each other <span class='chord'>A</span> </p> <p>A common gift <span class='chord'>F#m</span> to the Saviour <span class='chord'>Bm</span> </p> <p>A common bond <span class='chord'>Em</span> holding us <span class='chord'>A</span> to the Lord <span class='chord'>D-D7</span> </p> </body>

JSFiddle here.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.