Chords mid-word separate words

[kriztho]

Hi Martijn,
I'm very grateful for your work on this project. It's been blessing my Music Ministry at Church immensely. I don't know if this is the right way to contact you for support. Please let me know if I need to do it differently.

The problem is illustrated in the following screenshot:

When I have the chords matching the first letter of words, the library does the right job and no words are broken half-way. This is the case in the top paragraph of the screenshot.

However, when chords are placed atop of any other letter but the first, then the word is broken apart, which is of course, undesired.

I'm using the following CSS:
.row {
display: flex;
flex-wrap: wrap;
gap: 5px;
}

If I remove the gap: 5px to help with the spaces, I of course run into the following situation, where words are not broken apart when chords are placed other than the first letter, but then when chords have no matching lyrics, then all chords are smushed together which renders them hard to read.

Is there anyway to fix this? Am I doing something wrong? This is my logic below:

// ChordSheetJS is available in global namespace now
const formatter = new ChordSheetJS.HtmlDivFormatter();
var song;

function loadSong(id) {
chordSheet = document.getElementById(id).textContent.substring(1);
parser = new ChordSheetJS.ChordsOverWordsParser();
song = parser.parse(chordSheet);
display = formatter.format(song);
document.getElementById("display").innerHTML = display;
}

Cris

[adriaanzon]

I noticed this too after I (long overdue) updated ChordsheetJS to its latest version. This behavior seems to have been introduced in PR #654.

Here's what it looks like before and after updating:

It is especially noticeable in text that uses many short words as demonstrated above, or when placing a chord directly in front of a space.

[aonghas]

Hey @kriztho ,

I've found a workaround with CSS that you might find useful:

table,
td.lyrics {
  padding: 0;
  white-space: pre;
  border-collapse: collapse;
}

The white-space property respects the space characters at the end of a table cell and the padding property removes the space mid-word.

Hope that helps!