Raphaeljs renders all text as Italic in IE

Asked 24/5, 2011 at 11:58 Answered 5/7, 2011 at 9:11

internet-explorer internet-explorer-8 svg raphael vml

I'm using RaphaelJS for visually representing some data. The underlying technology is SVG so obviously things don't always work that well in IE, but the library does a relatively ok job of still rendering something useful, although it often tends to look pretty poor.

In any case, I can't seem to get around this basic issue. Text is rendered fine in Chrome or FireFox, but everything renders as bold and italic in IE8.

To see my issue in action, go to the RaphaelJS playground and use the following code

paper.text(100, 100, "this is the text")

Here is the result in Chrome and IE.

Chrome IE8

Is there any workaround for this?

Lactescent answered 24/5, 2011 at 11:58 Comment(2)

For what it's worth, when Raphael is running on IE8 or lower, the underlying technology is actually VML rather than SVG; it automatically detects that IE8 doesn't support SVG and falls back to VML instead, which is supported. However, this should be transparent to the developer, so it shouldn't make any difference. – Ventage 24/5, 2011 at 13:9

I get the impression that .text() is a Raphael feature that just doesn't work as expected, and that it's been unofficially dumped on the expectation that people will use .print() instead. It also seems that to use .print() you must have your font as a 'cufon font' (i.e. javascript format), which may violate the licence for some fonts. Basically, it seems like text in Raphael is (as of 2.1.0) a bit of a mess. – Danas 8/5, 2013 at 10:59

Have you tried .attr({"font-family":"xxxxxx","font-weight":400});

Backtrack answered 25/5, 2011 at 3:7 Comment(1)

Tried "font-weight":400, "font-weight":100, "font-weight":'normal', numbers as numbers and as strings, with an explicitly declared font and without. No change. Also tried changing the attributes in the VML DOM nodes directly using IE developer tools - no change. – Danas 17/12, 2012 at 23:22

-1

Just for all those that find this page and have the same problem. The solution is the doctype used. You should (at least since GWT 2.x) use the <!DOCTYPE html> if you do so Internet Explorer renders the ....

Shumpert answered 5/7, 2011 at 9:11 Comment(2)

Sorry, could you maybe edit your sentence - it doesn't make 100% sense – Lactescent 5/7, 2011 at 10:41

Like Jaco Pretorius, doctype made no difference for me. In fact mine was <!DOCTYPE html> already, and variants made no difference. – Danas 17/12, 2012 at 23:13

Recommended topics

Hot tags