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.

April 13, 2007

Instiki and Atom

If you’re serving rich content (inline MathML, inline SVG, …), then RSS 2.0, with its poetic specification and undefined content-model, is a thoroughly inadequate syndication format. Atom, on the other hand, provides a solid foundation for advanced news aggregators, like Venus (which powers Planet Musings).

When I started working on my branch of Instiki, one of the main items on my TODO list was to ditch RSS 2.0 in favour of Atom syndication. I finally got around to doing that, recently.

I also ported MathML::Entities to Ruby, so that Instiki now translates named entities before sending them over the wire. This is good news for users of non-MathML-aware XHTML-UA’s, like Safari and Opera.

Well, … sorta.

Safari’s DOM support in XHTML is pretty thoroughly broken. S5 slideshows don’t work at all (and even crash some recent WebKit nightlies). Until Safari gets fixed, the only reasonable alternative is to send S5 slideshows as text/html. That means no MathML (of course) and no inline SVG for Safari.

Speaking of inline SVG, I was struck by John Baez’s recent post over at the n-Category Café. He needed to draw some Young Tableaux, and couldn’t figure out a nice, simple way to do it.

The answer, John, awaits you, when you “View Source” on this entry.

Examples of Young Tableaux

Start using inline SVG for such simple tasks and, if it works well, I’ll enable SVG in the comments, too.

Posted by distler at April 13, 2007 7:59 PM

TrackBack URL for this Entry:   https://golem.ph.utexas.edu/cgi-bin/MT-3.0/dxy-tb.fcgi/1242



10 Comments & 2 Trackbacks

Re: Instiki and Atom

As a slightly off-topic administrative note, the alternate representation for your SVG diagrams could (perhaps) be better; the start of your entry appears in my feed reader like:

” Atom Logo, based on Sam Ruby’s original

If you’re serving rich content (inline MathML, inline SVG, …)…”

In this case I would argue that the logo is purely decorative and no alternate textual representation is necessary; indeed I think it detracts from the understanding of the page (possibly the contents of the <desc> element could go in a <title> element).

For the later diagram of the Young Tableaux, a <desc> indicating that there is a diagram there might be better than one that just reads “Young Tableaux” with no context.

Posted by: jgraham on April 14, 2007 6:20 PM | Permalink | Reply to this

Non-SVG-aware UA’s

In this case I would argue that the logo is purely decorative and no alternate textual representation is necessary; indeed I think it detracts from the understanding of the page (possibly the contents of the element could go in a element).

I hadn’t considered the differences in rendering of <desc> versus <title> in non-SVG-aware user-agents (like your feedreader).

Fixed. Thanks.

Posted by: Jacques Distler on April 14, 2007 11:52 PM | Permalink | PGP Sig | Reply to this

Re: Instiki and Atom

Thanks! But, I can’t get anything to work when I include SVG stuff like yours in my post. I get wads of error messages.

Posted by: John Baez on April 15, 2007 1:18 AM | Permalink | Reply to this

Prefixing

Right. Sorry about that.

In the original version of this example, I used un-prefixed SVG elements, e.g.:

<div style="width:2em; height:5em; position:relative; margin:auto;">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 100">
    <g transform="translate(5,5)" fill="#FCC" stroke="#000" stroke-width="2">
      <rect width="30" height="30" />
      <rect width="30" height="30" y="30" />
      <rect width="30" height="30" y="60" />
    </g>
  </svg>
</div>

Unfortunately, that causes the W3C Validator to barf. Instead, you need to prefix all the SVG content:

<div style="width:2em; height:5em; position:relative; margin:auto;">
  <svg:svg xmlns:svg="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 40 100">
    <svg:g transform="translate(5,5)" fill="#FCC" stroke="#000" stroke-width="2">
      <svg:rect width="30" height="30" />
      <svg:rect width="30" height="30" y="30" />
      <svg:rect width="30" height="30" y="60" />
    </svg:g>
  </svg:svg>
</div>

Ugly, I know. But we seem to be saddled with that requirement, for the present.

Posted by: Jacques Distler on April 15, 2007 1:48 PM | Permalink | PGP Sig | Reply to this

Re: Prefixing

It would be really great to get rid of this pesky requirement that you prefix everything. That would mean I could create a drawing in CorelDraw, export it to SVG and just include it inline in my comment. At the moment I’d have to go through a painful process of prefixing everything and it won’t be worth it.

Posted by: Bruce Bartlett on August 28, 2007 11:07 AM | Permalink | Reply to this

Re: Prefixing

As detailed in this post, you no longer have to prefix your SVG code in the comments (or blog entries). The plugin does that for you (taking namespace well-formed SVG and spitting out the prefixed version that will keep the W3C Validator happy).

I’m not familiar with the SVG output of CorelDraw, so I don’t know if it needs to be tweaked in some other fashion. But prefixing, at least, is not required.

Posted by: Jacques Distler on August 28, 2007 11:37 AM | Permalink | PGP Sig | Reply to this

Re: Prefixing

My apologies for not noticing that post. Thanks, this looks great.

Posted by: Bruce Bartlett on August 28, 2007 12:47 PM | Permalink | Reply to this

SVG in comments

OK … Why not allow SVG in comments?

A little tweaking was necessary, but you can now do things like this:

Example Young Tableaux in SVG
Some Young Tableaux

or this:

Picture of Trefoil Knot
Framed Trefoil Knot
Posted by: Jacques Distler on April 17, 2007 11:40 PM | Permalink | PGP Sig | Reply to this
Read the post SVG Comments
Weblog: Musings
Excerpt: Kicking it up a notch.
Tracked: April 27, 2007 3:24 AM

Installing Instiki

I’d like to start an instiki page using your version, but fink couldn’t find sqlite3-rb18. I installed the other prerequisites without trouble (on my Intel Mac with 10.4). Any advice would be greatly appreciated.

Posted by: Gavin Polhemus on May 5, 2007 1:01 AM | Permalink | Reply to this

Re: Installing Instiki

It’s in the unstable tree. But the bundled version should be perfectly adequate. In fact, it’s better: version 1.2.1 versus 1.2.0.

Posted by: Jacques Distler on May 5, 2007 1:45 PM | Permalink | PGP Sig | Reply to this
Read the post WebKit and MathML
Weblog: Musings
Excerpt: Still waiting.
Tracked: July 28, 2007 12:42 AM

Post a New Comment