Hi, ok if you don’t know what a sprite is then this post might get confusing quite quickly.  I’d suggest having a quick read up and find out what they are.  Simply put, the technique of using a CSS Sprite is so that you can reduce the number of HTTP requests browsers make to your server by only showing a portion of a larger image by changing the background-position (so that only the bit you want to see is showing through the object).  Another use for them (and this is the one we’ll be using here) is for convenience.

A pie chart of increasing values 0-100% could be stored as 20 separate independent images, named pie-[00-100].gif.  This however is inefficient for both the browser, the server, and the user.  The user will have to wait for the image to download if they haven’t already seen it (and hence cached it).  In my example I have 20 pie charts of increasing values in one image.  The background-position css property will dynamically change via server-side code to show only one of the 20 available pie charts.

Here’s the finished article:

pie-finalresultHere’s how it was done…

Continue reading »

 

I wrote my own wordbreak filter for django :)

I realised quickly that when I wrote a long unbroken piece of text in one of my chirps, the div would expand (not good).  I did experiment with the overflow:auto CSS property to make the div scrollable horizontally when required but wanted a different method.  Facebook uses a <wbr> tag in long words to break them up but in my research I found that &shy; was the most commonly supported amongst most browsers.

The filter works at the template level and uses a single int to determine the number of spaces to insert the break lines.  Here’s an example: {{ object.content|wordbreak:”10″ }}

At every nth character of a word that is more than n characters long, a string of the datetime now plus a custom string plus the datetime again is placed.  The string is then conditionally escaped to make the string safe to render and then the custom string is replaced with &shy;.

from django.utils.html import conditional_escape
from django.utils.safestring import mark_safe
from datetime import datetime
import re

from django import template
register = template.Library()

@register.filter
def wordbreak (string, arg):
    search = '([^ ]{' + arg + '})'
    t = datetime.now()
    wbr = t.strftime("%A%d%B%Y%f") + 'wbr_here' + t.strftime("%A%d%B%Y%f")
    saferesult = conditional_escape(re.sub( search, '\\1' + wbr, string ))
    result = saferesult.replace(wbr,'&shy;')
    return mark_safe(result)

source code also available at http://www.djangosnippets.org/snippets/1432/

© 2011 athe.la blog Suffusion theme by Sayontan Sinha