[tex4ht] How to add custom Css code into the configuration file? @media

[Nasser M. Abbasi]

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