Align gathered

Descriptive name for your fiddle.
Edit to suit. (Only available to the logged in author.)

Author: mbourne

board ID: The ID for the JSXGraph DIV.

If you change this, make sure it's the same ID in this line in the script: ...JXG.JSXGraph.initBoard('my_new_id',...

You can only change this if you're the author. max-width: px A number only. aspect-ratio: e.g. 1.5 for wide, 0.7 for thin
A number only. max_height: e.g. 95vh; or 300px

Best for phone is:
calc(100vh - 1.5em)

(needs units)

You can only change this if you're the author.

<div id="jxgbox" class="jxgbox"></div>

#jxgbox {
  max-width: 400px;
  aspect-ratio: 1;
  max_height: calc(100vh - 1.5em)
}

// So we don't see an irrelevant graph
jxgbox = document.querySelector('#jxgbox');
jxgbox.style.display = "none";

// Wait until MathJax has typeset the page, then run doAlign()
MathJax = {
  startup: {
     pageReady() {
       return MathJax.startup.defaultPageReady().then(() => {
         doAlign();
       });
     }
  }
};

// Baseline of the <p> tag in each div with class "align_gather" 
function getBaseline(pElement) {
    if (!pElement) {
        console.error("Paragraph element not found.");
        return null;
    }
    // We create a temporary span and get its distance from the bottom of the p
    var span = document.createElement("span");
    span.setAttribute("style", "font-size:0");
    span.innerText = "A";
    pElement.prepend(span);
    let baseline = span.getBoundingClientRect().bottom;
    pElement.removeChild(span);
    return baseline;
}

function doAlign() {

// Get the DIVs with class "align_gather"
    let align_gathers = document.querySelectorAll('.align_gather');

// Loop through those DIVs
    align_gathers.forEach( (align_gather) => {

// Find the bottom of the 2nd row of the gather
       mjxMtrBbox = align_gather.querySelectorAll('mjx-mtr')[1].getBoundingClientRect();

let gBaseline = mjxMtrBbox.bottom;
//console.log("gBaseline", gBaseline)
         
         
       // Get the base line of the <p>
       let p = align_gather.querySelector('p');

const pBaseline = getBaseline(p);
//console.log("Baseline of p:", pBaseline);         
         
       // Get the MathJax container
       let MJ = align_gather.querySelector('mjx-container');
         
       // Move up the MJ container so the bottom line aligns with the p text
       MJ.style.position = "relative";
       MJ.style.bottom = (gBaseline - pBaseline - 5)+"px";
//console.log(gBaseline, pBaseline, MJ.style.bottom)         
       // Move the whole p down so the vertical spacing with other content is right.
       p.style.position = "relative";
       p.style.bottom = (pBaseline - gBaseline)+"px";
         
  });
}

JSXGraph version: 1.12.0

You aren't the author of this fiddle, so clicking "run" will only update the graph, not save your changes.

To save your changes, make a fork of this fiddle.

Create a new version of this fiddle.
It's like "Save as..."

Save any recent changes (by clicking "Run") first.

Export a HTML page of this Fiddle from the current saved settings.

In the downloaded file, if you see console errors complaining about CORS policy, make sure you run the exported file from a localhost/ or an actual server.

Device size: full 360×800 412×915

This shows one possible ~~method~~ hack of aligning the 2nd row of a MathJax gathered environment with surrounding text.

The original question with a better solution can be found here.

Some primary text \(\begin{gathered}\frac{2}{3}+1\\[-2pt]\text{second row of 1}\end{gathered}\) some more text.

Some random text here saying nothing.

Second text \(\begin{gathered}\frac{x}{y}+z\\[-2pt]\text{second row of 2}\end{gathered}\) some secondary text.

Some concluding text saying nothing.

Note

This does not allow for wider text that results in wrapping. It's just a proof of concept.