【问题标题】:unsolicited change of font size in mathjax in reveal.js slides在reveal.js幻灯片中未经请求更改mathjax中的字体大小
【发布时间】:2019-09-22 17:40:56
【问题描述】:

虽然幻灯片的代码(此处为sections)完全相同,但从第三张幻灯片到第四张幻灯片的字体大小发生了变化。我试图追查这个问题,但我没有找到原因。

有趣的是,如果我删除了 title 幻灯片,这种变化会在第三张和第四张幻灯片之间再次发生。

有什么想法吗?

这里有两张截图

这里是 html 代码(应该单独工作)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="generator" content="pandoc">
		<meta name="author" content="Jan Heiland">
		<title>H_\infty-control for DAEs</title>
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
		<link rel="stylesheet" href="https://revealjs.com/css/reveal.css">
		<style type="text/css">code{white-space: pre;}</style>
		<link rel="stylesheet" href="https://revealjs.com/css/theme/black.css" id="theme">
		<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML-full" type="text/javascript"></script>
	</head>
	<body>
		<div class="reveal">
			<div class="slides">

				<!-- section>
		<h1 class="title">Riccati-based <span class="math inline">\(H_\infty\)</span>-control for DAEs</h1>
		<p class="author">Jan Heiland</p>
		</section-->

		<section>
			<ul>
				<li>Descriptor systems have an ODE part and an algebraic part
					<span class="math display">\[\begin{align*}
						\begin{bmatrix}
						C^{\mathsf{d}}  &amp; C^{\mathsf{a}}
						\end{bmatrix}
						\begin{bmatrix}
						sI-A &amp; 0 \\ 0 &amp; sN-I
						\end{bmatrix}^{-1} 
						\end{align*}\]</span></li>
			</ul>
		</section>

		<section>
			<ul>
				<li>Descriptor systems have an ODE part and an algebraic part
					<span class="math display">\[\begin{align*}
						\begin{bmatrix}
						C^{\mathsf{d}}  &amp; C^{\mathsf{a}}
						\end{bmatrix}
						\begin{bmatrix}
						sI-A &amp; 0 \\ 0 &amp; sN-I
						\end{bmatrix}^{-1} 
						\end{align*}\]</span></li>
			</ul>
		</section>

		<section>
			<ul>
				<li>Descriptor systems have an ODE part and an algebraic part
					<span class="math display">\[\begin{align*}
						\begin{bmatrix}
						C^{\mathsf{d}}  &amp; C^{\mathsf{a}}
						\end{bmatrix}
						\begin{bmatrix}
						sI-A &amp; 0 \\ 0 &amp; sN-I
						\end{bmatrix}^{-1} 
						\end{align*}\]</span></li>
			</ul>
		</section>

		<section>
			<ul>
				<li>Descriptor systems have an ODE part and an algebraic part
					<span class="math display">\[\begin{align*}
						\begin{bmatrix}
						C^{\mathsf{d}}  &amp; C^{\mathsf{a}}
						\end{bmatrix}
						\begin{bmatrix}
						sI-A &amp; 0 \\ 0 &amp; sN-I
						\end{bmatrix}^{-1} 
						\end{align*}\]</span></li>
			</ul>
		</section>

			</div>
		</div>

		<script src="https://revealjs.com/lib/js/head.min.js"></script>
		<script src="https://revealjs.com/js/reveal.js"></script>

		<script>

// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({

	// Optional reveal.js plugins
	dependencies: [
	{ src: 'https://revealjs.com/lib/js/classList.js', condition: function() { return !document.body.classList; } },
	{ src: 'https://revealjs.com/plugin/zoom-js/zoom.js', async: true },
	{ src: 'https://revealjs.com/plugin/notes/notes.js', async: true }
]
});
		</script>
	</body>
</html>

【问题讨论】:

    标签: javascript html css mathjax reveal.js


    【解决方案1】:

    由于某种原因,从 mathjax 的第 4 次及以上渲染开始,它将在 font-size 50% 渲染
    我不知道为什么,也许你忽略了一些配置。无论如何,您可以通过添加自己的 css 来覆盖它:

    .MathJax_CHTML {
        font-size: 117% !important;
    }
    

    117% 是用于其他元素的值,所以我只使用该值。

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <meta name="generator" content="pandoc">
      <meta name="author" content="Jan Heiland">
      <title>H_\infty-control for DAEs</title>
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
      <link rel="stylesheet" href="https://revealjs.com/css/reveal.css">
      <style type="text/css">
        code {
          white-space: pre;
        }
        
        .MathJax_CHTML {
          font-size: 117% !important;
        }
      </style>
      <link rel="stylesheet" href="https://revealjs.com/css/theme/black.css" id="theme">
      <script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML-full" type="text/javascript"></script>
    
    </head>
    
    <body>
      <div class="reveal">
        <div class="slides">
    
          <section>
            <h1 class="title">Riccati-based <span class="math inline">\(H_\infty\)</span>-control for DAEs</h1>
            <p class="author">Lars on stackoverflow</p>
            </section>
    
          <section>
            <ul>
              <li>Descriptor systems have an ODE part and an algebraic part
                <span class="math display">\[\begin{align*}
                            \begin{bmatrix}
                            C^{\mathsf{d}}  &amp; C^{\mathsf{a}}
                            \end{bmatrix}
                            \begin{bmatrix}
                            sI-A &amp; 0 \\ 0 &amp; sN-I
                            \end{bmatrix}^{-1} 
                            \end{align*}\]</span></li>
            </ul>
          </section>
    
          <section>
            <ul>
              <li>Descriptor systems have an ODE part and an algebraic part
                <span class="math display">\[\begin{align*}
                            \begin{bmatrix}
                            C^{\mathsf{d}}  &amp; C^{\mathsf{a}}
                            \end{bmatrix}
                            \begin{bmatrix}
                            sI-A &amp; 0 \\ 0 &amp; sN-I
                            \end{bmatrix}^{-1} 
                            \end{align*}\]</span></li>
            </ul>
          </section>
    
          <section>
            <ul>
              <li>Descriptor systems have an ODE part and an algebraic part
                <span class="math display">\[\begin{align*}
                            \begin{bmatrix}
                            C^{\mathsf{d}}  &amp; C^{\mathsf{a}}
                            \end{bmatrix}
                            \begin{bmatrix}
                            sI-A &amp; 0 \\ 0 &amp; sN-I
                            \end{bmatrix}^{-1} 
                            \end{align*}\]</span></li>
            </ul>
          </section>
    
          <section>
            <ul>
              <li>Descriptor systems have an ODE part and an algebraic part
                <span class="math display">\[\begin{align*}
                            \begin{bmatrix}
                            C^{\mathsf{d}}  &amp; C^{\mathsf{a}}
                            \end{bmatrix}
                            \begin{bmatrix}
                            sI-A &amp; 0 \\ 0 &amp; sN-I
                            \end{bmatrix}^{-1} 
                            \end{align*}\]</span></li>
            </ul>
          </section>
    
        </div>
      </div>
    
      <script src="https://revealjs.com/lib/js/head.min.js"></script>
      <script src="https://revealjs.com/js/reveal.js"></script>
    
      <script>
        // Full list of configuration options available at:
        // https://github.com/hakimel/reveal.js#configuration
        Reveal.initialize({
    
          // Optional reveal.js plugins
          dependencies: [{
              src: 'https://revealjs.com/lib/js/classList.js',
              condition: function() {
                return !document.body.classList;
              }
            },
            {
              src: 'https://revealjs.com/plugin/zoom-js/zoom.js',
              async: true
            },
            {
              src: 'https://revealjs.com/plugin/notes/notes.js',
              async: true
            }
          ]
        });
      </script>
    </body>
    
    </html>

    【讨论】:

    • 这个解决方案似乎有点老套。但是,它肯定有效。
    【解决方案2】:

    viewDistance 参数设置为您拥有的幻灯片数量将解决您的问题。 默认值为 3,它会自动隐藏所有以下(或超出此限制的之前的),将它们设置为 display:none;,这不会分配幻灯片应占用的空间

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="generator" content="pandoc">
            <meta name="author" content="Jan Heiland">
            <title>H_\infty-control for DAEs</title>
            <meta name="apple-mobile-web-app-capable" content="yes">
            <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
            <link rel="stylesheet" href="https://revealjs.com/css/reveal.css">
            <style type="text/css">code{white-space: pre;}</style>
            <link rel="stylesheet" href="https://revealjs.com/css/theme/black.css" id="theme">
            <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_CHTML-full" type="text/javascript"></script>
        </head>
        <body>
            <div class="reveal">
                <div class="slides">
    
                    <section>
            <h1 class="title">Riccati-based <span class="math inline">\(H_\infty\)</span>-control for DAEs</h1>
            <p class="author">Jan Heiland</p>
            </section>
    
            <section>
                <ul>
                    <li>Descriptor systems have an ODE part and an algebraic part
                        <span class="math display">\[\begin{align*}
                            \begin{bmatrix}
                            C^{\mathsf{d}}  &amp; C^{\mathsf{a}}
                            \end{bmatrix}
                            \begin{bmatrix}
                            sI-A &amp; 0 \\ 0 &amp; sN-I
                            \end{bmatrix}^{-1} 
                            \end{align*}\]</span></li>
                </ul>
            </section>
    
            <section>
                <ul>
                    <li>Descriptor systems have an ODE part and an algebraic part
                        <span class="math display">\[\begin{align*}
                            \begin{bmatrix}
                            C^{\mathsf{d}}  &amp; C^{\mathsf{a}}
                            \end{bmatrix}
                            \begin{bmatrix}
                            sI-A &amp; 0 \\ 0 &amp; sN-I
                            \end{bmatrix}^{-1} 
                            \end{align*}\]</span></li>
                </ul>
            </section>
    
            <section>
                <ul>
                    <li>Descriptor systems have an ODE part and an algebraic part
                        <span class="math display">\[\begin{align*}
                            \begin{bmatrix}
                            C^{\mathsf{d}}  &amp; C^{\mathsf{a}}
                            \end{bmatrix}
                            \begin{bmatrix}
                            sI-A &amp; 0 \\ 0 &amp; sN-I
                            \end{bmatrix}^{-1} 
                            \end{align*}\]</span></li>
                </ul>
            </section>
    
            <section>
                <ul>
                    <li>Descriptor systems have an ODE part and an algebraic part
                        <span class="math display">\[\begin{align*}
                            \begin{bmatrix}
                            C^{\mathsf{d}}  &amp; C^{\mathsf{a}}
                            \end{bmatrix}
                            \begin{bmatrix}
                            sI-A &amp; 0 \\ 0 &amp; sN-I
                            \end{bmatrix}^{-1} 
                            \end{align*}\]</span></li>
                </ul>
            </section>
    
                </div>
            </div>
    
            <script src="https://revealjs.com/lib/js/head.min.js"></script>
            <script src="https://revealjs.com/js/reveal.js"></script>
    
            <script>
    
    // Full list of configuration options available at:
    // https://github.com/hakimel/reveal.js#configuration
    Reveal.initialize({
        viewDistance: 5,
        // Optional reveal.js plugins
        dependencies: [
        { src: 'https://revealjs.com/lib/js/classList.js', condition: function() { return !document.body.classList; } },
        { src: 'https://revealjs.com/plugin/zoom-js/zoom.js', async: true },
        { src: 'https://revealjs.com/plugin/notes/notes.js', async: true }
    ]
    });
            </script>
        </body>
    </html>

    编辑:

    另一个最简单的解决方案是选择 SVG 输出(不用担心幻灯片的数量)

    <link rel="stylesheet" href="https://revealjs.com/css/reveal.css">
            <style type="text/css">code{white-space: pre;}</style>
            <link rel="stylesheet" href="https://revealjs.com/css/theme/black.css" id="theme">
            <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_SVG-full" type="text/javascript"></script>
    
            <div class="reveal">
                <div class="slides">
    
                    <section>
            <h1 class="title">Riccati-based <span class="math inline">\(H_\infty\)</span>-control for DAEs</h1>
            <p class="author">Jan Heiland</p>
            </section>
    
            <section>
                <ul>
                    <li>Descriptor systems have an ODE part and an algebraic part
                        <span class="math display">\[\begin{align*}
                            \begin{bmatrix}
                            C^{\mathsf{d}}  &amp; C^{\mathsf{a}}
                            \end{bmatrix}
                            \begin{bmatrix}
                            sI-A &amp; 0 \\ 0 &amp; sN-I
                            \end{bmatrix}^{-1} 
                            \end{align*}\]</span></li>
                </ul>
            </section>
    
            <section>
                <ul>
                    <li>Descriptor systems have an ODE part and an algebraic part
                        <span class="math display">\[\begin{align*}
                            \begin{bmatrix}
                            C^{\mathsf{d}}  &amp; C^{\mathsf{a}}
                            \end{bmatrix}
                            \begin{bmatrix}
                            sI-A &amp; 0 \\ 0 &amp; sN-I
                            \end{bmatrix}^{-1} 
                            \end{align*}\]</span></li>
                </ul>
            </section>
    
            <section>
                <ul>
                    <li>Descriptor systems have an ODE part and an algebraic part
                        <span class="math display">\[\begin{align*}
                            \begin{bmatrix}
                            C^{\mathsf{d}}  &amp; C^{\mathsf{a}}
                            \end{bmatrix}
                            \begin{bmatrix}
                            sI-A &amp; 0 \\ 0 &amp; sN-I
                            \end{bmatrix}^{-1} 
                            \end{align*}\]</span></li>
                </ul>
            </section>
    
            <section>
                <ul>
                    <li>Descriptor systems have an ODE part and an algebraic part
                        <span class="math display">\[\begin{align*}
                            \begin{bmatrix}
                            C^{\mathsf{d}}  &amp; C^{\mathsf{a}}
                            \end{bmatrix}
                            \begin{bmatrix}
                            sI-A &amp; 0 \\ 0 &amp; sN-I
                            \end{bmatrix}^{-1} 
                            \end{align*}\]</span></li>
                </ul>
            </section>
    
                </div>
            </div>
    
            <script src="https://revealjs.com/lib/js/head.min.js"></script>
            <script src="https://revealjs.com/js/reveal.js"></script>
    
            <script>
    
    // Full list of configuration options available at:
    // https://github.com/hakimel/reveal.js#configuration
    Reveal.initialize({
        viewDistance: 1,
        // Optional reveal.js plugins
        dependencies: [
        { src: 'https://revealjs.com/lib/js/classList.js', condition: function() { return !document.body.classList; } },
        { src: 'https://revealjs.com/plugin/zoom-js/zoom.js', async: true },
        { src: 'https://revealjs.com/plugin/notes/notes.js', async: true }
    ]
    });
            </script>

    【讨论】:

    • 这对我来说(几乎)完美。还因为我可以使用-V viewDistance=15 在我的pandoc 脚本中调用此参数设置。然而,这幻灯片的数量让我有点困扰。
    • @Jan 查看我的编辑。你在 github 上读过这篇文章吗? github.com/hakimel/reveal.js/issues/1924
    • 感谢相关 github 问题的链接——之前没有阅读过。调用 SVG 是一个很好的解决方法。
    猜你喜欢
    • 1970-01-01
    • 2018-03-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-10-05
    • 1970-01-01
    • 1970-01-01
    • 2014-01-25
    相关资源
    最近更新 更多