将 LaTeX 转换为 HTML 时继承页面布局

Question

一般来说，您不希望（也不能）在呈现的 HTML 页面中使用与 PDF 相同的边距。PDF 中的页面大小是固定的，但 HTML 可以在 27 英寸的显示屏上以及智能手机上显示，而这些设备中的每一种都需要不同大小的字体和页边距。

TeX4ht 不设置默认页面和字体大小，允许您使用自定义 CSS 样式来设置它们。

您可以在配置文件. 实现一些 CSS 可读性提示的示例配置文件来自本文，可能看起来像这样：

\Preamble{xhtml}
\Css{body{
  max-width:70ch;margin: 1rem auto;
  font-size-adjust:0.5;
}}
% trick from https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-ine-height/
\Css{html *{ line-height: calc(2px + 2ex + 2px); }}
\Css{p { 
    width: 100\%;
    max-width: 70ch;
    text-align: justify;
    hyphens: auto;}}
% fix for figures
\Css{figure p{text-align: center;}}
\begin{document}
\EndPreamble

这里重要的命令是\Css，它可以将较短的 CSS 片段插入到 TeX4ht 生成的 CSS 文件中。

使用以下方式编译文件

make4ht -c config.cfg filename.tex

这将改变默认的外观：

对此：

变化是，每行不应超过 70 个字符，行间空间稍长，并且启用了文本对齐和催眠功能。

如果您想更改设计的更多元素，您可能需要使用外部 CSS 文件。要添加与 HTML 文档一起保存的 CSS 文件，您可以使用以下命令\Configure{AddCss}：

\Preamble{xhtml}
\Configure{AddCss}{style.css}
\begin{document}
\EndPreamble

您还可以使用托管在其他网站上的 CSS 文件，例如 CDN 上的某些 CSS 框架。以下配置文件使用LaTeX.css项目试图模仿 HTML 中的默认 LaTeX 外观：

\Preamble{xhtml}
\Configure{@HEAD}{\HCode{<link rel="stylesheet" href="https://latex.now.sh/style.min.css" />}}
\begin{document}
\EndPreamble

该\Configure{@HEAD}命令可以将代码添加到 HTML<head>元素，其中应放置指向 CSS 文件的链接。该\HCode命令用于插入 HTML 标签。我<link ...>从 LaTeX.css 的站点复制了该标签。此方法的一个缺点是，您依赖于其他人的机器上引用的 CSS 文件的可用性。他们可以删除它，或以某种不兼容的方式更新它，您的设计将被破坏。从积极的一面来看，这种方法最简单。

这是带有 LaTeX.css 的示例页面：

要查找更合适的 CSS 文件，请搜索类 CSS 框架

Answer 1