Add text to the left of the stave?

[mtoneil]

Hi,

Is it possible to add text to the left of the staff like the "R" and "L" in the following (non-Vexflow) example? I'd like to notate drum rudiments with vexflow using a similar presentation.

Many thanks

[mtoneil]

Hi @0xfe, curious if you had any ideas here.

[sschmidTU]

I would just use ctx.fillText(text, x, y), that's how OSMD does it.

some settings you can set beforehand:

ctx.setFont(fontFamilyVexFlow, fontHeight, VexFlowConverter.fontStyle(fontStyle));
// font size is set by VexFlow in `pt`. This overwrites the font so it's set to px instead
ctx.attributes["font-size"] = `${fontHeight}px`;
ctx.state["font-size"] = `${fontHeight}px`;

(this is for Vexflow 1.2.93, might have changed in Vexflow 4)

You should be able to get the left-most x and y position of the stave somehow.

[AaronDavidNewman]

I would just use ctx.fillText(text, x, y), that's how OSMD does it.
(this is for Vexflow 1.2.93, might have changed in Vexflow 4)

This is the way. Smoosic does the same thing with latest vexflow. There is a setText method for the stave itself, but you can't really specify any formatting with that. There are annotations, that only works for text around the notehead.

If you are creating Stave with the factory or directly, you already know the x. You can use TextFormatter to get the exact dimensions of the text so you put it in the right place.

const myFont = { family: 'Arial',  size: 9 };
const textFormatter = TextFormatter.create(myFont);
// Max height of the font
const textHeight = textFormatter.maxHeight;
// width of this text
const textWidth = textFormatter.getWidthForTextInPx('My text');

[mtoneil]

Took me a while to get around to integrating this, but it worked quite well. Thanks for the help @sschmidTU and @AaronDavidNewman!