lpugin
commented
1 year ago This is likely be a font issue. How did you install the Python version of Verovio? From PyPi?
Closed CorvusTheComposer closed 1 year ago
lpugin
commented
1 year ago This is likely be a font issue. How did you install the Python version of Verovio? From PyPi?
CorvusTheComposer
commented
1 year ago This is likely be a font issue. How did you install the Python version of Verovio? From PyPi?
I initially installed it through PyCharm's built in feature to search and install modules, but when I install it through PyPi and use the normal Python terminal I see the same results.
ahankinson
commented
1 year ago If I look at the resulting SVG in the macOS file preview, Firefox, and Safari it renders correctly. If I view it in Brave or Chrome it doesn't.
Also it's showing up as a 6 with a combining character -- maybe Chrome-based browsers don't do the combining characters correctly?
CorvusTheComposer
commented
1 year ago If I look at the resulting SVG in the macOS file preview, Firefox, and Safari it renders correctly. If I view it in Brave or Chrome it doesn't.
Also it's showing up as a 6 with a combining character -- maybe Chrome-based browsers don't do the combining characters correctly?
That is interesting because I have been viewing the SVGs on Firefox. I should also add that it's not just an SVG rendering issue, but that the character in question turns into a "?" in the resulting .mei file as well. Might it be a Windows problem?
lpugin
commented
1 year ago Could you make a minimal example (1 measure) and post both the MusicXML and the MEI file?
CorvusTheComposer
commented
1 year ago Absolutely. Within this ZIP are MinimalFile.musicxml, generated from MuseScore 4, and MinimalFile.mei generated with Verovio on Python from the MusicXML. MinimalTests.zip
Note the flat on the third quarter is generated correctly. The problem seems to mainly concern the backslash suffix.
craigsapp
commented
1 year ago The problem is the font metrics for the overlay accent character. Either the font does not have the correct font metrics for the solidus (seems most likely), or the rendering software does not know how to use the font metrics properly.
The main solution would be to find a font that displays it properly. When you display on various operating systems and browsers, they are all using a font substitution for "Times" (using a knock-off of the copyrighted Times font of Adobe) in the SVG image that is different for every browser/os combination.
The question mark means that the font does not have the solidus code point at all, and it is being annoying by showing a question mark (sometimes inside of a box) to alert you to the fact that it does not know what to do with the undefined character.
Preferably the MEI data would use a SMuFL font for figured bass in order to display correctly across multiple OSes and browers. This would embed the font used to display the raised-6 symbol into the SVG image, and font substitution would not be needed across multiple platforms. In this case the musical font symbols would be embedded into the SVG image.
Here is the raised-6 symbol as a single SMuFL character:
<f></f>or
<f>
<symbol glyph.auth="smufl" glyph.name="figbass6Raised" />
</f>The second case using <symbol> does not seem supported by verovio currently, but it would be nice to add.
Transcoded from Humdrum
Here is the verovio rendering displayed in Chrome in MacOS:
The f/symbol is not showing on the first note, so I added a text direction on that note which does allow the display of the symbol element.
Here is the SVG image displayed directly on this webpage (not a screen shot):
I would expect the above SVG image to display correctly, even when the solidus method of adding the slash does not.
At the bottom of the SVG image, is an embedded form of the Leipzig font, starting:
<style type="text/css">@font-face {
font-family: 'Leipzig';Then comes a very long line with the font's contents (presumably a subset of Leipzig since it is relatively small, but ideally only the raised-6 code point would be included rather than multiple code points that are not used in the image).
Another thing that you can do is provide a font substitution of your own for Times. Here is what I do in plain CSS (outside of the SVG image, but probably works inside of the image and/or embedded in the file with a pointer to an online font (or embedded as a very long string may work as well). In this case I have a separate local TTF file being used for Times in the SVG image:
@font-face {
font-family: "Times";
src: url("../scripts/pdfkit/EBGaramond-Regular.ttf");
font-style: normal;
font-weight: normal
}
@font-face {
font-family: "Times";
src: url("../scripts/pdfkit/EBGaramond-Italic.ttf");
font-style: italic;
font-weight: normal
}
@font-face {
font-family: "Times";
src: url("../scripts/pdfkit/EBGaramond-Bold.ttf");
font-style: normal;
font-weight: bold
}
@font-face {
font-family: "Times";
src: url("../scripts/pdfkit/EBGaramond-BoldItalic.ttf");
font-style: italic;
font-weight: bold
}You could use a similar local font, or an online source. The font substitution that you use would need to have a similar font metric to Times since the width/height of the text should not change since the SVG image will not adjust the layout of the music to avoid collisions.
Here is a list of the fonts which have similar font metrics to Times, so they will likely look good when displayed in the output SVG image from verovio:
https://www.learnui.design/blog/times-new-roman-similar-fonts.html
lpugin
commented
1 year ago @craigsapp suggestion to use SMuFL glyphs is good. We can look at it.
There is still something unclear happening with the UTF-8 encoding, which seems to be a Windows only problem. The conversion of the backslash is failing here: https://github.com/rism-digital/verovio/blob/eb8a267f922bad918c0b3398d40427e065757387/src/iomusxml.cpp#L4493
I tried a fix with u32string is the develop-fix-fb branch https://github.com/rism-digital/verovio/compare/develop...develop-fix-fb
If somebody has a Windows machine and can test it that would be very helpful - I don't think this is something limited to the Python toolkit, so a command line build and comparison of develop and develop-fix-fb would be a good start.
craigsapp
commented
1 year ago Here is an interesting test:
<!DOCTYPE html>
<html>
<head>
<title> slashed number test </title>
<body>
<style>
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,600;1,300;1,600&display=swap');
h1 { font-size: 1rem; padding-bottom: 20px; padding-top: 10px; }
</style>
<h1> Default (Times)</h1>
<div>
1⃥ 2⃥ 3⃥ 4⃥ 5⃥ 6⃥ 7⃥ 8⃥ 9⃥
</div>
<h1> EB Garamond </h1>
<div style="font-family: EB Garamond" >
1⃥ 2⃥ 3⃥ 4⃥ 5⃥ 6⃥ 7⃥ 8⃥ 9⃥
</div>
<h1> Cormorant Garamond</h1>
<div style="font-family: Cormorant Garamond" >
1⃥ 2⃥ 3⃥ 4⃥ 5⃥ 6⃥ 7⃥ 8⃥ 9⃥
</div>
</body>
</html>In Firefox (on MacOS) the display is correct for all three cases:
But in Chrome (on MacOS), none of them are correct:
So the same font may be rendered properly in one browser and incorrectly in another in the same operating system.
The Cormorant Garamond display in Chrome is displaying "no glyph" for the slash, so perhaps none of the three fonts have the reverse solidus overlay character and Firefox takes care of the problem itself while Chrome does not.
Describe the problem Some special characters in figured bass, such as suffixes like the backslash, turn into "?" characters or disappear completely when reading from MusicXML in the version of Verovio distributed for Python.
To Reproduce Steps to reproduce the behavior:
Expected behavior The figured bass in bar 4.3 is supposed to read "6\", but reads "6?" instead.
Note: online tools using the JavaScript version of Verovio convert the figured bass correctly (e.g. MEI-Friend).
Input data See "TestFile.musicxml" generated from MuseScore 3.6.2.
Verovio information
Environment information
Screenshots Screenshot of the incorrectly converted figured bass taken from the SVG file generated by the test code:
Screenshot of the correct conversion taken from the online tool MEI-Friend which uses the JavaScript version of Verovio:
Test Files TestFiles.zip