Musings

Planetary Style

Aggregating and republishing over two dozen feeds, of varied provenance, is not without its pitfalls. Wordpress.com’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 good¹. 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 { ...}

etc.

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}