1

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}  
\definecolor{shadecolor}{gray}{0.75}  
\definecolor{shadecolorB}{gray}{0.93}  
%-----------------------------------------------------------
\setlength{\evensidemargin}{-0.25in}
\setlength{\headheight}{0in}
\setlength{\headsep}{0in}
\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}}
\newcommand{\resheading}[1]{
  \parbox{\textwidth}{\setlength{\FrameSep}{\outerbordwidth}
    \begin{shaded}
\setlength{\fboxsep}{0pt}\framebox[\textwidth][l]{\setlength{\fboxsep}{4pt}\fcolorbox{shadecolorB}{shadecolorB}{\textbf{\sffamily{\mbox{~}\makebox[6.762in][l]{\large #1} \vphantom{p\^{E}}}}}}
    \end{shaded}
  }\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*}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\resheading{Education}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
    \begin{itemize}[leftmargin=*]
       \item[]
            \school
            {University Name}
            {City, Country\\}
            {BSc - Physics}
            {2010 - 2014}
    \end{itemize}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\resheading{Technical Skills}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
          \begin{itemize}
            \item C++, Python
            \item \LaTeX
          \end{itemize}
\end{document}

cv.pdf file appears as:

enter image description here

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

make4ht cv.tex

cv.html file appears as:

enter image description here

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?

2

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}  
\definecolor{shadecolor}{gray}{0.75}  
\definecolor{shadecolorB}{gray}{0.93}  
%-----------------------------------------------------------
\setlength{\evensidemargin}{-0.25in}
\setlength{\headheight}{0in}
\setlength{\headsep}{0in}
\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}}
\newcommand{\resheading}[1]{%
  \parbox{\textwidth}{\setlength{\FrameSep}{\outerbordwidth}%
    \begin{shaded}%
\setlength{\fboxsep}{0pt}\framebox[\textwidth][l]{\setlength{\fboxsep}{4pt}\fcolorbox{shadecolorB}{shadecolorB}{\textbf{\sffamily{\mbox{~}\makebox[6.762in][l]{\large #1} \vphantom{p\^{E}}}}}}%
    \end{shaded}%
  }\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*}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\resheading{Education}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{education} 
       \item[]
            \school
            {University Name}
            {City, Country\\}
            {BSc - Physics}
            {2010 - 2014}
\end{education}
          
    
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\resheading{Technical Skills}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
          \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.itemize1{list-style:none;display:block;padding-left:0em;}}
\Css{.education ul.itemize1 li{display:block;margin:0;padding:0;}}
\Css{.education ul.itemize2 li{list-style:disc outside;display:list-item; }}

% heading boxes
\renewcommand{\resheading}[1]{%
\ifvmode\IgnorePar\fi\EndP\HCode{<div class="resheading">}%
\fcolorbox{shadecolorB}{shadecolorB}{#1}%
\HCode{</div>}%
}

\catcode`\:=11
% convert shadecolor to CSS
\get:xcolorcss{shadecolor}{\:shadecolor}
\Css{.resheading .colorbox{display:block; width:100\%;padding:3pt;font-size: 1.2em; font-weight:bold; box-sizing:border-box;}}
\Css{.resheading{border: 3px solid \:shadecolor;box-sizing:border-box;padding:1px;background:black;}}
\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
\Css{.education ul.itemize1{list-style:none;display:block;padding-left:0em;}}
\Css{.education li{display:block;margin:0;padding:0;}}

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
\renewcommand{\resheading}[1]{%
\ifvmode\IgnorePar\fi\EndP\HCode{<div class="resheading">}%
\fcolorbox{shadecolorB}{shadecolorB}{#1}%
\HCode{</div>}%
}
\Css{.resheading .colorbox{display:block; width:100\%;padding:3pt;font-size: 1.2em; font-weight:bold; box-sizing:border-box;}}
\Css{.resheading{border: 1px solid black;box-sizing:border-box;}}

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:

enter image description here

14
  • 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
  • 1
    @raf I've updated the .cfg file, it should now produce dark gray border around heading boxes, and support nested itemizes inside \education.
    – michal.h21
    Jul 26 at 22:11
  • 1
    @raf but this feature is not critical, it just add link destinations to section titles, so you can ignore it
    – michal.h21
    Aug 23 at 7:26
  • 1
    @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.
    – michal.h21
    Aug 23 at 12:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.