Improve horizontal scroll about chordbook HOT 1 OPEN

• The width of each "page" should adapt to the content.

It's supposed to, but I can't get it to work right. Maybe someone with fresh eyes can make it work.

It currently uses CSS columns with column-count: auto and column-width explicitly set to the calculated width of the content. Here's the code.

The advantage of this approach is that the browser respects any break-inside or break-after properties. However, browsers really don't like the content overflowing horizontally. They don't seem to respect the explicit column-width and instead try to expand the columns to fill the viewport. So if a column is less than 50% of the container width, it will make the columns roughly 50%. If they are more, then it will just make them 100%.

Would be nice to have a shortcut to switch from one "page" to another like Arrow Left or Arrow Right, Page Up, Page Down => could be compatible with bluetooth pedal!

Yes, keyboard shortcuts would be great.

There is also some strange behaviors happening while scrolling.

This is scroll-snap. When you scroll vertically, it ensures that a full paragraph of the song is scrolled into view instead of half of it being off the screen. If the width of the columns was right, I think it would work just as well for horizontal, but with the columns being expanded to fill the viewport, it feels very awkward.

from chordbook.