# Layout of numbered equations?

#### Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

•  Subject
• Author
• Posted on

What is the simplest good way, in HTML with CSS, to put a numbered
equation, using <sup> and <sub>, on a line or lines of its own but
visually in the middle of a paragraph?  The number should be at the left
or tight margin, and the equation should be centred in the remaining
space.  The HTML & CSS needs to be acceptable to TIDY and to the on-line
W3 checker as used by Opera Ctrl-Alt-Shift U.  Using a table for each
equation seems cumbersome.

Since it is generally a bad idea to let the layout engine break an
equation line, equations may contain <br>.

Ideally, the baseline of the number would be vertically aligned with the
baseline, or the average of the baselines, of the equation.

Don't criticise the target layout; one of the uses is in a translation
of Lagrange, whose layout I would like to follow as closely as is
reasonable.  What was considered good enough for Lagrange is good enough
for me.

--
(c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk  Turnpike v6.05  MIME.
Web  <http://www.merlyn.demon.co.uk/ - FAQqish topics, acronyms and links;
Astro stuff via astron-1.htm, gravity0.htm ; quotings.htm, pascal.htm, etc.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.

## Re: Layout of numbered equations?

In article

More a question for CSS but there are interesting html questions
too here. A big nuisance is always that paragraphs in HTML have
not liked to admit other block elements like lists (intuitively,
semantically if you like, they should.).

Anyway, there are many ways to skin your cat. There is the basic
layout and there is how to do the sub and sup stuff, JK had a
if he does not. Here is one basic plan:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd ">
<html>
<meta http-equiv="content-type" content="text/html;
charset=utf-8">
<title>Numbered equations in the middle</title>
<style type="text/css" media="screen">
body {max-width: 25em;}
p {margin: 0;}
span {line-height: 2em;}
.parent {display: block; text-align: center; position: relative;}
.order {display: inline; text-align: left;  font-family:
sans-serif;  position: absolute; left: 0; }
</style>
<body>
<p>Cras vel eros. Vivamus sed odio et orci tincidunt ornare.
Duis dui lectus, commodo ut, gravida id, ultricies quis, tellus.
Vestibulum blandit nibh eget turpis. Quisque mollis, lacus
consectetur eleifend convallis, diam augue blandit magna. Cras
vel eros.<br>
<span class="parent"><span
class="order">(1)</span>1=1</span></p>
<p>Cras vel eros. Vivamus sed odio et orci tincidunt ornare.
Duis dui lectus, commodo ut, gravida id, ultricies quis, tellus.
Vestibulum blandit nibh eget turpis. Quisque mollis, lacus
consectetur eleifend convallis, diam augue blandit magna. Cras
vel eros.<br>
<span class="parent">1 = 2<span
class="order">(2)</span></span></p>
</body>
</html>

--
dorayme

## Re: Layout of numbered equations?

On Sat, 27 Aug 2011, Dr J R Stockton wrote:

sup { line-height: 0 }

p.equation { text-align: center }

span.number { float: left /* or right */ }

p.equation { text-align: center }

A simple example is
http://www.user.uni-hannover.de/nhtcapri/temp-4.html

--
In memoriam Alan J. Flavell

## Re: Layout of numbered equations?

Perhaps consider an alternative:  images of the equations
Design is unlimited. Placement is straight-forward.

Internally they are incorruptible -- important!.

Example:    http://frontal-lobe.info/space/space.html

(I's so long ago, I don't recall how I created the images but
that's a separate problem -- probably in a paint-shop program.)

--
masonc

## Re: Layout of numbered equations?

Certainly this is an option, but you need to do it well and there
are a few ways to do that so that it looks good and crisp on
zooming (both in what is default zooming and text only zooming).
But it still has the problem of not being semantic markup and
there could be trouble for unsighted persons, some of whom can be
pretty interested in maths.

--
dorayme

## Re: Layout of numbered equations?

On Mon, 29 Aug 2011, masonc wrote:

Compare your Greek letters with mine:
http://www.user.uni-hannover.de/nhtcapri/mathematics.html

And consider search engines:

--
In memoriam Alan J. Flavell
http://www.alanflavell.org.uk/charset /

## Re: Layout of numbered equations?

On Tue, 30 Aug 2011, I wrote:

Another example:

--
I used to believe in reincarnation in a former life.

## Re: Layout of numbered equations?

Andreas Prilop wrote:

While the images at the former site are of poor quality indeed (see e. g.
Wikipedia for how that should be done) â€“ and the 1.4 MiB background JPEG
image can only be a bad joke â€“, search engines and users with disabilities
(or text browsers) alike can be accomodated with *proper* alternative text
[so not "eq.5a" for "beta = v Ã· c, and gamma = 1 Ã· square root of (1 âˆ’ beta
squared)"].  And given that the default in graphical browsers has undergone
a change from "text zoom" to "viewport content zoom", the previous problem
of unscalibility of images has lost importance.

PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm (404-comp.)

## Re: Layout of numbered equations?

In comp.infosystems.www.authoring.html message <nnqn57dkemkcsp7kqg5iitmb
5bnb4qtrkb@4ax.com>, Mon, 29 Aug 2011 12:45:16, masonc <masonc@frontal-
lobe.info> posted:

That would rather bulk the total file size, since each image would take
at least one cluster - and that matters to me.  One problem can be, if
the image must later be amended, remembering which font was originally
used.

I would want the images to expand with the text, when using Zoom Text
Only.  That can be done by styling the width in em units, though one
would need to test that in a sufficient proportion of relevant systems -
Safari on Mac, for example, indeed anything on non-Windows.

If that's your page, try setting the width of an alpha to about 0.7 em -
or using &alpha; !  OTOH, if you are the most famous one of that name,
you died in 1995.

It's best to use a program and file type that exist on all of one's
present and future computers, of course.

I would do it by using the canvas element, programmed in JavaScript;
either on the page itself (bulks the page or included *.js files, but no
added IMG files), or generated independently and served as images.

For the latter, see my <http://www.merlyn.demon.co.uk/js-grphx.htm (not
using IE <= 8, naturally; also, from about version 5, Chrome will not
read local files).  I think all my browsers can natively save canvas
contents as PNG in one or (Opera?) two moves; but, when I started that
page, I did not think so (rightly or wrongly), and did it by way of
extracting the PNG string from the canvas and writing it to an IMG.

Just press its ReadText button for a demo including a simple integral.

With JavaScript, one can of course use functions to draw equation parts
that occur repeatedly.

However, in the current work the equations can be represented
sufficiently well in HTML.

--
(c) John Stockton, nr London UK.  ?@merlyn.demon.co.uk  IE8 FF3 Op12 Sf5 Cr12
news:comp.lang.javascript FAQ <http://www.jibbering.com/faq/index.html .
<http://www.merlyn.demon.co.uk/js-index.htm jscr maths, dates, sources.

## Re: Layout of numbered equations?

29.8.2011 22:45, masonc wrote:

Images are sometimes the best way of presenting an equation, but not
often. These days, there are many options, including MathML (despite its
complexity) and things like MathJax (JavaScript-based, looks good, but I
didn't have time to take a good look), and they might leave an image
just an intermediate fallback (the ultimate fallback being plain text).
And there's quite a lot you can do in HTML + CSS these days, though
two-dimensionality is still... a challenge.

Almost all math symbols and equations there could be presented quite
satisfactorily without images - with much better rendering. I'm not
saying you should change the existing page. Just that if you create
something similar these days, it would be better to use modern tools.

The rare exceptions might include equations with a square root
expression, but an expression like
&radic;(1&nbsp;&minus;&nbsp;&beta;&sup2;) - I'm using entity references
just for readability, as I wish to avoid using UTF-8 here - should give
a reasonable rendering, unless you are possessed with the idea that a
radical sign must have a horizontal line that extends over the radicand.

Complex expressions with division, with a long expression in a dividend
and another long expression in a divisor, are more problematic. But on
the page you mention, fractional expressions are simple and can be
linearised easily. An "a" over "b" is not much clearer in a
two-dimensional notation than "a/b". Sums and integrals with lower and
upper bounds are challenging too, and so are groups of equations, but
the example page does not contain them.

This illustrates one of the problems in using images for content that
could be presented as text. All too often it happens that "we need a new
version of this image, does anyone know how it was produced?"

--
Yucca, http://www.cs.tut.fi/~jkorpela /

## Re: Layout of numbered equations?

Jukka K. Korpela wrote:

I have.  Suffice it to say that it ranks among the worst client-side script
code that I have ever seen.  Example:

var BUGTEST = CONSTRUCTOR(); BUGTEST.prototype = {bug_test: 1};
if (!BUGTEST.prototype.bug_test) {
CONSTRUCTOR = function () {
return function () {return
arguments.callee.Init.call(this,arguments)};
};
};

Hm, yeah, why use built-in constructors if you can emulate them with Init()
methods?  Smells of Copy & Pray from Prototype.js.

var OBJECT = function (def) {
var obj = def.constructor; if (!obj) {obj = new Function("")}
for (var id in def) {if (id !== 'constructor' && def.hasOwnProperty(id))
{obj[id] = def[id]}}
return obj;
};
[â€¦]
var isSafari2 = (navigator.vendor === "Apple Computer, Inc." &&
typeof navigator.vendorSub === "undefined");

etc. pp.

And doing this with client-side scripting precludes, of course, the
possibility of display without scripting.  All in all, a terribly bad idea.
Not that I am much surprised of your considering this anyway.

PointedEars
--
Danny Goodman's books are out of date and teach practices that are
positively harmful for cross-browser scripting.

## Re: Layout of numbered equations?

30.8.2011 23:07, Thomas 'PointedEars' Lahn wrote:

That doesn't say much, given your reputation. Not only did you escape
any temptation to make any on-topic remark; you also nitpicked on
scripting source code, instead of even trying to comment on the question
whether the library does something useful.

Yet, I'm still not quite convinced that MathJax is a great resource.

But I'm sure that in most cases, there are several better options than
presenting math equations as images in HTML documents. Even PDF format
is probably better than an HTML document with loads of images presenting
equations.

--
Yucca, http://www.cs.tut.fi/~jkorpela /

## Re: Layout of numbered equations?

Jukka K. Korpela wrote:

Rest assured that you do not know me or my reputation in the scripting
community, trolls and xenophobes aside.

You suggested a script library which is off-topic here, and now you dare
complain that replies to your suggestion are off-topic?

Because that shows the quality of this solution, or rather the lack thereof.
As you do not see that, rest assured that you are not yet in a position to
judge the quality of scripts.

I have showed that the code is junk, that it is based on a number of
misconceptions, and that therefore it is not supposed to work as and where
advertised.  What else is there to say?

I am not surprised at all.

PointedEars
--
realism:    HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
-- Bjoern Hoehrmann

## Re: Layout of numbered equations?

In comp.infosystems.www.authoring.html message <1545772.qVoOGUtdWV@Point
edEars.de>, Wed, 31 Aug 2011 00:52:07, Thomas 'PointedEars' Lahn

Evidently not, indeed.  Jukka still seems to think that you are a human
being.

--
(c) John Stockton, nr London UK.  ???@merlyn.demon.co.uk  Turnpike v6.05  MIME.
Web  <URL:http://www.merlyn.demon.co.uk/ - FAQish topics, acronyms, & links.
Check boilerplate spelling -- error is a public sign of incompetence.
Never fully trust an article from a poster who gives no full real name.

## Re: Layout of numbered equations?

Dr J R Stockton wrote:

^^^^^^^^^^

QED.

PointedEars
--
realism:    HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
-- Bjoern Hoehrmann

## Re: Layout of numbered equations?

In comp.infosystems.www.authoring.html message <j3jc0n$ged$1@dont-
email.me>, Tue, 30 Aug 2011 22:01:05, Jukka K. Korpela

aaa
ddd
<!-- aaa root b+c^2 ddd -->

looks pretty good in Firefox 3.6.20, WinXP pro, though the join between
the root and the bar is not quite perfect.  But text-decoration:overline
is no good.

If you can find E.400 (!.6 MB PDF) in the 'Euler Archive', look at the
beginning of Section 11 on p.199 (starts at p.194).  It looks to me as if
Euler's printer's font lacked the ancient French? version of beta -
Unicode has it - and it was hand-drawn in.  But in section 12 there are
some normal betas as well, clearly typeset.

Warning : he was incompletely right somewhere in the first few sections.

--
(c) John Stockton, nr London, UK.    ?@merlyn.demon.co.uk     Turnpike v6.05.
Website  <http://www.merlyn.demon.co.uk/ - w. FAQish topics, links, acronyms
PAS EXE etc. : <http://www.merlyn.demon.co.uk/programs/ - see in 00index.htm
Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.

## Re: Layout of numbered equations?

31.08.2011 22:42, Dr J R Stockton wrote:

This really depends on the font, especially on the appearance of the
SQUARE ROOT character (the one denoted by &radic;), but generally, top
border seems to work better than overline, indeed. In principle, both
methods have the drawback that when CSS is off or the CSS rule is
overridden, the meaning changes - in your example, sqrt(b + c²) would
change to sqrt(b) + c². The use of COMBINING OVERLINE (or COMBINING
MACRON) would not have this problem, but surely some other, fairly
serious problems.

You might use both parentheses and some styling to create the horizontal
extension of the radical sign over the radicand. And you could put the
parentheses in <span> elements with CSS setting display: none.

By the way, in accordance with the style used in the ISO 80000 family of
standards, and partly expressed as a rule there, operators like binary
"+" should have spaces around them. At least the first of the spaces
should be a no-break space, e.g.
b&nbsp;+ c<sup>2</sup>
(ISO 80000-2 allows line division _before_ binary "+", too, but only if
a document consistently splits before operators and not after them, and
such style is not common.)
It is debatable whether the spacing of mathematical equations should be
adjusted with CSS, e.g. by setting word-spacing to a negative value.
Spaces in math tend to be slightly narrower than in prose, but the
difference is small.

There was no problem in finding it, but the scans there are not
particularly good:
http://www.math.dartmouth.edu/~euler/docs/originals/E400.pdf#page=6
<http://bibliothek.bbaw.de/thumbnail?band=02-hist/1763&aufloesung=1&img=DAS_jpg/02-hist/1763/jpg-1000/00000210.jpg&seite:int=210

Maybe - the low quality of the scans makes this difficult to judge, and
I suppose the quality of the paper original isn't high either. So what
seems to be variation in hand-drawn letters might also be variation
caused by the imperfections of the printing process.

> But in section 12 there are
> some normal betas as well, clearly typeset.

That section seems to use the two types of beta in identical meaning.

It's quite possible that they had a limited supply of print letters for
normal beta and used either different print letters (the curly type) or
draw some by hand.

So if one considers reproducing the material in a digital text format,
such as HTML, I think the two kinds of beta should normally be
interpreted as the normal Greek letter beta. It is a matter of style
variation, which may well be unintentional (caused by technical
limitations rather than stylistic choices). But it is also possible to
make the distinction even at the character level, as you mention. The
GREEK BETA SYMBOL (U+03D0) is reasonably well supported in fonts. For
most purposes, such a distinction should probably be avoided, as it just
makes it more difficult to read and understand the mathematical content
of the text. For purposes of studying the use of different forms of
letters, the distinction could of course be useful.

Despite the name GREEK BETA SYMBOL, the character is defined as a
lowercase letter in Unicode, and as compatibility equivalent to GREEK
SMALL LETTER BETA. So it is variant form only, most probably included in
Unicode as a character just because it existed as separate in some
existing character code.

--
Yucca, http://www.cs.tut.fi/~jkorpela /

## Re: Layout of numbered equations?

Andreas Prilop wrote:

But there you are using line-height: 2em', which is the better way to
approach this, and which works in Chromium 13.0.782.107 (Developer Build
94237 Linux).  line-height: 0', by comparison does _not_ work there because
of the sup' elements (unsurprisingly, deleting those nodes makes the text
align vertically again).  It also does not work as-is with br' elements in
the equation.

Theoretically, the line-height' of the p' element should at least be as
much em' units as there are lines.  But line-height' is inherited and it
does not work well with br' elements (as each line would be that high), so
you have to apply the line-height' property only to the floated element, or
in general the elements that have no line-breaks.  You also need to
recommend to the layout engine that the numbering not be line-broken, in
order to avoid several lines with a large vertical spacing.

Say, for an equation that is br-oken over three lines, and contains sup'
elements in each line, with the other rules in that stylesheet,

p.eq {
text-align: center;
}

span.number {
float: left; /* or right */
line-height: 3.8em;
white-space: nowrap:
}

looks approximately right in Chromium.  Whether the numbering is truly
vertically centered depends on the font, though.  And it does not solve the
issue that display will look odd if either side of the equation contains
that manual line-break (unless having e. g. the right-hand side flow under
the equals sign was intended).

There is a workaround for the latter of course (BTW, I do not think that
hidden br' element is a good idea, instead use a div-in-div combination if
you must):

<p class="eq">
<span class="number">(8.28)</span>
<span class="eq-inner">
<span class="lhs">(<i>a</i> + <i>b</i>)<sup>4</sup></span>
<span class="op">=</span>
<span class="rhs"><i>a</i><sup>4</sup><br>+
4<i>a</i><sup>3</sup><i>b</i> +
6<i>a</i><sup>2</sup><i>b</i><sup>2</sup><br>+
4<i>a</i><i>b</i><sup>3</sup> + <i>b</i><sup>4</sup>
</span>
</span>
</p>

and

p {
clear: both;
}

p.eq {
text-align: center;
white-space: nowrap;
}

.eq span.number {
float: left;
}

.eq-inner {
display: inline-block;
}

.eq-inner span {
float: left;
height: 3.8em;
}

.eq-inner span.op {
margin: 0 0.5em;
}

.eq span.number,
.eq-inner span.lhs,
.eq-inner span.op
{
line-height: 3.8em;
}

.eq-inner span.rhs
{
text-align: left;
}

See <http://PointedEars.de/markup/equation for the test case.

While this looks OK even in Internet Explorer 6.0.2800.1106 (which
surprisingly supports CSS 2.1's inline-block' since version 5.5 according
to the MSDN Library), it is probably at this point that one wants to
consider using table-ish CSS code (and, since that does not work in older
UAs, a real table), MathML or LaTeX (the second both client-side and server-
side, while server-side is probably the better idea at this point; the third
one only server-side, to generate an image), with an accessible alternative

<http://PointedEars.de/markup/equation2.html (HTML5 + MathML 3.0)
<http://PointedEars.de/markup/equation2.xhtml (XHTML 1.1 + MathML 2.0)

Test results:

- Iceweasel 5.0 and Firefox 6.0: Works with HTML5 and XHTML 1.1; but the
mlabeledtr' element, which provides support for equation numbering, is
unsupported.  The CSS version looks OK in all variants.

- Opera 11.50: Works only with XHTML 1.1, and some whitespace is displayed,
but the mlabeledtr' element is supported.  The CSS version looks OK in
all variants.

- Safari 5.1: Works with HTML5 and XHTML 1.1, and apparently supports the
mlabeledtr' element in a way (not left-aligned), but uses Greek letters
for MathML exclusively (even for `mtext'!).

- Chromium 13.0.782.107 (Developer Build 94237 Linux) and Chrome
13.0.782.215 fails with MathML, but the CSS version looks OK in all
variants.

- Internet Explorer 9.0.8112.16421 fails with MathML in all markup variants
(needs plugin), but the CSS version looks OK in all variants.

For the time being, server-side MathML or LaTeX can work around.

PointedEars
--
var bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
)  // Plone, register_function.js:16

## Re: Layout of numbered equations?

27.8.2011 22:36, Dr J R Stockton wrote:

This is a tricky issue, partly because markup and presentation are hard
to separate here. The theoretical idea of first deciding on the markup,
then considering styling, thought mostly fruitful, is awkward in cases
where styling possibilities are limited. The tools available for styling
in CSS (and HTML) as currently defined and implemented are seriously
inferior to what one can use in typesetting math in good software (like
LaTeX) - and as compared with the _needs_.

Dorayme and Andreas have made interesting suggestions (and if you look
at Andreas' code, you'll see that it addresses relevant questions beyond
those asked). But being a latter-day tablist, I quote myself:

"Several approaches have been proposed to achieve such layout using just
CSS and no presentational markup. However, the CSS methods (whether
based on floating or on positioning) seem to suffer from various
problems on current browsers. Some methods work well if the equation
fits on one line but lead to confusion when it is divided over two or
more lines. Since we wish to create pages that adapt to varying canvas
widths ('fluid design'), a simple table is the practical solution"
http://www.cs.tut.fi/~jkorpela/math /

Centring is easy to achieve especially in the table approach, but I
wonder whether it is desirable. Indenting is more common. In any case, I
think you should consider what should happen when an equation is divided
into two or more lines. When you have foo = bar + ... and a line break
is needed, shouldn't the continuation lines left-align with "bar",
instead of being centered (or left-aligned)? This might call for a
three-column table (with eq. no in one column, left-hand side and equals

I don't think it requires essentially more markup than any other
approach. You just need
<table class=eq><tr><th>eq. no <td>equation</table>

Explicit line breaks tend to make documents less flexible. When the
canvas is narrower than you expect, the <br>-induced linebreaks will
appear in addition to browser-induced breaks, creating odd rendering.

You can mostly get reasonable division into lines if you use no-break
spaces instead of normal places when applicable. E.g., a + b should be
written so that the space before "+" is a no-break space. Division into
lines is one important reason for using the real minus sign
(representable using &minus; if not otherwise) rather than the Ascii
hyphen "-" (which is treated by many browsers as always allowing a line
break after it, even in a context like "-1" where it acts as unary minus).

Using a table, you can easily set vertical-align: baseline.

But Lagrange didn't have to write for the Web.

Subscripts and superscripts have their share of problems, both in size
and in vertical placement. There are discrepancies between browsers, and
adequate rendering depends on context (e.g., do the superscripts
generally appear after a lowercase letter or after an uppercase
letter?). Setting both font-size and the vertical position seems to be
necessary. I'd recommend setting vertical-align to baseline and using
relative positioning instead, as it gives more predictable results.

My demo page:
http://www.cs.tut.fi/~jkorpela/test/eq.html

--
Yucca, http://www.cs.tut.fi/~jkorpela /

## Re: Layout of numbered equations?

On Sun, 28 Aug 2011, Jukka K. Korpela wrote:

I wonder whether it is already safe to write &#8308; etc.
together with { font-family: Cambria, 'Cambria Math' }.
See http://www.user.uni-hannover.de/nhtcapri/temp-4.html

On some systems, &#178; and &#179; might be displayed as and,
whereas &#8308; is displayed as <sup>4</sup> by the browser.

Btw:
The Macintosh problems withB2=B3 occur in newsreaders like MacSOUP
but no longer in current browsers.

--=20
In memoriam Alan J. Flavell
http://www.alanflavell.org.uk/charset /