1

I have created an online graphics editor using SVG, jquery (keith woods wrapper), web services etc. It works in the same way as Google Docs Drawing application. I have coded the editor to change fonts on elements and that works well except that bold, italic and underline don't work on fonts when I generate a graphic (png or jpg) using ImageMagick or Inkscape. However, Bold, Italic and Underline work perfectly well when viewing the SVG within a web page.

I've done a little bit of research on Stack Overflow and one person points out that CSS interprets font styles and adds a skew to a font for italic and adds stroke for bold.

I notice that with Google docs drawing they generate paths for text. I think this may be a good solution if only I can find a function or a way to generate the paths by tracing the text. I'm not at a stage where I've tried anything like this but wanted to come here first to ask people's opinions. Has anyone else had this difficulty? And if so how did you overcome it? I have seen people suggesting SVG Fonts but I'm baulking at that idea as apparently there is no support for it in FireFox and little in IE? I must say, getting my editor to work in all browsers has been a bit of a nightmare but we've jumped many hurdles to get to where we are now and I don't want something as simple as fonts to get in our way.

If anyone could give me some advice on this it would be greatly appreciated as the system is live on the web, people can use it but bold, italic and underline are disabled.

Thank you in advance

tmutton
  • 1,091
  • 7
  • 19
  • 42
  • Are you using embedded fonts? They might not have their italic and bold equivalents and ImageMagick might not try fake the styles. Also, if you want to rasterize the result canvg might be a better option http://code.google.com/p/canvg/ – methodofaction Jul 07 '12 at 14:16
  • I am using embedded fonts yeah. Image Magick just doesn't render the bold and italic at all. We can't really use canvas because we need the ability to drag objects around. – tmutton Jul 07 '12 at 16:30
  • 1
    Try with a system font such as Arial, if it works it means that you need to embed the bold and italic versions of your fonts as per this answer: http://stackoverflow.com/a/2436830/524555. – methodofaction Jul 07 '12 at 17:03
  • Canvg serves as a middleman to convert svg into bitmap in the browser. SVG Edit does this: when you select "export to bitmap" behind the scenes it puts the svg file into a canvas element and then converts that into a data-uri. So you get a bitmap without having to go through a server. – methodofaction Jul 07 '12 at 17:06
  • Update: I've tried a select few standard fonts like Arial, Verdana, Tahoma etc and these seems to work with Bold and Italic but the Underline is very thin so the generated jpg image doesn't replicate what's being shown on the svg canvas to the user. What i've had to do is write some logic in the selection of fonts by the user so some pop up with an option for B, I, U and some don't etc. I think you're right with embedding the fonts for Italic and Underline. I'll give it a go. – tmutton Jul 09 '12 at 14:30
  • Are you using a large font-size? ImageMagic is most likely trying to fake the underline, but it's implementation uses the same underline width no matter the font size. The only workaround I can think for this would be faking the underline in your editor with a rect or line of appropriate width, but it would would be difficult to implement. – methodofaction Jul 09 '12 at 14:40
  • It's funny you say that because we were thinking the same thing here. We are able to add the underline through a rectangle and it looks OK! We had a look at the fonts in Photoshop and they don't have underline ability either. I think it's just something that is interpreted. We have come to the conclusion that a few standard fonts will have bold and italic but the others we can't do anything about so that's where we are right now. It's a compromise we're wiling to live with until we can build in artistic functions like proper underline etc. – tmutton Jul 10 '12 at 08:58

0 Answers0