Add sample images showing Linux rendering

[a-e-k]

These show how most of these fonts appear at 16 PPEM on a Linux system with strong hinting enabled. Generated using a new script, utils/render.py that renders the sample text to an image via Pango, Cairo, and FreeType. See utils/lin.mk for details about running the script to make these images.

This also introduces a new chunk of code, compact.c, to use as a specimen. Note that in the makefile bold and italic are disabled (-r) where the faux versions would be used or they'd mess up the lining. Nonetheless, compact.c shows that many of fonts still fail to always align properly.

[chrissimpkins]

Thanks so much! I am looking through the code to figure out what you are doing here.

A few questions:

• To add new Linux formatted images, I add the new out file image name to the all block in the make file and then add a new line for it in the makefile with this format:

FILENAME-lin.png: $(deps)
+   $(action) "FONTNAME 16" -r

• The 16 above indicates the rendered image size and can be modified to increase or decrease this in the rendered images I assume?
• Is it possible to modify these settings in the Python script (or in some other fashion through Cairo):

mode = { "grey" : -1,
         "bilevel" : cairo.ANTIALIAS_NONE,
         "subpixel" : cairo.ANTIALIAS_SUBPIXEL
        }[ args.mode ]

to automatically generate images that more closely resemble OS X and Windows rendering so that I can display all three?

If so, I will make new makefiles for OSX and Windows rendering and either add a new flag to the Python script or create two new ones that are specific for these platforms.

Thanks again for all of your efforts on this. I really appreciate it.

[a-e-k]

Sorry for the delay in answering. To take these in order:

1. Yes, that is correct.
2. Yes, the 16 there is the font size. Specifically it is the font size in pixels-per-em (ppem) which is equivalent to points at 72 DPI. You can also use descriptions like "Source Code Pro Bold Italic 16" and Pango will try to parse it.
3. The mode there refers to how to antialias the text and can be chosen with the -m argument to the script. Bilevel completely disables antialiasing (which I did for the -noaa images). Grey uses antialiasing but not subpixel antialiasing; this is equivalent to standard antialiasing on Windows with ClearType disabled. Subpixel produces the usual color fringing antialiasing that you see on OS X and with ClearType on Windows; it respects the current fontconfig settings for the LCD filtering and subpixel layout ("lcddefault" and hRGB on my machine).

Unfortunately, this is not a substitute for actually rendering the images on Windows and OS X for various reasons. For example, the hinting is usually applied quite differently. OS X pretty much ignores hinting unless antialiasing is disabled. Windows ClearType relaxes the application of hinting in the "cleartype direction" (normally horizontal) while keeping it in the other direction. Depending on whether the GDI+ or DirectWrite API is used, it may also allow subpixel glyph positioning or round to whole pixels which can affect letter spacing dramatically. On Linux, FreeType may obey or ignore hinting depending on the fontconfig and compilation settings.

Likewise, each platform may have different rasterization settings. For example, FreeType on Linux allows customizable LCD filtering. Windows may or may not use "symmetric smoothing" depending on the font, the font size, and whether the GDI or DirectWrite API is used. OS X has a bug that leads to fonts appearing bold when shown light-on-dark with antialiasing.

Basically, there's a lot of subtlety here and I'd argue that trying to emulate it is asking for trouble.

N.B.: I've rebased and updated my original pull request to incorporate your changes from today. However, I missed correcting a typo in my name in the contributor's file.

[chrissimpkins]

there's a lot of subtlety here and I'd argue that trying to emulate it is asking for trouble.

Point well taken. It sounds like there will not be a simple approach to display real rendering across platforms in these script-generated images. My initial goal is going to be the use of images that clearly display the font glyphs, a comparison of glyphs that have similar shapes, and the appearance of spacing in code blocks across all systems. Windows and OS X Retina display viewers have expressed concerns about the image quality (blurriness) and I would like to address that. For high res displays, I think I have the solution. For Windows users on non-high res displays, I suspect that the issue is the way that OS X renders text vs the way that Windows machines do. It will naturally look 'blurry' to them based upon what I have read about the rendering issues that you point out above. To my eye, it looks 'normal'...

Given the subtleties that you mention, they will have to install on their own systems, with their own text rendering configurations, to determine whether the font is visually pleasing.

Thanks once again for contributing this script, the new test pattern, and makefile. I'm going to create a branch to work on these new images and will let you know when they are up. This is a huge timesaver for me and greatly appreciated!

[chrissimpkins]

Terribly sorry that I misspelled your name. I corrected and pushed the proper spelling. Apologies!

[chrissimpkins]

The pango/cairo/Py bindings install on OS X is somewhat painful. For future reference (source):

First is the installation of Cairo (and its dependencies) and Pango (with its dependencies). When both of those are installed in the right order, pangocairo will be compiled automatically by virtue of Pango finding Cairo during its configuration phase (it's libpangocairo-1.0.so).

Second is the installation of pygtk, which is the python binding which allows python to interact with these packages and includes the pangocairo binding. It requires pygobject and pycairo.

[chrissimpkins]

For some reason, when I render these they do not appear clear like your images do:

[a-e-k]

No worries about the name. Thanks for correcting that!

As for the renders, I believe that you may be seeing native OS X font rendering rather than the FreeType rendering like I see on Linux. My understanding is that Pango tries to use the native font rendering on OS X and Windows. So this actually is a way to automate the generation of images for each platform, but it does require that Cairo, Pango, and the other dependencies be installed.

[chrissimpkins]

I generated new ones with the manual approach. I will read up on both Cairo and Pango to see if I can figure out how to automate image generation that looks like the ones that are currently in the gallery.