search

humdrum-tools / verovio-humdrum-viewer

Verovio Humdrum Viewer
http://verovio.humdrum.org
37 stars 9 forks source link

Polish diacritics not rendered in pdf #69

Closed mkonik closed 6 years ago

mkonik commented 6 years ago

Polish diacritics are not rendered in pdf, although it looks correct in VHV.

vhv-1

It looks like hum to mei converter works good - in mei code polish diacritics are present.

vhv-2

But in pdf file diacritics disappear.

vhv-3

Code for this example:

**kern  **text
*clefG2 *
*M4/4   *
=-  =-
4c  Za-
4c  -żółć
8c  gę-
8c  -ślą
4c  jaźń.
==  ==
*-  *-
craigsapp commented 6 years ago

Here is an outline of the solution from the repository from which the PDF generator comes from:

https://github.com/devongovett/pdfkit/issues/431

The problem is that the font used for the PDF file does not have any Polish diacritics in it. This looks like it could be the font file:

https://github.com/humdrum-tools/verovio-humdrum-viewer/blob/gh-pages/scripts/pdfkit/vrv-ttf.js

But it seems small at 8.7 kb...

That file was created by @lpugin, so we can ask him if this is the right file and/or how it is created.

craigsapp commented 6 years ago

Attached to this message is the decoded TTF (true-type font) file mentioned above. Probably this file can be loaded into fontforge:

https://fontforge.github.io/en-US

And then characters can be copied from a similar (Times) font that has the accented Polish characters...

vrvttf.zip

PiotrSzy commented 6 years ago

There is a general problem with fonts, both in Verovio and VHV:

  1. Verovio SVG output contains only one font-family reference - Times. I assume this is a reference to a standard PostScript font, but there is no such thing in HTML. The default serif font in HTML is called serif.

  2. VHV overrides this by setting svg tspan font-family to Palatino, VerovioText ! important. Neither Palatino nor VerovioText are loaded with the web page, so if they don't exists on the host system, the browser will substitute them. VeriovioText contains only musical symbols (mostly notes) and it seems to be used internally by Verovio. There is no need to reference this font. The pdf font substitution is done in vain and removing vrvTTF doesn't change anything.

  3. Finally, pdfkit provides default PostScript fonts which cover only PostScript Standard Encoding. There is no way to achieve Polish diacritics without loading some other font and using it instead of Times.

To solve this puzzle:

craigsapp commented 6 years ago

There is probably at least one character in the vrvTTF file that would be used often in lyrcs: the elision character, which is like an underscore character, but curved:

screen shot 2018-05-13 at 1 46 40 pm

Here is the SVG output from verovio for this example (viewable in VHV by typing alt-g):

<svg width="168.00px" height="94.40px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="visible">
    <desc>Engraved by Verovio 2.0.0-dev-509c169-dirty</desc>
    <defs>
        <symbol id="E050" viewBox="0 0 1000 1000" overflow="inherit">
            <path transform="scale(1,-1)" d="M441 -245c-23 -4 -48 -6 -76 -6c-59 0 -102 7 -130 20c-88 42 -150 93 -187 154c-26 44 -43 103 -48 176c-4 60 11 123 44 189c29 57 65 106 110 148s96 85 153 127c-3 16 -8 46 -13 92c-4 43 -5 73 -5 89c0 117 16 172 69 257c34 54 64 82 89 82c21 0 43 -30 69 -92 s39 -115 41 -159c2 -120 -19 -173 -67 -256c-13 -20 -63 -90 -98 -118c-13 -9 -25 -19 -37 -29l31 -181c8 1 18 2 28 2c58 0 102 -12 133 -35c59 -43 92 -104 98 -184c11 -135 -80 -229 -180 -270c8 -57 17 -110 25 -162c5 -31 6 -58 6 -80c0 -30 -5 -53 -14 -70 c-35 -64 -88 -99 -158 -103c-42 -3 -83 6 -124 26c-50 24 -77 59 -80 105c-2 34 5 63 20 87c18 28 45 42 79 44c51 4 99 -40 103 -87c4 -56 -30 -94 -105 -115c17 -24 51 -36 102 -36c62 0 116 43 140 85c9 16 13 41 13 74c0 20 -1 42 -5 67c-8 53 -18 106 -26 159zM461 939 c-95 0 -135 -175 -135 -286c0 -24 2 -48 5 -71c50 39 92 82 127 128c43 57 63 106 60 148c-4 54 -23 82 -57 81zM406 119l54 -326c80 27 116 88 109 184c-7 99 -62 146 -163 142zM382 117c-74 -2 -132 -50 -128 -127c2 -46 43 -99 75 -115c-3 -2 -7 -5 -10 -10 c-70 33 -116 88 -123 172c-5 73 42 135 88 170c23 17 49 29 78 36l-29 170c-21 -13 -52 -37 -92 -73c-50 -44 -86 -84 -109 -119c-49 -75 -71 -140 -67 -195c5 -68 35 -127 93 -176s125 -73 203 -73c25 0 50 3 75 9c-19 111 -36 221 -54 331z" />
        </symbol>
        <symbol id="E0A2" viewBox="0 0 1000 1000" overflow="inherit">
            <path transform="scale(1,-1)" d="M198 133c102 0 207 -45 207 -133c0 -92 -98 -133 -207 -133c-101 0 -198 46 -198 133c0 88 93 133 198 133zM293 -21c0 14 -3 29 -8 44c-7 20 -18 38 -33 54c-20 21 -43 31 -68 31l-20 -2c-15 -5 -27 -14 -36 -28c-4 -9 -6 -17 -8 -24s-3 -16 -3 -27c0 -15 3 -34 9 -57 s18 -41 34 -55c15 -15 36 -23 62 -23c4 0 10 1 18 2c19 5 32 15 40 30s13 34 13 55z" />
        </symbol>
    </defs>
    <style type="text/css">
@font-face {
    font-family: 'VerovioText';
    src: url(data:application/x-font-woff;charset=utf-8;base64,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
) format('woff');
    font-weight: normal;
    font-style: normal;
}
</style>
    <style type="text/css">g.page-margin{font-family:Times;} g.tempo{font-weight:bold;} g.dir, g.dynam, g.mNum{font-style:italic;} g.label{font-weight:normal;}</style>
    <svg class="definition-scale" viewBox="0 0 4200 2360">
        <g class="page-margin" transform="translate(200, 200)">
            <g class="system" id="system-0000001324013834">
                <g class="section boundaryStart" id="section-0000000016621190" />
                <g class="measure m-0" id="measure-L1">
                    <g class="staff" id="staff-0000001331637504">
                        <path d="M0 720 L2460 720" stroke="#000000" stroke-width="10" />
                        <path d="M0 900 L2460 900" stroke="#000000" stroke-width="10" />
                        <path d="M0 1080 L2460 1080" stroke="#000000" stroke-width="10" />
                        <path d="M0 1260 L2460 1260" stroke="#000000" stroke-width="10" />
                        <path d="M0 1440 L2460 1440" stroke="#000000" stroke-width="10" />
                        <g class="clef" id="clef-0000000504231358">
                            <use xlink:href="#E050" x="90" y="1260" height="720px" width="720px" />
                        </g>
                        <g class="ledgerLines below">
                            <path d="M780 1620 L1160 1620" stroke="#000000" stroke-width="17" />
                        </g>
                        <g class="layer" id="layer-L1F1N1">
                            <g class="note qon-0 qoff-4 pname-c acc-n oct-4 b40c-2 b12c-0 " id="note-L2F1">
                                <use xlink:href="#E0A2" x="825" y="1620" height="720px" width="720px" />
                                <g class="accid" id="accid-0000001592539403" />
                                <g class="verse" id="verse-L2F2">
                                    <g class="syl t" id="syl-L2F2">
                                        <text x="735" y="2027" font-size="0px">
                                            <tspan class="text" id="text-0000000024493142">
                                                <tspan font-size="405px" class="text">a</tspan>
                                                <tspan font-family="VerovioText" font-size="405px" class="text"></tspan>
                                                <tspan font-size="405px" class="text">e</tspan>
                                            </tspan>
                                        </text>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g class="mNum autogenerated" id="mnum-0000001356299534" />
                    <g class="barLineAttr" id="bline-0000001394264606">
                        <path d="M2315 1440 L2315 720" stroke="#000000" stroke-width="10" />
                        <path d="M2415 1440 L2415 720" stroke="#000000" stroke-width="90" />
                    </g>
                </g>
                <g class="boundaryEnd section-0000000016621190" id="bdend-0000001347117771" />
            </g>
        </g>
    </svg>
</svg>

The elision character is encoded as the hex bytes: ee 95 91 in the UTF-8 character encoding.

This is probably a private-use codepoint in UTF-8: https://codepoints.net/U+E551 (UTF-16 value is hex E551)

And this probably means that it is related to SMUFL: http://www.smufl.org/files/smufl-1.0.pdf. And pulled out of the full music font set. Most of the musical fonts are converted to SVG outlines, but the text glyphs require a font.

Here is the spot in the c++ code where this codepoint is referenced:

https://github.com/rism-ch/verovio/blob/6b6fe8e3111e68010d018407fd9725ca008cc5bf/include/vrv/vrvdef.h#L324-L337

So there are probably three characters being used in vrvText:

UTF-16 E550 for a narrow text elision character: http://www.smufl.org/version/latest/glyph/lyricsElisionNarrow/

screen shot 2018-05-13 at 2 12 29 pm

UTF-16 E551 for the regular text elision character: http://www.smufl.org/version/latest/glyph/lyricsElision/

screen shot 2018-05-13 at 2 06 32 pm

UTF-16 E552 for a wide text elision character: http://www.smufl.org/version/latest/glyph/lyricsElisionWide/

screen shot 2018-05-13 at 2 13 11 pm

So as @PiotrSzy mentions, getting an open-source font to use in place of vrvText should work. And the three extra characters should also be added from the original vrvText. For minimal included font, only the accented characters would need to be added (suitable if they look the same as the font being used when printing/displaying the PDF).

PiotrSzy commented 6 years ago

I think in this situation it would be reasonable to add two options to Verovio toolkit:

Eventually it would work like this:

In the meantime we can override Times with CSS.

craigsapp commented 6 years ago

The default text font family name (to use instead of Times),

I think verovio may be hard-wired to one text font at the moment (I would have to look closer at the code to see what it does). With Times used as the default name since that is what it seems that MacOS Safari/Firefox 's default seems to be: https://www.granneman.com/webdev/coding/css/fonts-and-formatting/web-browser-font-defaults

The problem is that the font metrics, and thus a specific font are needed before creating the SVG image. So they must be input into verovio with the musical data. Otherwise, the spacing of the letters may cause overlapping text, and other related artifacts. Technically the text font in the SVG image should not be changed after it is created. On the Tasso website, I do a CSS font substitution after the SVG image is made, and since the font metrics are not too different (the font is slightly smaller), there are no major problems:

http://www.tassomusic.org/work/?id=Trm0059b

screen shot 2018-05-13 at 5 36 07 pm

The font is Simonetta, from Google fonts:

https://fonts.google.com/specimen/Simonetta

Notice that the text on the page is Simonetta as well as in the SVG. The SVG output from verovio used Times as the font, but I used CSS to override it in a similar manner to VHV, where I must have forced the font to Palatino to make the text more interesting:

VHV overrides this by setting svg tspan font-family to Palatino, VerovioText ! important.

Related to the previous note, VerovioText seems to be required in order to have the elision character (not the entire set of glyphs for all letters).

It would be nice to use font substitution in the pdfkit conversion from SVG to PDF. The font substitution would be suboptimal in terms of spacing, but in many cases that will not matter.

Maybe using jquery or similar to change the Times text into another font before creating the PDF with pdfkit will force it to use another font. Changing the font with CSS definitely does not set the font in the PDF, but the PDF output from pdfkit does incorporate the text elisions:

screen shot 2018-05-13 at 5 47 57 pm

Notice the elision in the above example from the same work. But also notice that the syllables are overlapping because the PDF is using a substitution for the original Times used in the web browser.

Here is a sample I used for the following study:

!!!OTL: Title of piece goes here
!!!COM: some composer
!!!CDT: 1846-1937
!!!OMD: Allegro
**kern  **text
*clefG2 *
*k[]    *
*M4/4   *
=1- =1-
!LO:TX:a:i:t=dolce  !
1e  A
=2  =2
1b, Lit-
=3  =3
2e  -tle
2f  white
=4  =4
1d  rab-
=5  =5
1f  -bit
=6  =6
1g  sat
=7  =7
1e  on
=8  =8
!LO:TX:b:i:t=rit.   !
1f  a
=9  =9
1c; hill.
==  ==
*-  *-

Rendering with verovio:

screen shot 2018-05-13 at 5 16 43 pm

If I change the font from Times to sans-serif within the SVG image:

screen shot 2018-05-13 at 5 17 50 pm

It does not look too bad, parhaps in part because Google Chrome intentionally matches the font metrics of the two fonts. Here is a switch to Courier which is more drastic:

screen shot 2018-05-13 at 5 19 42 pm

Notice for example that the word "white" is now closer to the next word. If the spacing of the music were tight, then the "white" text would overlap with the "rabbit" text. This is because the SVG image has no layout knowledge of its own, as it uses the placement of the text given to it by verovio.

So the best option is to enable verovio to use a specific font when typesetting the music. The name of this font would replace Times in the SVG <style> element.

When printing to PDF with pdfkit, I think the Times font is totally different than the one used by verovio, but since it is close enough the difference is not too noticeable. Perhaps the PDF does not include any font directly, and the font comes from the operating system.

a boolean to avoid inlining VerovioText in SVG style tag. Currently additional 7kB of font data is copied from worker and parsed each time the score is rendered.

Notice in this example when converting into SVG, there is not vrvText embedded in the <style> section of the SVG. This is because there is no elision character, so the vrvText font is not needed, and so not included. Probably the entire 3-character font is included when the font is needed, rather than just the character of the font that are needed.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="2100.00px" height="2970.00px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="visible">
    <desc>Engraved by Verovio 2.0.0-dev-509c169</desc>
    <defs>
        <symbol id="E050" viewBox="0 0 1000 1000" overflow="inherit">
            <path transform="scale(1,-1)" d="M441 -245c-23 -4 -48 -6 -76 -6c-59 0 -102 7 -130 20c-88 42 -150 93 -187 154c-26 44 -43 103 -48 176c-4 60 11 123 44 189c29 57 65 106 110 148s96 85 153 127c-3 16 -8 46 -13 92c-4 43 -5 73 -5 89c0 117 16 172 69 257c34 54 64 82 89 82c21 0 43 -30 69 -92 s39 -115 41 -159c2 -120 -19 -173 -67 -256c-13 -20 -63 -90 -98 -118c-13 -9 -25 -19 -37 -29l31 -181c8 1 18 2 28 2c58 0 102 -12 133 -35c59 -43 92 -104 98 -184c11 -135 -80 -229 -180 -270c8 -57 17 -110 25 -162c5 -31 6 -58 6 -80c0 -30 -5 -53 -14 -70 c-35 -64 -88 -99 -158 -103c-42 -3 -83 6 -124 26c-50 24 -77 59 -80 105c-2 34 5 63 20 87c18 28 45 42 79 44c51 4 99 -40 103 -87c4 -56 -30 -94 -105 -115c17 -24 51 -36 102 -36c62 0 116 43 140 85c9 16 13 41 13 74c0 20 -1 42 -5 67c-8 53 -18 106 -26 159zM461 939 c-95 0 -135 -175 -135 -286c0 -24 2 -48 5 -71c50 39 92 82 127 128c43 57 63 106 60 148c-4 54 -23 82 -57 81zM406 119l54 -326c80 27 116 88 109 184c-7 99 -62 146 -163 142zM382 117c-74 -2 -132 -50 -128 -127c2 -46 43 -99 75 -115c-3 -2 -7 -5 -10 -10 c-70 33 -116 88 -123 172c-5 73 42 135 88 170c23 17 49 29 78 36l-29 170c-21 -13 -52 -37 -92 -73c-50 -44 -86 -84 -109 -119c-49 -75 -71 -140 -67 -195c5 -68 35 -127 93 -176s125 -73 203 -73c25 0 50 3 75 9c-19 111 -36 221 -54 331z" />
        </symbol>
        <symbol id="E084" viewBox="0 0 1000 1000" overflow="inherit">
            <path transform="scale(1,-1)" d="M0 -78c84 97 114 180 134 329h170c-13 -32 -82 -132 -99 -151l-84 -97c-33 -36 -59 -63 -80 -81h162v102l127 123v-225h57v-39h-57v-34c0 -43 19 -65 57 -65v-34h-244v36c48 0 60 26 60 70v27h-203v39z" />
        </symbol>
        <symbol id="E0A2" viewBox="0 0 1000 1000" overflow="inherit">
            <path transform="scale(1,-1)" d="M198 133c102 0 207 -45 207 -133c0 -92 -98 -133 -207 -133c-101 0 -198 46 -198 133c0 88 93 133 198 133zM293 -21c0 14 -3 29 -8 44c-7 20 -18 38 -33 54c-20 21 -43 31 -68 31l-20 -2c-15 -5 -27 -14 -36 -28c-4 -9 -6 -17 -8 -24s-3 -16 -3 -27c0 -15 3 -34 9 -57 s18 -41 34 -55c15 -15 36 -23 62 -23c4 0 10 1 18 2c19 5 32 15 40 30s13 34 13 55z" />
        </symbol>
        <symbol id="E4CE" viewBox="0 0 1000 1000" overflow="inherit">
            <path transform="scale(1,-1)" d="M90 166l-12 -2h-8c-20.6667 0 -37.3333 6.66667 -50 20c-12.6667 13.3333 -19.3333 28.6667 -20 46c0 19.3333 7.66667 35.6667 23 49c14 14 35 21 63 21c29.3333 0 52.3333 -10.3333 69 -31c16.6667 -20.6667 25 -46 25 -76c0 -20 -3 -39.3333 -9 -58 c-6 -18.6667 -15.6667 -37.6667 -29 -57c-24 -35.3333 -59.6667 -61.3333 -107 -78l-4 17c24 9.33333 42.6667 24 56 44c13.3333 20 20 40.6667 20 62c0 20 -5.66667 34.3333 -17 43z" />
        </symbol>
        <symbol id="E0A3" viewBox="0 0 1000 1000" overflow="inherit">
            <path transform="scale(1,-1)" d="M98 -102zM200 138l41 -5c-2 0 -41 5 -41 5zM278 64c0 22 -17 39 -43 39c-12 0 -26 -3 -41 -10c-85 -43 -165 -94 -165 -156c5 -25 15 -32 49 -32c67 11 200 95 200 159zM0 -36c0 68 73 174 200 174c66 0 114 -39 114 -97c0 -84 -106 -173 -218 -173c-64 0 -96 32 -96 96z " />
        </symbol>
        <symbol id="E4C0" viewBox="0 0 1000 1000" overflow="inherit">
            <path transform="scale(1,-1)" d="M605 21zM0 0c0 3 3 17 4 21c61 306 268 299 300 299c29 0 238 7 300 -299c1 -4 1 -18 1 -21h-32c-1 1 -4 22 -5 25c-10 38 -52 202 -265 202c-208 0 -252 -159 -264 -200c-1 -4 -6 -26 -6 -27h-33zM358 52c0 -30 -25 -55 -55 -55c-29 0 -54 25 -54 55c0 29 25 54 54 54 c30 0 55 -25 55 -54z" />
        </symbol>
    </defs>
    <style type="text/css">g.page-margin{font-family:Times;} g.tempo{font-weight:bold;} g.dir, g.dynam, g.mNum{font-style:italic;} g.label{font-weight:normal;}</style>
    <svg class="definition-scale" viewBox="0 0 21000 29700">
        <g class="page-margin" transform="translate(500, 500)">
            <g class="system" id="system-0000000824135015">
                <g class="section boundaryStart" id="section-0000001723227591" />
                <g class="measure" id="measure-L9">
                    <g class="staff" id="staff-L9F1N1">
                        <path d="M0 2729 L3087 2729" stroke="#000000" stroke-width="13" />
                        <path d="M0 2909 L3087 2909" stroke="#000000" stroke-width="13" />
                        <path d="M0 3089 L3087 3089" stroke="#000000" stroke-width="13" />
                        <path d="M0 3269 L3087 3269" stroke="#000000" stroke-width="13" />
                        <path d="M0 3449 L3087 3449" stroke="#000000" stroke-width="13" />
                        <g class="clef" id="clef-0000000222179708">
                            <use xlink:href="#E050" x="90" y="3269" height="720px" width="720px" />
                        </g>
                        <g class="meterSig" id="msig-0000001847773870">
                            <use xlink:href="#E084" x="735" y="2909" height="720px" width="720px" />
                            <use xlink:href="#E084" x="735" y="3269" height="720px" width="720px" />
                        </g>
                        <g class="layer" id="layer-L9F1N1">
                            <g class="note" id="note-L11F1">
                                <use xlink:href="#E0A2" x="1304" y="3449" height="720px" width="720px" />
                                <g class="accid" id="accid-0000001870882817" />
                                <g class="verse" id="verse-L11F2">
                                    <g class="syl" id="syl-L11F2">
                                        <text x="1214" y="4171" font-size="0px">
                                            <tspan class="text" id="text-0000001564305230">
                                                <tspan font-size="405px" class="text">A</tspan>
                                            </tspan>
                                        </text>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g class="dir" id="dir-L11F1">
                        <text x="1304" y="2596" font-size="0px">
                            <tspan class="text" id="text-0000002007869167">
                                <tspan font-size="405px" class="text">dolce</tspan>
                            </tspan>
                        </text>
                    </g>
                    <g class="tempo" id="tempo-L4F1">
                        <text x="735" y="2185" font-size="0px">
                            <tspan class="text" id="text-0000000232017740">
                                <tspan font-size="405px" class="text">Allegro</tspan>
                            </tspan>
                        </text>
                    </g>
                    <g class="mNum autogenerated" id="mnum-0000000949975372" />
                    <g class="barLineAttr" id="bline-0000000250879945">
                        <path d="M3074 3449 L3074 2729" stroke="#000000" stroke-width="27" />
                    </g>
                </g>
                <g class="measure" id="measure-L12">
                    <g class="staff" id="staff-L12F1N1">
                        <path d="M3087 2729 L5516 2729" stroke="#000000" stroke-width="13" />
                        <path d="M3087 2909 L5516 2909" stroke="#000000" stroke-width="13" />
                        <path d="M3087 3089 L5516 3089" stroke="#000000" stroke-width="13" />
                        <path d="M3087 3269 L5516 3269" stroke="#000000" stroke-width="13" />
                        <path d="M3087 3449 L5516 3449" stroke="#000000" stroke-width="13" />
                        <g class="layer" id="layer-L12F1N1">
                            <g class="note" id="note-L13F1">
                                <use xlink:href="#E0A2" x="3288" y="3089" height="720px" width="720px" />
                                <g class="accid" id="accid-0000001338545533" />
                                <g class="verse" id="verse-L13F2">
                                    <g class="syl" id="syl-L13F2">
                                        <text x="3198" y="4171" font-size="0px">
                                            <tspan class="text" id="text-0000001578803093">
                                                <tspan font-size="405px" class="text">Lit</tspan>
                                            </tspan>
                                        </text>
                                        <rect x="4628" y="4072" height="18" width="120" />
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g class="breath" id="breath-L13F1">
                        <use xlink:href="#E4CE" x="4835" y="2684" height="720px" width="720px" />
                    </g>
                    <g class="mNum autogenerated" id="mnum-0000000479665255" />
                    <g class="barLineAttr" id="bline-0000001873322068">
                        <path d="M5503 3449 L5503 2729" stroke="#000000" stroke-width="27" />
                    </g>
                </g>
                <g class="measure" id="measure-L14">
                    <g class="staff" id="staff-L14F1N1">
                        <path d="M5516 2729 L8068 2729" stroke="#000000" stroke-width="13" />
                        <path d="M5516 2909 L8068 2909" stroke="#000000" stroke-width="13" />
                        <path d="M5516 3089 L8068 3089" stroke="#000000" stroke-width="13" />
                        <path d="M5516 3269 L8068 3269" stroke="#000000" stroke-width="13" />
                        <path d="M5516 3449 L8068 3449" stroke="#000000" stroke-width="13" />
                        <g class="layer" id="layer-L14F1N1">
                            <g class="note" id="note-L15F1">
                                <use xlink:href="#E0A3" x="5717" y="3449" height="720px" width="720px" />
                                <g class="stem" id="stem-0000001911985445">
                                    <rect x="5925" y="2819" height="608" width="18" />
                                </g>
                                <g class="accid" id="accid-0000000069350821" />
                                <g class="verse" id="verse-L15F2">
                                    <g class="syl" id="syl-L15F2">
                                        <text x="5627" y="4171" font-size="0px">
                                            <tspan class="text" id="text-0000000958196630">
                                                <tspan font-size="405px" class="text">tle</tspan>
                                            </tspan>
                                        </text>
                                    </g>
                                </g>
                            </g>
                            <g class="note" id="note-L16F1">
                                <use xlink:href="#E0A3" x="6886" y="3359" height="720px" width="720px" />
                                <g class="stem" id="stem-0000001941564054">
                                    <rect x="7094" y="2729" height="608" width="18" />
                                </g>
                                <g class="accid" id="accid-0000000679540815" />
                                <g class="verse" id="verse-L16F2">
                                    <g class="syl" id="syl-L16F2">
                                        <text x="6796" y="4171" font-size="0px">
                                            <tspan class="text" id="text-0000000993749063">
                                                <tspan font-size="405px" class="text">white</tspan>
                                            </tspan>
                                        </text>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g class="mNum autogenerated" id="mnum-0000001485688913" />
                    <g class="barLineAttr" id="bline-0000000250194292">
                        <path d="M8055 3449 L8055 2729" stroke="#000000" stroke-width="27" />
                    </g>
                </g>
                <g class="measure" id="measure-L17">
                    <g class="staff" id="staff-L17F1N1">
                        <path d="M8068 2729 L10052 2729" stroke="#000000" stroke-width="13" />
                        <path d="M8068 2909 L10052 2909" stroke="#000000" stroke-width="13" />
                        <path d="M8068 3089 L10052 3089" stroke="#000000" stroke-width="13" />
                        <path d="M8068 3269 L10052 3269" stroke="#000000" stroke-width="13" />
                        <path d="M8068 3449 L10052 3449" stroke="#000000" stroke-width="13" />
                        <g class="layer" id="layer-L17F1N1">
                            <g class="note" id="note-L18F1">
                                <use xlink:href="#E0A2" x="8269" y="3539" height="720px" width="720px" />
                                <g class="accid" id="accid-0000000181749998" />
                                <g class="verse" id="verse-L18F2">
                                    <g class="syl" id="syl-L18F2">
                                        <text x="8179" y="4171" font-size="0px">
                                            <tspan class="text" id="text-0000001713126399">
                                                <tspan font-size="405px" class="text">rab</tspan>
                                            </tspan>
                                        </text>
                                        <rect x="9426" y="4072" height="18" width="120" />
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g class="mNum autogenerated" id="mnum-0000001041196586" />
                    <g class="barLineAttr" id="bline-0000001716700747">
                        <path d="M10039 3449 L10039 2729" stroke="#000000" stroke-width="27" />
                    </g>
                </g>
                <g class="measure" id="measure-L19">
                    <g class="staff" id="staff-L19F1N1">
                        <path d="M10052 2729 L12036 2729" stroke="#000000" stroke-width="13" />
                        <path d="M10052 2909 L12036 2909" stroke="#000000" stroke-width="13" />
                        <path d="M10052 3089 L12036 3089" stroke="#000000" stroke-width="13" />
                        <path d="M10052 3269 L12036 3269" stroke="#000000" stroke-width="13" />
                        <path d="M10052 3449 L12036 3449" stroke="#000000" stroke-width="13" />
                        <g class="layer" id="layer-L19F1N1">
                            <g class="note" id="note-L20F1">
                                <use xlink:href="#E0A2" x="10253" y="3359" height="720px" width="720px" />
                                <g class="accid" id="accid-0000000170221171" />
                                <g class="verse" id="verse-L20F2">
                                    <g class="syl" id="syl-L20F2">
                                        <text x="10163" y="4171" font-size="0px">
                                            <tspan class="text" id="text-0000001627515249">
                                                <tspan font-size="405px" class="text">bit</tspan>
                                            </tspan>
                                        </text>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g class="mNum autogenerated" id="mnum-0000002028633249" />
                    <g class="barLineAttr" id="bline-0000001255242842">
                        <path d="M12023 3449 L12023 2729" stroke="#000000" stroke-width="27" />
                    </g>
                </g>
                <g class="measure" id="measure-L21">
                    <g class="staff" id="staff-L21F1N1">
                        <path d="M12036 2729 L14020 2729" stroke="#000000" stroke-width="13" />
                        <path d="M12036 2909 L14020 2909" stroke="#000000" stroke-width="13" />
                        <path d="M12036 3089 L14020 3089" stroke="#000000" stroke-width="13" />
                        <path d="M12036 3269 L14020 3269" stroke="#000000" stroke-width="13" />
                        <path d="M12036 3449 L14020 3449" stroke="#000000" stroke-width="13" />
                        <g class="layer" id="layer-L21F1N1">
                            <g class="note" id="note-L22F1">
                                <use xlink:href="#E0A2" x="12237" y="3269" height="720px" width="720px" />
                                <g class="accid" id="accid-0000000404667024" />
                                <g class="verse" id="verse-L22F2">
                                    <g class="syl" id="syl-L22F2">
                                        <text x="12147" y="4171" font-size="0px">
                                            <tspan class="text" id="text-0000000110005373">
                                                <tspan font-size="405px" class="text">sat</tspan>
                                            </tspan>
                                        </text>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g class="mNum autogenerated" id="mnum-0000001132035291" />
                    <g class="barLineAttr" id="bline-0000000193228254">
                        <path d="M14007 3449 L14007 2729" stroke="#000000" stroke-width="27" />
                    </g>
                </g>
                <g class="measure" id="measure-L23">
                    <g class="staff" id="staff-L23F1N1">
                        <path d="M14020 2729 L16004 2729" stroke="#000000" stroke-width="13" />
                        <path d="M14020 2909 L16004 2909" stroke="#000000" stroke-width="13" />
                        <path d="M14020 3089 L16004 3089" stroke="#000000" stroke-width="13" />
                        <path d="M14020 3269 L16004 3269" stroke="#000000" stroke-width="13" />
                        <path d="M14020 3449 L16004 3449" stroke="#000000" stroke-width="13" />
                        <g class="layer" id="layer-L23F1N1">
                            <g class="note" id="note-L24F1">
                                <use xlink:href="#E0A2" x="14221" y="3449" height="720px" width="720px" />
                                <g class="accid" id="accid-0000001823567672" />
                                <g class="verse" id="verse-L24F2">
                                    <g class="syl" id="syl-L24F2">
                                        <text x="14131" y="4171" font-size="0px">
                                            <tspan class="text" id="text-0000000743043670">
                                                <tspan font-size="405px" class="text">on</tspan>
                                            </tspan>
                                        </text>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g class="mNum autogenerated" id="mnum-0000000597313013" />
                    <g class="barLineAttr" id="bline-0000001077211941">
                        <path d="M15991 3449 L15991 2729" stroke="#000000" stroke-width="27" />
                    </g>
                </g>
                <g class="measure" id="measure-L25">
                    <g class="staff" id="staff-L25F1N1">
                        <path d="M16004 2729 L17988 2729" stroke="#000000" stroke-width="13" />
                        <path d="M16004 2909 L17988 2909" stroke="#000000" stroke-width="13" />
                        <path d="M16004 3089 L17988 3089" stroke="#000000" stroke-width="13" />
                        <path d="M16004 3269 L17988 3269" stroke="#000000" stroke-width="13" />
                        <path d="M16004 3449 L17988 3449" stroke="#000000" stroke-width="13" />
                        <g class="layer" id="layer-L25F1N1">
                            <g class="note" id="note-L27F1">
                                <use xlink:href="#E0A2" x="16205" y="3359" height="720px" width="720px" />
                                <g class="accid" id="accid-0000000897975260" />
                                <g class="verse" id="verse-L27F2">
                                    <g class="syl" id="syl-L27F2">
                                        <text x="16115" y="4171" font-size="0px">
                                            <tspan class="text" id="text-0000001407608385">
                                                <tspan font-size="405px" class="text">a</tspan>
                                            </tspan>
                                        </text>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g class="dir" id="dir-L27F1">
                        <text x="16205" y="3771" font-size="0px">
                            <tspan class="text" id="text-0000001148204494">
                                <tspan font-size="405px" class="text">rit.</tspan>
                            </tspan>
                        </text>
                    </g>
                    <g class="mNum autogenerated" id="mnum-0000001200766133" />
                    <g class="barLineAttr" id="bline-0000000881854992">
                        <path d="M17975 3449 L17975 2729" stroke="#000000" stroke-width="27" />
                    </g>
                </g>
                <g class="measure" id="measure-L28">
                    <g class="staff" id="staff-L28F1N1">
                        <path d="M17988 2729 L20004 2729" stroke="#000000" stroke-width="13" />
                        <path d="M17988 2909 L20004 2909" stroke="#000000" stroke-width="13" />
                        <path d="M17988 3089 L20004 3089" stroke="#000000" stroke-width="13" />
                        <path d="M17988 3269 L20004 3269" stroke="#000000" stroke-width="13" />
                        <path d="M17988 3449 L20004 3449" stroke="#000000" stroke-width="13" />
                        <g class="ledgerLines below">
                            <path d="M18144 3629 L18524 3629" stroke="#000000" stroke-width="22" />
                        </g>
                        <g class="layer" id="layer-L28F1N1">
                            <g class="note" id="note-L29F1">
                                <use xlink:href="#E0A2" x="18189" y="3629" height="720px" width="720px" />
                                <g class="accid" id="accid-0000001641715880" />
                                <g class="verse" id="verse-L29F2">
                                    <g class="syl" id="syl-L29F2">
                                        <text x="18099" y="4171" font-size="0px">
                                            <tspan class="text" id="text-0000000988062608">
                                                <tspan font-size="405px" class="text">hill.</tspan>
                                            </tspan>
                                        </text>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g class="fermata" id="fermata-L29F1">
                        <use xlink:href="#E4C0" x="18116" y="2682" height="720px" width="720px" />
                    </g>
                    <g class="mNum autogenerated" id="mnum-0000000455358830" />
                    <g class="barLineAttr" id="bline-0000002017874267">
                        <path d="M19842 3449 L19842 2729" stroke="#000000" stroke-width="27" />
                        <path d="M19959 3449 L19959 2729" stroke="#000000" stroke-width="90" />
                    </g>
                </g>
                <g class="boundaryEnd section-0000001723227591" id="bdend-0000000764395618" />
            </g>
            <g class="pgHead" id="pghead-0000001257765855">
                <text x="0" y="0" font-size="0px">
                    <tspan class="rend" id="rend-0000001589187564" x="10000" y="417" text-anchor="middle">
                        <tspan class="rend" id="rend-0000001221270409">
                            <tspan class="text" id="text-0000001364318273">
                                <tspan font-size="607px" class="text">Title of piece goes here</tspan>
                            </tspan>
                        </tspan>
                        <tspan class="lb" id="lb-0000000696987265" />
                        <tspan class="text" id="text-0000002048107648">
                            <tspan font-size="405px" class="text" x="10000" y="808"> 
</tspan>
                        </tspan>
                        <tspan class="lb" id="lb-0000000433909524" />
                        <tspan class="text" id="text-0000001926341149">
                            <tspan font-size="405px" class="text" x="10000" y="1199"> </tspan>
                        </tspan>
                    </tspan>
                </text>
                <text x="0" y="0" font-size="0px">
                    <tspan class="rend" id="rend-0000000088506623" x="20000" y="1500" text-anchor="end">
                        <tspan class="text" id="text-0000002037157610">
                            <tspan font-size="324px" class="text">some composer</tspan>
                        </tspan>
                    </tspan>
                </text>
                <text x="0" y="0" font-size="0px">
                    <tspan class="rend" id="rend-0000000913627772" x="20000" y="1792" text-anchor="end">
                        <tspan class="text" id="text-0000000254302608">
                            <tspan font-size="324px" class="text">1846–1937</tspan>
                        </tspan>
                    </tspan>
                </text>
            </g>
        </g>
    </svg>
</svg>
craigsapp commented 6 years ago

For completeness, here are the default font settings in Chrome:

screen shot 2018-05-13 at 9 19 06 pm
craigsapp commented 6 years ago

Here is the font metrics for Times that verovio uses:

https://github.com/rism-ch/verovio/blob/develop/data/text/Times.xml

And Times-italic, Times-bold, and Times-bolditalic font metrics are all in the same directory:

https://github.com/rism-ch/verovio/tree/develop/data/text

The other font metric files do not actually seem to be used, and unknown text characters are assumed to have the font metrics of the letter o within verovio.

To add another font, one step would be to add another similar file for bounding box information.

The file Times.xml is loaded into verovio in this file:

https://github.com/rism-ch/verovio/blob/902f52ec00b67200c03ae747becd8ab194b2d413/src/vrv.cpp#L193-L231

This will not directly solve the diacritic problem, but it is related information.

craigsapp commented 6 years ago

Documentation for fonts in PDFKit: http://pdfkit.org/docs/text.html#fonts

lpugin commented 6 years ago

I am not sure this was already mentioned in this thread but one way to fix it can be to try to have the text font you want to be use to be made available as as base64 file and pass it to PDFKit. This is the way the VerovioText font is passed. (The font included in the SVG file is ignored by the converted and it has to be set explicitly. See https://github.com/rism-ch/verovio/blob/gh-pages/_layouts/viewer.html#L63 amd https://github.com/rism-ch/verovio/blob/gh-pages/mei-viewer.xhtml#L397-398). Of course this will not solve issues related to spacing in layout calculation

craigsapp commented 6 years ago

I have tried that today, with some success but not completely yet... I have done those two things, but then there are some complications related to using another font other than Times.

PiotrSzy commented 6 years ago

I have implemented using a custom font (EB Garamond from Google Fonts).

How it is done:

EB Garamond is an example, it was the first font I found which had Latin Extended and was narrow enough. I had problems with woff version of VerovioText, so I sticked to ttf files. They are twice as big as woffs. Eventually we should migrate to woff. Base64 data of VerovioText in js is not needed any more. The ttf files are quite big (ca. 2MB), but pdfkit will only embed used glyphs.

craigsapp commented 6 years ago

Świetnie!:

screen shot 2018-05-14 at 8 09 12 am 
**kern  **text
=1  =
4e  Męż-
4c  -ny
2d  bądź,
=   =
4g  chroń
4f  pułk
4c  twój
4d  i a
=   =
2g  sześć
2f  flag.
==  =
*-  *-

pressing alt-t to download one-page version of PDF:

screen shot 2018-05-14 at 8 09 36 am

The downloaded file is 13 kB in size.

craigsapp commented 6 years ago

Italic, Bold, and Bold-Italic are also working:

screen shot 2018-05-14 at 8 22 23 am 
!!!OTL: <i>Pieśń husarii</i>
!!!OMD: Dostojny
**kern  **text
=1  =
4e  Męż-
4c  -ny
2d  bądź,
=   =
4g  chroń
4f  pułk
4c  twój
4d  i a
=   =
!!LO:TX:a:Bi:t=rit.
2g  sześć
2f  flag.
==  =
*-  *-

pressing alt-shift-T to download (multi-page) PDF with title:

screen shot 2018-05-14 at 8 23 14 am