Implementing Boxed Print Theme Option

[bluestrat404]

Hi @no-chris,

I'm working on implementing the boxed print theme, and I have a question about column implementation: Did you write mapLinesToColumns rather than use CSS columns primarily so we can show the page break in the preview?

Currently, I see it's using mapLinesToColumns. As you saw previously, I was lazier in my personal implementation and used what would be equivalent to:

.cmSong {
     column-count: 2;
     column-gap: .5em;
     column-fill: auto;
 }

.cmSection {
	break-inside: avoid;
}

The break-inside:avoid; could respect the "Column Break on section" toggle if we want, and the column-count: could respect the "Columns" slider.

But I'm thinking there are good reasons you implemented mapLinesToColumns. I think it's so we can show the page breaks in the preview (which is pretty great). Is that right? And are there any other reasons?

If so, I'm thinking I might have to change mapLinesToColumns to mapSectionsToColumns rather than use my approach of making it CSS's problem to figure out.

Would you let me know your thoughts? Then I will work up something either way, or in a better third way you think of. Let me know if I'm being unclear.

Thank you,
Adam

[no-chris]

Hi Adam,

If I remember correctly and judging by what mapLinesToColumns is doing I think I wanted more control over the columns break, like not having a column that would start with an empty line, or not separating a chord line from its lyric line.

I don't know whether that is achievable or not with CSS. If it is, it would be great.

Otherwise I see how this is an issue for the boxed theme, actually I can see that the sections wrappers are not even rendered at all in the print preview, probably because of

chord-chart-studio/packages/chord-chart-studio/src/songRenderers/printPreview/_components/PrintPreview.js

Line 28 in c9492ad

const allLines = rendered.match(/(<p.*?>.*?<\/p>)/gm);

I don't remember very well how the whole thing works, give me a bit of time to read it again and I will think of an approach

Thanks

[bluestrat404]

Hi Chris,

Sounds good.

Regarding that line 28 in PrintPreview.js you mention, if we change the opening and closing p to div in the regex, then the div's show up properly.

I believe we can hide empty lines at the tops of columns with CSS — I'll look into that more and may submit a PR going that route. But let me know what you find!

Thank you,
Adam

[no-chris]

Regarding that line 28 in PrintPreview.js you mention, if we change the opening and closing p to div in the regex, then the div's show up properly.

I assume that by doing that you lose the possibility of having a columns break inside a section.
There are also probably edge cases if a section is higher than a page?

[bluestrat404]

The column break can happen inside a div. That's the default unless we specify break-inside: avoid. We can toggle that to auto to respect the toggle in the GUI.

I think you're right if break-inside is set to avoid and a section is longer than a page is tall, then we'd have a broken layout. That's something to think through.

[no-chris]

The column break can happen inside a div. That's the default unless we specify break-inside: avoid. We can toggle that to auto to respect the toggle in the GUI.

Yes, I meant with the current functionality of Chord Charts Studio

So after digging a bit in the code I confirm what I've said above, the intent was to control the column breaks with the following rules:

• A chord line should not be separated from the lyric line that it refers to
• A column should not start with an empty line
• and maybe some other edge cases

That part could still be improved, over the years I've spotted some cases where the column break was far from ideal (for example, a section title alone at the end of the column)

So to achieve this there is first a hidden rendering of the song with all given parameter that is used to measure the height of each line. Once we have the height of all the components, it is possible to distribute them per column.

Of course it works because there is no nesting of divs like we have now for the sections.

And also, I found myself not using the "force column break on new section" option that much over the years, as having the text just flowing and breaking naturally provides a lot more flexibility to format a song on a single page, so I'd like to keep that possibility.

So with those requirements in mind:

The solution were the column break happens only on sections change should be the easiest. The other one is more challenging:

• A CSS only solution would be ideal. Reading through this I'm not sure how we would achieve it but maybe it's possible:

  • chords and lyrics lines could have an extra wrapping with break-inside: avoid so they are never separated
  • maybe some clever selectors could hide an empty line at the start of a column?

• if not possible, then we could refine the current algorithm so it handles the section div.

  • measure the section height (which is more than the sum of the lines), map the sections to columns and spot the ones that should be spread over 2 columns, map the sections lines between columns, and split the section in 2 <div>, one on each column 😅
  • add some extra styling so we can, for example, hide a section border if the section is split

My gut feeling is that both solutions are more or less equivalent in terms of complexity. While the second might look more complex, it also keeps on building on top of the current approach, while the first option changes it completely. Also, the first option might lead to a dead end so should probably be validated in some kind of html playground first, so the effort will focus on validating the feasibility without the hassle of modifying the current code.

Let me know what you think.

[bluestrat404]

Hi Chris, I'm finally getting back to this. I'll work on mocking it up in an html playground that I can somehow share with you first.

[no-chris]

Hi Adam,
This is great! 🙌🏻
Let me know if I can help
Christophe

[no-chris]

btw, I will make that repository public very soon because it does not feel right to accept contributions on a private repo, I just need to tidy things up and work on the README(s)

[no-chris]

done, released as GPL3

[bluestrat404]

Awesome!