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> </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:
Code:
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:
Code:
<p><sup>G7</sup>What you want baby,<span> </span><sup>F7</sup> I got it</p>
<p>What you<sup>G7</sup> need <span> </span>you know I got it<sup>F7</sup></p>
<p><sup>G7</sup>All I'm askin'<span> </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> </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> </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,