I decided to do some fancy typography in my résumé, but I wanted to have a sane fallback for browsers that don’t support the latest features. I have my name rotated 90 degrees using CSS3 transforms, but simply applying the transform: rotate(-90deg) CSS property isn’t enough to get the effect I want. To make it look right I also need to measure the text (since its dimensions will change depending on the viewer’s fonts) and absolutely position it based on that. Standard CSS fallback (where unrecognized rules are ignored) doesn’t give a good result. At all.
After a bunch of fiddling and cross-browser testing I found that testing the existence (!==undefined) of properties on element.style worked well. So I put all of my rotation rules in a CSS class that’s applied only if the style properties exist.
<style type="text/css">
h1.rotated {
-webkit-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-o-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
left: 0px;
top: 0px;
margin-top: 16px;
}
</style>
<script type="text/javascript">
// rotate the title, if that's even possible
var h1 = document.getElementsByTagName('h1')[0];
var s = document.body.style;
// test for the presence of CSS3 transform properties
if (s.transform !== undefined ||
s.WebkitTransform !== undefined ||
s.MozTransform !== undefined ||
s.OTransform !== undefined) {
// move
h1.setAttribute('style',
'top:' + ( h1.offsetWidth - h1.offsetHeight) + 'px');
// and rotate
h1.setAttribute('class', 'rotated');
}
</script>
Of course, if I could just check for transform: support rather than -webkit-transform:, -moz-transform: and -o-transform: but we’re not there yet. Anyway, based on browsershots.org it seems to do the right thing on every known browser. It shows rotated text in very recent Webkit and Gecko browsers, and in Opera nightlies, and unrotated, correctly text everywhere else.
A rare insight into the brokenness for me. Glad I got out while I could.
Do you maintain your resume in HTML or is it converted from something else? As soon as I asked the question, I know the answer… you would have it in the format you would personally most be able to control the typesetting in – HTML.
It’s really not so bad unless you want to do crazy shit. The defaults are usually pretty spot on and CSS is pretty painless when you get your head around it. The trickery comes when you want to do things that aren’t widely supported.
I maintain my resume in HTML these days. At one point I kept it in a custom XML schema with tools to convert to plain-text and HTML, but it’s not worth it anymore. Pretty much everyone’s happy receiving HTML and “lynx -dump” (or similar) gives a reasonable text approximation for the few that don’t. Now that the web is the primary publishing format of almost everything people are even starting to author full books in HTML and then doing a little conversion for print. Word loads HTML better than it saves it anyway.