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 https://github.com/martijnversluis/ChordSheetJS/pull/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!

[kriztho]

@aonghas I'm sorry for the late reply, I just retested your solution but still didn't work for me. I'm not using the table formatter but the div one instead. I tried to put your code under the .lyrics class and I still get jammed chords with no space everywhere else not just mid-words. Is there any other way to do this? @martijnversluis

.lyrics { font-weight: 300; bottom: 0; padding: 0; white-space: pre; border-collapse: collapse; }

For full reference, this is my .row class where I had commented out the column-gap to test. What am I doing wrong?

.row { display: flex;
flex-wrap: wrap; /* column-gap: 5px; */ }

[martijnversluis]

@kriztho Sorry for the late reply! I created a Codepen that showcases how to use the default CSS generated by the HtmlDivFormatter to prevent the weird spacing:

https://codepen.io/martijnversluis/pen/MYgYdMo

Please let me know if this is helpful!

[kriztho]

@martijnversluis Yes! This did fix it. Thank you, very much!!

Using the default basic CSS you provided fixed the spacing but brought up an unintended effect in the row wrapping like it shows in the following screenshot:

But I was able to fix it by adding this:

.row {
    flex-wrap: wrap;
}

[kriztho]

Thank you again!! Is there anyway to fix the problem mentioned by @adriaanzon? The spacing after chords?

[martijnversluis]

Thank you again!!

Is there anyway to fix the problem mentioned by @adriaanzon? The spacing after chords?

Thank you for appreciating my work! 🙏

As this point this is how the parser parses the lyrics. I'll put a task on the board to see if I can make that configurable 👍

[martijnversluis]

I'll close this in favour of #1481.

[martijnversluis]

@kriztho, @adriaanzon I just published 11.1.0, which adds the parser option { chopFirstWord: false } to disable separating the first lyric word from the other lyrics 👍 Please let me know if this works for you 👍

[kriztho]

Will test this week and report back! Thank you very much @martijnversluis. I have another question: I’m trying to have a button where I could change the modifier (sharps or flats). For example, I’m transposing up from C to C# but I usually prefer to play in Db instead because it has less alterations. The way I could achieve this without any changes was to transpose up to D and then transpose down to Db, since transposing down usually prefers flat enharmonics. i saw in the library that there exists a “modifier” but I couldn't manage to configure it on demand. So what I’m doing now is to trigger a transpose up and then down to use the Flat enharmonic or the reverse if I want the Sharp enharmonic. But this doesnt seem to work all the time. I think it’s because I don’t understand how to provide the correct change to the modifier in the options parameter. Could u please let me know if what I’m trying to do is possible? Thank you.

[martijnversluis]

@kriztho It is possible. There are two options.

• One is to change the modifier for the song:

  song.useModifier('#')
  

• the other is to specify the rendering key. That does require the song key to be set (using a {key: [SONG KEY] } directive).

  new HtmlDivFormatter({ key: 'Db' }).format(song)
  
  

Please let me know if that works for you.

[adriaanzon]

My apologies for any confusion earlier, I think I skimmed over the original post a bit too quickly and mistakenly assumed @kriztho was describing the same issue I was experiencing. Nevertheless, thank you for addressing it and implementing the fix! 🙏

That said, I’m actually using the ChordProParser, which doesn’t yet support the new chopFirstWord option. So, to answer your question @martijnversluis: no, this doesn’t work for me at the moment.

Thanks again for all your efforts!

[martijnversluis]

Hey @adriaanzon. Thanks for your reply. I just released 11.2.0, which adds this option to ChordProParser. Please let me know if it works for you 👍