Async.fi

autofont.py

It ain't pretty but it works. Interpolator function is from: Interpolated Lookup Tables in Python. The idea here is to generate tables like this so that text scales smoothly based on viewport width: 
@media screen and (max-width: 480px) { body { font-size: 0.500000em; } }
@media screen and (min-width: 481px) and (max-width: 720px) { body { font-size: 0.750em; } }
@media screen and (min-width: 721px) and (max-width: 960px) { body { font-size: 1.000em; } }
@media screen and (min-width: 961px) and (max-width: 1200px) { body { font-size: 1.250em; } }
@media screen and (min-width: 1201px) and (max-width: 1440px) { body { font-size: 1.500em; } }
@media screen and (min-width: 1441px) and (max-width: 1680px) { body { font-size: 1.750em; } }
@media screen and (min-width: 1921px) { body { font-size: 2.000000em; } }
Here's the script: 
import sys

if len(sys.argv) < 7:
    print 'usage: %s LOWEST_RESOLUTION HIGHEST_RESOLUTION SMALLEST_FONTSIZE LARGEST_FONTSIZE STEPS FONT_UNIT' % (sys.argv[0])
    sys.exit(1)

llowest_resolution = int(sys.argv[1])
highest_resolution = int(sys.argv[2])
smallest_fontsize = float(sys.argv[3])
largest_fontsize = float(sys.argv[4])
steps = int(sys.argv[5])-1
font_unit = str(sys.argv[6])

resolutions = InterpolatedArray(((1, lowest_resolution), (steps, highest_resolution)))
fontsizes = InterpolatedArray(((1, smallest_fontsize), (steps, largest_fontsize)))

print '@media screen and (max-width: %dpx) { body { font-size: %f%s; } }' % (lowest_resolution, smallest_fontsize, font_unit)

for i in range(2, steps+1):
    print '@media screen and (min-width: %dpx) and (max-width: %dpx) { body { font-size: %.3f%s; } }' % (resolutions[i-1], resolutions[i], fontsizes[i], font_unit)

print '@media screen and (min-width: %dpx) { body { font-size: %f%s; } }' % (highest_resolution, largest_fontsize, font_unit)

Note: to make this work in Internet Explorer versions < 9, include the css3-mediaqueries.js script by Wouter van der Graaf.

Tagged with:

Categorised as: