# Centering text flanked by 2 images using tex4ht

I am trying to create an HTML page using tex4ht using the following code:

\rput[r](-2pt,6pt){\psvectorian[color=black,width=2cm]{41}}
\hfill{}
{\Large \url{Title Text}}
\hfill{}
\rput[l](0,6pt){\psvectorian[color=black,width=2cm]{42}}
\section{New Section}
This is a section. This is a section.


What I get is this:

Is there a better way to center the text and push the images to left/right?

Edit #1:

I also want to mention that this problem is only for tex4ht/HTML. For latex + dvipdf, I get:

Edit #2:

I just wanted to post the output from the wonderful answer provided by michal.h21. tex4ht is no doubt powerful, but I find the documentation very hard to understand. Hope this is of help to others:

-
Not related: \hfill doesn't take an argument, the {} are not needed. –  Qrrbrbirlbel Oct 15 '12 at 3:07
Thanks - I took them out. Doesn't change the output, as you might expect. –  M-V Oct 15 '12 at 3:23
@Jay - the issue is with HTML generation, as I mention in the edit above. –  M-V Oct 15 '12 at 10:49
@M-V - Seems that I've misread your question. I've removed my comment and I hope you get an answer soon. –  mkota Oct 15 '12 at 10:59
I've never used tex4ht (successfully), but my guess would be that \hfill is just not parsed for the HTML output (as your output may suggest). Have you tried \hfill commands on “normal” (= just text) lines? Do those work? –  Qrrbrbirlbel Oct 15 '12 at 11:28

tex4ht doesn't know, how to translate your \hfill commands to css, you must create css definitions yourself.

First of all I would create command for title and separate it to package. For example decosection.sty:

\ProvidesPackage{decosection}
\RequirePackage{psvectorian}
\newcommand\decosection[1]{%
\dc@leftorn
\hfill
{\Large #1}
\hfill
\dc@rightorn
}

\newcommand\dc@rightorn{%
\rput[r](-2pt,6pt){\psvectorian[color=black,width=2cm]{41}}
}

\newcommand\dc@leftorn{%
\rput[l](0,6pt){\psvectorian[color=black,width=2cm]{42}}
}


Now you can use in the document something like

\documentclass{article}
\usepackage{decosection}
\begin{document}
\decosection{Title Text}

ble bla ble ble bla ble ble bla ble ble bla ble
ble bla ble ble bla ble ble bla ble ble bla ble
ble bla ble ble bla ble ble bla ble ble bla ble
ble bla ble ble bla ble ble bla ble ble bla ble
ble bla ble ble bla ble ble bla ble ble bla ble
\end{document}


Because command \decosection is in separate package, you can now provide file named like this package only with extension .4ht, decosection.4ht in this case.

\NewConfigure{decosection}{4}

\renewcommand\decosection[1]{%
\a:decosection%
\dc@leftorn%
\b:decosection%
#1%
\c:decosection%
\dc@rightorn%
\d:decosection%
}
\Configure{decosection}{%
\ifvmode\IgnorePar\fi\EndP%
\HCode{<div class="decosection"><div class="left-ornament">\Hnewline}
}{\HCode{</div>\Hnewline<div class="decosection-title">}}%
{\HCode{</div>\Hnewline<div class="right-ornament">}}%
{\HCode{</div></div>\Hnewline}}%
\Css{%
.decosection{
width:100\%;
clear:both;
overflow:auto;
}
.left-ornament, .decosection-title, .right-ornament{
float:left;
}
.left-ornament{
width:25\%;
}
.decosection-title{
text-align:center;
width:50\%;
font-size:200\%;
}
.right-ornament{
width:25\%;
text-align:right;
}
}


this file is called automatically when tex4ht loads decosection.sty. We need to create so called hooks which are configurable places, where we later put html tags. With command \NewConfigure we created four hooks, because we need to put them at the beginning, at the end and between the elements. These hooks are named \a:docusection ... \d:docusection

then we need to redefine the command and put the hooks to their places. As you see there is no need for commands that change appereance, like \hfill or \large. Visual output is job for tags from hooks and css.

with \Configure, we put in some tags, in this case only <div> with various class attributes, which are used by css for styling the appearance.

finally, \Css command is used for putting css definitions.

-
Wow, that's phenomenal. Now I have to read this about 100 times so something gets into my head. Thanks! –  M-V Oct 15 '12 at 15:31
@M-V yeah sorry for my english, it took for me 10x more time to write the description, than to write the actual code :) you can search for tex4ht on this site, there are some good questions and answers about configuring tex4ht, maybe easier to understand :) –  michal.h21 Oct 15 '12 at 15:47
Your English is fine. My knowledge of TeX on the other hand... Thanks again. :-) –  M-V Oct 15 '12 at 15:50