Translating text with CSS

Sometimes you need to make a short bit of text bilingual, and you can't directly change the text itself. For example, content automatically generated by a 3rd party service may be hard coded in English. But if you can modify the CSS, you can add translations to text.

Ideally, the person hardcoding the English will have been nice enough to give it a unique id or class, like this:

<h3 class="enter">Enter</h3>

With the :after pseudo class and your translated content applied...

h3.enter:after {content:"  |  Entrez"} will get this:

Enter | Entrez

:after is supported by all modern browsers, but won't work in IE7 and earlier.

More iPhone citizen science: iNaturalist and Project Noah

Since I first wrote about citizen science apps for the iPhone in 2009, over 350,000 new applications have been released, and GPS is now a standard feature in the less expensive iPod touch. It's easier and cheaper for naturalists of all ages to collect data using handheld devices.

Over the past week, I've been trying out 2 applications, iNaturalist and Project Noah, that allow you to input and geotag species sightings.

iNaturalist (website | app)


  • Doesn't require a photo in order to make a submission
  • Seems to be aimed at naturalists, educators and scientists.
  • Open data - anyone can download the submissions for use in their own research.
  • Simple but beautiful and easy-to-use website
  • Anyone can add a place (like a park or natural region) and add species to it. I added Ottawa's greenbelt, and the species I submitted within that region were automatically added.


  • Much smaller userbase than Project Noah, meaning you may be the only user in your area (or in my case, country).
  • iPhone app is still very limited -- pretty much the only thing you can do in the current version is add a sighting.  You can't view others' sightings, and you can't add a photo from your camera roll.  You can add photos later from your computer. If you add a sighting on the web site, it doesn't sync back to the app.
  • The projects (specific data collection missions you can join) are still few in number and limited to a few locations. This is probably a result of the small userbase.  Anyone can create a project.


Project Noah (website | app)

Makes collecting data purposeful and fun, more accessible to non-naturalists


  • You can earn badges by finding species. I can see how the broader public appeal would bring in more data. It's like Foursquare, but useful!
  • You can join missions -- photographing pollinators or moths, for example.  The missions may be tied to specific research projects, or just for fun.
  • Adding a sighting is easy, and the app uses icons to help you select an ID.


  • You can't add a sighting in the app without uploading a photo, meaning you can't add birds you've identified by call.
  • Requires you to sign in with a 3rd party service, like Facebook or Google, instead of creating your own login. Some may find this a convenience, others may balk at having a public profile tied to their GPS whereabouts.
  • Data appears to be closed -- unlike iNaturalist, you can't download sighting data or add parks/projects.
  • Map is clunky to navigate (the scroll wheel zoom function is disabled for some reason).
  • Although it's more friendly to novice naturalists than iNaturalist, its data is less useful as a result. Project Noah is overrun with "sightings" of cats and houseplants.


Project Noah seems like a good first nature app for kids, but is too limited for science at the high school level and above.  The open nature of iNaturalist makes it a great choice for environmental science curricula and nature enthusiasts of all types.  The ability to create a delineated study area on the map and catalog species within is a great tool.  I hope they'll improve the iPhone app, or make the regular site more mobile-friendly.

Note: Like many GPS apps, these make your exact location a matter of public record -- don't submit sightings from your backyard if you value your privacy.

Make a dynamic thermometer with CSS and PHP

A thermometer is a great visual tool for showing progress towards a fundraising or advocacy goal. This simple, dynamic thermometer requires no images, and can be updated easily, or even automatically.

View the demo

The CSS defines what the thermometer and mercury look like. This is pretty basic, but you can get creative.
#thermometer {
  border:1px solid #CCC;
#mercury {
Now, the PHP.
//The amount you have so far
$current = 1500;
//The amount you're aiming for
$goal = 5000;
//The percentage of the way to your goal.
$mercury = ($current/$goal)*100;
Why use PHP instead of putting the values in by hand?
  1. You can refer to the latest numbers elsewhere on the page (or elsewhere on the site, if you put this info in a PHP include)
  2. PHP calculates the percentage for you -- all you need to do is update your actual totals
  3. You might be able to pull that data in automatically if you're working with a service, like a donation processor or online advocacy tool, that provides an API.
Finally, the HTML to display the thermometer:
<div id="thermometer">
	<div id="mercury" 
        style="width:<?php echo $mercury; ?>%;">
You can, of course, get much fancier -- try a background image on the thermometer, a glossy background image on the mercury, or rounded corners with CSS3.

Here's the whole thing.

<!DOCTYPE html>
<title>Thermometer: Basic</title>
	#thermometer {
	-moz-border-radius: 10px;
	border-radius: 10px;
	#mercury {
	-moz-border-radius: 10px;
	border-radius: 10px;


$current = 1500;
$goal = 5000;
$mercury = ($current/$goal)*100;
<h2>We are <?php echo $mercury; ?>% of the way to our goal of <?php echo $goal; ?>!
<div id="thermometer">
	<div id="mercury" style="width:<?php echo $mercury; ?>%;"></div>


Information as art

Google Satellite images out of context can make for some fascinating art:

Jenny O'Dell collages bits of satellite maps along themes like swimming pools, parking lots and silos.

Human landscapes in Southwest Florida, from's excellent Big Picture blog.

Who knew suburban sprawl could be so visually appealing?

Trading cards for the natural world

Inspired by a disheartening study (PDF) showing that children can identify far more Pokemon than local plants and animals, Phylo is an online trading card game featuring real flora and fauna around the world. Players pit them against each other while learning facts about each species. Who would win a battle between a muskox and a brown throated sloth? The muskox.

What makes Phylo especially cool is that the project is open to everyone's contributions -- cards, art, even the rules of the game itself.

I wasn't able to figure out how to actually play the game (rules are still being hashed out), but I did learn that the kakapo is a heavy, flightless New Zealand parrot with a "pleasant odour". And it can defeat a Hawaiian Bobtail Squid in battle.

Getting ready for Copenhagen

Nonprofit coalitions are springing up all over in advance of  the UN climate summit in Copenhagen in December, when world leaders will meet to make important revisions to the Kyoto Protocol.

The biggest of these is, a coalition between more than two dozen major nonprofits and associations, including WWF, Oxfam and Avaaz. They're asking for an ambitious, fair, and binding treaty, and they've got some serious star power to back them up:

The Global Climate wake-up call, from

And I've been working on Make Forests Count, a small but growing coalition site aimed at eliminating loopholes that allow countries to clearcut their forests while collecting Kyoto credit.

Here's our video, written and directed by Anthony Wong:

Other groups looking forward to Copenhagen:

Have you seen any other inspiring sites or social media regarding the Copenhagen summit?

United breaks guitars: viral customer service

I met Dave and his brother a few years ago through my sister-in-law, and they are great guys. Their band does mostly east coast celtic and country, but they're not well-known yet, even within Canada.

So when Dave posted this video about United Airlines wrecking his guitar, I went to share it around, only to find that the internet beat me to it.

United is on the ball.  Within 24 hours of the video's posting, they've apparently offered to make amends.

Tounge-in-cheek internet embarrassment seems to be the trick to getting real customer service.  When it worked for Adam Savage, many people wondered if AT&T only responded quickly because of Savage's fame. But the success of this video shows that with little more than creativity, anyone can force a monolithic company's hand.