CSS3 and AV revisited (with flexible box layout)

In the first post about CSS3 and algorithm visualization, I had demos showing how to animate sorting algorithms using CSS3 transforms. Yesterday, when watching CSS3 First Look on Lynda.com, I learned about the CSS3 Flexible Box Layout Module and wanted to give it a try and improve the previous animations.

Flexible Box Layout

The flexible box layout gives an excellent way to control the layout and ordering of elements on a page. All in all, it's really flexible. To give an example, let's work with the following HTML. 

  <div id="container">
    <div id="box1">Box 1</div>
    <div id="box2">Box 2</div>
    <div id="box3">Box 3</div>

Now, without any styling, this would become a page where the divs are vertically on top of each other. With just one line of CSS3 magic, we can change that:

    #container  { display: box; }

Actually, we need at least three lines until the specification is ready and vendor prefixes are dropped:

    #container {
      display: -webkit-box;
      display: -moz-box;
      display: box;

This will arrange the boxes horizontally next to each other (see the demo, example 2). The feature I was most interested in related to the sorting algorithm animation is the box-ordinal-group property. It allows to change the order of the child elements inside the box. To give you an example, the following CSS3:

    #box1 { 
      -webkit-box-ordinal-group: 2;
      -moz-box-ordinal-group: 2; 
      box-ordinal-group: 2;
    #box2 {
      -webkit-box-ordinal-group: 3;
      -moz-box-ordinal-group: 3;
      box-ordinal-group: 3;
    #box3 {
      -webkit-box-ordinal-group: 1;
      -moz-box-ordinal-group: 1;
      box-ordinal-group: 1;

would change the boxes to be in order box3, box1, box2 from left to right (view the demo, example 3).

Visualizing Sorting Algorithms

One of the problems with the original CSS3 algorithm visualizations was the calculation of pixels when translating the elements to animate array item swaps. The box model seems like a great solution for replacing the pixels with just changing the box-ordinal-group property.

After creating a simple test case, I realized that it did not work as I suspected. The elements changed places, but no smooth animation was shown. After spending some time trying to fix my CSS I turned to Google. To my disappointment, it wasn't my code that was broken. Nor was it the browser. The box-ordinal-group just isn't one of the animatable properties according to the CSS3 Transitions specification.

So, to sum up the experiment: flexible box model could be used to visualize sorting algorithms, if no smooth animation is needed. In modern browsers, that is. According to caniuse.com, browsers that support this currently are Firefox 3.5+, Safari 3.2+, and Chrome 9.0+. In addition, Mobile Webkit on iOs and Android support it.

CSS3 Transformations and Transitions for Algorithm Visualization

CSS3 offers some interesting new properties that could be used for algorithm visualization. Here, I'll first introduce the new properties and then proceed to show and explain some demos that I've created. You can skip the nonsense and view the demos: bubble sortselection sort

CSS3 (or Cascading Stylesheets 3)

CSS3 includes several modules useful for web designers and web developers. Here, we are only interested in a couple: CSS Transforms, CSS Transitions, and CSS Animations. These are the modules that make it possible to add animation effects to web pages using CSS classes.

CSS Transforms CSS3 transforms allows translation, rotation, and scaling of elements in 2D and 3D. A two-dimensional transformation is applied to an element through the transform property. This property contains a list of transform functions. The transform-origin property establishes the origin of transformation for an element.

The transform functions in the specification are translate, scale, rotate, and skew. There are also versions of translate, scale, and skew to transform only X or Y dimension, that is, translateX and translateY, for example. Furthermore, the matrix transform functions allows for matrix transformations. Multiple transform functions can be used in a single transform property.

CSS Transitions The new CSS3 Transitions module defines CSS properties that can be used to change values of properties smoothly from one value to another over a specified duration. The transition behaviour is specified using a number of CSS properties.

  • transition-property specifies the properties that are smoothly changed. All animatable properties (not all CSS properties can be transitioned) that have changed can be animated using the value 'all'.
  • transition-duration is used to specify the length of the transition and transition-delay when the transition will start.
  • transition-timing-function describes the way the intermediate values are calculated. This allows a transition to change speed. There are several timing functions specified, for example, linear, ease-in, and ease-out.
  • transition property is a shorthand property that allows setting all of the above with one CSS property.

Listing below gives an example of how one would specify a transformation and a smooth transition.

    #selected {
      transition-property: transform, background-color, opacity;
      transform: translate(200px) scale(0.6);
      background-color: yellow;
      opacity: 0.2;

The specified transformation would look like something in the picture below, assuming the original object had a red background and was not transparent.


CSS Animation The CSS3 Animations module includes features to enable more fine-grained animation. This includes properties like keyframes that enable composing more controlled transitions. The module is an extension of the Transitions module.

Algorithm Visualizations with CSS3

To test how the new CSS3 properties work for visualizing algorithms, I created a couple of demos of sorting algorithms. Check out the bubble sort and selection sort demos. You'll need a browser that supports the new features, such as recent version of Chrome or Safari. If you don't have such browser, go install one or see the picture below.

CSS3 Algorithm Visualization demo screenshot

You can move backward and forward in the animation obviously using the links. When moving, the current codeline is highlighted, variable values updated, and the swaps of array elements animated. In addition to moving backward and forward, you can also change the layout to focus on the code or the data structure.

Technical Details

The animations are generated by an (ugly) Python script. This script is general enough that it would allow creation of animations of other sorting algorithms (or other algorithms working with arrays) by writing and annotating the python code. The code in the created animations is the actual Python code used to run the algorithm.

The Python code generates a JavaScript array of CSS class names as well as the corresponding CSS3 properties. An example of a highlight operation is shown below. 

/* codeline highlight */
.css-line2-5 { background-color: #afa; }
/* array element highlight */
.css-elem2-5 { background-color: yellow; }
/* moving an array element */
.css-elem2-6 {
   -webkit-transform: translate(-102px,0);
   -moz-transform: translate(-102px,0);
   transform: translate(-102px,0);

When moving backward or forward in the animation, JavaScript updates the CSS class attributes of the codelines, variables, and array cells changed in the operation. The browser then animates the changes according to the CSS properties.


While the browser support for CSS3 transformations is improving, they still can't be used for learning material that all students need to be able to access. But, they work well enough on some mobile browsers (such as iPhone and Android phones) to be useful when building AVs for mobile devices.

New Publication List with bib-publication-list

I finally got tired of updating my old HTML publication list by hand. I wanted something that would be automatically generated from my BibTeX file, without me having to remember to run any scripts or copy files. So, I wrote bib-publication-list. With it, I can just include the BibTeX into my HTML page and tell the script to turn it into a sortable and searchable table. Besides loading the required JavaScript files, all that is needed is to add a table where the data should be added and include the BibTeX:

        title = {A comprehensive taxonomy of algorithm animation languages},
        journal = {Journal of Visual Languages \& Computing},
        volume = {20},
        number = {1},
        pages = {1--22},
        year = {2010},
        issn = {1045-926X},
        doi = {DOI: 10.1016/j.jvlc.2009.09.001},
        author = {Ville Karavirta and Ari Korhonen and Lauri Malmi and Thomas Naps}

Alternatively, the bibtex can be loaded from a file. I prefer including it in the HTML, though. This way, browsers without JavaScript enabled get at least to see the bibtex instead of a blank page.

Finally, the bib-publication-list needs to know the input data element and the output table. So, one line of JavaScript:

bibtexify("#bibtex", "pubTable");

The result looks like the figure below (or my new publication list).

The source code for the library is available on GitHub. The code uses some great libraries: jQuery, DataTables, Protovis, and JavaScript BibTeX Parser.

Let me know what you think. Especially comment if you have problems with it, I haven't tested it on all browsers (yet).

Fun with MozOrientation in Firefox 3.6

The already not so new Firefox 3.6 ships with a way for websites to detect the orientation of the laptop/device of the user. This opens interesting new possibilities for web applications similar to some iPod/iPhone/etc games. Some interesting demos are already available online:

Technically, using the new feature in JavaScript web application is really simple. It is  be done by listening to the MozOrientation event. So, in Javascript:

//register a listener
window.addEventListener("MozOrientation", updateOrientation, true);
function updateOrientation(orientation) {
    // do something with orientation.x, orientation.y

Since it seemed easy to use, I wanted to give it a try. The result is a simple game where you need to "collect" a number of targets on the screen. Try it yourself if you have a laptop that is supported and has an accelometer, for example MacBook(Pro). Can you come up with an application for the use of accelometer in education?