Latest writing

quick note on meta name viewport and android

Posted on June 20th, 2011 / Comments Off on quick note on meta name viewport and android

If omitting width=device-width from the viewport meta tag, css3 flex-box layouts no longer respect overflow:hidden and text-overflow:ellipsis for wider-than-page content.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />

when webkit css animations causes flicker

Posted on June 19th, 2011 / Comments: 1

sometimes when using -webkit-transform:translate3d; or -webkit-transform:translate; on elements visible on the page, it causes the screen to flicker. In my particular case I had a menu that opened as an overlay, and whenever an element with translate3d was on the page, the menu flickered badly when fading in.

The solution seems to be to set backface-visibility to hidden for the menu element, like so:

#menu {-webkit-backface-visibility: hidden;}

Installing latest MacPorts for OS X 10.6

Posted on February 16th, 2011 / Comments Off on Installing latest MacPorts for OS X 10.6

I was just about to install MacPorts on my OS X 10.6 system, and downloaded the latest package (1.9.1) from, only to get a dialog saying my MacPorts version was too old to update, and that I first needed to upgrade to 1.7.1. That didn’t install at all, but I found this snippet while googling around for a solution. This removes all previous versions of MacPorts and its dependencys, so be careful if you’re not sure that you want to do that. Fire up Terminal and type:

sudo rm -rf \
/opt/local \
/Applications/MacPorts \
/Applications/DarwinPorts \
/Library/Tcl/macports1.0 \
/Library/Tcl/darwinports1.0 \
/Library/LaunchDaemons/org.macports.* \
/Library/StartupItems/DarwinPortsStartup \
/Library/Receipts/MacPorts.pkg \

Then install MacPorts 1.9.1 package again. Worked for me at least. Disclaimer: I am certainly not an expert on this, so your mileage may vary…

More fonts for the web

Posted on May 11th, 2010 / Comments: 1

Typography for the web is on the roll.

Sites like fontsquirrel and fontspring offer loads of free and open-source embeddable fonts for hosting on your own server, and hosted solutions like are partnering up with big type foundries like fontfont and veer.

The big foundries have been a bit slow in adapting their font licenses for this newfangled technology; after all, the MS-proprietary format .eot has only been around since IE5 or something.

Monotype, Linotype and ITC have recently joined forces in a service similar to Typekit called This is great news, since beforementioned foundries holds classics like Frutiger®, Univers®, Helvetica®, ITC Franklin Gothic and ITC Avant Garde® to name a few…

I got my beta account invite to the service day before yesterday and have just started toying with it a bit. The UI is a bit lacking when compared to typekit, and many of the poster-name fonts mentioned on the site hasn’t been added yet. Font replacement looks snappy enough however. Think I need to play around a bit more with the service before I can give an honest opinion.

subscript/superscript character challenges in HTML

Posted on September 16th, 2009 / Comments: 1

(this entry is a bit of a mess, just posting it for reference now, might get around to expand the topic at a later time)

According to the internet, IE has issues with the UTF-8 version of subscript 2: COâ‚‚ … which unfortunately turns out to be correct, also in IE8. IE just displays an outlined square.

when writing m², you can either use the entity &sup2; or <sup>2</sup>. There is no entity for subscript-2 and the UTF-character &#8322; doesn’t work in IE Without some extra CSS in the document they differ a bit, &sup2; being more typographically correct. <sup> and <sub> elements messes up the line spacing.

Examples (entities vs. sup/sub): m² vs. m2 and CO₂ vs. CO2

Related info: