This week, I once again ran into the problem of “non-standard” fonts, and if earlier it was sometimes possible to get by with the most common slicing in a graphics editor or use some client-side spoofing techniques, then this time the task is most global. There are a lot of dynamic headers in the impending project.

I would like to share my thoughts, search and final decision with you.

Preamble

So, in principle, what options do we have:

1. Replace with Flash: sIFR, swftype;
2. draw on canvas JavaScript`om: cufon, typeface;
3. use a server for these purposes.

I already used the first option in a couple of projects, though it’s not actually sIFR, but it doesn’t matter, I was not very pleased with the result. Assembling-reassembling a Flash file with a font, checking for flash, "frame" in IE7, is not kosher in the end. The second option - I always considered it too heavy, both in traffic (files with rendered fonts weigh decently, and even do not always convert correctly), and in the load on the client’s processor. So in production he never let him go.

So I came to the third option. Once I was already working on this method on one of the then php projects, having read the idea on A List Apart. It works and works pretty well, although JavaScript was still used in this method. Moreover, now we only develop projects on Django, so I went looking and after a while I found two similar projects: django-cairo-text and django-image-replacement. The first one has quite wide capabilities, but it cannot draw in font from a file, only one of the installed ones, which in my case is absolutely unsuitable, the second one is too simple for my needs and uses approaches that are not quite convenient for me.

But there is a base, there is a goal, and I, as usual, decided to write my crutches with a turbo drive. Actually, what I came up with, I want to present to your review.

So django-headline

What do we know for today

• Rendering images from a template in three ways: a filter, a tag, and a tag that changes context
• Naturally, caching previously rendered images
• Defining standard font styles through classes
• Automatically replace html-entities with unicode characters
• Break text string by br or by words
• Custom font and cache location settings
• Optional optimization of output png, through external utilities

Installation and setup

To work, you need the installed ones: PIL and Freetype2

Place the headline.py file in the templatetags folder of your application.

The following options are available for configuration:

# Папка для кеша картинок (относительно вашего MEDIA_ROOT/MEDIA_URL)
HEADLINE_CACHE_DIR = 'upload/textcache'
# Папка для шрифтов (относительно вашего MEDIA_ROOT)
HEADLINE_FONTS_DIR = 'fonts'
# Если это требуется, путь к оптимизатору
HEADLINE_PNG_OPTIMIZER = "optipng -o7 %(file)s"
# Пресеты настроек отображения
HEADLINE_CLASSES = {
   "": {
       'font': ,
       'size': ,
       'color': ,
       'decoration': ['underline', 'strikeout'], # Optional
   },
   ...
}

Examples of using

{% load headline %}

Like a filter

   {{ foo|headline:"font.ttf,20,#000" }}
   {{ foo|headline:"font.ttf,20,#000,underline,all" }}
   {{ foo|headline:"base,br" }}

Like tag

   {% headline "font.ttf,20,#000" %}Big {{ foo }}{% endheadline %}
   {% headline "font.ttf,20,#000,strikeout,none" %}Big {{ foo }}{% endheadline %}
   {% headline "base" %}Big {{ foo }}{% endheadline %}

As a tag modifying the context

   {% headlines foo_list bar_dict baz_var "And some text" as headers "font.ttf,20,#000" %}
   {% headlines foo_list bar_dict baz_var "And some text" as headers "font.ttf,20,#000,all" %}
   {% headlines foo_list bar_dict baz_var "And some text" as headers "base" %}

In this case, variables and simple strings enclosed in double quotes, as well as lists and dictionaries, can be passed as parameters. At the output, we have a list of headers from the {file, text, width, height} objects: This is what, for example, can happen in the final . I’m not a designer, and I picked up the fonts “by eye”, so I ask you not to kick for them. Thus, for the client it looks like manual slicing, for the server - the load is one-time, for the developer everything is simple and transparent. Profit! Once again related links:

   {% for head in headers %}
      
   {% endfor %}

• Github project django-headline
• Django-headline example

Thank you for the sim, I accept reviews on the topic, any degree of flattering.