vexflow

vexflow copied to clipboard

Hi all,

I'm trying to have my annotations placed below the stave and as close to it as possible. I use setVerticalJustification = 3 which sets the annotations below the staff, however there is still a padding/margin between the staff and the annotation (see screenshot). I tried using some methods from the API documentation (such as setTextLine, setYShift etc.) but none of those had an effect on the Y position of the annotation.

Would appreciate anyone's help on the matter.

Cheers, Nitzan

Could you provide a jfiddle with your code?

@nitzanrh the annotations are placed at least 1 line above/below the staff. I'm not sure, but I believe it's always been this way. Because this is part of the formatting logic, there's no easy way to make this configurable.

One option is to move the text after rendering. If you annotation.setAttribute('id', 'my-group-id'), you can do something like:

const x = 0;
const y = -5;
const myGroup = document.getElementById('my-group-id');
myGroup.setAttributeNS('', 'transform', 'translate(' + x + ' ' + y + ')');

This is how I align lyrics vertically in Smoosic.

@AaronDavidNewman I wonder if the default should be closer to the staff.

It could probably be tightened up a little bit, especially on the bottom. We'll have to try some more top-heavy text to test it out. It is also not entirely consistent, depending on stem direction, other modifiers, top/bottom, etc.

@nitzanrh the annotations are placed at least 1 line above/below the staff. I'm not sure, but I believe it's always been this way. Because this is part of the formatting logic, there's no easy way to make this configurable.

One option is to move the text after rendering. If you annotation.setAttribute('id', 'my-group-id'), you can do something like:

const x = 0;
const y = -5;
const myGroup = document.getElementById('my-group-id');
myGroup.setAttributeNS('', 'transform', 'translate(' + x + ' ' + y + ')');

This is how I align lyrics vertically in Smoosic.

Hi Aaron,

Sorry for the (super) late reply :)

From what I've tried, your solution would only work if I have one annotation, correct? I mean, I can't have more than one element with the same id (or at least, I won't be able to access it later). Is there a way use setAttribute to set a class name rather than an id?

Cheers, Nitzan

@nitzanrh no each note and each annnotation gets its own Id. You have to store all the IDs in your program logic, and then get all the bounding boxes, and make your adjustments, after they are rendered.

Another way, if you want to translate all of these the same amount, is to use a css transform, and add a class to the annotation when you create it. The classes element and the id element on the Annotation object end up being classes and id of the SVG group in the DOM.

@nitzanrh no each note and each annnotation gets its own Id. You have to store all the IDs in your program logic, and then get all the bounding boxes, and make your adjustments, after they are rendered.

Another way, if you want to translate all of these the same amount, is to use a css transform, and add a class to the annotation when you create it. The classes element and the id element on the Annotation object end up being classes and id of the SVG group in the DOM.

Hi Aaron,

Thanks for your reply. I actually managed to set a class using .setClass so I won't have to keep store of the ID's. However I ended up using TextNote as it allows me better control over alignments.

Cheers! Nitzan