rendering web font on IM and web browser, align and shadow

[javismiles]

Dear friends of ImageMagick,
happy to be back again after sometime,
so im working on a little app and im stuck on a problem,
basically in the web app, users use web fonts on the browser to design and then at the end with imagemagick i reconstruct what they do in big size,
so basically i need to make sure that texts look the same when rendered with imagemagick with the TTF version of the webfont and when rendered
on the browser with the webfont

I am very conscious that webfonts can look slightly different depending on operating system and browser, but im testing with chrome, firefox and explorer and they look
almost identical across all browsers and that's good enough for this app, so on the browser side all looks goody

In the imagemagick server side everything works great in regards to position, sizes, color, the text etc
im having problems though with two things, i hope you can help me, these are the problems

a) text alignment
lets's suppose i have a multiline text aligned to the right; ("line1\nline2\nline3")
in the browser i have to use text-align:left ; whereas in imagemagick, i have to use -gravity West or East,
problem is that they don't match with each other, if in the same text i use text-align:left and gravity East , the results are different, they both try to align
to the right but in different ways, this is bad because a text can literally change position easily because of this which is a disaster in my app,
how can i make text alignment work the same in imagemagick as compared to the css browser settings?

b) the second problem is drop shadow, on the browser im using
text-shadow:2px 2px 3px #252525;filter: Shadow(Color=#252525, Direction=45, Strength=2);
(the last part with filter is for internet explorer which doesnt support the good kind of text shadow unfortunately)
this problem is not so big as even if the drop shadow is not identical its not so important, in any case i wanted to ask you if there is any advice as to the equivalent
proportions or values in the settings of the imagemagick command -shadow as compared to the web one

c) the other thing im trying is to rotate the text, in the web im using -webkit-transform, -moz-transform: rotate and ms-transform ,
i wonder if the rotation pivot point will match with imagemagick or not, any tips on this?

thank you so very much for your help and support always

Jav

[fmw42]

Hello Jav,

Sorry I am really not an expert these days on CSS font issues/features. To make things look similar in IM, even I would have to use trial and error to figure out the differences. IM does not have a real text justify option, only gravity settings (and -page or -geometry for compositing). The most flexible text function in IM is -annotate. You can get text metrics from it. Also PANGO is more flexible than Caption.

see
http://www.imagemagick.org/Usage/text/
http://www.imagemagick.org/Usage/text/#annotate
http://www.imagemagick.org/Usage/text/#font_info
http://www.imagemagick.org/Usage/text/#pango

Hope that helps. Sorry I really don't know much more than that.

Fred