simple approach with chord symbols placed beside the lyric

Each line will need a code for each chord and a 'closing' code at the end of the line for each chord used in that line. This is to force the following line to start at the origin of the left margin and not into the negative zone (of the left margin). Word wrapping occurs if the browser's window width is too narrow. This is fine for simple text such as this paragraph but for those with images aligned to the text, the wrapped portion will be far to the left and may even be off the window's legitimate drawing area.


this is the first line of the song but has no chords.


A long long time ago, this is the second line and it is not very long.



The text needs to be broken up into deliberate lines instead of letting the browser do its

own thing however it wants.

chords and lyrics in table format with one chord per cell

note that if the browser window is too narrow the text wraps within each cell. The borders off the cells are visible in this sample for clarity but can be easily turned off by changing the code: border=0 as shown in the copy below
This line always begins at the left margin because it is prefixed with the code: br which translates to break (as in line break). Images can be placed in the cell along with the text name of the chord (as in the first line) or they can be written into a row above the image (as in the 'second' line). This approach would be very similar to using a speadsheet to layout the lyrics and chords. It is certainly a bit more work for the composer/trancriptionist but somewhat prettier than the previous sample (which did not require measure indication). The thoughtful reader will ask: what if there is more than 1 chord per measure? The answer would be to decide ahead of time on the smallest time increment, eg: measure, half measure, quarted note, etc.

Am C D (to the right of the image) G
measure 1 m2 the 3rd measure measure 4
 
Am7 C9 D6 (above the image) Gmaj7
more lyrics in the second line with more verbage in which each 'column' is fit according to the widest cell
 
Am4 C11 D333 (below the image) Gmaj13
more lyrics in the third line with more verbage in which each 'column' is fit according to the widest cell

now for the table approach but without the cell borders:

Am C D (to the right of the image) G
measure 1 m2 the 3rd measure measure 4
 
Am7 C9 D6 (above the image) Gmaj7
more lyrics in the second line with more verbage in which each 'column' is fit according to the widest cell
 
Am4 C11 D333 (below the image) Gmaj13
more lyrics in the third line with more verbage in which each 'column' is fit according to the widest cell