Printing score make some elements overlaps on two pages

[airdev-web]

Hi @paulrosen , hope you're doing well!

Coming back with a small printing issues. When the score is long, some element are truncated in the print view

I tried to find a solution here : https://editor.drawthedots.com/ But cant find it in your code.

So of course, this the code is composed of <g> and <path> items so I can't figure how to manage it in CSS.

Thanks for your help! Romain

[paulrosen]

Sorry for the delay...

Does it help if you use the option oneSvgPerLine? See the example: https://paulrosen.github.io/abcjs/examples/printable.html

[airdev-web]

Np, thanks for answering!

It doesn't really help:

• I'm not using ABCJS.Editor
• Printing on your website seems not to be working neither..

Any other idea?

[paulrosen]

What browser and OS are you using? Also, what's the page size in your print preview?

If I'm on Chrome (having not changed any settings in the browser's Print Preview) on a macbook and put a long tune into https://editor.drawthedots.com it paginates correctly. Likewise with Safari and Firefox.

[felipetovarhenao]

@paulrosen I first wanted to thank you for abcjs — I've been tinkering with it for the past week or so and I've found it very user-friendly and intuitive to use!

I came upon this issue while facing the same problem. I noticed that the PDF maker demo doesn't fix the pagination issue but the editor does (at least in my MBP using Chrome). Is the source code of the latter available? I'm currently trying to print a multi-page score but haven't succeeded at avoiding cropped systems.

[paulrosen]

Yes, the source for the editor is here: https://github.com/abcjs-music/abcjs-editor

But I see the PDF maker demo working. If you post the source string that you used I'll try to figure out what's different. It should be identical to the editor so I'm curious what is different.

[RickvanderS]

I can confirm that the editor as hosted on https://editor.drawthedots.com/ handles the page breaks as expected. However abcjs/examples/printable.html does not. I am not sure what the difference is, both use parameter 'oneSvgPerLine' and do not use parameter 'print'.

I am using the below ABC to test, this has a large bar height to ensure proper page breaking is not a coincidence.

|c'''C,,,|
|c'''C,,,|
|c'''C,,,|
|c'''C,,,|
|c'''C,,,|
|c'''C,,,|
|c'''C,,,|
|c'''C,,,|
|c'''C,,,|
|c'''C,,,|
|c'''C,,,|
|c'''C,,,|

[RickvanderS]

I did some more digging on this and found a solution. When responsive is set to resize (needed for width scaling), abcjs changes the css style of the canvas div. It sets 'display:inline-block', however it seems that for page breaks to work, 'display:block' is needed instead. Not sure if this is also ok for on-screen rendering, but for printing this seems to be the way to go.

Since abcjs changes the style on rendering it doesn't help to change the style in the html or stylesheet. Therefore I use javascript to change to style after rendering. In the printable.html example that can be done by changing the print button: <button onclick="document.getElementById('canvas').style='display:block';window.print()">Print</button>

The editor at https://editor.drawthedots.com/ is not affected by this, because it does not let abcjs draw directly to the canvas. Instead it uses a hidden canvas and copies svg text from what is drawn on-screen to the printing canvas. Therefore the display style of the canvas div is never changed.

[paulrosen]

Yeah, I've found it better to have the printed version be rendered separately from the screen version.