Eye tracking conferences/workshops

ECEM European Conference on Eye Movements


2013 - Lund, Sweden


ETRA Eye Tracking Research & Applications

Upcoming (Deadline 04/10/2013)

2014 - Safety Harbor, FL


EGIHMI Workshop on Eye Gaze in Intelligent Human Machine Interaction


PETMEI Workshop on Pervasive Eye Tracking and Mobile Eye-Based Interaction

Upcoming (Deadline 04/15/2013)

2013 - Lund, Sweden


How to connect a TX300 monitor to a mid 2011 iMac

A mid 2011 iMac will not have a Mini DisplayPort but these adaptors also support Thunderbolt ports.

Angling the Tobii TX300

What is a pixel?

Every CSS property like 'padding-top' has a value definition field which defines the valid values for that CSS property. For example, The value definition field of 'padding-top' is <length> | <percentage> which simply means the value for 'padding-top' can be a length or percentage but what's a length? And what's a percentage?

<length> and <percentage> are basic data types that designate the type of component value in a value definition field.

The data type in the CSS grammar

CSS defines a <length> (which corresponds to a DIMENSION token in the grammer) as a <number> followed by a unit identifier.

DIMENSION {num}{ident}

A <number> is either an <integer> or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits.

NUMBER {num}
num [0-9]+|[0-9]*\.[0-9]+

An identifier is sequence of characters conforming to the IDENT token.

IDENT {ident}
ident [-]?{nmstart}{nmchar}*
nmstart [_a-z]|{nonascii}|{escape}
nmchar [_a-z0-9-]|{nonascii}|{escape}
nonascii [^\0-\237]
escape {unicode}|\\[^\n\r\f0-9a-f]
unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?

So when you write 12px as a property value, 12 is a <number> and px is a unit identifier. Together, they're a DIMENSION or <length>.

The types of units

There are two types of units: relative and absolute. Relative units are lengths specified relative to another length such as the computed font size of the element or the viewport's width. Absolute units are fixed in relation to each other and anchored to some physical measurement. We are not concerned with relative units here since the pixel is an absolute unit.

The absolute units are all physical units except the px unit.

One of these units is going to be declared as an anchor unit and all other units are anchored to it but which one? First, you have to note that pixel unit and the physical units are related by a fixed ratio under the assumption of 96dpi since too much existing content rely on that assumption. That is, the px unit is only a physical unit under the assumption of 96dpi. This gives rise to the 'reference pixel'.

The reference pixel

The reference pixel is the visual angle of 1 device px with 96 dpi and a distance from the reader of an arm's length (where a nominal arm's length is 28 in).

Ref px = tan-1[Physical measurement of 1 device px / Arm's length] = tan-1[(1/96)/28] = 0.0213 deg

Which unit should the other units be anchored to?

For high resolution devices (e.g. printers) where more dots or device pixels are needed to cover the reference pixel, the anchor unit should be a physical unit (e.g. in) since if it was the px unit then the physical units might not match their physical measurements.

Example 1 For simplicity, assume 2 dots are needed to cover a reference pixel (so it's a 192dpi device) and that a device pixel is 0.1 in the physical world.

1 ref px = 2 device px = 0.2 in

So to cover a 1 in x 1 in area, you would need to draw 96 x 96 reference pixels or 192 x 192 device pixels but wait, a device pixel is 0.1 in so if we draw 192 device pixels we're drawing 19.2 in.

1 in = 96 ref px = 96 * 0.2 in = 19.2 in 

For low resolution devices (e.g. computer display), the anchor should be the px unit so that it refers to a whole number of device px.

Example 2 For simplicity assume the computer display has 96dpi so that 1 dot or device pixel is 1 reference pixel and that a device pixel is 0.1 in in the physical world.

1 device px = 0.1 in

So to cover a 1 in x 1 in area, you would need to draw 10 device px

10 device px = 1 in

But wait, now the reference pixel which is 1/96 in is equivalent to 1/96 * 10 device pixels which is not a whole number! You can't draw that.

1 ref px = (1/96) in = (10/96) device px

Vertical alignment in CSS

According to the CSS Flexible Box Layout Module, you can declare the a element as a flex container (see figure) and use align-items to vertically align text along the cross axis (which is perpendicular to the main axis).

enter image description here

That is all you need to do is

display: flex;
align-items: center;
Browser support considerations


display: -webkit-flex;
-webkit-align-items: center;


Set layout.css.flexbox.enabled to true.

Alternatively you can still use

display: -moz-box;
-moz-box-align: center;

Just know that this is not css3-flexbox and that it will not wrap.


You can try the syntax from Advanced cross-browser flexbox.

See this fiddle (Remember to set layout.css.flexbox.enabled to true if you're on FF.)

This note is a reproduction of my answer to a question on Stack Overflow.

On presentational class names

Could scaring users be good UX?