Writing a CV in HTML

A couple of days ago my brother asked me to review his CV, the layout looked a bit too complicated to be a Word document. So I asked what he used, and his answer was “HTML!”

At first I thought “was what a waste of time.” However I could not resist and I obviously had to make my own. It was a fun experience and what’s best is, I will likely have my CV in HTML too.

Building a layout

Managing layouts using Word or LaTeX is just painful. On the other hand, HTML and CSS make it really easy.

What I found to be a good starting point are the following styles:

@media print {
  @page {
    size: A4;
    margin: 0.5in 0.3in;
  }
}

:root {
  /* PDF will render the same as in the browser */
  print-color-adjust: exact;
}

.page-break {
  break-before: page;
}

One can then break pages¹ to fit the content better:

<div class="page-break"></div>

To generate a PDF just CTRL+P and print to PDF. And that’s all!

Managing the content

Writing content with hypertext markup isn’t the most convenient, but an annoyance I often faced when working with tools such as Word is while trying to tune my CV for a specific job position.

Setting aside layouts breaking completely and fighting with text styling, one thing that HTML does have over DOC files are comments! How are they useful? Good question, let me explain.

With comments, I can hide sections that are irrelevant for the job posting without having to delete them entirely from my document. I find this to be very convenient, because what you delete for a posting will usually turn out useful for the next one.

Rendering the PDF

I started this project using Firefox, and it did its job nicely. When my layout started getting more complex I faced some issues with text selection when on bold fonts². Microsoft Edge does not have this issue and seems to produce prettier results in comparison.