MathML Meetup – MathJax

Today’s MathML Meetup was primarily research oriented (although we have 60 new equations to add to the repo with the next update!). Jasper is ready to focus on new technologies as he codes the equations, so we moved ahead a bit in our production schedule to review MathJax.

We <3 MathJax!

MathJax is a fascinating new technology that will solve the vast majority of our cross-browser rendering issues. MathJax recently launched its Content Delivery Network (CDN) Service which makes it very easy to embed the application into a web page without a dedicated server. We’ll be implementing it soon on our code repository so you can see the equations build along with the working code. It offers many cool features, such as copy-and-pasting source, zooming text, and has hooks for text-to-audio (which we will be taking a closer look at soon in the MathML Track).

The following tutorial demonstrates some of these key features:

Since MathJax relies on JavaScript, we will need a solution for users who may have JavaScript disabled. We also need print-quality equations as the Title 24 document set will be converted from HTML to PDF format. It is possible that MathJax will support the conversion process – but we will still need a default graphic to cover all scenarios and to provide a localized solution (i.e. one that works without an internet connection).

Our initial idea is to default to the original file (which is a low-quality .JPG file), however we believe that we can batch convert the MathML files (.MML) files to Scalable Vector Graphics (.SVG) which will result in high quality vector images. Jasper is looking into writing a script that will automate much of this process, as well as scripting the container for the equations and index number.

Next Steps

With this new discovery, and Jasper’s mission of making his work as accessible as possible, we are beginning to think about how many more platforms we can support, such as EPUB3 (which includes support for MathML and SVG). We’ll make any alternative formats available in our repository and will be documenting our discoveries at the close of the program. Technical documentation will be an important step in this track, so we’re beginning to think about content and structure now as we continue our work.

Stay tuned!

SVG Meetup and MathML News

Happy Friday from #rdcHQ! The SVG track met on Thursday to sync up the repository with new work. We made a lot of progress on simple schematics without moving to Google Sketchup. This particular worksheet is giving us some insight on typographic and layer controls in the Inkscape environment.

SVG: Typography 101

As part of improving the collection, we are defining a style guide to create a more consistent look to the typography used in the graphics. We are still in the process of finalizing those standards, and will post them to our SVG Track page when we do. It will most certainly take some fine-tuning in our post-production pass to perfect this.

Ideally, our goal is to convert the type to paths using Path → Object to Path before saving the final SVG, as cross-platform font issues can be problematic (especially in Inkscape). This is simple enough on graphics with minimal type, and can be accomplished using the following technique:

We are encountering problems with SVG files that are text-heavy such as the example shown in our video. The final SVG files generate an XML parsing error which may be the result of too many nodes in the vector illustration once the type is converted. Until we determine the cause, we will not convert to paths which means our graphics will render but our final type selections will not in most circumstances.

Although there are a lot of nits to pick about how Inkscape handles typography in general (the inability to define a default font is frustrating), there are a few very specific things that the program does quite well. We were particularly impressed with the level of control for glyphs as the illustrations we are working with often require mathematical symbols. Once we found a font with good Unicode support for equations (we chose the STIX Font Project), sorting through specific characters is easy in Inkscape (using Text → Glyphs).

SVG: A Quick Look at Layers


We will be using the Layer feature quite a bit in the coming weeks as we move into the more advanced illustrations. As it stands, we have only been using it for simple techniques such as moving elements to a layer above or below. Levi introduced us to a very useful time-saving trick that establishes a root layer for the template graphic. If the original .JPG is opened from the Inkscape application (using File → Open opposed to being imported using File → Import), it will automatically be placed on a root layer and the document will be sized to the exact dimensions of the drawing as shown below:

We ended the session splitting up the remaining illustrations in the EASY level between the three members of the team. We’ll be updating the worksheets as we go.

MathML: Repository Update

We updated the repository with 150 equations that Jasper has written in Presentation MathML. The code for each equation is presented underneath the original graphic for now until we begin work on cross-browser rendering issues. We’re also adding permalinks so you can see the equation in context in the original Title 24 document. Great work, Jasper!

Hacker Wednesday – WordPress 3.2!

Greetings! Jenn and Oceana met up virtually for today’s Hacker Wednesday session and we reviewed some of the new features in Wordpress 3.2 “Gershwin” which was released over the holiday weekend. We were jazzed to see that the latest version of Suffusion (3.8.1) was available as well – just released this morning – which made integration a breeze (some of us are old enough to remember when that was never the case :-) ).

We plan to continue our WordPress tour on our next meetup now that upgrades are complete and we are officially on the bleeding edge!

Next, we brainstormed some visual elements of the design. Jenn has developed a color palette for the overall site, and we’re exploring layout possibilities in Suffusion.

Using the original NAP site map as a guide, we discussed ideas for presentation on some of the more visual aspects of the site, such as the history of New Artists Productions as told through the posters designed over the years. Using a “cover flow” approach could be interesting, or presenting them with an open source tool such as the Internet Archive Bookreader that we used for genCollectionInterface during our 2009 program. The latter solution is ideal as we can present the posters at an optimum size alongside a brief narrative of each production.

We then discussed the idea of an entry page that would appeal to kids. Oceana sketched out some rough ideas on how an opening page for the site might look. We were all intrigued by the idea of a theater stage highlighting the NAP story or latest production. A curtain would open to reveal a slideshow of notable content, utilizing the HTML5 Canvas element for animation.


More sketches are available in Oceana’s 2011 Sketchbook

The row of stage lights could also provide a fun and visually appealling navigation system, and we think it would be fun to see what kids think of our user interface (we already have one beta-tester!). Oceana quickly doodled some curtains on the Bamboo Pen & Touch procured for her work on our SVG track. Her sketch turned out quite fun, and coordinates nicely with Jenn’s color choices.

We are eager to run these ideas past Dan and Anita next time they are at #rdcHQ – we know they will have a lot of ideas as well. Right now, they are both getting ready for “Mulan, Jr.” which opens this Friday at the Sprague Theater!

SVG Meetup 06/30

Aloha! Today we had a fun SVG Meetup with the return of Oceana to #rdcHQ. She has decided she wants to sit in on both our WordPress and SVG Tracks this year which we think is totally cool. There is a lot to absorb in both tracks.

Save Early and Save Often

After a primer of what we are trying to achieve on the SVG project, Levi and Oceana began work on some of the more complex illustrations in the easy level that we are focusing on (as some of the very basic illustrations are for the purpose of demonstrating techniques in our tutorials which provide building blocks for the entire collection). We covered some workflow issues as in how to save, name and organize our files so we can work effectively as a group. We also very quickly learned that it is wise to activate the Inkscape Autosave function. Autosave is a relatively new feature introduced in 0.47 (the latest stable release is 0.48.1) which prevents the loss of work in the event of a software crash.

You can find it under File → Inkscape Preferences :

Essentially, Inkscape saves a copy of the file into another directory at predetermined intervals, leaving the original revision history intact (so the “Undo” works :-) ). We are experiencing software crashes on both the Macintosh and Windows platforms with Inkscape 0.48.1. We are trying to determine if it is a memory issue as several memory leaks were also addressed in 0.47. According to our research, we have ample RAM to run the program. This particular issue has not hindered progress, and since we all agreed to use the same software to collaborate effectively and help each other learn we have decided to adopt the motto “Save Early and Save Often (and use AutoSave!)

Christopher and I spent the last part of the session going over some basic drawing techniques for our next tutorial using the exercises on Worksheet 1 (Hello World!). Here we cover duplicating shapes and moving them a specified increment so that the shapes align perfectly.

Duplicate and Move

The best way to draw a technical illustration with precision is to specify increments numerically as opposed to “drawing by eye.” The drawing below is rendered as a series of boxes that are duplicated upon itself using the Edit → Duplicate command and moved incrementally using the Object → Transform command as follows:

It is important to note that as a default Inkscape adds half the stroke width to the shape dimension and this must be taken into account when setting the increment in the Move → Vertical dialog box. This number is calculated by subtracting half the stroke weight from the overall height (H) of the shape as shown in the Inkscape menu bar below, at right.

Once this value has been determined, the Transform → Move command can be applied. We are researching if it is possible to set Inkscape’s preferences to have the stroke be contained within the shape so as not to affect the overall dimensions. As far as we can surmise it is not possible without clipping the stroke, and that would still require simple math on the part of the artist to double the stroke weight before clipping (not that requiring humans to do simple math is necessarily a bad thing :-) ).

Once the objects are in position and correctly aligned, we apply the same technique of Stroke to Path and Union that we illustrated last week -

Caveats

It is important to note that at least two of our team members are die-hard Adobe Illustrator users, and we find the most basic exercises extraordinarily tedious :-) . However, in the best interest of the project, we all decided to work in the same application because we want to prove that creating art of this quality is indeed possible using free tools.

We are all quite jazzed at the idea of our collaborative functional art project – building a vital clip-art library that serves an important purpose — improving building codes for California — and that one day our art may find itself in a presentation of an architect with a vision or an infographic of a city planner trying to make a critical argument. This art can also provide a foundation for other states to improve their own building codes, and we want to ensure that anyone can do this with free tools and not be forced to pay for a software program. We’re going to see if adding Google Sketchup to the mix makes things easier. We definitely think that it will help with the more advanced illustrations, although our team is proving that some degree of accuracy is indeed possible with Inkscape.

Over the next week we plan to research the memory problems in-depth, check out Google Sketchup, and scour the Inkscape documentation.

Return top