\left\{\begin{aligned} B’&=-\partial\times E,\\ E’&=\phantom{-}\partial\times B - 4\pi j, \end{aligned} \right.

HOWTO: add equations to a webpage

The Centre of Excellence in Computational System Biology may, from time to time, have the need to add an equation to a webpage (mais oui!). Thanks to some websites here and here and a little javascript this feat can be made reasonably easy. It requires no plugins beyond javascript and should work on all browsers (for a non javascript/even less intrusive solution jump here). (Unlike MathML and the like!) Follow the following steps or jump down the page to here and cut a paste all the required stuff at once.

To test out your LaTeX skills try out our test page.

1. First: link to the necessary javascript. You can do all these steps by cutting and pasting the code in the textarea below.

   <script type="text/javascript" 
     src="http://www.ce4csb.org/equations/equations.js"></script>

   This can be placed anywhere in your document or document fragment. Cut'n'Paste away
2. Second: ensure that the javascript is called after the document is loaded by adding the fragment:

   <script type="text/javascript">eqnload()</script>
   

   this can be placed anywhere in the document after the equations.js reference. Cut'n'Paste away.
3. Thirdly: style your equations. The images that come back might need to centred with the text if they appear inline. I've also added a grey border to the images for this page so you can see them more easily.

   <style type="text/css">
   .equation img { vertical-align:middle; }
   .equation .eqn-img { width:100%; } /* for equation numbers */
   </style>

   Although not strickly legal, this fragment can be placed anywhere in your document and will be respected by all current (2008) browsers. Cut'n'Paste away.
4. Forthly/Finally: add your equations! This requires a knowledge of LaTeX Here's a good cheat sheet for maths equations. For example

   <span class="equation">\lambda = \frac{\pi^2}{\sin(\theta_o)}</span>

   gives (hopefully!) \lambda = \frac{\pi^2}{\sin(\theta_o)}. These LaTeX squiggles will be replaced by a png or gif. In the default implementation the tag must be a span or a div and the class name must be equation.

Cut and paste the necessary code into your document

You don't have to remember anything — Just cut and paste this entire text into your document. You can place this anywhere in the body of your document. The equations are up to you however :-) see the examples below for inspiration.

<script type="text/javascript" src="http://www.ce4csb.org/equations/equations.js"> </script> <script type="text/javascript">eqnload();</script> <style type="text/css"> .equation img { vertical-align:middle; } .equation .eqn-img { width:100%; } </style>

Without using javascript

If you are worried about the javascript or just want an even less intrusive way of including equations then you can use the Test page To input the latex (You still need Javascript turned-on for yourself) and then grab the generated URL (see the bottom of the form). You can paste this into the src attribute of an <img> element and presto! the equation image will be generated when the page loads.

Configuration

You can change the size of the image returned by adding a size attribute to the span|div tags e.g.

<span size="300" class="equation">
\lambda = \pi^2 \over \sin(\theta_o)</span>

The value seems to represent approx pixel-size in points. e.g. 400 = 400px. See the examples below. The default is 100 which can be changed by adding the javascript somewhere

<script type="text/javascript">Eqn.Size = 200;</script>

Add it to the location where you call eqnload() see 2. above. Make sure it is set before eqnload() is called and after equations.js is referenced.

Any title attribute on the equation span tag is transferred to the equation img returned (so that it will "popup" when the mouse is hovering)

Equation Labels

Non-inline (see below) tags can have a num attribute that will be displayed as a label on the right hand side of the equation. The special string $count will be replaced with a number representing the order of this equation on the page. You will also need to add the follow style

div.equation .eqn-img { width:100%; }

Inline math equations

The span tags automatically use a \textstyle (inline) style of rendering suitable for inserting equations into a text flow. You can force this to be the case using the inline="true" (or "false"!) attribute.

The GIFs/pngs returned have a transparent background.

Notes

Not all LaTeX fragments seem to work :-(. If it fails then the original LaTeX is retained and the span tags are given a css style of "latex-error" — so you can see which equations aren't working by adding some css. I haven't tried to change the fonts used. I'm not sure it's possible.

The png/gif image files are created once and cached on the server any subsequent requests invoke a redirect to the cached image. You can create your equation images by going to our test site and saving the resulting image or by copy and pasting the URL generated.

Note: we reserve the right to clear out the image cache from time-to-time :). Don't worry, your images should be regenerated the next time someone accesses your pages.

Also note that the maximum length of the latex string allowed is about 2000 characters so don't send down your PhD Thesis.

Examples

I hope to add some common equations that you can cut and paste them into your own documents. You can also try out the Formula generator used directly here. It could be useful for testing. Or try our very own testing page.

The example: pH = pK_{HA}+\log\left(\dfrac{[A^-]}{[HA]}\right) from:

<span class="equation" size="200">
pH = pK_{HA}+\log\left(\dfrac{[A^-]}{[HA]}\right)</span>

A "chemical" reaction: A \xleftarrow{n+\mu-1} B \xrightarrow[T]{n\pm i-1} C

<span class="equation">
A \xleftarrow{n+\mu-1} B \xrightarrow[T]{n\pm i-1} C 
</span>

Equation 1 from the nature paper Global organization of metabolic fluxes in the bacterium Escherichia coli gives: Y(k,i) = \sum\limits_{j=1}^{k} {\left( {{\hat \nu}_{ij}}\over{\sum_{l=1}^{k} {{\hat \nu}_{il}}}\right)}

<span class="equation">
Y(k,i) = \sum\limits_{j=1}^{k} 
{\left( {{\hat \nu}_{ij}}\over{\sum_{l=1}^{k} {{\hat \nu}_{il}}} \right)}
</span>

Flux Balance Analysis gives: { {d[A_i]} \over {dt} }= \sum_j {S_{ij}\nu_j } = 0 from:

<span class="equation" title="Flux Balance Analysis">
{ {d[A_i]} \over {dt} }= \sum_j {S_{ij}\nu_j } = 0</span>

The binomal probablility relation \binom{n}{m} p^k (1-p)^{(m-k)} from:

<span class="equation">\binom{n}{m} p^k (1-p)^{(m-k)}</span>

Summation: \sum_{n=0}^{\infty} x_{n} from:

<span class="equation" size="80" >  \sum_{n=0}^{\infty} x_{n}</span>

Entropy relation: TdS = dE + pdV - \sum { \mu(T)dN } from:

<span class="equation">TdS = dE + pdV - \sum { \mu(T)dN }</span>

"Universal Behavior of Load Distribution in Scale-Free Networks" K.-I. Goh, B. Kahng, and D. Kim Phys. Rev. Letters., 87(27) 31 December 2001. Equation 1 { {k_i} \over {\sum_j {k_j}} } \approx {{(1 - \alpha)} \over {N^{1-\alpha}i^{\alpha}}} (Note the inline attribute to ensure that the equation renders large enough)

<span class="equation" inline="false" title="Scale Free">
{ {k_i} \over {\sum_j {k_j}} } 
       \approx {{(1 - \alpha)} \over {N^{1-\alpha}i^{\alpha}}}
</span>

This one has some nasty & ampersands as cell delimiters so it may not work in all browsers \left\{ \begin{array}{ccc} a & b & c \\ d & e & f \end{array} \right\} Most browsers will take a naked & if surrounded by spaces for example but you can use the entity "&" just to be sure.

<span class="equation">\left\{ 
   \begin{array}{ccc} 
    a &amp; b &amp; c \\ 
    d &amp; e &amp; f \end{array}
   \right\}</span>

Gibbs Free Energy with colour: \sum_{\nu \in I} {\nu_i \Delta_r G^{(i)} } = \sum_{\nu \in I} {\nu_i \left ( {\color[rgb]{.8,.2,.0}\Delta_r G_0^{(i)}} + {\color[rgb]{.0,.8,.1}\bold S_i C } \right ) }

<span class="equation" title="Gibbs Free Energy" size="80" >
\sum_{\nu \in I} {\nu_i \Delta_r G^{(i)} } = 
\sum_{\nu \in I} {\nu_i \left ( 
{\color[rgb]{.8,.2,.0}\Delta_r G_0^{(i)}} +
{\color[rgb]{.0,.8,.1}\bold S_i C } \right ) } 
</span>

Chemical relationship

<div class="equation" title="Reversible Enzymatic reaction" size="120" >
\underset{e_o-x}{\mathsf{E}} + \underset{a}{\mathsf{A}} 
\xLongleftrightarrow[k_{-1}]{k_{1}} \underset{x}{\mathsf{EA}} 
\xLongleftrightarrow[k_{-2}]{k_{2}} \mathsf{E} + \underset{p}{\mathsf{P}}
</div>

Using mhchem (see here)

<div class="equation" >
\ce{Zn^2+
&lt;=>[\ce{+ 2OH-}][\ce{+ 2H+}]
$\underset{\text{amphoteres Hydroxid}}{\ce{Zn(OH)2 v}}$
&lt;=>C[+2OH-][{+ 2H+}]
$\underset{\text{Hydroxozikat}}{\ce{[Zn(OH)4]^2-}}$
}
</div>

Note the nasty '<' angle bracket has to be quoted when embedded in the HTML document.

Using limits from here

<div class="equation">
\mathop {\lim }\limits_{x \to \infty} \tan ^{-1} \left( x \right) = \frac{\pi}{2}
<div>

Equivalence of Incomplete Beta function (left) and the cumlative of the negative bionomial distribution

<div class="equation">
I_p(r+1,n-r) = \frac{n!}{r!(n-r-1)!} \int_o^p {t^r (1-t)^{n-r-1}} dt 
= 1 - \sum_{k=0}^r { \binom{n}{j} p^k (1-p)^{n-k} }
</div>

given already in the original memoir of Thomas Bayes (1763) (Bayes' Theorem).

Posterior Probablily of parameters μ and σ give the Jeffrey's prior

<div class="equation">
P(\mu,\sigma | \bold{x}) d\mu d\sigma = \frac{1}{(2\pi\sigma^2)^{n/2}}
 e^{ - \sum\limits^{n}_{i=0} {\left( x_i - \mu \right)^2}/{2\sigma^2}}
 \frac{ d\mu d\sigma} {\sigma}
</div>

The integral of the above wrt σ gives (basically) the Student-t distribution

<div class="equation">
P(\mu | \bold{x}) d\mu = \frac{1}{2}\frac{\Gamma(n/2)}{\left(2\pi\right)^{n/2}} 
\left(\frac{n}{2}\left(\bar s + \left(\bar x - \mu\right)^2 \right)\right)^{-n/2}
 \text{ where } \bar s = \frac{1}{n}\sum {x_i}^2 - \left( \bar x \right)^2
</div>

Chi-squared distribution

Links

• Latex package can be found At texlive
• equation cheat sheet. (PDF)
• Wikipedia has a good description of latex
• WikiBook on Latex. (See the Advanced Mathematics Section)
• Math help
• Cambridge LaTex help
• MIT LateX answers
• American Mathematical Society
• A PHP implementation
• Web Mathematics interactive
• dvipng: A DVI-to-PNG converter
• Test or generate you equation png or gif
• a discussion of phpBB way of creating math equations
• ext arrows
• Chemical Equations
• Latex Turtorial See chapters 9 and 10

TODO

• Configure fonts? ...seems not to be possible :(
• Expose more of the dvipng/divgif functionality