Typesetting Resumes with HTML/CSS

The other day my wife was busy redesigning her resume as her graduation was imminent. And I decided to completely redo my resume too — in a geeky way. I looked at my wife’s resume template (in Adobe InDesign), and contemplated the possibility if I could actually reproduce it with plain HTML and CSS (not even JavaScript and SVG!), if I allowed sparing some pixel-perfect precision.

It turned out to be not that hard: because everything was to be contained in a fix-sized box (e.g. the 8″-by-11.5″ paper), ordinary CSS plus the @page at-rule produced correctly laid-out results, both on screen and printed-to-PDF. With some CSS variables and my prior front-end experiences, I could even adapt the HTML/CSS structure to arbitrary resume contents; even the resume contained some lines-and-shapes decorations, I didn’t have to employ really dirty hacks to get things to look nice.

So, I decided to formally created a GitHub repository with it: html-resume.

Oh, and here’s the actual resume. I must admit I got a little bit guilty when I wrote “no proprietary software required” in the repo readme: I still had to open Adobe Acrobat to add hyperlinks to my contact info in the online PDF.

Well, arguably, even though I tried to minimize dirty hacks, I can’t say I didn’t mess things up — I believe there are still unnecessary margin/padding or positional rules, and there are strange magic numbers popping up just to align things (even though the use of CSS variables did help hide some). Take as example the icons and the vertical lines protruding from them — they have zero robustness, and are likely to break if you’re to adjust the spacing, or the line width, or the icon size.

It’s also my first attempt to (almost) solely use inches and points in CSS, and I still don’t really get the idea when I should use inches and when points. For spacing and positioning like margins or padding, using inches seem reasonable, while for font (and font icon) sizes, points are the way to go (since I’m typesetting, right?) — what if I need to make a space that’s combinatively deriving from another spacing defined by inches and, say, an icon? While CSS calc() hides the issue for me, I still have not reconciled on it. Also, I still need to employ pixel units from time to time, to get rid of misalignments.

Anyway, it’s a nice fun pet project for me. Next round is to change my CV webpage!

Epilogue for anyone looking for talented UX designers: my wife is super diligent and smart, who will be graduating from Parsons MFA Design & Technology this summer. She already holds a degree in computer science and also has solid background in graphic designs. She’s likely the very UX designer candidate you’ve been searching for — checkout her (current) resume and (a bit dated) portfolio!


你的電子郵件位址並不會被公開。 必要欄位標記為 *