Search code examples
htmlcssscrollbarmathjax

Horizontal scrollbar for long Matjax equations in HTML

I have the following MWE:

<!DOCTYPE html>
<html>

<head>
    <title>I want long equations to be scrollable individually</title>
    
    <meta charset="utf-8">
    
    <!-- Math support https://www.mathjax.org/#gettingstarted -->
    <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$'], ['\\(', '\\)']]
      },
      svg: {
        fontCache: 'global'
      }
    };
    </script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <style>
        .equation {
            display: table;
            width: 100%;
        }
        .equation__content, .equation__number {
            display: table-cell;
        }
        .equation__content {
            width: 90%;
        }
        .equation__number {
            text-align: right;
            font-family: serif;
        }
    </style>
</head>

<body>
    
    <p>Here we have a small equation which works perfectly:
    
    <div class="equation">
        <equation class="equation__content">
            $$E=mc^2$$
        </equation>
            <div class="equation__number">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(1)</div>
    </div>
    
    Now, the following is a very long equation:
    
    <div class="equation">
        <div class="equation__content">
            $$\frac{dF}{dx}\frac{dx}{dy}\frac{dy}{d\xi}=\intop_{\mathbb{R}}f(\zeta)e^{-\zeta}\cos(w^{2}-\zeta)\ d\zeta+\frac{3x^{3}+(\nabla\times\boldsymbol{E})\cdot\boldsymbol{B}}{\vec{r}\cdot\vec{E}}+8\pi\hbar+\log\cos\tan\sin\pi$$
        </div>
            <div class="equation__number">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(2)</div>
    </div>
    
    which produces a "global horizontal scrollbar" for the <code>body</code> element. I would like to keep the <code>body</code> without scrollbar and add a small scrollbar only to long equaitons.
    </p>
    
</body>
</html>

This produces a "global" scroll bar like this (you may have to reduce the width of your window):

enter image description here

I would like to get this instead:

enter image description here

By now I have tried with almost all the answers I found with Google with no success. For example with

.equation__content {
    width: 90%;
    overflow-x: scroll;
}
body {
    overflow-x: hidden;
}

I avoid the global scroll bar but I don't get the local scroll bar. I have tried all the options for overflow-x inside .equation__content and none of them works.

Is it possible to do what I want? (I hope it is because Stack Overflow is using this for the code blocks, each have their own "local scrollbars" when needed.)

Solution

  • One of the ways would be is to use white-space:nowrap; for your formulas:

    .equation-table {
  display: table;
  width: 100%;
  background-color: lightgreen;
  border: 1px solid #666666;
  border-spacing: 5px;
  table-layout: fixed;
}

.equation-table-row {
  display: table-row;
  width: auto;
  clear: both;
}

.equation-table-col {
  float: left; /* fix for  buggy browsers */
  display: table-column;
  width: 50%;
  overflow-x: auto;
  background-color: lightpink;
  white-space:nowrap;
}

.text-center {
    text-align: center;
}
    <div class="equation-table">
      <div class="equation-table-row">
        <div class="equation-table-col" align="center">Some Header</div>
        <div class="equation-table-col">Some Header 2</div>
      </div>
      <div class="equation-table-row">
        <div class="equation-table-col">$$E=mc^2$$</div>
        <div class="equation-table-col text-center">(1)</div>
      </div>
      <div class="equation-table-row">
        <div class="equation-table-col">
          $$\frac{dF}{dx}\frac{dx}{dy}\frac{dy}{d\xi}=\intop_{\mathbb{R}}f(\zeta)e^{-\zeta}\cos(w^{2}-\zeta)\
          d\zeta+\frac{3x^{3}+(\nabla\times\boldsymbol{E})\cdot\boldsymbol{B}}{\vec{r}\cdot\vec{E}}+8\pi\hbar+\log\cos\tan\sin\pi$$
        </div>
        <div class="equation-table-col text-center">(2)</div>
      </div>
    </div>

    UPDATE:

    As mdn says about table-layout: fixed:

    Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.