The display layout of Tutorial is different in 4.0.0

[RyoSusami]

I think it's a very nice library and I'm doing study on VexFlow.

The layout of Tutrial's Step 2 code is very different between 3.0.9 and 4.0.0, but I don't know if it's a specification change or a bug, so let me ask you a question.

Tutrial Step2 (3.0.9)
Tutrial Step2 (4.0.0)

In 4.0.0, the note spacing is wider.
The latest version of the repository behaves in the same way.

Is this a specification change?

Thank you in advance.

[sschmidTU]

Looks like the stave isn't wide enough in the 4.0.0 jsfiddle.

You can set the stave width to 450 instead of 400:

https://jsfiddle.net/2jwvy0km/

It's strange though that the notes go over the measure/stave bounds when you tell the formatter to format to 400 pixels.

As to why the spacing is wider in 4.0.0, I'm not sure, but there were many changes to the formatter iirc, so it will be a result of that.

[rvilarl]

It's strange though that the notes go over the measure/stave bounds when you tell the formatter to format to 400 pixels.

400 is not right, I believe, you have to substract the space taken by the key and time signature (aroung 70)

https://jsfiddle.net/7jrdsnxy/

however 3.0.9 seems to bevave better in this particular case

https://jsfiddle.net/g3yh6skd/

@AaronDavidNewman what do you think?

[0xfe]

Updated the example to work with 4.0.0.

…

On Tue, Jan 11, 2022 at 4:35 PM Rodrigo Vilar ***@***.***> wrote: It's strange though that the notes go over the measure/stave bounds when you tell the formatter to format to 400 pixels. 400 is not right, I believe, you have to substract the space taken by the key and time signature (aroung 70) https://jsfiddle.net/7jrdsnxy/ — Reply to this email directly, view it on GitHub <#1292 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAB25E7SQCLJYX2TZGLH3VDUVSPC3ANCNFSM5LVRLAOQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

-- Mohit Cheppudira [linkedin <https://www.linkedin.com/in/muthanna/>] [github <https://github.com/0xfe>] [blog <http://0xfe.blogspot.com>]

[rvilarl]

@RyoSusami are you planning to include vexflow 5, as well. If yes @ronyeh @jaredjj3 and I could look into updating the tutorials.

[RyoSusami]

@rvilarl Thank you for caring.

I recently found about VexFlow 5, so I haven't tried it in my code yet, but of course I plan to migrate to it eventually.

The question I had at the time was, where did magic numbers like 400 and 350 come from?
I understand that it would be easier to explain using fixed values first, but if there was a link for the example to calculate the format width from the stave width, it might not have been confusing.

for example
https://jsfiddle.net/sfexnvmk/