1

I am trying to convert latex doxument in html using tex4htand to get centered image. I am inspired by the code in the post here I use the following .tex file

\documentclass[12pt,a4paper,twoside]{book} \usepackage[francais]{babel}
\usepackage[latin1]{inputenc}
\usepackage{lmodern}
\usepackage{graphicx}
\usepackage{color}
\usepackage{float}
\usepackage{tex4ht}
\newtheorem{exemple}{Exemple}[chapter]
\newcommand\inputpstex[1]{\input{#1.pstex_t}}
\newcommand{\myTexFigure}[2]{
      \vspace{3mm}
    \begin{figure}[!h]
    \centering
    \inputpstex {#1}
    \caption{#2}\label{f:#1}
    \end{figure}
      \vspace{3mm}
      }
\title{Test}
\author{S.~Oulhoussine}
\begin{document}
\maketitle
\chapter{Introduction}
\section{Calcul}
Ceci est un test
\begin{exemple}[Pendule simple]
figure d'un pendule
\begin{figure}[!h]
  \centering
  \includegraphics[width=2cm]{pendule.ps}\\
  \caption{Image d'un pendule}
\end{figure}
\begin{equation}\label{linvar:e}
5 \cos (t) \frac{{dy(t)}}{{dt}}+ 3  y(t) = 10 u(t)
\end{equation}
\end{exemple}
L'exemple est déjà fini.
\end{document} 

I converted using the command line

make4ht -c my.cfg test.tex

with the the following configuration file my.cfg

\Preamble{xhtml}
\Css{div.caption{text-align:center;}}
\Css{div.figure img {text-align:center;display:block;margin-left:auto; margin-right: auto;}}
\begin{document}
\EndPreamble

Here are the pendule.ps and pendule.pstex_t files. I get this html file enter image description here As you can see, the html figure is not centerd. Can you help please ?

1
  • It seems the link to the pendule.ps file is missing. – michal.h21 Apr 13 '20 at 18:12
2

The CSS code in your config file is correct, it just conflicts with one CSS declaration in TeX4ht sources:

 \Css{.figure img.graphics {margin-left:10\%;}}

This sets left margin of the image to 10% of the page width. I don't really know why it is there, it seems like a really old declaration that is not useful anymore. So I will remove it from the sources. To fix it at the moment, you can override it using CSS declaration that will have higher specificity than the declaration above:

 \Css{figure.figure img.graphics {text-align:center;display:block;margin-left:auto; margin-right: auto;}}

This is the result with a different image:

enter image description here

2

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.