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 !important
s 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.