formatter is breaking lines

[ashish-ch-98]

I am building a song library using gatsby. In my project, I have used a combination of ChordJs and ChordsheetJs. I am writing all the lyrics with chords in a Markdown file. Until now the output of a ChordPro sheet was as defined in the docs, but since last week I am experiencing a bug on adding a new lyrics MD file to the project.

To parse the file I use:
const [song] = useState(new ChordSheetJS.ChordProParser().parse(post.internal.content))

and to render the html output:
const htmlChordSheet = new ChordSheetJS.HtmlDivFormatter().format(song)

while using the HtmlDivFormatter() the HTML on the webpage now looks like this

I tried replacing HtmlDivFormatter() with HtmlTableFormatter(), this solved the issue but raised another one. The spacing between paragraphs was no longer there.
The highlited area shows the end of a paragraph.

There is also issue with the regular chord sheet. On the webpage, chords move forward from their defined postion.

Expected output

output on webpage

[martijnversluis]

Hi @ashish-ch-98, thanks for your question.

What I probably could document better, is that the formatters do not add any styling, nor inline nor as a separate stylesheet. It only generates the HTML that would, with the proper default or custom CSS will correctly render the chord sheet. This is because ChordSheetJS is not aware of in which kind of application the sheet is being rendered. for the styling it's

I'll put an issue on the board to come up with some way to generate CSS for the chord sheet. For now, could you try using text-align to fix the chord alignment?

[martijnversluis]

Feature planned in #184