` ````
<h1>Responsive scaling with MathJax</h1>
<p>We scale down math that's too big to fit, much like MathML's <code>overflow=scale</code>. We get a little bit of help from our markup and assume that all our (display) math sits in wrappers with <code>class="formula"</code></p>
<h1>Extract From Struik</h1>
<p>
This procedure is simply a generalization of the method used in Sects. 1-3 and 1-4 to obtain the equations of the osculating plane and the osculating circle. Let $f(u)$ near $P(u=u_0)$ have finite derivatives $f^{(i)}(u_0)$, $i = 1, 2, \ldots, n+1$. Then
if we take $u=u_1$ at $A$ and write $h = u_1 - u_0$, then there exists a Taylor development of $f(u)$ of the form (compare Eq. (1-5)):
</p>
<div class="formula">
$$ f(u_1) = f(u_0) + hf'(u_0)+{h^2\over 2!}f''(u_0) + \cdots + {h^{n+1}\over (n+1)!}f^{(n+1)}(u_0) + o(h^{n+1}). $$
</div>
<p>Here, $f(u_0)=0$ since $P$ lies on $\Sigma_2$, and $h$ is of order $AP$ (see theorem Sec. 1-2); $f(u_1)$ is of order $AD$.
<I>Hence necessary and
sufficient conditions that the surface has a contact of order $n$ at $P$
with the curve are that at $P$ the relations hold:</I>
</p>
<div class="formula">
$$ f(u) = f'(u) = f''(u) = \cdots = f^{(n)}(u) = 0;\quad f^{(n+1)}(u) \ne 0. $$
</div>
<hr />
<p>
The converse problem is somewhat more complicated: Find the curves which admit a given curve $C$ as involute. Such curves are called
<I>evolutes</I> of $C$ (German:
<I>Evolute;</I> French:
<I>développées</I>). Their tangents are normal to $C({\bf x})$ and we can therefore write the equation of the evolute ${\bf y}$ (Fig. 1-34):
</p>
<div class="formula">
$$ {\bf y} = {\bf x} + a_1{\bf n} + a_2{\bf b}. $$
</div>
<p>Hence</p>
<div class="formula">
$$ {d{\bf y}\over ds} = {\bf t}(1-a_1\kappa) + {\bf n}\left({da_1\over ds}-\tau a_2\right) + {\bf b}\left({da_2\over ds}+\tau a_1\right) $$
</div>
<p>must have the direction of $a_1{\bf n} + a_2{\bf b}$, this tangent to the evolute:</p>
<div class="formula">
$$ \kappa = 1/a, \qquad R= a_1, $$
</div>
<p>and</p>
<div class="formula">
$$ {{da_1\over ds} - \tau a_2\over a_1} = {{da_2\over ds}+\tau a_1\over a_2}, $$
</div>
<p>which can be written in the form:</p>
<div class="formula">
$$ {a_2{dR\over ds} - R{da_2\over ds} \over a_2^2 + R^2} = \tau. $$
</div>
<p>This expression can be integrated:
</p>
<div class="formula">
$$ \tan^{-1}{R\over a_2} = \int \tau\,ds + {\rm const}, $$
</div>
<p>or</p>
<div class="formula">
$$ a_2 = R\left[{\rm cot}\left(\int \tau\,ds + {\rm const}\right)\right]. $$
</div>
<p>The equation of the evolute is:
</p>
<div class="formula">
$$ {\bf y} = {\bf x} + R\left[{\bf n} + {\rm cot}\left(\int \tau\,ds + {\rm const}\right){\bf b}\right]. $$
</div>
<hr />
<p>If $P(u,v)$ and $Q(u,v)$ are two functions of $u$ and $v$ on a surface, then according to Green's theorem and the expression in Chapter 2, Eq. (3-4) for the element area:
</p>
<div class="formula">
$$ \int_C P\,du + Q\, dv = \int\!\!\!\int_A \left({\partial Q\over \partial u} - {\partial P\over \partial v}\right) {1\over \sqrt{EG-F^2}}\,dA, $$
</div>
<p>where $dA$ is the element of area of the region $R$ enclosed by the curve $C$. With the aid of this theorem we shall evaluate
</p>
<div class="formula">
$$ \int_C \kappa_g\,ds, $$
</div>
<p>where $\kappa_g$ is the geodesic curvature of the curve $C$. If $C$ at a point $P$ makes the angle $\theta$ with the coordinate curve $v = {\rm constant}$ and if the coordinate curves are orthogonal, then, according to Liouville's formula (1-13):
</p>
<div class="formula">
$$ \kappa_g\,ds = d\theta + \kappa_1(\cos\theta)\,ds + \kappa_2(\sin\theta)\,ds. $$
</div>
<p>Here, $\kappa_1$ and $\kappa_2$ are the geodesic curvatures of the curves $v = {\rm constant}$ and $u = {\rm constant}$ respectively. Since
</p>
<div class="formula">
$$ \cos\theta\,ds = \sqrt{E}\,du, \qquad \sin\theta\,ds = \sqrt{G}\,dv, $$
</div>
<p>we find by application of Green's theorem:</p>
<div class="formula">
$$ \int_C\kappa_g\,ds = \int_C d\theta + \int\!\!\!\int_A\left({\partial\over\partial u} \left(\kappa_2\sqrt{G}\,\right) - {\partial\over \partial v}\left(\kappa_1\sqrt{E}\,\right)\right)\,du\,dv. $$
</div>
<p>
The Gaussian curvature can be written, according to Chapter 3, Eq. (3-7),
</p>
<div class="formula">
$$ K = -{1\over 2\sqrt{EG}} \left[{\partial\over\partial u}{G_u\over \sqrt{EG}} + {\partial\over\partial v}{E_v\over\sqrt{EG}}\right] ={1\over\sqrt{EG}}\left[ -{\partial\over\partial u} \left(\kappa_2\sqrt{G}\,\right) + {\partial\over\partial v} \left(\kappa_1\sqrt{E}\,\right)\right],
$$
</div>
<p>so we obtain the formula</p>
<div class="formula">
$$ \int_C\kappa_g\,ds = \int_C d\theta - \int\!\!\!\int_A K\,dA. $$
</div>
<p>The integral $\int\!\!\int_A K\,dA$ is known as the
<I>total</I> or
<I>integral curvature</I>, or
<I>curvature integra</I>, of the region $R$, the name by which Gauss introduced it.
</p>
```

` ````
body {max-width: 900px; border: solid; margin: auto}
```

` ````
window.MathJax = {
jax: ["input/TeX","output/CommonHTML"],
extensions: ["tex2jax.js", "asciimath2jax.js", "mml2jax.js", "MathMenu.js", "MathZoom.js"],
TeX: {
extensions: ["AMSmath.js", "AMSsymbols.js", "autoload-all.js"]
},
tex2jax: {
inlineMath: [
['$', '$'],
["\\(", "\\)"]
],
processEscapes: true
},
showProcessingMessages: false,
messageStyle: "none",
menuSettings: { zoom: "Click" },
AuthorInit: function() {
MathJax.Hub.Register.StartupHook("End", function() {
var timeout = false, // holder for timeout id
delay = 250; // delay after event is "complete" to run callback
var shrinkMath = function() {
var dispFormulas = document.getElementsByClassName("formula");
if (dispFormulas){
// caculate relative size of indentation
var contentTest = document.getElementsByTagName("body")[0];
var nodesWidth = contentTest.offsetWidth;
// if you have indentation
var mathIndent = MathJax.Hub.config.displayIndent; //assuming px's
var mathIndentValue = mathIndent.substring(0,mathIndent.length - 2);
for (var i=0; i<dispFormulas.length; i++){
var dispFormula = dispFormulas[i];
var wrapper = dispFormula.getElementsByClassName("MathJax_Preview")[0].nextSibling;
var child = wrapper.firstChild;
wrapper.style.transformOrigin = "center"; //or top-left if you left-align your equations
var oldScale = child.style.transform;
var newValue = Math.min(0.80*dispFormula.offsetWidth / child.offsetWidth,1.0).toFixed(2);
var newScale = "scale(" + newValue + ")";
if(!(newScale === oldScale)){
wrapper.style.transform = newScale;
wrapper.style["margin-left"]= Math.pow(newValue,4)*mathIndentValue + "px";
var wrapperStyle = window.getComputedStyle(wrapper);
var wrapperHeight = parseFloat(wrapperStyle.height);
wrapper.style.height = "" + (wrapperHeight * newValue) + "px";
if(newValue === "1.00"){
wrapper.style.cursor = "";
wrapper.style.height = "";
}
else {
wrapper.style.cursor = "zoom-in";
}
}
}
}
};
shrinkMath();
window.addEventListener('resize', function() {
clearTimeout(timeout);
timeout = setTimeout(shrinkMath, delay);
});
});
}
};
(function(d, script) {
script = d.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.onload = function() {
// remote script has loaded
};
script.src = 'https://cdn.mathjax.org/mathjax/latest/MathJax.js';
d.getElementsByTagName('head')[0].appendChild(script);
}(document));
```

999px

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers