NOTES ON WEB PAGE CODING

JELLO CSS LAYOUT

The width of pages on nearly all web sites fall into two categories, fixed width, where the content at the edges may not be visible in narrow browsers and where there are acres of blank space on the sides of the content in wide browser windows. The alternate method is to have a fluid layout where the page extend to fill the width of the browse window and all the content 'flows to stretch across the page. This works well on narrow pages but looks unnaturally stretched on wider windows.

The width of the pages on this site vary according to the width of the browser window displaying the page but don't stretch all the way across of the wider pages. This style of layout was originally described by Mike Purvis in an article for 'PositionIsEverything". The 'not quite fluid" he named 'Jello Mold'.

Principles of Jello Layout

Firstly the minimum width of the page must be chosen, 1000px is used here, complex elements like the Spectrum Analyser just won't squeeze down any smaller. Secondly the content should be centred.

To do this the body element is given left and right padding of 500px, so the strip down the middle of the body is the width of the window minus 1000px (see diagram). If the window width is less than 1000px, then the strip just shrinks down to 0px and stops there (viz).

The #sizer div element does the 'jello' magic of varying its width with browser width but only half as fast. Its width is set to be 50% of what's left after the 1000px minimum is taken away. The #sizer div is a child of the body element, so its containing box is this strip down the middle, the black area between the grey padding strips. The #sizer div width is set to 50%, i.e. 50% of the width of its containing box (viz), #sizer is shown in green.

The #expander div sets the actual width of the page content. If it is 1000px greater than the #sizer div, the content width will behave just as originally planned. The trick to making #expander this wide is to make it a child of the #sizer div but its left margin should be -500px i.e. #expander left edge is 500px to the left of the sizer left side. Similarly #expander right margin is set to -500px so its right side is 500px further to the right of the #sizer' right edge. Thus #expander' div has its minimum width 1000px, when sizer is stuck at 0px, and it is 1000px + 50% of what's left of the window width for larger windows (viz), #expander is shown in white.

The behaviour of the JELLO layout is demonstrated here for various browser window widths.

Two Balanced Columns

The actual content of each web page on this site uses a two column layout. The fixed width strip down the left holds site navigation links along with a brief description of each. The main, flexible width column to the right holds the individual page data. The total height of the page is set by which of the columns is the longer. To set the two columns to the height of the longer, the general method described in the Multi-Column Layout article.

A margin is applied on #content-holder div to reserve the space where the left column, the #sidebar div, will live. The width of the #sidebar is the same (or smaller) as the space made for it by this left margin. The #sidebar div is floated and has a negative left margin value equal to the width of the space provided so it can float up alongside the main content. Since both the #sidebar and #content-holder are floated, they adjust their heights to wrap their contents. The #sidebar wrap the navigation menu and the #content-container wraps the #content div and the #sidebar. The #content-container will stretch to the height of the longer of either the #sidebar or #content divs. A filler div with position:absolute is use to match the height of the #content-container and fill any gap at the bottom of the sidebar if its the shorter, this gives the appearance that both columns are the same height.

WRITING MATHS ON WEB PAGES

TeX and LaTeX

The more technical pages on this site have some mathematics included in their text. The presentation of mathematical expressions is not well catered for in HTML. Typesetting was revolutionised by Donald Knuth more than 25 years ago with his writing of TeX. LaTeX, the scientifically oriented extension of TeX has been universally accepted as the way to typeset mathematics. There are many articles describing the problem of translating LaTeX into HTML compatible elements. The American Scientist article Writing Math on the Web presents a current snap shot.

The initial approach used on this site was to rely on emerging browser support for MathML, the W3C recommendation for a mark-up language specifically for presenting maths. Firefox has native support for MathML, Internet Explorer requires a plugin. To translate the LaTex style expressions into MathML ASCIIMath.js. The drawback in this approach was that specialised mathematical symbol fonts must be present on the client computer, so the reader may need to do more downloads.

The current approach is to emulate the methods used on Wikipedia that is to use a separate processing stage to translate LaTeX expressions into .png image files and include these in the HTML. All browsers will have no trouble with this approach.

GladTeX for Windows

The conversion of LaTeX to images and their insertion in the HTML was simplified by a little Perl script call GladTeX ported to Windows by Erik Neumann. I have adopted Eric's approach to displaying maths and all scientific page here have been converted to use this method.

The GladTeX process requires quite a bit of setting up and the page edit cycle time is greatly extended compared to the ASCIIMath approach but the pages are far more easily accessed by the casual reader.

For the assistance of those who may also follow Eric's path to maths on the web. Here is a summary of the step taken to get a fully working system.

Usage:

1. Open TeXworks, put it in 'pdfLaTeX' mode and write a valid document with correct header etc. probably easiest to copy an existing valid document (see example below). Then press the 'run' button and the output window will show the typeset version. Now just keep editing the LaTeX until the desired equation is created.

2. Open your HTML document in your favourite editor. Swipe and copy the LaTeX for the equation from the TeXworks editor, just copy the equation, forget the header stuff and the surrounding \[ and \]. Paste this text into the HTML document at the appropriate place. Surround this LaTeX equation with <eq> ... </eq> tags. Repeat this until all the equations are in the document. Rename this version of your document as filename.htex.

3. The GladTeX conversion of the .htex document creates quite a few intermediate files, its best to make a new working directory, then copy in the .htex file along with the eqn2img.exe and the gladtex.pl files. Now open a command console window, change directory (cd) to the working directory and execute the command:
>perl gladtex.pl filename.htex

Perl will process the file replacing the eq elements containing the LaTeX form of the equations with img elements showing the typeset version of the equation. The equation images are all generated as separate png files in the same directory with names like filename-001.png.

The processed file is created with the name filename.html. Copy this file and all the equation image files to their proper directory ready for uploading to your server.

Some tweaking of the gladtex.pl script defaults can be made to adjust the size and quality of the equation images. Here is a list of the command line options used on for the equations on this site.

  • Turn OFF transparency (cmd line option: -t). Browsers must render the transparent png images over the web page background, the quality of the rendering differs among browsers and are generally inferior to opaque black on white images.
  • Set background colour to white (cmd line option: -b "FFFFFF"). The default is a grey colour.
  • Set the directory for storing the image files (cmd line option: -d Images)
  • Set the resolution to 80 dpi (cmd line option: -r 80). The default is 100 dpi and the images were a little too big in comparison to the small font used on this site.

The command line with tweaks is:
>perl gladtex.pl -t -b "FFFFFF" -r 80 -d Images filename.htex

Example

Here is a LaTeX file as edited in TeXworks:

\documentclass{article}
\begin{document}

\[A[j] = \frac{\sin \left(2\pi j \displaystyle\frac{F\!b}{F\!s}\right)
         - \sin \left(2\pi j \displaystyle\frac{F\!a}{F\!s}\right)}{\pi j} \]

\end{document}

Here is the equation as entered into the html file:

<eq>A[j] = \frac{\sin \left(2\pi j \displaystyle\frac{F\!b}{F\!s}\right)
 - \sin \left(2\pi j \displaystyle\frac{F\!a}{F\!s}\right)}{\pi j}</eq>

Here is the image after processing by gladTeX

A[j] = \frac{\sin \left(2\pi j \displaystyle\frac{F\!b}{F\!s}\right) - \sin \left(2\pi j \displaystyle\frac{F\!a}{F\!s}\right)}{\pi j}