Skip to the Main Content

Note:These pages make extensive use of the latest XHTML and CSS Standards. They ought to look great in any standards-compliant modern browser. Unfortunately, they will probably look horrible in older browsers, like Netscape 4.x and IE 4.x. Moreover, many posts use MathML, which is, currently only supported in Mozilla. My best suggestion (and you will thank me when surfing an ever-increasing number of sites on the web which have been crafted to use the new standards) is to upgrade to the latest version of your browser. If that's not possible, consider moving to the Standards-compliant and open-source Mozilla browser.

June 9, 2006

Planetary Style

Aggregating and republishing over two dozen feeds, of varied provenance, is not without its pitfalls.’s atom feed templates are somewhat problematic. As a consequence, some of Tommaso Dorigo’s posts were filled with doubly-escaped entities. Fortunately, Sam came through with a fix. Georg von Hippel’s Tex → PNG software plays poorly with Blogger. The latter inserts <br />s into the alt attributes of the created images, which can cause BeautifulSoup to cough up a hairball where the PNG image should be (hopefully fixed now).

But, for the most part, the results look pretty good1. Some further tweaks, however, made it look even better.

It is enlightened practice to separate styling information from the markup of your document, and place the former in an external CSS stylesheet. An aggregator, like Planet Musings takes blog entries from a variety of sources, and republishes them with a consistent style.

But, sometimes, something essential gets lost in ignoring the external stylesheets of the original sources. That’s where the “Accommodations” section of our stylesheet comes in.

For instance, Cosmic Variance uses CSS classes like class="alignright" and class="alignleft" to float images. Adding directives like

.alignleft { float:left }

made their entries “look right.” On similar grounds, adding

img.mathlogo, img.svglogo { float:right; border:0 }

makes the entries from Musings and The String Coffee Table look more pleasing.

More interesting, though, is the CSS styling of Math, tidbits of which have accumulated, over the years, in the stylesheets of Musings and The String Coffee Table. Now I had to think about which of those bits are actually important enough to merge into the “Accommodations” section of the Planet Musings stylesheet. So I thought I’d share some tips on styling MathML.

Browsers have a nasty habit of introducing linebreaks into inline equations, which (from a mathematical typography point-of-view) is just wrong. To suppress that,

math { white-space: nowrap }

Display equations are sometimes too wide for the viewport. There are various ways to fix that. The one I like is

math[display=block] {overflow:auto;}

Hyperlinks in equations should be styled in some fashion consistent with the styling of hyperlinks in the text. That’s actually quite tricky; the solution involves applying styles to

.news .content :link  { ...}
.news .content :visited { ...}

and, perhaps, also to

.news .content :link:hover  { ...}
.news .content :visited:hover { ...}


At least some browsers don’t have a default styling for <merror>. Not that anyone desires itex2MML parsing errors to end up in a syndicated feed. But, if there is an error, you’d like to be able to see it:

merror {display:inline;font-size:1em;}

Finally, not strictly a MathML tip, but around here, equation numbers are achieved with a floating <div class="eqno">, which needs a

.eqno {float:right}

1 And, so far, unfailingly well-formed, so that they can be served as application/xhtml+xml.

Posted by distler at June 9, 2006 11:58 PM

TrackBack URL for this Entry:

4 Comments & 1 Trackback

Re: Planetary Style

This should now be fixed. Let me know if it resurfaces.

Posted by: Sam Ruby on June 10, 2006 1:21 PM | Permalink | Reply to this

Re: Planetary Style

Thanks, Jacques, I only noticed that out-of-place <br /> on your Planet page; the problem is that Blogger (or probably rather Konqueror’s cut-and-past editing facilities) insert the linebreaks which it later converts in the first place by expanding spaces to newlines when the edit box overflows (there are no newlines in the output from my TeX2PNG script). It’s easy to miss them when posting via Blogger’s web interface.

Posted by: Georg on June 10, 2006 5:31 PM | Permalink | Reply to this

Unwanted linebreaks

Since Blogger’s software considers linebreaks significant (converts them to <br />s), having a cut 'n paste facility that willy-nilly inserts linebreaks on “paste” sounds like bad mojo.

Heck! The PGP signature on this comment wouldn’t verify if there were random linebreaks inserted on paste.

My sympathies.

Posted by: Jacques Distler on June 10, 2006 5:52 PM | Permalink | PGP Sig | Reply to this

Re: Unwanted linebreaks

After some further testing, I figured out that the linebreaks weren’t Konqueror’s fault after all (although that was a reasonable assumption, as Konqueror and Blogger’s edit mode don’t like each other in general). Emacs was the guilty party. Emacs’ TeX mode by default comes with auto-fill-mode switched on, so linebreaks are inserted instead of spaces to make lines wrap. These linebreaks are retained in my TeX2PNG script, since it just copied the TeX verbatim into the alt attribute; I have fixed it so it now replaces newlines with spaces in the TeX source.

Posted by: Georg on June 11, 2006 2:43 PM | Permalink | Reply to this
Read the post Sgmllib patch
Weblog: Sam Ruby
Excerpt: The last place I figured I would be patching when I saw this bug was the Python runtime library. The problem is markup in titles. No, not those titles, these titles. The way it all started was that Georg von Hippel used a TeX2PNG to convert a mathemat
Tracked: June 11, 2006 9:12 AM

Post a New Comment