1

I like to match the list style of HTML output with the PDF. When I use \item[] in the 2nd level of any list, there should also be no item label in HTML. And in the case of using \item in the 2nd level, it should give the same list-style as defined in the tex, not disc.

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}
\hypersetup{
    % hidelinks,
    colorlinks=true,
    linkcolor=blue,
    filecolor=blue,      
    urlcolor=blue,
    pdftitle={CV},
    % pdfpagemode=FullScreen,
}
\urlstyle{same}
%-----------------------------------------------------------
%Edit these values as you see fit
\setlength{\outerbordwidth}{3pt}  % Width of border outside of title bars
\definecolor{shadecolor}{gray}{0.75}  % Outer background color of title bars (0 = black, 1 = white)
\definecolor{shadecolorB}{gray}{0.93}  % Inner background color of title bars

%-----------------------------------------------------------
% Margin setup
\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}
% \setlength{\parindent}{0cm}  
%-----------------------------------------------------------
% Custom commands
% \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{\ressubheading}[4]{
% \begin{tabular*}{6.5in}{l@{\cftdotfill{\cftsecdotsep}\extracolsep{\fill}}r}
%     \textbf{#1} & #2 \\
%     \textit{#3} & \textit{#4} \\
% \end{tabular*}\vspace{-6pt}
% }

\newcommand{\school}[4]{\vspace{1.5mm}
  \textbf{#1} \hfill #2 \\ \textit{#3} \hfill \textit{#4} %\vspace{1.5mm}
}

\newcommand{\skill}[2]{
  \textbf{#1} #2 %\vspace{1.5mm}
}

\newenvironment{myitems}{\begin{itemize}[leftmargin=*]}{\end{itemize}}

%-----------------------------------------------------------
\begin{document}

\begin{tabular*}{7in}{l@{\extracolsep{\fill}}r}
    \textbf{\Large Name} & \textbf{Date} \\ Address & \textit{\href{mailto:gmail.com}{gmail.com}}
\end{tabular*}

\resheading{Education}
\begin{myitems}
    \item[]
        \school
        {University Name}
        {Location}
        {Master of Science - Physics}
        {Year}
        \begin{myitems}
            \item[] Thesis Title
            \item[] Supervisor Name
        \end{myitems}
\end{myitems}

\resheading{Skills}
\begin{myitems}
    \item[] \skill{Technical Skills:}{}
        \begin{itemize}
            \item Python, Mathematica
            \item \LaTeX, Zotero, Git
        \end{itemize}
\end{myitems}

\end{document}

cfg file:

% https://tex.stackexchange.com/a/606249/114006

\Preamble{xhtml,fancylogo}

% handle bullet in myitems
\ConfigureEnv{myitems}{\ifvmode\IgnorePar\fi\EndP\HCode{<div class="myitems">}}{\ifvmode\IgnorePar\fi\EndP\IgnorePar\HCode{</div>}}{}{}
% set padding as you like
\Css{.myitems ul.itemize1{list-style:none;display:block;padding-left:1em;}}
\Css{.myitems ul.itemize1 li{display:block;margin:0;padding:0.1em;}}
\Css{.myitems 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}%
}

% handle \skill 
\renewcommand{\skill}[2]{%
\begin{tabular}{l r}%
  \textbf{#1} {#2} \\%
\end{tabular}%
}

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

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

1 Answer 1

2

Edit: I've also added the above code to TeX4ht sources, you can get the same effect using $ make4ht filename.tex "itemize+" command after the next update in TeX Live.


Try this configuration file:

% https://tex.stackexchange.com/a/606249/114006

\Preamble{xhtml,fancylogo}

% handle bullet in myitems
\ConfigureEnv{myitems}{\ifvmode\IgnorePar\fi\EndP\HCode{<div class="myitems">}}{\ifvmode\IgnorePar\fi\EndP\IgnorePar\HCode{</div>}}{}{}
% set padding as you like
\Css{.myitems ul.itemize1{list-style:none;display:block;padding-left:1em;}}
\Css{.myitems ul.itemize1 li{display:block;margin:0;padding:0.1em;}}
% don't use this, it will add extra itemize bullets on the places where original itemize style should be used
% \Css{.myitems ul.itemize2 li{list-style:disc outside;display:list-item;}}
\Css{.itemizeHead{float: left; margin-left: -1em; width: 1em;}}
\Css{li.itemize{list-style: none;}}

% 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;}}

\ConfigureList{itemize}%
   {\EndP\HCode{<ul \a:LRdir
          class="\getClass{itemize}itemize\expandafter\the
          \csname @itemdepth\endcsname">}%
       \afterGetClass{itemize}%
       \PushMacro\end:itm
\global\let\end:itm=\empty}
   {\PopMacro\end:itm \global\let\end:itm \end:itm
\ifvmode \IgnorePar\fi
    \EndP\HCode{</li></ul>}\ShowPar}
   {\end:itm \global\def\end:itm{\EndP\Tg</li>}\HCode{<li class="\getClass{li}itemize"><span class="itemizeHead" aria-hidden="true">}\afterGetClass{li}}
   {\HCode{</span>}\par\ShowPar}

\catcode`\:=12

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

% handle \skill 
\renewcommand{\skill}[2]{%
\begin{tabular}{l r}%
  \textbf{#1} {#2} \\%
\end{tabular}%
}

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

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

I've added a modification of the itemize configuration from TeX4ht sources. The original code removes the itemize bullet using the \DeleteMark command. Instead, it relies on browsers rendering to handle displaying of itemize bullets. The modified code keeps the original bullet character, but it encloses it in <span class="itemizeHead">, so we can style it using CSS:

\ConfigureList{itemize}%
   {\EndP\HCode{<ul \a:LRdir
          class="\getClass{itemize}itemize\expandafter\the
          \csname @itemdepth\endcsname">}%
       \afterGetClass{itemize}%
       \PushMacro\end:itm
\global\let\end:itm=\empty}
   {\PopMacro\end:itm \global\let\end:itm \end:itm
\ifvmode \IgnorePar\fi
    \EndP\HCode{</li></ul>}\ShowPar}
   {\end:itm \global\def\end:itm{\EndP\Tg</li>}\HCode{<li class="\getClass{li}itemize"><span class="itemizeHead" aria-hidden="true">}\afterGetClass{li}}
   {\HCode{</span>}\par\ShowPar}

This is the CSS code:

\Css{.itemizeHead{float: left; margin-left: -1em; width: 1em;}}
\Css{li.itemize{list-style: none;}}

With these changes, your document looks like this:

enter image description here

1
  • Thank you. I don't use "vanilla" TeX Live, so I guess I won't receive the TeX4ht updates for now. I am happy to update the config file as you suggested.
    – raf
    Commented Jul 7 at 4:13

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .