Welcome to Xierpa. This is the stable 1.2 version which was developed by Petr van Blokland + Claudia Mens (buro@petr.com) and is maintained by Michiel Kauw-A-Tjoe. It is subclassed by the Museum Meermanno and American Express applications.

Measurements

The functions below are examples to calculate values into pixels and columns. These rouines can typically be put into a ./_py/include/defines.py file, so the constants and functions can be imported by all application files of a site. See Including modules for more information.

Integer to pixels: px(n)

To convert integer values into pixel string, it is best to define a small function in the css.py file itself.

def px(n):
	return str(n) + 'px'

The CSS style can be defined as:

self.style()
self.css(ids='h2', fontsize=px(10))
self._style()

This will result in CSS style source

h2 {font-size:10px}

Integer to columns c(n) and cw(n)

To calculate from an integer column number to pixels we need two functions. The position of a column is different from the pixel width of a column.

UNIT = 8
GUTTER = MARGIN = UNIT
COLUMNWIDTH = 8 * UNIT

def c(n):
	# Calculate column position to pixels
	return px(MARGIN + n * (COLUMNWIDTH + GUTTER))
	
def cw(n):
	# Calculate column width to pixels
	return px(n * COLUMNWIDTH + (n-1) * GUTTER)

Here we define the basic unit (UNIT) of the page on 8 pixels. All other measurements are multiples of that. The GUTTER and MARGIN are equal to the UNIT. A column (COLUMNWIDTH) is 8 UNIT wide. This can be used in CSS as follows:

self.css(ids='#content', position='absolute', x=c(1), width=cw(4))

This will result is a column position of x='152px' (second column) and a column width of width='280px' (4 columns).
Note that both c(n) and cw(n) are using px(n) to convert to a string including 'px'. It is important to add this, because some CSS measurements (like leading) do not behave as expected in certain browsers if only the value is defined.