Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow font attributes to be ignored in SVG context #1505

Open
mscuthbert opened this issue Dec 28, 2022 · 2 comments
Open

Allow font attributes to be ignored in SVG context #1505

mscuthbert opened this issue Dec 28, 2022 · 2 comments

Comments

@mscuthbert
Copy link
Collaborator

(Continuing with things in 4 that are regressions in my use cases)

Currently the font-family, font-size, etc. attributes for the <svg> object can be specified in the Font.SANS_SERIF, etc. properties, but there are a number of things that were possible in Vexflow 1.2 that are not possible now.

  1. specifying a serif font to be used by default without changing the value of Font.SANS_SERIF -- that's possible, but has significant conceptual problems.
  2. specifying that font-size should be measured in something other than 'pt' -- most of my sites specify everything as either rem or % -- hardcoding a point size doesn't really work for me.
  3. not having any "font-family" etc. attribute appear on the <svg> object so that it can inherit style/family from the surrounding object. -- ATTRIBUTES_TO_IGNORE is not exported in svgcontext so it's not possible to set svg: {'font-family': true}
  4. initial .state is set according to the defaultFontAttributes found in the constructor, so that even if one creates the SVGContext and calls SVG object and then immediately removes the attributes from the <svg> object.
  5. There isn't a way to give an already created SVG object to SVGContext which might solve the problem.

Thanks! These might be unusual cases, but it's helpful for things like putting input boxes at the proper location next to a note to use the <foreign-object> tag within an SVG, but then they are inheriting all of the default SVG attributes

@AaronDavidNewman
Copy link
Collaborator

For 1, my thought was to have Font.DEFAULT_FAMILY which was a global and set by default to Font.SANS_SERIF (a constant) but could be overriden globally. And same with size...

For 2, if you could do 3 (opt out), you could use media selectors and classes to do font size with % or REM in css.
For 3, I guess I never thought of that. There should be a way to -opt out- of specifying any parameters on a text node, other than text.

For 4. I don't understand - can you give an example?
For 5. Interesting...not really something you could do in vex 1.2 either though, right? But might be useful.

The idea behind the changes in text font handling is to allow precise formatting when mixing glyphs and text (without using getBBox). Since music glyphs already use point size, it makes sense to use that as a default size and convert from any other measure.

You can always create an svg text element if you need something vexflow doesn't provide, and it seems like relative text size may be a case where that would be appropriate. Vexflow can't help you format the text vs. the music in that case, anyway.
(it's also possible I am a little biased against relative font sizes, in general, so maybe I am not to be trusted in this)

@mscuthbert
Copy link
Collaborator Author

You can always create an svg text element if you need something vexflow doesn't provide, and it seems like relative text size may be a case where that would be appropriate

The problem is that then that text element has to know what the text style of the surrounding HTML is, since it can no longer just inherit. (I use text in Vexflow in a number of different contexts with different font styles)

For 4. I don't understand - can you give an example?

I'm not sure if it's an actual problem but it looks like it might be. The constructor sets .state according to the default attributes. Running applyAttributes() does not set the current state (it should, shouldn't it?) so if anything does save_state() and then restore_state() the state that will be restored will not be the current font settings.

Our workaround solution has been to strip all the font attributes from the SVGSVGElement after vexflow creates it but prior to appending it to the DOM.

Your solution on 1 is probably what we should be doing.

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants