On 8/30/2023 5:30 AM, Michal Hoftich wrote:
Yes, that's the main feature. \Css is meant mainly for smaller chunks
of code and for your custom tags. Design for the whole page is better
to be put in an external file. Another upside is that when you fix
something in the CSS, you don't need to recompile all documents.
Thanks. This is very useful. Being able to change css without having
to recompile everything, which for me takes days for large documents.
It will take me time to convert to this setup.
If anyone wants to use fixed width pages with tex4ht, here are my notes.
Need to be careful, and use max-width:960px; and not width: 960px;
I found this after spending 2 hrs trying to figure why my fixed page
width is less than 960px. To measure things in px on webpage, I used
Page Ruler tool (plugin for browsers)
It turned out that make4ht generates its own body
with this in the .css
body{ margin:1em auto; max-width:80ch; padding:0 .62em; }
The above is done automatically. So if you add your own body
specification in the .cfg or your own .css, the above will get
in the way if you use width: 960px; so you have to use max-width:960px; to
overwrite what tex4ht generates.
This is the final setting I have in case someone wants to try them, with link
to a page I just build using this to see the result.
I think fixed size pages looks better, but need to remember to turn that off for
small screen sizes like mobile and pad computers and so on. I used 960px
for the cut-off. You can use anything else if you want, but it seems 960px
is what is recommended.
\Css{@media only screen and (min-width: 100px) and (max-width: 960px){
body{margin-top: 1em;
margin-bottom: 1em;
width: auto;
border: 1px solid \#D3D3D3;
padding: 1em;
max-width: 90\%;
margin-left: auto;
margin-right: auto;
color: \#444;
font-family: arial, sans-serif;
line-height: 1.3;
font-style: normal;
font-size: 1.0em;
text-align:justify; background: \#FFFFFF;}}}
\Css{@media only screen and (min-width: 960px){
body{
margin: 0 auto;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid \#D3D3D3;
padding: 1em;
% width: 960px; %do not use! use max-width. tex4ht issue.
max-width:960px;
color: \#444;
font-family: arial, sans-serif;
line-height: 1.3;
font-style: normal;
font-size: 1.0em;
text-align:justify;
background: \#FFFFFF;}}}
Page that uses the above is
https://12000.org/my_notes/symmetry_in_ode/report.htm
compiled with make4ht with mathjax option.
Thanks to Michal for all his help.
--Nasser
But it is not clear from the docs you have, what the search path for
the filename.css is.
i.e. now I have one global .cfg file, inside my $texmf
texmf/tex/latex/make4ht_cfg_folder/nma_mathjax.cfg
And when I compile using mak4ht ... -c nma_mathjax.cfg
from anywhere in the tree, make4ht finds it.
If I put my filename.css in the same folder as the .cfg, will
it also find it and read it during compile? Or does it have
to be in other location such as $HOME to see it?
TeX4ht doesn't read that file at all. It is declared as used, so when
you use the --output-dir option, TeX4ht will try to copy it to that
directory, but other than copying, it doesn't do anything.
As you want to use it on your webpage, I think you could place the CSS
file to a directory on your server, for example:
https://www.12000.org/css/design.css
You can then use
\Configure{AddCss}{/css/design.css}
Web browsers should find the file and use it, because they can use
relative addresses.
Best regards,
Michal
