Fonts not displayed in microsoft-edge for drawURL

cburgmer / rasterizeHTML.js

Renders HTML into the browser's canvas

http://cburgmer.github.io/rasterizeHTML.js

MIT License

2.45k stars 220 forks source link

Fonts not displayed in microsoft-edge for drawURL #99

Open pjeannet opened 9 years ago

pjeannet commented 9 years ago

Hi, I tested the Library in various navigators today and managed to render the page I wanted to with drawURL. However in Microsoft-edge the custom fonts were not rendered in the canvas (some glyphicons and another custom one for the texts).

patrickkettner commented 9 years ago

@pierre-weceipt do you have a working example of glyphicons in another browser?

cburgmer commented 9 years ago

Hey, looks like you at least got some basics working in edge? Good to hear. If you want to provide any information around support Edge for the README.md feel free to do so :)

It looks like there's currently no way to install Windows 10 or Edge in a VirtualBox, so I won't be able to reproduce anything myself.

patrickkettner commented 9 years ago

I am more then happy to help in reducing anything

pjeannet commented 9 years ago

I do not have a stable access to internet for the next week but will try to give you samples and do more tests on Edge as soon as I come back. For the moment I can tell that everything was working the same as on Chrome/firefox except for the fonts that were not rendered (not just glyphicons) but there were no errors in console.

cburgmer commented 9 years ago

There's now a VM provided with Edge and I can test locally. If you open test/manualIntegrationTestForWebkit.html, you'll see that none of the 5 test images are correctly rendered. Some of the things missing:

Web fonts
Background images
Possibly JavaScript

All of those might be issues in rasterizeHTML.js and need more investigating.

I'm quite happy though. Some of the things are already supported out of the box.

cburgmer commented 9 years ago

Just to add feedback, ace19781d70e fixes an issue where the other browsers so far have been happy, but Edge is closer to the standard (and less lenient).

cburgmer commented 9 years ago

I can investigate for now, but it seems that some resources are not properly sourced, and thus cannot be loaded.

cburgmer commented 9 years ago

There are definitely tests failing for https://github.com/cburgmer/inlineresources which does the heavy lifting for external resources. I've pushed a change to simplify testing against different browsers via karma. Help debugging & fixing appreciated.

pjeannet commented 9 years ago

I finally came back home and will try to help debuging on edge. Not promising anything though as I'm really new to Node :/

PS : sorry for the closing/reopenning, I missclicked u_u

cburgmer commented 9 years ago

I've been busy with other things in the meantime. So there's no news from me. I still believe there's some investigation necessary for both modules, inlineresources and rasterizehtml. Either they are doing something wrong, or Edge is still lacking some features. I'll happily provide help if you want to dig into this. Let me know if the documentation is sufficient.

pjeannet commented 9 years ago

same for me, I had some other priorities. However I tried to run the tests for inlineresources but it's hard to run unix scripts on Windows :)

cburgmer commented 9 years ago

If it helps, I could describe my setup with virtualbox on OSX/Linux

burgua commented 5 years ago

Some time ago I also had problems with custom fonts in Edge. I am using drawHTML method, but solution should be same for drawURL.

I have solved them by inserting these fonts using base64 representation of fonts into internally generated svg in method convertElementToSvg.

Fonts need to be defined as followed: