Movement Alphabet: Mapping the intricacies of the moving body

On Saturday 16th July Jan Lee and Tim Murray-Browne were invited to take part in our monthly Digital Design Drop-In programme. We were delighted that they were able to share with the public their new work combining interactive technology with personal one-on-one participatory work.

What is Movement Alphabetby Jan Lee and Tim Murray-Browne                                    Movement Alphabet is an interactive installation mapping the way we move our body in day-to-day life. Combining algorithmically generated imagery with a participatory performance, museum visitors are invited to have a portrait of their moving body created in a ten minute one-on-one session.

The portrait is created by a digital imaging system that tracks and graphs an individual’s movement over time. Through this system, we are constructing a visual language that captures the essence of how a person moves. Each image is a score of how the person moved during the session, a record of the body alive and moving with a lifetime of experience entwined into each gesture. We want this movement map to pull you in like a manuscript of ancient hieroglyphic texts might – a language you do not know but somehow can still feel for intuitively.

set up  photo                   Setting up the equipment and material in preparation for the performance.

The setting                                                                                                                                            Movement Alphabet took place in the Raphael Gallery which, with its wide open space and subdue lighting, helped to create a contemplative and serene atmosphere for the participatory performance. I was led on a journey through time, space and memory. Initially blindfolded, I became acutely aware of the cool floor tiles beneath my toes and the gentle sounds of the accompanying ambient music.

Unexpectedly the experience, which encouraged me to recollect memories and express different body movements, also made me more conscious of the gestural movements and physicality depicted in the surrounding Raphael cartoons.

cartoon                                                                                     The Healing of the Lame Man (Acts 3: 1-8) by Raphael © Victoria and Albert Museum, London

The experience                                                                                                                                          The audience watched as the participants body movements were transformed on the screen into algorithmically generated portraits. Visitors were also given print outs. Here’s what mine looked like!

Untitled watching

Here is how other participants described Movement Alphabet:

“Thanks a lot, I feel so positive “

“Inspired choice of movement example!”

“Thank you – an unusual experience “

Many thanks to the artists and everyone who took part. You can follow the developments of the project at

About the artists                                                                                                                                       Jan Lee is a performer and maker working at the intersection of dance, music and physical theatre, often working for immersive or interactive audience participatory productions. Her work has been shown at venues including Live Performers Meeting (Rome), The Place Theatre (London) and The Curve (Leicester).

Tim Murray-Browne is an artist working with code and interactive technology. His work includes interactive installations of bespoke musical instruments and sound sculptures revealed as the listener moves through space. It has been shown at venues including The Barbican (London) and Berkeley Art Museum (CA). In 2014, he was awarded the Sonic Arts Prize for his work The Cave of Sounds (2013) created as artist in residence with The Music Hackspace (London).

Jan Lee and Tim Murray-Browne have been collaborating since 2011. In 2014 they created the dance work This Floating World intertwining choreography with digital interactive art. In 2015, they were invited to Rio de Janeiro to research interactive sound spaces with immersive theatre company ZU-UK. This year, they are in residence at G.A.S. Station (London) to develop Movement Alphabet.


The Digital Design Drop-in is a monthly, show & tell programme inviting artists, designers, makers, technologists and other professionals to share and discuss their work with the public.


HTML vs Body in CSS

The difference between <html> and <body> is easy to overlook. It seems to be one of those things that falls into the category of trivial. Admittedly, I have a bad habit of applying all global styles to <body> and, when that falls short, I move to <html> without thinking about it.

There are differences, however, and it’s a good idea to be aware of them regardless of whether we’re CSS veterans or rookies. We’ll go over those in this post and consider some practical applications where styling one over the other might make sense.

How HTML and body are related

Consider this standard structure for a basic HTML document:

<!DOCTYPE html> <html lang="en">    <head>     <!-- Metadata and such -->   </head>    <body>     <!-- Where the content begins -->   <body>  </html>

The spec defines <html> as the root element of a document, and we can clearly see that in the above example: the <html> element is the very top level of all other elements. The buck stops there because there are no more levels beyond that from which styles can be inherited.

From there, <head> and <body> make up the only two elements that fall directly inside <html>. In fact, the spec defines <body> directly in contrast to <head> since those are the only two elements that need to be distinguished.

So, the bottom line here is that <html> is the root element of a document where <body> is a descendent contained within it. In fact, there is a :root selector in CSS. These target the exact same thing:

:root {  } html {  }

Except :root has a higher specificity: (0, 0, 1, 0) vs (0, 0, 0, 1).

So we should always put global styles on <html>, right?

It’s tempting to think that any styles we want to be inherited across the board should be applied directly to <html> because it is the root element of the document. <html> supersedes <body> in hierarchy, so it follows that it must contain all global styles.

But that’s not exactly the case. In fact, inline attributes for the following were originally assigned to <body> in the spec:

  • background
  • bgcolor
  • marginbottom
  • marginleft
  • marginright
  • margintop
  • text

While these attributes are now considered obsolete, the recommendation is to use CSS instead with their corresponding CSS property:

Inline Attribute CSS Property
background background
bgcolor background
marginbottom margin-bottom
marginleft margin-left
marginright margin-right
margintop margin-top
text font

Given that these CSS properties originated from inline attributes that were written for <body>, it would seem appropriate that they should be applied directly to <body> in the CSS as well, rather than pushing them into the <html> element.

So we should always put global styles on <body>, right?

Well, not exactly. There may be situations where it makes more sense to apply styles to <html> instead. Let’s consider a couple of those scenarios.

Working with rem units

The rem unit is relative to the document root. For example, when writing something like this:

.module {   width: 40rem; }

that rem unit is relative to the font-size of the <html> element, which is the document root. So, whatever is set as the user-default at the root level is what the .module class will scale to.

Jonathan Snook has a classic post that nicely illustrates how setting the font-size on <html> as a percentage can be used as a reset when working with rem units.

Quirky background-color

There is a weird thing in CSS where the background-color on <body> floods the whole viewport even if the metrics of the element itself don’t cover that whole area. Unless the background-color gets set on the html element, then it doesn’t.

If flooding is the goal, it can be smart to just set it on the html element to begin with.

Wrapping Up

Hopefully this sheds some light on the key differences between the use of <html> and <body> in CSS. There are JavaScript differences as well. For instance you don’t need to query for either, html is document.rootElement and body is document.body.

We could certainly draw more technical distinctions between the two, but the point here is to level-up our understanding to make better decisions when writing CSS.

Do you have other examples of where it makes more sense to style one over the other? Or perhaps you have a different set of criteria for knowing when when to style one? Let us know in the comments!

More resources

HTML vs Body in CSS is a post from CSS-Tricks