Font handling : Add support for Non-Monospace fonts for converting to ChordPro

[Rexadev]

Add support for Non-Monospace fonts for converting to ChordPro

Screenshot of txt chords in 2 fonts

Calibri

Cansolas

1. https://ultimate.ftes.de/ uses monospaced
2. ultimate-guitar.com uses robotomono
3. https://www.e-chords.com/chords/taylor-swift/back-to-december uses Arial for chords and Poppins Puritan for title
4. https://www.guitaretab.com uses monospace

Does https://ultimate.ftes.de/ handle different fonts ?

Posted - https://github.com/ftes/ultimate-to-chordpro/issues/33

https://www.e-chords.com/chords/taylor-swift/back-to-december uses Arial for chords and Poppins Puritan for title unlike https://ultimate.ftes.de/ uses monospaced, ultimate-guitar.com uses robotomono, https://www.guitaretab.com uses monospace

[martijnversluis]

Hey @Rexadev,

I'm not sure about the link you included, probably @ftes knows, that's his app.

What I do know is:

• output from TextFormatter is expected to be rendered using a monospace font, as it relies on using spaces to align chords with lyrics.
• if you'd like to use a different font (non-monospace font), you could:
  • use HtmlDivFormatter or HtmlTableFormatter
  • implement your own variation of TextFormatter that uses tabs for aligning chords and lyrics.

[martijnversluis]

@Rexadev Does this answer your question? If so, I'd like to close this issue.

[Rexadev]

I'm not sure about the link you included, probably @ftes knows, that's his app.

You mean https://github.com/ftes/ChordSheetJS there is no Issue Tab

• output from TextFormatter is expected to be rendered using a monospace font, as it relies on using spaces to align chords with lyrics.

• if you'd like to use a different font (non-monospace font), you could:

  • use HtmlDivFormatter or HtmlTableFormatter
  • implement your own variation of TextFormatter that uses tabs for aligning chords and lyrics.

What happenes when I use 'https://www.e-chords.com/chords/taylor-swift/back-to-december uses Arial for chords and Poppins Puritan for title' and convert it to ChordPro

[martijnversluis]

What happenes when I use 'e-chords.com/chords/taylor-swift/back-to-december uses Arial for chords and Poppins Puritan for title' and convert it to ChordPro

Funny thing is that, because E-chords uses a non-monospace font, the chord placement is off.

Compare their version, a random different chord site, and the chord sheet when copy-pasting it to monospace:

e-chords version:

chordseasy version:

imported in ChordFiddle:

I think formatting with text using tab characters could work, but it would be fairly difficult to get right. I'd advise you to either render a text based chord sheet using a monospace font, or use an HTML based formatting if you want a pretty font.

[Rexadev]

I think formatting with text using tab characters could work, but it would be fairly difficult to get right.

I am talking about making a ChordPro file from text copied from website it non-monospaced font.

I'd advise you to either render a text based chord sheet using a monospace font,

If a website gives it in non-monospaced then how can i get it in monospaced ? For ChordPro, font doesn't matter.

or use an HTML based formatting if you want a pretty font.

What is HTML based format ?

@martijnversluis

[martijnversluis]

@Rexadev

I am talking about making a ChordPro file from text copied from website it non-monospaced font. Assuming the chord sheet is properly formatted (using spaces), it does not matter which font is used. For example, if you copy the Taylor Swift chart you mentioned and paste it in any code editor or a tool like ChordFiddle, you'll see the following:

This is exactly how ChordSheetJS sees the chart and parses it.

Does this answer your question?

[Rexadev]

Does this answer your question?

No

This is exactly how ChordSheetJS sees the chart and parses it.

Maybe you didn't understand what I am trying to say, Text to ChordPro converter like

1. ChordFiddle,
2. https://ultimate.ftes.de/ (based on https://github.com/martijnversluis/ChordSheetJS),
3. https://www.chordpro.org/

expect copied text to be in monospaced font, and their first render copied text as monospace and then convert it to ChordPro . That is what is mean that ChordPro can't handle non-monospaced fonts .

[edwinzap]

I think that it's simply impossible to handle correctly non-monospaced fonts. It would need to be able to "see" above wich letter is the chord or to know exactly how much space takes each letter. Maybe with something like this: https://www.w3schools.com/jsref/canvas_measuretext.asp. It could measure the space between the start of the line until the first chord and then calculate the width and compare it to the lyric line to know on wich letter it is.

[Rexadev]

I think that it's simply impossible to handle correctly non-monospaced fonts. It would need to be able to "see" above wich letter is the chord or to know exactly how much space takes each letter. Maybe with something like this: https://www.w3schools.com/jsref/canvas_measuretext.asp. It could measure the space between the start of the line until the first chord and then calculate the width and compare it to the lyric line to know on wich letter it is.

Regarding Font handling then converting non-monospaced chords to ChordPro

@sciurius - https://github.com/ChordPro/chordpro (Related Issue - https://github.com/ChordPro/chordpro/issues/304 https://github.com/ChordPro/chordpro/issues/299) ~@ftes - https://github.com/ftes/ultimate-to-chordpro (uses https://github.com/martijnversluis/ChordSheetJS)~ @martijnversluis - https://github.com/martijnversluis/ChordSheetJS

[ftes]

ftes/ultimate-to-chordpro only supports monospaced fonts, as it relies on the ChordSheetJS parsers for the two supported input formats ChordPro and UltimateGuitar.