Making your HTML5 and CSS internationalization-friendly

Someday, one of these crazy web things you make will catch on – yes, it will! I believe in you! – and when you aren’t busy freaking out about scaling it up, you will maybe want to spend a couple minutes thinking about writing it so the rest of the world can read and use it. Here are some ways to do your future self a favor when you do your markup and styles.

Give descriptive IDs to all the things. Any JavaScript that’s gonna translate the non-core text on your page is gonna need to find it first. Even if you’re normally into using fewer IDs, consider the way you’d want to work if you had to write a translation tool (or a translation). No, lengthy CSS selectors are probably not that way. Nice, human-readable ID attributes that succinctly describe the text contents are the way to go.

Charsets, punk. UTF-8 declarations are part of HTML 5 Boilerplate and other templates more often than not, but just to make sure, check that you have <meta charset="utf-8"> in your <head>. If you’re rocking a proper HTML5 doctype, that should be how to write the <meta> tag.

Watch margin-left and margin-right. Either avoid calling out these specific properties in your styles, or make sure your special-case classes or alternate sheets for RTL will have no trouble overriding them. Don’t go around sticking !importants on things that won’t be important in Mandarin. Bear in mind that in the future, margin-start (currently -moz-margin-start and -webkit-margin-start, and similarly named -end properties) will automatically apply to the right thing in RTL or LTR situations. But right now it’s good for impressing people in job interviews and that’s about it.

How will those fancy new CSS properties know when things are RTL, you ask? (I had to ask this, so don’t feel bad. Or feel bad, but do it for me.) CSS3 has a direction property that takes rtl but defaults to ltr. Also there’s the dir HTML attribute that takes the same values, which has been around a while but is now (in HTML5) kosher to use on absolutely any tag you like. Look ’em up for more.