Standards

I hope it's no longer necessary to explain the benefits of following open standards.

I originally used XHTML (1.1) because it's simpler to check XHTML's regular syntax than HTML (4). I've worked extensively with XML so the XML structure is familiar. I began incorporating MathML when Webkit browser support caught up, and added SVG to pages with software-driven images, and those worked best with XHTML rather than HTML4. HTML5 was too much in flux to use in the early years of this site. I began creating new pages in HTML5 beginning in 2018, and I convert old pages to HTML5 as I need to make changes to them.

I like the idea of separating form and content: it has worked well for me on and off the web. So to a substantial extent the layout, format, and style choices of the web site are specified in CSS (originally 2, moving up as new standards are widely implemented).

Now that all up-to-date browsers support SVG images I make new diagrams in SVG, and convert older PNG images to SVG whenever I need to make changes to them. The advantages are substantial: for diagrams, the images are sharp at any magnification (if the browser supports that) and the files are smaller. I started by generating some SVG images using scripts (no PNG predecessors for these) and am continuing with diagrams produced with OmniGraffle.

Page construction

I edit the page content in a configurable FOSS text editor (jEdit) that I've set up for quick XHTML editing. I build the pages using the m4 macro processor, because it's widely available FOSS and I'm already familiar with it, and a handful of my own tools for incorporating BibTEX data and making tables of contents. Macro processing lets me avoid retyping shared code, keep repeated components consistent, and easily rearrange the XHTML file layout.

Javascript

I strive to use javascript as little as possible and to do whatever it is at build time with m4 or at view time with CSS instead. I use javascript for pages that react to reader inputs:

Flip the background of a page (see flip bg in lower right corner).
Toggle whether a unit of text is shown or hidden, for example opening/closing a subtree in an outline.
Perform calculations.
Create SVG diagrams from reader inputs.

Colors

In 2010 I saw an exhibit that included original plates from Josef Alber's Interaction of Color (Josef Albers: Innovation and Inspiration at the Hirshhorn) and was fascinated. The colors in this web site are influenced by what I learned, however imperfectly: if you flip the background you'll see that some colors are roughly even in brightness between the two backgrounds but of different hues, or some groups of colors roughly divide a difference in brightness. The pages use these non-gray colors:

▉ hovered link text
▉ headings
▉ hovered link underscore
background for Links box
background for Manual box
background stripe
abbreviations
local links
flipped background color
▉ color of background sticks |

Fonts

Three fonts are used:

Nearly all text is roman (Georgia).
A small amount of text is sans-serif (Lucida Grande).
Page titles are in another roman font (Hoefler Text).

I use a few images in place of symbols that I haven't found or can't use in the XHTML/CSS context I need, such as:

and for list markers, as mentioned above
for disjoint union of ordered sets.

Visual cueing

Hyperlinks are dotted-underlined and change color when you mouse over them.
- Hyperlinks that leave the site are enclosed in single angle quotes.
- Hyperlinks that link to a PDF file are preceded by a bullet.
Acronyms and abbreviations are lightly shaded. Leave your cursor over the shading and the term the abbreviation abbreviates will be shown.

Light heart

Some things aren't really necessary but they were fun to figure out and set up:

Drop caps. CSS is more-or-less set up to do this but not well.
A few Easter eggs. For example, click on the bar at the top of the page.

flip bg unflip

thomas · alspaugh @ acm · org
2019Jan23We12:37