How to keep the "contents" panel showing fully in the left?

[asmwarrior]

Hi, I see in your homepage:

https://bdtechconcepts.com/Technical-Editing.html#autosec-18

You see, the left panel shows the "contents".

But if I scroll down the web page, the "content" will scroll, and see below:

So, any way to keep the "contents" panel always stay in the left? So, people can navigate easily.

BTW, it looks like this page works quite well:

Introduction - Beamer Manual
and
PGF/TikZ Manual - Complete Online Documentation

I'm not sure how they did that.

Thanks.

[bdtc]

Try something like the following:

In your document myproject.tex, after loading lwarp, add:
\CSSFilename{myproject.css}

Creat a new file myproject.css:

@import url("lwarp.css") ;
main.bodycontainer { max-height: 100vh ; overflow-y: auto }
div.sidetoccontainer { max-height: 100vh ; overflow-y: auto }

This adds an automatic vertical scroll bar to the sidetoc and to the main document.

If this works well for you then I should add it to the documentation.

[SwitWu]

I think this CSS style should be set as the default style since it's more reader-friendly.

[asmwarrior]

I think this CSS style should be set as the default style since it's more reader-friendly.

@SwitWu I totally agree. Another feature is that when user scroll up/down around the html page, the "contents" panel will hightlight the current section/subsection of the active view content.

@bdtc thanks, I nearly know nothing about CSS and JavaScript, but I will just try your mentioned method.

[SwitWu]

@asmwarrior Maybe you can try this: https://github.com/DominikPeters/tikz.dev-style

[asmwarrior]

@asmwarrior Maybe you can try this: https://github.com/DominikPeters/tikz.dev-style

Hi, thanks for sharing this. I will try it.

[SwitWu]

The TikZ and beamer HTML manual utilize Beautifulsoup Python module to process the raw HTML files and use a completely different CSS file.

[asmwarrior]

This adds an automatic vertical scroll bar to the sidetoc and to the main document. If this works well for you then I should add it to the documentation.

I have create simple latex file with hyperref package enabled, but it looks like the generated html file does not has the content side bars. So I think I will read the lwarp document carefully to enable such feature.

[asmwarrior]

Hi, @SwitWu , here is the test2.tex file I use:

% Save this as tutorial.tex for the lwarp package tutorial.

\documentclass{book}

\usepackage{iftex}

% --- LOAD FONT SELECTION AND ENCODING BEFORE LOADING LWARP ---

\ifPDFTeX
\usepackage{lmodern}            % pdflatex or dvi latex
\usepackage[T1]{fontenc}
\usepackage[utf8]{inputenc}
\else
\usepackage{fontspec}           % XeLaTeX or LuaLaTeX
\fi

% --- LWARP IS LOADED NEXT ---
\usepackage[
%   HomeHTMLFilename=index,     % Filename of the homepage.
%   HTMLFilename={node-},       % Filename prefix of other pages.
%   IndexLanguage=english,      % Language for xindy index, glossary.
%   latexmk,                    % Use latexmk to compile.
%   OSWindows,                  % Force Windows. (Usually automatic.)
%   mathjax,                    % Use MathJax to display math.
]{lwarp}

\CSSFilename{test2.css}

% \boolfalse{FileSectionNames}  % If false, numbers the files.

% --- LOAD PDFLATEX MATH FONTS HERE ---

% --- OTHER PACKAGES ARE LOADED AFTER LWARP ---
\usepackage{makeidx} \makeindex
\usepackage{xcolor}             % (Demonstration purposes only.)
\usepackage{hyperref,cleveref}  % LOAD THESE LAST!
\usepackage{lipsum}  

% --- LATEX AND HTML CUSTOMIZATION ---
\title{The Lwarp Tutorial}
\author{Some Author}
\setcounter{tocdepth}{2}        % Include subsections in the \TOC.
\setcounter{secnumdepth}{2}     % Number down to subsections.
\setcounter{FileDepth}{1}       % Split \HTML\ files at sections
\booltrue{CombineHigherDepths}  % Combine parts/chapters/sections
\setcounter{SideTOCDepth}{1}    % Include subsections in the side\TOC
\HTMLTitle{Webpage Title}       % Overrides \title for the web page.
\HTMLAuthor{Some Author}        % Sets the HTML meta author tag.
\HTMLLanguage{en-US}            % Sets the HTML meta language.
\HTMLDescription{A description.}% Sets the HTML meta description.
\HTMLFirstPageTop{Name and \fbox{HOMEPAGE LOGO}}
\HTMLPageTop{\fbox{LOGO}}
\HTMLPageBottom{Contact Information and Copyright}
\CSSFilename{lwarp_sagebrush.css}

\begin{document}

\maketitle                      % Or titlepage/titlingpage environment.

% An article abstract would go here.

\tableofcontents                % MUST BE BEFORE THE FIRST SECTION BREAK!
\listoffigures

\chapter{First chapter}

\section{A section}

This is some text which is indexed.\index{Some text.}
\lipsum[2-4]

\subsection{A subsection}

See \cref{fig:withtext}.

\begin{figure}\begin{center}
\fbox{\textcolor{blue!50!green}{Text in a figure.}}
\caption{A figure with text\label{fig:withtext}}
\end{center}\end{figure}

\section{Some math}

Inline math: $r = r_0 + vt - \frac{1}{2}at^2$
followed by display math:
\begin{equation}
a^2 + b^2 = c^2
\end{equation}
\lipsum[2-4]


\begin{warpprint}   % For print output ...
\cleardoublepage    % ... a common method to place index entry into TOC.
\phantomsection
\addcontentsline{toc}{chapter}{\indexname}
\end{warpprint}
\ForceHTMLPage      % HTML index will be on its own page.
\ForceHTMLTOC       % HTML index will have its own toc entry.
\printindex

\end{document}

and here is the test2.css file

@import url("lwarp.css") ;
main.bodycontainer { max-height: 100vh ; overflow-y: auto }
div.sidetoccontainer { max-height: 100vh ; overflow-y: auto }

And here is the command I use:

xelatex test2.tex
lwarpmk html
lwarpmk html1
lwarpmk html1
lwarpmk limages

[SwitWu]

\CSSFilename{lwarp_sagebrush.css} at line 55 should be deleted.

[asmwarrior]

\CSSFilename{lwarp_sagebrush.css} at line 55 should be deleted.

OK, thanks, this indeed solved the problem.

But it looks like there are "two" scroll bars, which does not look quite nicely.
See the image shot below:

[bdtc]

To remove the second scroll bar, remove the line:

main.bodycontainer { max-height: 100vh ; overflow-y: auto }

This leaves only the line for the sidetoc, and is probably the way it should be as a default.

[asmwarrior]

To remove the second scroll bar, remove the line:

main.bodycontainer { max-height: 100vh ; overflow-y: auto }

This leaves only the line for the sidetoc, and is probably the way it should be as a default.

Thanks for the reply.
I think the two scrollbar is confusing, and by default, we should have only one scrollbar.

[asmwarrior]

I did some further test, it looks like the "side toc window" only happens when I'm using the \documentclass{book}. But when I use the article type, no side toc window will shown in the generated html.

So, my question is: is it possible to add the sidetoc when I'm using article type?

[SwitWu]

As usual, it's better to show the code that you use.

[asmwarrior]

As usual, it's better to show the code that you use.

Just change the \documentclass{book} to \documentclass{article}, and comment out the \chapter command of the official lwarp example tutorial tex code.

[bdtc]

Lwarp does not show the sidetoc on the home page, assuming there is a full table of contents there instead. Perhaps there should be an option to add the sidetoc to the home page.

See the FileDepth setting to determine if there will be more than one HTML page. Also see the SideTOCDepth setting as well.

[asmwarrior]

Lwarp does not show the sidetoc on the home page, assuming there is a full table of contents there instead. Perhaps there should be an option to add the sidetoc to the home page.

Yes, I agree, thanks.

See the FileDepth setting to determine if there will be more than one HTML page. Also see the SideTOCDepth setting as well.

I'm OK to use the default FileDepth(-5) and SideTOCDepth(1) setting, I see them in the manual.

To place the entire file into one HTML page, use:
\setcounter{FileDepth}{-5}

SideTOCDepth: Sectioning depth of the sideTOC. Defaults to 1, causing the
SideTOCDepth (Ctr) sideTOC to show sections but not subsections.

[bdtc]

Update: I shall try to set up a CSS grid with a fallback for older browers. The hope is that using grid the side TOC will behave like its own little window independent of the contents. But there must be fallback for smaller windows and more fallback for older browsers.

[asmwarrior]

Hi, did you mean that the fix is inside the latest official release (Version number: 0.918 2025-01-28)?

See here: CTAN: CTAN-ann - CTAN update: lwarp

Thanks.

[bdtc]

v0.918 has the scrolling sidetoc, but not the more advanced grid layout.

[asmwarrior]

v0.918 has the scrolling sidetoc, but not the more advanced grid layout.

OK, so my original reported issue still exists. Thanks for the info.

[bdtc]

Try the following for separate scroll bars for the side TOC and the main document. This uses CSS grid with fallback for older browsers, and also keeps the existing fallback for narrow displays. If this works well in testing then I'll add it to lwarp.

In the preamble:

\CSSFilename{project.css}

In project.css:

/* ( --- Start of project.css --- ) */
/* ( --- A sample project-specific CSS file for lwarp --- ) */

/* Uncomment one of the following: */
@import url("lwarp.css") ;
/* @import url("lwarp_formal.css") ; */
/* @import url("lwarp_sagebrush.css") ; */

/* Project-specific CSS setting follow here. */
/* . . . */

@supports (display: grid) {
    div.bodyandsidetoc {
        display:grid ;
        grid-template-columns: 1fr 4fr ;
        height: 100vh ;
        @media screen and (max-width: 50em) {
            grid-template-columns: 1fr ;
        }
    }
    div.sidetoccontainer {
        background:yellow ;
        width: 100% ;
        float: none ;
        overflow-y: scroll ;
        min-width: 20ex ;
    }
    main.bodycontainer {
        background:green ;
        width: 100% ;
        float: none ;
        overflow-y: scroll ;
    }
}
/* ( --- End of project.css --- ) */

[asmwarrior]

@bdtc Thanks for the work.

I just tested it under Widows texlive 2025 version.

And the result looks like below:

Note there are two vertical scrolling bars in the right edge. If I drag the the inner one( maked as "2"), the TOC content side window does not move.

If I drag the scrolling bar labeled "1", the TOC side window will move up and down.

[bdtc]

Some kind of browser issue? On Firefox I get a scroll window for the TOC and a scroll window for the main contents, unless the window is large enough that a scroll bar is not needed.

Perhaps I have to disable more of the fallback CSS.

Do you have other custom CSS active?

What browser are you using? Do the scroll bars improve if the window is a different size?

[asmwarrior]

Try lwarpmk cleanlimages to clear out that empty SVG file.

OK, thanks. It looks like the lwarpmk cleanlimages solves the issue, now you can see the result screen shot:

Then have the batch file do lwarpmk html first, then do lwarpmk limages second.

OK, I will add that command to my batch file, thanks.

I'm not up on Windows developer mode etc. lwarpmk is a script and uses other programs so whatever is necessary for it all to run is what you'll have to do.

About this "Windows developer mode option", when I first see the error, I asked some AI, and it tells me that when generating the SVG images, some hardlink need to be created in my system. For hardlink to be work under Windows, I have either enabled the "Windows developer mode option" or I need to run the batch file in Administrator mode. But if I try the "run the batch file in Administrator mode" option, some error will report from the poppler related tools, such as:

D:\code\test-lwarp>pdfseparate: security risk: running with elevated privileges 
pdfcrop: security risk: running with elevated privileges 
pdftex: security risk: running with elevated privileges 
pdftocairo: security risk: running with elevated privileges

After that, the batch script just hangs. So, I finally use the "Windows developer mode option" way.

EDIT:

This is the update batch file:

:: Change to project folder
cd /d D:\code\test-lwarp

:: Set paths for Strawberry Perl and Ghostscript

set PATH=%PATH%;D:\strawberry-perl-5.42.0.1-64bit-portable\perl\bin
set PATH=%PATH%;D:\strawberry-perl-5.42.0.1-64bit-portable\c\bin
set PATH=%PATH%;C:\Program Files\gs\gs10.06.0\bin
set PATH=%PATH%;D:\code\miktex-portable\texmfs\install\miktex/bin/x64
set PATH=%PATH%;D:\Download\sci\poppler-25.12.0\Library\bin


:: Optional: verify tools
perl -v
gswin64c --version

pdftocairo -v
pdfseparate -v
pdfinfo -v

:: Clean and build images
lwarpmk cleanall
lwarpmk cleanlimages
pdflatex tutorial.tex
lwarpmk html
lwarpmk limages

:: Keep shell open
cmd /k

[asmwarrior]

Another question is: Why the inline math formula is much bigger than the numbered math formula? By default, I think the numbered math formula should be larger.

[bdtc]

See the troubleshooting index for math>font size.

[asmwarrior]

See the troubleshooting index for math>font size.

Thanks. To solve this issue, I see I have to use some statement like:

\renewcommand{\LateximageFontSizeName}{LARGE}

[asmwarrior]

v0.920 is now uploaded to CTAN with grid layout. Give it some hours before it gets to all the mirrors. Hopefully it works well for everyone.

(Had to update other things as well before release. Trying to catch up to other packages' changes.)

I tried to update my Miktex every day, but it looks like all the CTAN mirror sites has the date as: 2025-11-23. So I'm still using local v0.920 version of the lwarp package. I think the CTAN might update once for a month?

[asmwarrior]

I try to build a html from a file named wxWidgets.tex, which has many Chinese text. I'm using the batch file before, the only change is that I use the xelatex to build the wxWidgets.tex.

But I got some error when building the lwarpmk html command

(D:\code\miktex-portable\texmfs\install\tex/latex/base\makeidx.sty))
Writing index file wxWidgets_html.idx
(lwarp-xcolor.sty
(D:\code\miktex-portable\texmfs\install\tex/latex/xcolor\xcolor.sty
(D:\code\miktex-portable\texmfs\install\tex/latex/graphics-cfg\color.cfg)
(D:\code\miktex-portable\texmfs\install\tex/latex/graphics-def\xetex.def)
(D:\code\miktex-portable\texmfs\install\tex/latex/graphics\mathcolor.ltx)))
(lwarp-hyperref.sty) (lwarp-cleveref.sty
(D:\code\miktex-portable\texmfs\install\tex/latex/cleveref\cleveref.sty)
==> First Aid for cleveref.sty applied!
) (lwarp-listings.sty
(D:\code\miktex-portable\texmfs\install\tex/latex/listings\listings.sty
(D:\code\miktex-portable\texmfs\install\tex/latex/listings\lstpatch.sty)
(D:\code\miktex-portable\texmfs\install\tex/latex/listings\lstmisc.sty)
(D:\code\miktex-portable\texmfs\install\tex/latex/listings\listings.cfg))
(D:\code\miktex-portable\texmfs\install\tex/xelatex/xecjk\xeCJK-listings.sty)
==> First Aid for listings.sty no longer applied!
    Expected:
        2024/09/23 1.10c (Carsten Heinz)
    but found:
        2025/11/14 1.11b (Carsten Heinz)
    so I'm assuming it got fixed.
) (lwarp-underscore.sty) (lwarp-ulem.sty
(D:\code\miktex-portable\texmfs\install\tex/latex/ulem\ulem.sty))
(D:\code\miktex-portable\texmfs\install\tex/xelatex/xecjk\xeCJKfntef.sty)
(lwarp-graphicx.sty
(D:\code\miktex-portable\texmfs\install\tex/latex/graphics\graphicx.sty
(lwarp-graphics.sty
(D:\code\miktex-portable\texmfs\install\tex/latex/graphics\graphics.sty
(D:\code\miktex-portable\texmfs\install\tex/latex/graphics\trig.sty)
(D:\code\miktex-portable\texmfs\install\tex/latex/graphics-cfg\graphics.cfg))))
) (lwarp-geometry.sty) (lwarp-easy-todo.sty
(D:\code\miktex-portable\texmfs\install\tex/latex/easy-todo\easy-todo.sty
(lwarp-color.sty) (lwarp-tocloft.sty)
(D:\code\miktex-portable\texmfs\install\tex/latex/oberdiek\ifdraft.sty)))
(wxWidgets_html.aux)
*geometry* driver: auto-detecting
*geometry* detected driver: xetex
[1] [2] (wxWidgets_html.toc) [3] [4] (wxWidgets_html.sidetoc)
! Missing $ inserted.
<inserted text>
                $
l.98 ...ojects for building wxWidgets sample code}

?

I'm not sure how to fix this issue. BTW, the wxWidgets.pdf builds fine.

[bdtc]

See the troubleshooting index for "Missing $ inserted". If that doesn't help then you'll have to make a minimal working example to upload here for us to check out.

[asmwarrior]

See the troubleshooting index for "Missing $ inserted". If that doesn't help then you'll have to make a minimal working example to upload here for us to check out.

OK, thanks.

I just looked at the document about this troubleshooting, it looks like inside the tex file, I have some kinds of

aaa_bbb

In the normal text, this works of the xelatex engine, because I have:

\usepackage{underscore}

statement in the tex preamble.

Question: if I put the \usepackage{underscore} before loading the lwarp package, it will report an error that the package should be loaded after the lwarp.

So, the only solution is to use the escape \ before the _?

[bdtc]

Yes, for now underscores in text must be escaped with \_. The underscore package is ignored by Lwarp. It does tricky stuff behind the scenes, so it's easiest (for me) to ignore it and all its possible consequences.

I have added a package warning, additional docs, and some troubleshooting index entries for the next release warning about the underscore package.

[asmwarrior]

Yes, for now underscores in text must be escaped with \_. The underscore package is ignored by Lwarp. It does tricky stuff behind the scenes, so it's easiest (for me) to ignore it and all its possible consequences.

I have added a package warning, additional docs, and some troubleshooting index entries for the next release warning about the underscore package.

OK, I see. Thanks for your hard work!