Brion, Have you checked if Vexflow renders svg properly on you Macbook/Ubuntu? Maybe you can get some ideas from its code. http://vexflow.com/

Thanks for working on this, David --Micru

On Sat, May 4, 2013 at 7:09 PM, Brion Vibber bvibber@wikimedia.org wrote:

I've done a little weekend hacking experimenting with adding higher-resolution output support for the Score extension -- the current PNG images look pixelated or fuzzy when printed or viewed on high-DPI (eg 'Retina') displays.

There's two avenues I'm exploring:

• https://gerrit.wikimedia.org/r/#/c/62243/ - outputs SVG instead of PNG

In theory, SVGs will scale cleanly to any screen or print resolution; but some older browsers (IE < 9 and Android < 3) won't display them.

Unfortunately I'm getting totally corrupted SVG output on my MacBook with Lilypond 2.16.2. On my Ubuntu 12.04 machine with 2.14.something I get complete-looking SVGs, but they're missing the XML namespace and so won't render.

So far there's no PNG fallback made, which would be needed (either by converting the SVGs or by running lilypond twice with different backends). Also don't know if the SVGs are full-page or trimmed, since they don't display.

• https://gerrit.wikimedia.org/r/#/c/62313/ - allows for producing

higher-resolution PNGs

This adds a $wgScoreScale setting, which can be cranked up from the 1.0 default to say 2.0 to render PNGs twice as big as normal and scale them down in the browser.

This looks great in a PDF or on a Retina screen, but the scale-down might not be ideal on traditional screens with some browsers.

Could be improved by outputting to multiple resolutions (1.0, 1.5, and 2.0 scale) and using 'srcset' to specify which image goes to which resolution.

(In this version, I'm storing the images' width/height in a .json file.)

Any ideas or preferences on which is the better way to go?

-- brion _______________________________________________ Wikitech-l mailing list Wikitech-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l

On Sat, May 4, 2013 at 4:09 PM, Brion Vibber bvibber@wikimedia.org wrote:

I've done a little weekend hacking experimenting with adding higher-resolution output support for the Score extension -- the current PNG images look pixelated or fuzzy when printed or viewed on high-DPI (eg 'Retina') displays.

Awesome!

There's two avenues I'm exploring:

• https://gerrit.wikimedia.org/r/#/c/62243/ - outputs SVG instead of PNG

In theory, SVGs will scale cleanly to any screen or print resolution; but some older browsers (IE < 9 and Android < 3) won't display them.

Unfortunately I'm getting totally corrupted SVG output on my MacBook with Lilypond 2.16.2. On my Ubuntu 12.04 machine with 2.14.something I get complete-looking SVGs, but they're missing the XML namespace and so won't render.

Bummer. This is an avenue Jan Gerber is exploring as part of figuring out bug 47826: https://bugzilla.wikimedia.org/47826

The problem outlined there is that it doesn't take a terribly complicated score to run our current implementation out of memory, where the most expensive step is the PNG conversion, which as of this writing is still happening on our main webservers. He's hoping that, rather than using Postscript as an intermediate format, we can use SVG, which will make it a little easier to offload to our image scalers, and (probably more importantly) better suited to direct inlining. Of course, it could be that SVG->PNG is more memory intensive than PS->PNG, but maybe someday soon we can come to expect full SVG support everywhere.

Looks like part of getting SVG working is going to be some upstream fixes to Lilypond. :-/

• https://gerrit.wikimedia.org/r/#/c/62313/ - allows for producing higher-resolution PNGs

[...]

Any ideas or preferences on which is the better way to go?

Due to the memory usage issues, my preference would be for the SVG option. PNG seems like more of a legacy support option than something we should use in a high-res setting.

Rob