Kerning, sizing issues with WebFonts , please help

[Javismiles]

Dear friends

I'm a developer and i love Phantom.js, happy to join this group

I have a problem with an app at the moment, quite desperate after a few weeks of trying to find a solution so this forum is my last hope, i hope you may be able to maybe help me

I have a Linux Centos 6 server with Phantom.js installed

I have a web-app where users mix text and images and then i use Phantom.js to render a Png or Jpeg version of their design

The webfonts i use are Google Webfonts, for example keania_oneregular or dr_sugiyamaregular, etc

The problem i have is this

- I test the webapp from a Windows 7 Chrome Browser for example, and i render the image at the Linux CentOS server

In the rendered image the Quality of the fonts is perfect, i love it, superb quality. But weird things happen in the kerning between letters and sizings and shapes of the fonts.

I am attaching here 3 images to show you an example of the problems I'm finding

The windows-browser-view.jpg contains a capture from a chrome windows 7 browser

the linux-render-view.jpg is a render done with phantom.js at my linux server

the picture odd-differences.jpg shows some of the places where its easy to see the problems

look at the word "Javito" , and the spacing between letters "i" and "t" , in the windows browser is normal,

in the linux rendering for some reason that space becomes much larger, but not in the other letters of that word, just in those 2! :)

now look at the word "amigo" , and the letters "g" and "o" , the distance between them again becomes larger in the linux render, 

but again oddly this doesnt happen between all the letters of that word just in some of them! :)

so what is really odd is that this happens between some of the letters in a word, not between all of them, it is not consistent, it seems random

so these are my problems, weird differences in Kerning and sizing in the fonts, not the quality of the fonts which is great for me, but these weird differences

By the way both these fonts are Google Fonts downloaded from Google and loaded via CSS3 using

for example

@font-face {

    font-family: 'keania_oneregular';

    src: url('fonts/keaniaone-regular-webfont.eot');

    src: url('fonts/keaniaone-regular-webfont.eot?#iefix') format('embedded-opentype'),

         url('fonts/keaniaone-regular-webfont.woff') format('woff'),

         url('fonts/keaniaone-regular-webfont.ttf') format('truetype'),

         url('fonts/keaniaone-regular-webfont.svg#keania_oneregular') format('svg');

    font-weight: normal;

    font-style: normal;

}

Now, i am aware that different OS render fonts in different ways, I totally understand that. Precisely because of that at the beginning i thought maybe

this is an issue that cannot be solved and i should give up

But then i found this great web app http://mural.ly that also uses web fonts and html5, and allows to export a Jpeg and i made tests and the results exported from their server matches exactly with what i see in the browser, that's why

i thought there must be a solution to this

I also read about Infinality for Linux

http://www.infinality.net/blog/

Could infinality solve this problem in the rendering of the fonts?

I hope you can help me as I love Phantom.js and the rendering quality is great, but i cannot understand these very weird almost random kerning and shape and sizing problems in the fonts when rendering them on the server

compared to the windows browser (i still have to test from a mac browser also)

thing is, if mural.ly manages to export a jpeg that matches perfectly with what i see from a client browser then hopefully there should be a solution to this issue

thank you so much for any help and advice

best wishes

Jav :)

[Javismiles]

I should add to this that in my app precision is very important, which is why i really need to solve this,

i really don't mind if the rendering itself of the fonts is not exactly the same, like one could be sharper and the other more blurry etc, that's not a problem at all,

but it is definitely a problem if two words that are not touching in the browser , make contact in the server render and similar issues, problems with kerning , sizing,

thank you again for any help

Jav

[Javismiles]

I attach this image comparison-browser-server.jpg that shows much better examples of issues i have and clear comparison

thank you again

Jav

[Darren Cook]

> I have a Linux Centos 6 server with Phantom.js installed
> I have a web-app where users mix text and images and then i use Phantom.js
> to render a Png or Jpeg version of their design

> ...

> - I test the webapp from a Windows 7 Chrome Browser for example,

Have you tried the latest version of Chrome (and Firefox and Opera) on
Linux? I.e. directly, not using PhantomJS. That will tell you if the
problem is Linux-related, or if it is due to PhantomJS running an older
version of WebKit. (If your kerning is fine on the latest version of
Chrome on Linux, then wait a few more weeks/months for PhantomJS 2.0)

If all Linux browsers have the kerning problem, then you need to find a
Linux fonts expert. I'd suggest asking on StackOverflow with tags such
as Linux + Fonts + Kerning?

If some Linux browsers work (e.g. Firefox), and some don't (e.g.
Chrome), then Selenium may be an alternative to PhantomJS. (Though
getting Selenium to work headless is hard.)

Darren

[Javismiles]

Dear Darren, 

thank you very much for your quick response,

at the moment i only have access to my remote dedicated linux server via SSH, without graphical interface, so can't really test the browsers visually (and i don't have linux at home)

however in the last hours i found some more info coming from other people,

for example see this link

http://unix.stackexchange.com/questions/79755/font-letter-spacing-issue-with-phantomjs-wkhtmltopdf-on-ubuntu

This person had similar problems to mine, and apparently his problems went away when he used

the tool wkhtmltopdf instead.

wkhtmltopdf is not an option for me, quality and features of phantom are much better so i need to stay with phantom

but the experience of that person shows that the issue may be somewhere in phantom.js, maybe,

how can i check the version of Phantom.js that i have? in any case its the one i installed 2 months ago,

the new one is coming in a few weeks?

There is by the way another thing i have tried after reading around,

i went to /etc/fonts/fonts.conf

and i tried to add this

<match target="font">

<edit name="hinting" mode="assign">

<bool>false</bool>

</edit>

<edit name="autohint" mode="assign">

<bool>false</bool>

</edit>

<edit name="hintstyle" mode="assign">

<const>hintnone</const>

</edit>

</match>

<match target="font">

<edit name="antialias" mode="assign">

<bool>true</bool>

</edit>

</match>

<match target="font">

<edit name="rgba" mode="assign">

<const>none</const>

</edit>

</match>

apparently font hinting may be causing problems in linux, and that would disable it

but I dont see any difference after restarting Apache,

but maybe i should restart the whole server ,do i need to restart the whole server after editing fonts.conf? and anyway is that likely to help me in any way?

I also read about Infinality for Linux

http://www.infinality.net/blog/

Could infinality solve this problem in the rendering of the fonts? Has anybody here tried it?

and if so , whats the best and simplest way to install it on my Centos 6 linux server?

thank you so much for any help and advice

[Javismiles]

i just checked by the way that im running version 1.9.1 of Phantom.js

[Darren Cook]

> at the moment i only have access to my remote dedicated linux server via
> SSH, without graphical interface, so can't really test the browsers
> visually (and i don't have linux at home)

It sounds like it would be less effort than some of the other stuff you
have tried to just get linux. If you can run a remote linux server, and
write phantomjs scripts, you must be technical enough. E.g.
https://help.ubuntu.com/community/LiveCD

I'm fairly sure a live CD will come with at least Firefox or Chrome. I
think they can also be set to save data to your windows disk, so it is
almost as good as a dual boot system.

Then package manager can be used to get Firefox and/or Chrome if not.
Opera is taken directly from here: http://deb.opera.com/

Darren

[Javier Ideami]

so after much investigations, i found a linux expert and what we found out is that if we run native firefox on centos there are no problems, no artifacts and it looks great, image attached, 

instead the artifacts seem to be coming from the way phantom.js renders things, which is a real pity, is there any way to fix that? this is what the expert also wrote to me

"i think what the problem is that phantom is using ghostscript, like all other free pdf generators that I have ever seen do, and there are a couple of things happening.

Its funny that script with phantom is called rasterizer because, from my viewpoint anyway, converting a pixel bitmap, the screen, into something more akin to a vector graphic, postscript, is opposite. (pdf is basically compressed/encapsulated postscript). If it were true postscript, like the file I will attach, it would probably be ok, but ghostscript is not postscript. Adobe/Apple/et.al. probably put million(s) of man hours in on it. Postscript saved Apple from extinction. 

So for one, you are picking up artifacts of imperfect conversion from the bitmap to the page description language. And then its substituting the free gs character outlines for the mega-dollar adobe versions. Remember Adobe Type Manager? 

When I think about it in that light, it almost seems to become familiar. Get some nice raster (png,bmp,tiff) files and convert them with gs and see if they don't have the same artifacts. "

image attached showing that render on native firefox on centos linux works great without artifacts

On Thu, Aug 29, 2013 at 2:19 AM, Javier Ideami <ide...@gmail.com> wrote:

hi friends

i have some new interesting information

i did a test outside of my web app and i was very surprised because

results came out very similar

html5: http://volandino.com/fonts/fonts.html

linux render: http://volandino.com/fonts/capture.php

better than inside my app, how is this possible i thought,

i just noticed some distorsions in some shapes, but not that much,

see for example the Letters  O  on some words have some odd cutouts

then i tried adding more css3 scale transforms

http://volandino.com/fonts/fonts2.html

http://volandino.com/fonts/capture2.php

and now the distorsion in shape of word is much more clear

What is interesting is that the first versions above are quite acceptable,

it may be that the css3 transforms in my web app are making the problem worse

do you have any data on how css3 transforms are affecting the font rendering on Phantom.js?

thank you very much

Jav

Darren

--
You received this message because you are subscribed to a topic in the Google Groups "phantomjs" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/phantomjs/B-JzBvqQ1dM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to phantomjs+...@googlegroups.com.
Visit this group at http://groups.google.com/group/phantomjs.
For more options, visit https://groups.google.com/groups/opt_out.

--
Javier Ideami

Founder Ideami Studios & Posterini.com

San Francisco, CA

+1 408 634 9071

ide...@ideami.com

http://www.ideami.com

http://www.posterini.com

--
Javier Ideami

Founder Ideami Studios & Posterini.com

San Francisco, CA

+1 408 634 9071

ide...@ideami.com

http://www.ideami.com

http://www.posterini.com

[Ariya Hidayat]

Portions of the explanation from your "Linux expert" is err on the
side of speculation and/or extrapolation. For a start, there's no
Ghostscript involved. It is not surprising that PhantomJS, via its
QtWebKit, simply uses Qt's built-in PDF engine to produce the PDF
output.

The "rasterizer" name is hardly an issue, it's just the name of the
script and you can name it whatever you like. It was originally
intended to show the feature of rasterizing the web page into an image
(PNG, GIF, JPEG), the PDF as the additional format is just a bonus
since it happens to be supported anyway. For the record, the API
function to do that is actually called "render", as evidenced from the
documentation of WebPage object.

Text rendering on Linux is a complicated subject. In the context of
PhantomJS, it involved various bits and pieces, from the fonts
themselves, FreeType, FontConfig (and its associated config file), Qt
raster engine, and finally Qt PDF engine (and maybe other parts I
forgot to list). As with any other complicated subjects, it is more
reliable to understand the topics by looking and dissecting those
individual components rather than an external cursory observations.

I wish I could afford the time to explain and investigate it further
(for my usual excuse, search for "negative spare time" in the
mailing-list archive). However, the pointers given above should serve
well as a starting point if one wants to analyze this matter in depth.


Regards,

--
Ariya Hidayat, http://ariya.ofilabs.com
http://twitter.com/ariyahidayat
http://gplus.to/ariyahidayat

[Javismiles]

i understand the complexity of an HTML/CSS rendering engine also and i know that ImageMagick is not an HTML/CSS rendering engine, its a complex library but its goal is not to render a web page and the complexity of its code is far far away behind the complexity of an HTML/CSS rendering engine. I understand that a web page is very very hard to render,

well so that's why maybe in the end the best way to capture a great screenshot is what somebody suggested me yesterday, to launch for example an opera browser with Xvfb , control it with command line commands to load the page, set a geometry of 4000 pixels or whatever necessary zooming,  and then capture the screen with ImageMagic, that may be in the end the best option

I have been wondering how mural.ly produces such perfect renderings of html5 pages from all platforms, maybe they are doing that, instead of using Phantom or Slimer maybe the way is to launch a native browser, expand it, zoom it and then capture the screen with imagemagick, i dont know if it will work, i dont know if it will zoom well etc,  i have to test it and see

thank u again for your time and explanations Ariya, and sorry for taking your time

Jav