# Horizontal and vertical alignment issues

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

•  Subject
• Author
• Posted on
Hi, hope you all are well.

I'm inexperienced authoring HTML, this post will likely tell.
I'm attempting to transcribe a print book to HTML and am
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.

Example 1.
<p>... It is closely connected with the formula</p>
$<mrow> <mi>&#x1D6E5;</mi><mo>=</mo><mn>3160</mn><mo>&#x2062;</mo> <mfrac> <mrow><msup><mi>&#x1D43A;</mi><mn>1.85</mn></msup></mrow> <mrow><msup><mi>&#x1D451;</mi><mn>4.97</mn></msup></mrow> </mfrac> </mrow>$
(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>
$<mrow> <mi>0</mi><mo>&#x2062;</mo> <msub><mi>x</mi><mn>1</mn></msub><mo>+</mo> <mi>0</mi><mo>&#x2062;</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>$,

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

$<mrow> <msub><mi>x</mi><mn>3</mn></msub> <mo>=</mo><mn>0</mn> </mrow>$,

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

## Re: Horizontal and vertical alignment issues

If you specify table {width: 100%;} you will get the table to vary
with the width of its containing block, which might be BODY, which in
turn will vary with the viewport. As for variable space, you need to
be far more specific.

--
dorayme

## Re: Horizontal and vertical alignment issues

On 01/28/2013 05:24 PM, dorayme wrote:

Thanks for the table {width: 100%;}.
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.

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 u1⁢x1 + u2⁢x2 + u3⁢x3 = 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

|          |0⁢x1+0⁢x2+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 u1⁢x1 + u2⁢x2 +
u3⁢x3 = 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

|    |0⁢x1+0⁢x2+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>
$<mrow><mi>0</mi><mo>&#x2062;</mo><msub><mi>&#x1D465;</mi><mn>1</mn></msub><mo>+</mo><mi>0</mi><mo>&#x2062;</mo><msub><mi>&#x1D465;</mi><mn>2</mn></msub><mo>+</mo><msub><mi>&#x1D465;</mi><mn>3</mn></msub><mo>=</mo><mn>0</mn></mrow>$,
</td>
<td></td>
<td>i.e.</td>
<td></td>
<td>
$<mrow><msub><mi>&#x1D465;</mi><mn>3</mn></msub><mo>=</mo><mn>0</mn></mrow>$,
</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

On 01/29/2013 08:18 PM, dorayme wrote:

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 28.1.2013 22:29, Jeff Higgins wrote:

I'm not sure if I completely understood your description, but here is an
attempt at it:

http://jsfiddle.net/0smo/ebR6s /

--
HTH, Osmo

## 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.

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

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

In comp.infosystems.www.authoring.html message <ke6m98$dss$1@dont-
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.