Export resume.org to both pdf and html

Question

I've been maintaining my resume in orgmode for some time now, with export to pdf. I just decided it would be nice to also export to html which has uncovered a problem.

I'm using headings to list my previous jobs, with a macro that puts a date range on the same line, but right aligned. The macro uses latex to do the magic, which you can see below. I've also looked at replacing the macro with a tag, but tags don't seem to allow spaces or dashes.

Wanted to see if anyone here has any smart tricks for the org file so that it will export to both pdf and html nicely.

Here's a MWE of my resume org file:

#+OPTIONS: toc:nil num:nil
#+MACRO: date \hfill\normalfont{\small $1}

* Job 1 {{{date(July 2019 -- Dec 2019)}}}
  /Description of job/

  - This is the macro solution I am currently using. It doesn't export to html very nicely...

* Job 2                                                               :Jul2019Dec2019:
  /Description of second job/

  - Here I am using a tag for the date
  - Problem is that I can't put spaces or dashes in the tag...

Here's the pdf output: https://imgur.com/9syixz3

Here's the html output: https://imgur.com/1rRgPY5

Answer 1

I would continue using the macro. You can use markup inside the macro that expands differently for HTML export than it does for PDF export. For example, as a first approximation, this will allow you to get the dates in the HTML output, although they are not nicely formatted - but it's a beginning:

#+MACRO: date @@latex: \hfill\normalfont{\small $1} @@ @@html: $1 @@

As the next approximation, I would (as a naive HTML/CSS simpleton) add a span around the date and then try to apply some CSS to it, perhaps something like this:

#+MACRO: date @@latex: \hfill\normalfont{\small $1} @@ @@html: <span class="dates">$1</span> @@

but you should take that last suggestion with a large grain of salt and maybe ask another question to this or possible a different SE where they can guide you through the HTML/CSS thickets.

EDIT: Here is a complete Org mode file that should do what you want:

#+OPTIONS: toc:nil num:nil
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="./foo12.css" />
#+MACRO: date @@latex: \hfill\normalfont{\small $1} @@ @@html: <span class="right">$1</span> @@


* Job 1 {{{date(July 2019 -- Dec 2019)}}}
  /Description of job/

  - This is the macro solution I am currently using.


* CSS                                                                                                         :noexport:
#+begin_src css :tangle yes
  .right{
      float:right;
  }

  .left{
      float:left;
  }
#+end_src

The underlying assumption is that this file is called foo12.org. It uses a CSS style file which can be generated from the source block in the CSS section by tangling it: C-c C-v t while you are in the code block. That then produces a CSS file, called foo12.css which in turn is used as a style file when you export to HTML, because it is mentioned in the #+HTML_HEAD: line. If you use a different name for the Org mode file, you will need to adjust the file name in the #+HTML_HEAD: line. Note that the CSS section is tagged :noexport so it will not appear in the exported file at all.