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

**posted on**

- Jeff Higgins

January 28, 2013, 8:29 pm

I'm inexperienced authoring HTML, this post will likely tell.

I'm attempting to transcribe a print book to HTML and am

having much success and fun. I would like to ask advice

concerning one trouble spot, that is translating this print

media presentation idiom to HTML.

In the book, paragraphs of text may be separated by a block

of mathematics notation; equations, formula, etc.

Some blocks of math notation may be numbered, [Example 1].

Some consist of several equations separated by spans of

plain text, [Example 2].

There are some blocks of math, separated by paragraphs of text,

that are aligned vertically upon the page. The common factor being

that the math block elements are all, for lack of a better term,

grid-aligned. They are all centered on the page, the individual

elements are well spaced, and other markup such as equation numbers

can float to the left or right margin

I understand that not all print media presentation idioms

transfer well to hypertext but I think these would look right if I

could just get past my technical difficulties with horizontal and

vertical alignment. Maybe there is idiomatic HTML I haven't

considered.

I have tried several things:

Tables; Unable to get the table to vary with the width

of the page and variable space between individual items.

Divs and CSS; Perhaps a basic lack of understanding of CSS.

CSS grids; Wow, yet another learning curve.

Anyway, two examples follow and I will appreciate your sincere advice.

Example 1.

*<p>... It is closely connected with the formula</p>*

<math>

<mrow>

<mi>𝛥</mi><mo>=</mo><mn>3160</mn><mo>⁢</mo>

<mfrac>

<mrow><msup><mi>𝐺</mi><mn>1.85</mn></msup></mrow>

<mrow><msup><mi>𝑑</mi><mn>4.97</mn></msup></mrow>

</mfrac>

</mrow>

</math>

(1.1) <!--This equation number should be close to the right of the page-->

*<p>The numerical values of the variable ...</p>*

Example 2.

*<p>... E.g. the equation of a straight line at infinity is of the form</p>*

<math>

<mrow>

<mi>0</mi><mo>⁢</mo>

<msub><mi>x</mi><mn>1</mn></msub><mo>+</mo>

<mi>0</mi><mo>⁢</mo>

<msub><mi>x</mi><mn>2</mn></msub><mo>+</mo>

<msub><mi>x</mi><mn>3</mn></msub>

<mo>=</mo>

<mn>0</mn>

</mrow>

</math>,

i.e. <!--The equations are separated by variable space and this text-->

<math>

<mrow>

<msub><mi>x</mi><mn>3</mn></msub>

<mo>=</mo><mn>0</mn>

</mrow>

</math>,

*<p>since it is satisfied by every triple of numbers ...</p>*

## Re: Horizontal and vertical alignment issues

Thanks for the table {width: 100%;}.

I appreciate your help.

A previous attempt of mine used

table {margin-right: auto; margin-left: auto;}

in an attempt to get the table centered.

I believe that I have decided to abandon the (general) use of tables

for layout in this case in favor of CSS. I am thinking now that tables

are not meant for this use case.

You might see my (forthcoming) reply to Osmo for additional explanation.

Following is a textual illustration of what I am meaning

by variable space. In this example, (which is a combination from my

two previous examples), the single table row holds eight cells;

cells 2,3,4,5,6 hold the equations and would be centered in the viewport.

cell 8 holds the equation number and would float to the right margin.

cells 1,3,5,7 hold the "variable space" that would keep the equation

centered and well spaced as appropriate for the width of the viewport.

Example 1 - where the viewport is ~ 70 characters wide.

Thus every triple of numbers x1, x2, x3 with the exception of the

triple 0, 0, 0 has a corresponding point on the projective plane,

the same point corresponding to proportional threes. Thus the

equation of the straight line on a projective plane is the homo-

geneous equation u1x1 + u2x2 + u3x3 = 0 in which the coefficients

u1, u2, u3 are not all equal to zero.

E.g. the equation of a straight line at infinity is of the form

| |0x1+0x2+x3=0,| |i.e.| |x3=0,| |(1.1)|

since it is satisfied by every triple of numbers u1, u2, 0. Similar-

ly, the axis x has the equation u2 = 0 and the axis y the equation

u1 = 0.

Example 2 - where the viewport is ~ 40 characters wide.

Thus every triple of numbers x1, x2, x3

with the exception of the triple 0, 0, 0

has a corresponding point on the projec-

tive plane, the same point corresponding

to proportional threes. Thus the equation

of the straight line on a projective plane

is the homogeneous equation u1x1 + u2x2 +

u3x3 = 0 in which the coefficients u1, u2,

u3 are not all equal to zero.

E.g. the equation of a straight line at

infinity is of the form

| |0x1+0x2+x3=0,||i.e.||x3=0,| |(1.1)|

since it is satisfied by every triple of

numbers u1, u2, 0. Similar- ly, the axis x

has the equation u2 = 0 and the axis y the

equation u1 = 0.

<table>

<tbody>

<tr>

<td></td>

<td>

<math><mrow><mi>0</mi><mo>⁢</mo><msub><mi>𝑥</mi><mn>1</mn></msub><mo>+</mo><mi>0</mi><mo>⁢</mo><msub><mi>𝑥</mi><mn>2</mn></msub><mo>+</mo><msub><mi>𝑥</mi><mn>3</mn></msub><mo>=</mo><mn>0</mn></mrow></math>,

</td>

<td></td>

<td>i.e.</td>

<td></td>

<td>

<math><mrow><msub><mi>𝑥</mi><mn>3</mn></msub><mo>=</mo><mn>0</mn></mrow></math>,

</td>

<td></td>

<td>(1.1)</td>

</tr>

</tbody>

</table>

## Re: Horizontal and vertical alignment issues

Generally, the way to centre a block element like a DIV or P or TABLE,

you specify a width and then (similar to yours above but shorter)

margin: auto;

Of course, if you do not know the width in advance, even in any units

at all, this will not be generally useful. As it happens, in the case

of a TABLE, you will get a centring without specifying a width (as one

does with an img element, even displayed as block).

Certainly, you are right, they are not

***meant***for general layout of

webpages. Btw, just a mildly pedantic point about your "in favour of"

remark: CSS is not something opposite to TABLES. CSS applies to TABLES

as much as it applies to other HTML elements...

In case it is useful to you, there is a way to use CSS to create a

table layout effect, most modern browsers being agreeable, namely to

display elements other than TABLE, TH, TR, TD, etc, as table;,

table-cell; etc. I have some stuff on centring which might be useful

to you generally at

<http://netweaver.com.au/centring/

--

dorayme

## Re: Horizontal and vertical alignment issues

Yes, point taken, thank you.

Yes, this will be exceedingly helpful. Thanks a bunch!

As I've replied to Osmo, I have some study to accomplish

before I'll be able to understand all of your pointers.

I'm looking forward to the learning.

Thanks again, much appreciated.

## Re: Horizontal and vertical alignment issues

On 01/29/2013 01:58 AM, Osmo Saarikumpu wrote:

Excellent! Food for thought, and a playground for sharing. Thank you

for both.

At this point I'm not sure I completely understand my description

either. But, I'll neglect that for the meanwhile and make an admission.

I began this project a week or so ago, the intent is simply a study

aid. I thought if I could get this book on screen and off my desk I

could have more room for a pencil, paper and a straight edge.

I have been typing merrily away, adding markup for sections, heading,

paragraphs, linking together references and referent, etcetera, etc.

Thinking all the while that I was writing HTML. But, as I now realise,

I have been merely collating a heap of data that will want to be made

presentable at some point.

At the point I posted this, I had just begun marking up the math

notation and had put some together with the text in the browser and lo

and behold it didn't look as well as I had expected. Well, I thought, a

web search or two, some copy paste, and I should be good to go, after

all I wasn't hoping for a professionally refined product, just

something fairly readable.

As it turns out, I've come to realise; if I want to write HTML I will

have to understand what exactly HTML is and how it fits together with

the other technologies and what my browser expects to see in the

source and what it does with it when it gets it.

Toward that end I have gone to a dusty section of my bookshelf and

retrieved the two books that I have on the subject: HTML 4 Unleashed,

Darnell, 1998 and Cascading Style Sheets: The Definitive Guide, Meyer,

2004. I hope they are still relevant (enough) for my needs.

I'll take an interlude now for some study, and hopefully with a better

understanding of the big picture the details will become less of a

blur. I have enough time in this project now that I want to understand

what I am putting into my source and why rather than randomly throwing

morsels at it.

I appreciate your effort, the example, and the link to jsfiddle. I've

also discovered Firebug a day or two ago and think it will be a useful

tool in my explorations.

Excellent! Food for thought, and a playground for sharing. Thank you

for both.

At this point I'm not sure I completely understand my description

either. But, I'll neglect that for the meanwhile and make an admission.

I began this project a week or so ago, the intent is simply a study

aid. I thought if I could get this book on screen and off my desk I

could have more room for a pencil, paper and a straight edge.

I have been typing merrily away, adding markup for sections, heading,

paragraphs, linking together references and referent, etcetera, etc.

Thinking all the while that I was writing HTML. But, as I now realise,

I have been merely collating a heap of data that will want to be made

presentable at some point.

At the point I posted this, I had just begun marking up the math

notation and had put some together with the text in the browser and lo

and behold it didn't look as well as I had expected. Well, I thought, a

web search or two, some copy paste, and I should be good to go, after

all I wasn't hoping for a professionally refined product, just

something fairly readable.

As it turns out, I've come to realise; if I want to write HTML I will

have to understand what exactly HTML is and how it fits together with

the other technologies and what my browser expects to see in the

source and what it does with it when it gets it.

Toward that end I have gone to a dusty section of my bookshelf and

retrieved the two books that I have on the subject: HTML 4 Unleashed,

Darnell, 1998 and Cascading Style Sheets: The Definitive Guide, Meyer,

2004. I hope they are still relevant (enough) for my needs.

I'll take an interlude now for some study, and hopefully with a better

understanding of the big picture the details will become less of a

blur. I have enough time in this project now that I want to understand

what I am putting into my source and why rather than randomly throwing

morsels at it.

I appreciate your effort, the example, and the link to jsfiddle. I've

also discovered Firebug a day or two ago and think it will be a useful

tool in my explorations.

## Re: Horizontal and vertical alignment issues

*email.me>, Mon, 28 Jan 2013 15:29:09, Jeff Higgins*

You might find the maths easier if you were to consider

*<http://www.merlyn.demon.co.uk/test-jax.htm and what it links to.*

--

(c) John Stockton, nr London, UK. Mail via homepage. 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.

## Re: Horizontal and vertical alignment issues

On 01/30/2013 02:22 PM, Dr J R Stockton wrote:

Yes, thanks. I am aware of MathJax. I began marking up the math with

LaTeX and then running it through blahtexml but soon found it much

faster to simply insert MathML templates and plug in values. Hopefully

by the end of the week I can have the math all marked up.

Yes, thanks. I am aware of MathJax. I began marking up the math with

LaTeX and then running it through blahtexml but soon found it much

faster to simply insert MathML templates and plug in values. Hopefully

by the end of the week I can have the math all marked up.

#### Site Timeline

- » HTML5 - semantic markup
- — Next thread in » HTML Authoring Forum

- » <form> ... </form> problems
- — Previous thread in » HTML Authoring Forum

- » HTML 5 validation software?
- — Newest thread in » HTML Authoring Forum

- » SSD partition alignment revisited
- — The site's Newest Thread. Posted in » Computer Hardware