Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

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

Tags:

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

normal sized math display smaller sized math display

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>
like image 605
Jan Avatar asked May 04 '19 11:05

Jan

2 Answers

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>
like image 100
Lars Avatar answered Nov 15 '22 14:11

Lars

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>
like image 38
scraaappy Avatar answered Nov 15 '22 16:11

scraaappy
Sign in to Comment

Related questions

React.JS new CSS modules
Render methods should be a pure function of props and state
Streaming audio in Node.js with Content-Range
Difference between readFileSync and using promisify on top of readFile with async/await
VueJS: Google Maps loads before data is ready - how to make it wait? (Nuxt)
How to position images on dropped area using nth child in javascript
When to use the base Vue instance, Vuex or mixin?
How to find a middle point of a beizer curve?
Turn a 2D Array into a tree
Jupyter Lab hide vertical navigation pane
What's the point of having a "compatible version" (^version) declared in package.json if package-lock.json locks it?
How much is too much assertions in automation testing?
How can I write a frame of an embedded YouTube video (via iframe) to a canvas?
Get unflattened filtered Multidimensional Array in Javascript
Is there any difference between declared and defined variable
Should I cache the ServiceWorker file in a PWA?
What comparison process does the useEffect React hook use?
publicRuntimeConfig in next.config.js is always undefined in prod/staging
Trigger a scrolling event in a different div when a user scrolls using jQuery
Angular Element in an Angular app creates an infinite reloading issue when optimized

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!