# Convert CV template from tex to html using make4ht

I am trying to get a proper html version of my cv from the tex file. I like to do the conversion as perfectly as possible so that the structure of the html can match with the pdf properly.

## cv.tex

\documentclass[11pt]{article}
\newlength{\outerbordwidth}
\pagestyle{empty}
\raggedbottom
\raggedright
\usepackage[svgnames]{xcolor}
\usepackage{framed}
\usepackage{tocloft}
\usepackage{enumitem}
\usepackage{textcomp}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{hyperref}
%-----------------------------------------------------------
\setlength{\outerbordwidth}{3pt}
%-----------------------------------------------------------
\setlength{\evensidemargin}{-0.25in}
\setlength{\oddsidemargin}{-0.25in}
\setlength{\tabcolsep}{0in}
\setlength{\textheight}{9.5in}
\setlength{\textwidth}{7in}
\setlength{\topmargin}{-0.3in}
\setlength{\topskip}{0in}
\setlength{\voffset}{0.1in}
%-----------------------------------------------------------
\newcommand{\resitem}[1]{\item #1 \vspace{-4pt}}
\parbox{\textwidth}{\setlength{\FrameSep}{\outerbordwidth}
}\vspace{-11pt}
}
\newcommand{\school}[4]{\vspace{1.5mm}
\textbf{#1} \hfill #2 \textit{#3} \hfill \textit{#4} \vspace{1.5mm}
}
%-----------------------------------------------------------
\begin{document}
\begin{tabular*}{7in}{l@{\extracolsep{\fill}}r}
\textbf{\Large Name} & \textbf{June, 2021} \\ Address & \textit{\href{mailto:}{Email}}
\end{tabular*}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{itemize}[leftmargin=*]
\item[]
\school
{University Name}
{City, Country\\}
{BSc - Physics}
{2010 - 2014}
\end{itemize}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{itemize}
\item C++, Python
\item \LaTeX
\end{itemize}
\end{document}


## cv.pdf file appears as:

And I have generated the cv.html using the command:

make4ht cv.tex


## cv.html file appears as:

The conversion is quite okay. But there are some differences in the text-alignment (City, Country, 2010-2014 not aligned at right), color of the headings (gray shedcolors not covered fully), \LaTeX symbol (appeared simply as LaTeX), item label (the default label appeared at University Name even trough I put \item[]).

Is it possible to make the conversion more perfect so that these differences don't appear? And currently, what is the most effective method to convert my above cv.tex file to cv.html?

You will need some configurations to change formatting of your HTML file. In particular, \hfill and similar commands cannot be supported by TeX4ht. Fortunately, you used custom commands, instead of direct formatting in your document, so it is quite easy to do.

One thing that I would change in your document is that I would use a custom environment instead of itemize for the education block. This will enable us to remove the bullet in this case. This is the updated TeX file:

\documentclass[11pt]{article}
\newlength{\outerbordwidth}
\pagestyle{empty}
\raggedbottom
\raggedright
\usepackage[svgnames]{xcolor}
\usepackage{framed}
\usepackage{tocloft}
\usepackage{enumitem}
\usepackage{textcomp}
\usepackage[utf8]{inputenc}
\usepackage[T1]{fontenc}
\usepackage{hyperref}
%-----------------------------------------------------------
\setlength{\outerbordwidth}{3pt}
%-----------------------------------------------------------
\setlength{\evensidemargin}{-0.25in}
\setlength{\oddsidemargin}{-0.25in}
\setlength{\tabcolsep}{0in}
\setlength{\textheight}{9.5in}
\setlength{\textwidth}{7in}
\setlength{\topmargin}{-0.3in}
\setlength{\topskip}{0in}
\setlength{\voffset}{0.1in}
%-----------------------------------------------------------
\newcommand{\resitem}[1]{\item #1 \vspace{-4pt}}
\parbox{\textwidth}{\setlength{\FrameSep}{\outerbordwidth}%
}\vspace{-11pt}%
}
\newcommand{\school}[4]{\vspace{1.5mm}
\textbf{#1} \hfill #2 \textit{#3} \hfill \textit{#4} \vspace{1.5mm}
}

% extra environment for education, as you want to get rid of the bullet
\newenvironment{education}{\begin{itemize}[leftmargin=*]}{\end{itemize}}
%-----------------------------------------------------------
\begin{document}
\begin{tabular*}{7in}{l@{\extracolsep{\fill}}r}
\textbf{\Large Name} & \textbf{June, 2021} \\ Address & \textit{\href{mailto:}{Email}}
\end{tabular*}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{education}
\item[]
\school
{University Name}
{City, Country\\}
{BSc - Physics}
{2010 - 2014}
\end{education}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{itemize}
\item C++, Python
\item \LaTeX
\end{itemize}
\end{document}


You can then use the following .cfg file to change the appearance:

\Preamble{xhtml,fancylogo}

% handle bullet in education
\ConfigureEnv{education}{\ifvmode\IgnorePar\fi\EndP\HCode{<div class="education">}}{\ifvmode\IgnorePar\fi\EndP\IgnorePar\HCode{</div>}}{}{}
% set padding as you like
\Css{.education ul.itemize2 li{list-style:disc outside;display:list-item; }}

\HCode{</div>}%
}

\catcode\:=11
\catcode\:=12

% handle \school
\renewcommand{\school}[4]{%
\begin{tabular}{l r}%
\textbf{#1} & #2\\  \textit{#3} & \textit{#4} \\%
\end{tabular}%
}

% document styling
\Css{body{margin: 1em auto; max-width: 70ch}}

% table styling
\Css{table{width:100\%;}}
\begin{document}
\EndPreamble


I will describe some important stuff:

\Preamble{xhtml,fancylogo}


The fancylogo option will request text that emulates normal \LaTeX logo formatting

% handle bullet in education
\ConfigureEnv{education}{\ifvmode\IgnorePar\fi\EndP\HCode{<div class="education">}}{\ifvmode\IgnorePar\fi\EndP\IgnorePar\HCode{</div>}}{}{}
% set padding as you like


This code adds <div class="education"> around the education block. CSS can then be used to remove the bullet. The \ifvmode\IgnorePar\fi\EndP code is used to handle paragraphs, it is necessary to use it in order to get valid HTML code.

% heading boxes
\HCode{</div>}%
}


This handles your \resheading command. Most of the original code is not useful in the conversion at all. We just use the \fcolorbox to produce box with the grey background. We could use just HTML and CSS for that, but in this way, you can change the color in your document, and it will be changed in HTML as well.

% handle \school
\renewcommand{\school}[4]{%
\begin{tabular}{l r}%
\textbf{#1} & #2\\  \textit{#3} & \textit{#4} \\%
\end{tabular}%
}


I've redefined \school to just produce table, as it is an easiest way how to achieve the desired formatting.

The last important things are related to overall look of your document:

% document styling
\Css{body{margin: 1em auto; max-width: 70ch}}


This sets maximum width of the page and centers it.

% table styling
\Css{table{width:100\%;}}


This resize tables to use full page width.

Compile using

make4ht -c mycfg.cfg cv.tex


This is the result:

• Thank you so much!
– raf
Jul 26 at 10:48
• But your code is not generating the deeper gray color of the outer border of the heading boxes. Can you update to fix it?
– raf
Jul 26 at 10:54
• @raf I've updated the .cfg file, it should now produce dark gray border around heading boxes, and support nested itemizes inside \education. Jul 26 at 22:11
• @raf but this feature is not critical, it just add link destinations to section titles, so you can ignore it Aug 23 at 7:26
• @raf it is best to use either make4ht filename.tex "mathml,mathjax", or make4ht filename.tex "mathjax". Use both options and you will see which works better for you. Aug 23 at 12:32