Re: [tex4ht] How to add custom Css code into the configuration file? @media
On 10/14/2023 3:24 PM, Michal Hoftich wrote: Hi Nasser, It is because it is trying to copy the style file nma.css to the output directory! And so ofcourse there is no folder /styles/css/ on the Linux disk. This is meant only for the web server to use from its root public_html. In this case, you can use this configuration instead: \Configure{@HEAD}{} Thanks Michal. THis is a very good solution. I removed \Configure{AddCss} and replaced by the following: You had small typo, I found I need \Hcode in there. So it is now \Configure{@HEAD}{\HCode{}} Now I can use output directory option and no files needs to be copiled. Why is make4ht trying to copy to the output_dir what is defined in \Configure{AddCss}? Because that file is registered, and all registered files are copied to the output directory. Best regards, Michal Thanks --Nasser
Re: [tex4ht] How to add custom Css code into the configuration file? @media
Hi Nasser, > > It is because it is trying to copy the style file nma.css to the output > directory! > > And so ofcourse there is no folder /styles/css/ on the Linux disk. This is > meant only for the web server to use from its root public_html. > In this case, you can use this configuration instead: \Configure{@HEAD}{} > Why is make4ht trying to copy to the output_dir what is defined in > \Configure{AddCss}? Because that file is registered, and all registered files are copied to the output directory. 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 Hello Michal; I found small problem using \Configure{AddCss}{...} I currently have this in my .cfg file \Configure{AddCss}{/styles/css/nma.css} Where /styles/css/ is folder that sits under the top of my server site. i.e. in public_html/styles/ This has been working great. In the HTML geneated I see it creates this HTML in the header: Everything is great so far. Web server can see nma.css since it is under public_html on the server (external or local server on my PC). But now I wanted to use --output-dir option for make4ht. But now it gives error make4ht --shell-escape -ulm default -d REPORT INFO]mkutils: Copy: cp "/styles/css/nma.css" "REPORT/styles/css" [ERROR] mkutils: File /styles/css/nma.css doesn't exist cp: cannot stat '/styles/css/nma.css': No such file or directory It is because it is trying to copy the style file nma.css to the output directory! And so ofcourse there is no folder /styles/css/ on the Linux disk. This is meant only for the web server to use from its root public_html. Why is make4ht trying to copy to the output_dir what is defined in \Configure{AddCss}? Is there a way to not make it not do that? As this file is meant to be global file sitting in one place and accessed from each web page and this has to work for when using --output-dir and when not using this option. Any suggestions how to make this work for both options? Thank you, --Nasser
Re: [tex4ht] How to add custom Css code into the configuration file? @media
Hi all, > 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. You can also disable the default max-width with the "nostyle" option. Best, Michal
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
Re: [tex4ht] How to add custom Css code into the configuration file? @media
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
[tex4ht] How to add custom Css code into the configuration file? @media
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