unsolicited change of font size in mathjax in reveal.js slides

Asked 4/5, 2019 at 11:59 Answered 4/5, 2019 at 20:32

Solved javascript html css mathjax reveal.js

Although the code for the slides (here sections) is exactly the same, I experience a change in the font size from the 3rd to the 4th slide. I have tried to track this down but I didn't find a cause.

Funnily, if I remove the title slide, this change occurs again between the 3rd and 4th slide.

Any ideas?

Here are two screenshots

And here is the html code (that should work as a stand alone)

<!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>

Pyrotechnic answered 4/5, 2019 at 11:59 Comment(0)

set viewDistance parameter to the number of slides you have will solve your problem. Default value is 3, which automatically hide all the following (or the previous ones beyond this limit), setting them to display:none; and this doesn't allocate the space the slide should take

<!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>

EDIT :

Another simplest solution is to choose SVG output (no more worries with number of slides)

<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>

Oblique answered 4/5, 2019 at 20:32 Comment(3)

This works (almost) perfect for me. Also because I can invoke this parameter setting in my pandoc script with -V viewDistance=15. However, this number of slides bothers me a bit. – Pyrotechnic 5/5, 2019 at 7:10

@Pyrotechnic see my edit. Have you read this post on github ? github.com/hakimel/reveal.js/issues/1924 – Oblique 5/5, 2019 at 14:40

Thanks for the link to the related github issue -- haven't read it before. And invoking SVG is a good workaround. – Pyrotechnic 6/5, 2019 at 8:35

For some reason, from the 4th and up render of mathjax, it will render at font-size 50%
I don't know why, maybe some config you've overlooked. Anyway, you can override this by adding your own css:

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

117% was the value used for the other elements, so I would just use that value.

<!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>

Flaky answered 4/5, 2019 at 15:12 Comment(1)

This solution seems a bit hacky. But, surely, it works. – Pyrotechnic 5/5, 2019 at 7:1

<!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>

EDIT :

Another simplest solution is to choose SVG output (no more worries with number of slides)

<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>

Oblique answered 4/5, 2019 at 20:32 Comment(3)

@Pyrotechnic see my edit. Have you read this post on github ? github.com/hakimel/reveal.js/issues/1924 – Oblique 5/5, 2019 at 14:40

Thanks for the link to the related github issue -- haven't read it before. And invoking SVG is a good workaround. – Pyrotechnic 6/5, 2019 at 8:35

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags