2

This issue is for tex4ht only.

Summary of the current problem

I'd like to make the HTML page smaller width (so easier to read) using say max-width:700px; but at the same time, I do not want to have the verbatim code wrap around which is generated by listing.

i.e. I'd like the HTML to look like the PDF, where code is not affected at all by the width of the page. I know that removing max-width from body fixes this. But I am looking for solution that keeps this but not affect listing. Otherwise, I have to go back to using verbatim for code listing in HTML which is a big problem, as it means I have to duplicate each code fragment. One time for HTML and one time for PDF.

Is there a way to make listing not be affected by max-width:720px; setting in body? When I remove max-width:720px; from body and added it to p only, it did not work, and it make the whole page wide again.

\documentclass[12pt,titlepage]{article}
\usepackage{listings,lstautogobble}% added lstautogobble oct 30,2020
\lstdefinestyle{TEXT}{%
    basicstyle=\ttfamily\normalsize,
    breaklines=false,
    %columns=fullflexible,
    keepspaces=true,
    language=,
    frame=single,
    frameround=tttt,
    aboveskip=12pt,belowskip=6pt
}
\lstnewenvironment{TEXTinline}{%
  \lstset{style=TEXT}}{}

\begin{document} 
\ifdefined\HCode
\Css{body{
      margin: 0 auto; 
      margin-top: 1em; 
      margin-bottom: 1em; 
      font-family: arial, sans-serif;
      line-height: 1.5;
      font-style: normal;
      font-size: 18px;
      border: 1px solid;
      max-width:720px;
      }}

\Css{p{text-align:justify;}}

\fi 

long text long text  long text  long text  long text  long text  long text  long text  long text  long text  long text  long text  long text  long text 
long text  long text  long text  long text  long text 

This is using verbatim
\begin{verbatim}  
restart;

expr:= y(x)*diff(y(x),x)^(1/3)+sin(x)*diff(y(x),x)^3 + z*diff(y(x),x)*ln(y(x)*diff(y(x),x)^2) +diff(y(x),x)^(1/2) + x/diff(y(x),x)^7;
t1:=identical(diff(y(x),x))^anything;
t2:=identical(diff(y(x),x));
indets[flat](expr, 'Or'(  t1, t2 ));
\end{verbatim}  

This is using listings

\begin{TEXTinline}  
restart;

expr:= y(x)*diff(y(x),x)^(1/3)+sin(x)*diff(y(x),x)^3 + z*diff(y(x),x)*ln(y(x)*diff(y(x),x)^2) +diff(y(x),x)^(1/2) + x/diff(y(x),x)^7;
t1:=identical(diff(y(x),x))^anything;
t2:=identical(diff(y(x),x));
indets[flat](expr, 'Or'(  t1, t2 ));
\end{TEXTinline} 
\end{document}

Output is

 make4ht -ulm default foo.tex "mathjax,htm,nostyle"

![enter image description here

What I tried

I tried adding white-space: nowrap; to each listing elements generated in the HTML. Here is the raw HTML of the above

<!DOCTYPE html> 
<html lang='en-US' xml:lang='en-US'> 
<head><title></title> 
<meta charset='utf-8' /> 
<meta content='TeX4ht (https://tug.org/tex4ht/)' name='generator' /> 
<meta content='width=device-width,initial-scale=1' name='viewport' /> 
<link href='foo.css' rel='stylesheet' type='text/css' /> 
<meta content='foo.tex' name='src' /> 
<script>window.MathJax = { tex: { tags: "ams", }, }; </script> 
 <script async='async' id='MathJax-script' src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js' type='text/javascript'></script>  
</head><body>
<!-- l. 34 --><p class='noindent'>long text long text long text long text long text long text long text long text long
text long text long text long text long text long text long text long text long text
long text long text
</p><!-- l. 37 --><p class='indent'>   This is using verbatim
                                                                                                                                                            
</p>   
<pre class='verbatim' id='verbatim-1'>
    restart;

    expr:= y(x)*diff(y(x),x)^(1/3)+sin(x)*diff(y(x),x)^3 + z*diff(y(x),x)*ln(y(x)*diff(y(x),x)^2) +diff(y(x),x)^(1/2) + x/diff(y(x),x)^7;
    t1:=identical(diff(y(x),x))^anything;
    t2:=identical(diff(y(x),x));
    indets[flat](expr, ’Or’(  t1, t2 ));
    
</pre>
<!-- l. 45 --><p class='nopar'>
</p><!-- l. 47 --><p class='indent'>   This is using listings
</p>   
<!-- l. 49 --><pre class='listings' id='listing-1'><span class='label'><a id='x1-2r1'></a></span><span style='color:#000000'>    <span class='ec-lmtt-12'>restart;</span> 
</span><span class='label'><a id='x1-3r2'></a></span> 
<span class='label'><a id='x1-4r3'></a></span><span style='color:#000000'>    <span class='ec-lmtt-12'>expr:= </span><span class='ec-lmtt-12'>y(x)*diff(y(x),x)^(1/3)+sin(x)*diff(y(x),x)^3 </span><span class='ec-lmtt-12'>+ </span><span class='ec-lmtt-12'>z*diff(y(x),x)*ln(y(x)*diff(y(x),x)^2) </span><span class='ec-lmtt-12'>+diff(y(x),x)^(1/2) </span><span class='ec-lmtt-12'>+ </span><span class='ec-lmtt-12'>x/diff(y(x),x)^7;</span> 
</span><span class='label'><a id='x1-5r4'></a></span><span style='color:#000000'>    <span class='ec-lmtt-12'>t1:=identical(diff(y(x),x))^anything;</span> 
</span><span class='label'><a id='x1-6r5'></a></span><span style='color:#000000'>    <span class='ec-lmtt-12'>t2:=identical(diff(y(x),x));</span> 
</span><span class='label'><a id='x1-7r6'></a></span><span style='color:#000000'>    <span class='ec-lmtt-12'>indets[flat](expr, </span><span class='ec-lmtt-12'>’Or’( </span> <span class='ec-lmtt-12'>t1, </span><span class='ec-lmtt-12'>t2 </span><span class='ec-lmtt-12'>));</span> 
</span><span class='label'><a id='x1-8r7'></a></span><span style='color:#000000'>    
 
</span><span class='label'><a id='x1-9r8'></a></span></pre>
    
</body> 
</html>

I see from above, it says pre class='listings' so changed it to

 <pre class='listings' id='listing-1'  style="white-space: nowrap;">

But this now made all lines into one long line! Which is not what I want. I want the code to appear exactly as it does under verbatim above it, but using listing.

enter image description here

I have a solution to use verbatim for tex4ht and using listing for pdf. The problem with this solution is that I have to make new copy of each listing, duplicating so much code. The reason is, I can not make a macro/new command, which takes verbatim in Latex. It is possible to do it for Verbatim thanks to egreg help in How to make new environment using an existing environment? File ended while scanning use of \FancyVerbGetLine

,but not for verbatim.

The problem is that Verbatim still wraps around, just like listing. So using the trick by egreg in the comment to the above question to make verbatim work in command did not work, since it changed back to Verbatim which does not wrap long lines.

Question again is: Is there a way to make listing not wrap around in HTML generated by tex4ht? Same as it does in PDF.

Any CSS solution will be fine ofcourse. I will keep looking myself for other CSS possibilities to try.

All of this would have been easily solved if Latex allows one to make new command and have verbatim inside it that takes in argument from outside. But this is not possible.

9
  • 2
    dont apply justify to the body but just to (say) p or add a rule for code or pre or whatever markup listing comes out as as text-align:none Commented Sep 1, 2023 at 11:13
  • as David said, your CSS code is wrong, when you apply justification to body, it will justify everything, including listings. Set it only to p and few other elements that you want.
    – michal.h21
    Commented Sep 1, 2023 at 11:25
  • @michal.h21 How do I know what are all the elements I need to apply the justify to other than <p> once I remove it from the body? I thought listings behave like verbatim does. Do you know what else I need to justify other than p?
    – Nasser
    Commented Sep 1, 2023 at 11:30
  • All paragraphs of text should be inside p. Add other elements only if you find something that you want to justify and isn,t.
    – michal.h21
    Commented Sep 1, 2023 at 11:45
  • @michal.h21 Thanks. I've updated it. If you have suggestion about how to prevent the listing to wrap around that will be great. I am using max-width:720px; for body, but want listing not be affected by this. (just like verbatim). any suggestion if this is possible to do?
    – Nasser
    Commented Sep 1, 2023 at 11:54

2 Answers 2

2

Instead of white-space: nowrap;, you can look through the other possibilities at https://developer.mozilla.org/en-US/docs/Web/CSS/white-space. It seems that nowrap will collapse consecutive white-space and not break any lines, both of which you do not want. Instead, you want to preserve listings' white-space, and only break lines when they are broken in the html source. This seems to be the behavior of white-space: pre;.

1

Generally, you don't want long unbreakable lines that don't fit on the screen. This can be problematic on devices with smaller displays, such as mobile phones. That's why we break excessively long lines. It shouldn't be too much of an issue because when you copy that code into a text editor, it should copy correctly. If you really don't want to break it, you can use the CSS property overflow: auto, which will display a scrollbar for texts that are wider than the current view. The following configuration will turn this on for both verbatim and listings:

\Preamble{xhtml}
\Css{pre.listings, pre.lstinputlisting, pre.verbatim {white-space: pre;overflow:auto;}}
\begin{document}
\EndPreamble

This is the result:

enter image description here

3
  • Thanks michal. This is interesting option also. But when I looked at both solutions, I find having to scroll the bar to see the code a little cumbersome for me. May be this is a personal choice. But being able to see all the code at once, even though it overflows to the right was easier. Here is screen shot !Mathematica graphics again, this might be a personal choice which one is better. The problem is that line length should be short on web pages for make it easier to read (so I am using 720px now) but this is too small for code sometimes.
    – Nasser
    Commented Sep 13, 2023 at 9:06
  • of course, the best solution is to change my code itself, so there are no lines that are too long!
    – Nasser
    Commented Sep 13, 2023 at 9:09
  • 1
    @Nasser you can also remove the overflow property and keep only the white-space: pre. It should work in the way you want.
    – michal.h21
    Commented Sep 13, 2023 at 9:13

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .