Code-It » Web Development

Django – UnicodeDecodeError using i18n

Loïs Di Qual — Mon, 30 Jul 2012 21:32:11 +0000

If you’re using i18n in your django website, you may encounter this issue. It took me two hours to find where the problem came from: you have to use ugettext instead of gettext if your translated strings contains non-ascii characters.

gettext => ugettext

With gettext:

1
2
3
4
5

from django.utils.translation import gettext as _

define my_view(request):
print _("Here comes nothing") // Prints "Here comes nothing"
print _("Here comes something spécial") // Raises a UnicodeDecodeError because "é" is not unicode

With ugettext:

1
2
3
4
5

from django.utils.translation import ugettext as _

define my_view(request):
print _("Here comes nothing") // Prints "Here comes nothing"
print _("Here comes something spécial") // Prints "Here comes something spécial"

ugettext or ugettext_lazy ?

Two simple rules:

Use ugettext_lazy in global scopes (model fields, django settings, everything not wrapped by a function or method, …)
Use ugettext everywhere else (in views, methods, functions, …)

That’s it !

Django – Absolute media URIs from templates

Loïs Di Qual — Mon, 16 Jul 2012 21:54:17 +0000

Sometimes, you need to build an absolute URI to a media file from your templates:

1	http://example.com/media/sample.jpg

After following this small tutorial, you’ll be able to do this:

1 2	{% load mytemplatetags %} {{ media_name\|absolute_media_url:request }}

Settings

In urls.py, in urlpatterns, add a reverse name to the media URL:

1
2
3
4
5
6

urlpatterns = patterns('',
# Before
(r'^media/(?P.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT}),
# After
url(r'^media/(?P.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT}, name="media"),
)

You can now reverse media files using request.build_absolute_uri(reverse('media', args=['/path/to/media'])).

In settings.py, add django.core.context_processors.request to TEMPLATE_CONTEXT_PROCESSORS.

This context processor allows you to access the request.build_absolute_uri() function from templates:

1	{{ request.build_absolute_uri }}

However, you can’t pass parameters to this function, so you won’t be able to reverse media path to URL. That’s why we need a filter.

Absolute url for a media

The following filter will allow you to build an absolute URL to a media. In templatetags/mytemplatetags.py:

1
2
3
4
5
6

'''
Usage: {{ media|absolute_media_url:request }}
'''
@register.filter
def absolute_media_uri(media, request):
return request.build_absolute_uri(reverse('media', args=[unicode(media)]))

Don’t forget to add a blank __init__.py in templatetags/ or django won’t take your template tag into account.

Un PDF à l’image de votre CV en ligne avec wkpdf

Loïs Di Qual — Thu, 31 May 2012 22:32:46 +0000

Tout comme il est intéressant pour un employeur d’avoir accès au CV en ligne d’une potentielle nouvelle recrue, il est également pratique de pouvoir imprimer ce CV dans un format qui convient.

La génération automatique d’un PDF associé au contenu de votre site présente plusieurs avantages:

Le PDF est constamment à jour du contenu de votre site
Le PDF adopte le design de votre site
C’est totalement la classe

Voici donc un petit aperçu hautement égocentré de ce que vous pourrez faire:

Comme vous l’aurez remarqué, divers détails graphiques comme l’arrière-plan gris ou le ruban bleu ont été effacés afin de proposer une version épurée prête à l’impression.

Pour parvenir à ce résultat, nous allons utiliser un petit logiciel nommé wkpdf associé à une feuille de style spéciale.

La feuille de style

Depuis la version 4 de la norme HTML, il est possible d’inclure une feuille de style en précisant le type de périphérique auquel elle est adressée. On peut ainsi inclure une une feuille de style spécifique aux télévisions:

1	<link rel="stylesheet" media="tv" href="css/tv.css" />

Il est même possible depuis la version 2 de la norme CSS de déclarer des règles spécifiques à un media directement dans votre feuille de style principale:

1
2
3
4
5
6
7

/* Avec @import */
@import url("tv.css") tv;

/* Ou avec @media */
@media print {
/* Règles spécifiques */
}

Voici la liste des valeurs de l’attribut media:


1
2
3
4
5
6
7
8
9
10
all         Suitable for all devices.

braille     Intended for braille tactile feedback devices.

embossed    Intended for paged braille printers.

handheld    Intended for handheld devices (typically small screen, limited bandwidth).

print       Intended for paged material and for documents viewed on screen in print preview mode.

projection  Intended for projected presentations, for example projectors.

screen      Intended primarily for color computer screens.

speech      Intended for speech synthesizers.

tty         Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). 

tv          Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

Il est à noter que si vous ne précisez pas de media, la valeur de l’attribut est “all” (pour tous les périphériques).
Nous voyons ici que la valeur “print” permet de personnaliser un document destiné à être imprimé, c’est donc celui-ci que nous allons utiliser:

1	<link rel="stylesheet" media="print" href="css/print.css" />

Dans cette feuille de style, supprimons tout ce qui n’est plus nécessaire, par exemple:

1
2
3
4
5
6
7
8
9

/* Suppression d'un élément inutile */
.classe-de-l-element {
display:none;
}

/* Suppression de l'arrière plan */
body {
background: none;
}

Vous pouvez tester ces nouvelles règles en modifiant temporairement l’attribut media de “print” à “all”.

Génération du PDF

Nous allons utiliser wkpdf pour générer notre fichier. Malheureusement ce dernier n’est disponible que sur Mac, mais il existe une alternative multiplateforme, wkhtmltopdf, qui semble fonctionner sur le même principe.

Ces logiciel a un énorme avantage: au lieu de posséder son propre moteur d’interprétation de la structure HTML, il utilise le fameux Webkit (le moteur de rendu de Chrome et Safari, notamment). Le rendu sera donc fidèle à ce que vous pourrez voir dans un navigateur web conventionnel.

Il vous suffit donc d’exécuter wkpdf en ligne de commande:


1
$ wkpdf --source http://monsite.com/ --output cv.pdf --margins 0 --stylesheet-media print --print-background

De plus, si votre site met en place des éléments graphiques à l’aide de Javascript, ajoutez les arguments suivants:


1
--enable-javascript --save-delay [temps_avant_capture_en_secondes]

Vous devriez ainsi obtenir un beau PDF prêt à l’emploi. Il vous faudra sûrement adapter certaines règles CSS pour que tout tienne sur une page, etc…

Bonus: impression directe à partir du site

La feuille de style “media=print” sert également à votre navigateur lors de l’impression d’une page. Néanmoins, certaines limitations sont mises en place par la plupart des navigateurs:

Les arrières-plans ne sont pas pris en compte. background-color et background-image ne fonctionneront donc pas.
Le Javascript n’est pas pris en charge, aucune modification ne pourra être faite dynamiquement avant l’impression.

Note concernant le comportement des navigateurs lors de l’impression:

Aucune référence ou documentation n’est disponible à ce sujet, du moins pour le moment

Dans certaines versions de Firefox, et sous certains systèmes d’exploitation, il est possible d’activer la prise en charge des arrière-plans (couleur et image) ainsi que le Javascript. Là encore, aucune documentation.

Internet Explorer propose un event onbeforeprint permettant de modifier le DOM lorsque le navigateur s’apprête à imprimer. Plus d’informations par ici.

Si vous avez des renseignements supplémentaires concernant les différents comportements adoptés par les navigateurs, n’hésitez pas à m’en informer !

Toute l’astuce consistera donc à remplacer les arrières plans par des images (qui elles seront affichées), ou de tenter de mettre en place une sorte de “graceful degradation” afin de simuler certains éléments graphiques. Par exemple, les barres de compétences mises en place sur mon CV ne sont pas pleines lors de leur impression, j’ai donc dû ajouter un border-color pour symboliser les limites de ces dernières.

Et après ?

On peut maintenant aisément imaginer un système qui génèrerait automatiquement votre PDF à chaque modification du site web. Si vous utilisez un système de versioning, aucun soucis. Je vous invite à chercher du côté de pre-commit si vous gérez tout ça avec svn ou git. Il vous suffira de modifier ces hooks en insérant la commande de génération, et d’ajouter au commit le fichier PDF ainsi généré.