I Bouvet er vi flere hundre teknologer som brenner for å programmere og utforme gode, digitale løsninger. I denne bloggen utforsker vi teknologien og deler det vi finner med dere.

Vertical reordering in CSS

There are plenty of techniques for reordering content horizontally in CSS (by reordering content I mean visually laying out content in an order different than the one in the source code). Usually those rely on a combination of clever floats and negative margins. YAML has a few examples.

A different objective would be to reorder content vertically, though. This could be particularly interesting for responsive design, where you would want to present content in a different order at different breakpoints, or maybe for a print stylesheet. After a bit of research I came across an interesting technique by Marat Tanalin that relies on the fact that browsers will render <thead> table elements above the table contents, even if the <thead> itself is at the bottom of the table in the markup. Of course, you don’t need real <table> and <thead> elements; instead making use of CSS’s table-row-header value for the displayproperty.I was not quite satisfied with the solution above — although it saved my backside a couple of times. It didn’t work in IE, and it revealed a few browser bugs on Chrome (I guess display: table-row-headeris not the most well tested CSS feature). So, a bit more experimenting and I struck at this idea:

So, we simply rotate a container 180° (upside down) and then rotate each child in-place another 180°. Magic! Seems to work wonders in Firefox, Safari, Chrome… and IE9.

Of course, IE versions less than 9 don’t understand the CSS transform property, but there’s still something we can do if we need to support those browsers (which, remember, we might not have to do if we are using this technique to target responsive design). Yes, we have to rely on the icky filter property… specifically, the matrix filter: it allows for rotation, scaling and skewing. We just need rotation. Unfortunately, it’s been a long time since I did anything to do with matrices. Fortunately, someone else has made it easy — as easy as copy and paste. We also need to be a bit careful with preventing overlap of the filter property with transform in IE9 (since it supports both), so we use IE’s conditional comments to keep the CSS clean. Here we go:

The filter solution should play well with IE6-8, but filter is notoriously buggy. In my quick testing I found at least two issues that might be deal breakers for you:

  • <input> fields within the rotated sections don’t display the input caret correctly (the field works as normal but the blinking cursor renders in the original position — go figure)
  • rotated sections must have a background or they render as black squares, or with badly aliased text

A few more words of warning about this technique in general:

  • your markup must make semantic sense regardless of how it is presented (this might actually help towards that, if used correctly)
  • remember keyboard navigation: you might need to re-assign tabindex attributes for it to make sense to tab between links/fields
  • this is not a tried-and-tested method; expect issues!

Note: this post was republished from the author’s blog.

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *

Du kan bruke disse HTML-kodene og -egenskapene: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>


UT.no – Hiking in the cloud

When NRK and DNT decided to upgrade their outdoor trekking planner, they decided to run it in the cloud using Windows..

Seminar om sømløs virksomhet

Onsdag 14. desember avholdt vi seminar om bruk av semantisk teknologi for bedre IT-arkitektur, basert på erfaringene fra SESAM-prosjektet hos..


$C000 og en nerdegenerasjon

Navnet «Nerd Aid» gir assosiasjoner til «Band Aid» fra 80-tallet, og videre til den mest populære datamaskinen som var tilgjengelig for oss nerder. Jeg tør våge å påstå at Commodore 64 og $C000 vekker like mange minner for min nerdegenerasjon som Pompel og Pilt gjør for generasjonen i sin alminnelighet!

San Fransisco - mindre

Semantic Technologies 2011

Noen hundre meter unna Apples store utviklerkonferanse i San Franscico ble det holdt en mindre, men på sikt kanskje vel..

IMG_1620 (Small)

Teambuilding med RoboCode

RoboCode er en spillmotor som lar autonome tanks konkurrere mot hverandre. Dette var det utviklere hos Bouvet i Oslo lekte seg med på årets Javafestival.


Publishing in Confluence with Atom

As part of my continuous exploration of REST, I decided to create my own open source Atlassian Confluence plugin which makes it possible to use the wiki as a “poor-mans” CMS. This post explains how I did it.


Making business processes mobile – a check list

Mobilizing business processes is a very common need in today’s world starting from basic alerts and notifications in form of sms, email to complex business processes like Time-writing, Plant maintenance operations in a huge field, Inventory management etc. Here is a check list that might be useful for you.


I Bouvet er vi flere hundre teknologer som brenner for å programmere og utforme gode, digitale løsninger. I denne bloggen utforsker vi teknologien og deler det vi finner med dere.