Re: [tex4ht] How to add custom Css code into the configuration file? @media
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: \#FF;}}}
\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: \#FF;}}}
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
Re: [tex4ht] How to add custom Css code into the configuration file? @media
>
> Thanks Michal. This is very useful. I did not know about
>
> \Configure{AddCss}{filename.css}
>
> This will make it easy to put all css code in there, so I do not
> have to worry about escaping stuff.
>
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.
> 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
Re: [tex4ht] How to add custom Css code into the configuration file? @media
On 8/30/2023 2:53 AM, Michal Hoftich wrote:
Hi Nasser,
Ok, fixed. Found my mistake. I forget to escape % and #
when I copied the code from the .css to try it in .cfg !
This now works in the .cfg.
In your case, you can use jurt \Configure{AddCss}{filename.css}. It
will include link to the CSS file, which you need to place somewhere.
The good thing is that you can use also URL. See
https://www.kodymirus.cz/tex4ht-doc/Configurations.html#document-styling-using-css
for more details.
Best regards,
Michal
Thanks Michal. This is very useful. I did not know about
\Configure{AddCss}{filename.css}
This will make it easy to put all css code in there, so I do not
have to worry about escaping stuff.
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?
Thanks
--Nasser
Re: [tex4ht] How to add custom Css code into the configuration file? @media
Hi Nasser,
> Ok, fixed. Found my mistake. I forget to escape % and #
> when I copied the code from the .css to try it in .cfg !
>
> This now works in the .cfg.
>
In your case, you can use jurt \Configure{AddCss}{filename.css}. It
will include link to the CSS file, which you need to place somewhere.
The good thing is that you can use also URL. See
https://www.kodymirus.cz/tex4ht-doc/Configurations.html#document-styling-using-css
for more details.
Best regards,
Michal
Re: [tex4ht] How to add custom Css code into the configuration file? @media
Ok, fixed. Found my mistake. I forget to escape % and #
when I copied the code from the .css to try it in .cfg !
This now works in the .cfg.
if anyone is interested. This allows the webpage generated by tex4ht
to have fixed width (which I prefer) but if viewed on mobile and small
screens, it will become flexible width to fit the current size.
add this to your .cfg below \begin{document} section ---
\Css{@media only screen and (min-width: 100px) and (max-width: 960px){
body{margin-top: 1em;
margin-bottom: 1em;
width: auto;
max-width: 90\%;
margin-left: auto;
margin-right: auto; padding: 0em;
color: \#444;
font-family: arial, sans-serif;
line-height: 1.3;
font-style: normal;
font-size: 1.0em;
text-align:justify; background: \#FF;}}}
\Css{@media only screen and (min-width: 960px){
body{margin-top: 1em;
margin-bottom: 1em;
width: 960px;
margin-left: auto;
margin-right: auto; padding: 0em;
color: \#444;
font-family: arial, sans-serif;
line-height: 1.3;
font-style: normal;
font-size: 1.0em;
text-align:justify; background: \#FF;}}}
---
Now when compiled, the index.css will have this
index.css
@media only screen and (min-width: 100px) and (max-width: 960px){
body{margin-top: 1em; margin-bottom: 1em; width: auto; max-width: 90%;
margin-left: auto; margin-right: auto; padding: 0em; color: #444; font-family:
arial, sans-serif; line-height: 1.3; font-style: normal; font-size: 1.0em;
text-align:justify; background: #FF;}}
@media only screen and (min-width: 960px){ body{margin-top: 1em; margin-bottom:
1em; width: 960px; margin-left: auto; margin-right: auto; padding: 0em; color:
#444; font-family: arial, sans-serif; line-height: 1.3; font-style: normal;
font-size: 1.0em; text-align:justify; background: #FF;}}
Case closed.
THanks,
--Nasser
On 8/29/2023 11:46 PM, Nasser M. Abbasi wrote:
Opps, I copied the code with a missing ending extra } at the end.
Here is the correct code in cfg. It still gives same syntax error
--
\Css{@media only screen and (min-width: 100px) and (max-width: 960px) {
body{margin-top: 1em; margin-bottom: 1em; width: auto; max-width: 90%;
margin-left: auto; margin-right: auto; padding: 0em; color: #444;
font-family: arial, sans-serif; line-height: 1.5;
font-style: normal; font-size: 1.0em; text-align:justify; background: #FF;}
}}
-
Runaway argument?
{@media only screen and (min-width: 100px) and (max-width: 960px) { b\ETC.
! Paragraph ended before \Css was complete.
\par
I tried escaping it using \@media but that did not work.
Thanks
--Nasser
On 8/29/2023 11:29 PM, Nasser M. Abbasi wrote:
I am trying to add this custom code into my .cfg file, using \Css{...}
that I always used, but it gives syntax error.
The code works fine if I add it manually to the index.css file
after compiling. But I need to put it to my .cfg file so it automatically
go inot each generated .css
The code is below. I got it from this web site
https://www.thatcompany.com/making-fixed-width-website-mobile-friendly
---
@media only screen and (min-width: 100px) and (max-width: 960px) {
body{margin-top: 1em; margin-bottom: 1em;
width: auto; max-width: 90%; margin-left: auto;
margin-right: auto; padding: 0em; color: #444;
font-family: arial, sans-serif; line-height: 1.5;
font-style: normal; font-size: 1.0em;
text-align:justify; background: #FF;}
in the .cfg file for tex4ht, I just added \Css{..} to the above giving
---
\Css{@media only screen and (min-width: 100px) and (max-width: 960px) {
body{margin-top: 1em; margin-bottom: 1em;
width: auto; max-width: 90%; margin-left: auto;
margin-right: auto; padding: 0em; color: #444;
font-family: arial, sans-serif; line-height: 1.5;
font-style: normal; font-size: 1.0em;
text-align:justify; background: #FF;}
}
-
But when I compile with make4ht, the error is
Runaway argument?
{@media only screen and (min-width: 100px) and (max-width: 960px) { b\ETC.
! Paragraph ended before \Css was complete.
\par
Is the problem the use of @ in media?
Thank you,
--Nasser
