Author Archive

SVG Meetup – Building Graphic Libraries

Busy days at #rdcHQ! This week in the SVG Track, we began work on Dimensional Diagrams and the team is building a simple library of symbols and repeatable elements that occur frequently in the Title 24 illustration set. For now, it includes simple items such as fractions and stylized arrowheads.

We are also searching to see if any useful libraries already exist, such as the collection of electrical symbols on Wikipedia shown below. We will be moving towards similar useful groupings in the weeks ahead and will be creating more libraries like this:

We also encountered two new techniques in Inkscape that are related the the Union technique, but necessary if the shapes created by the paths need to be shaded or filled with a color. The first is Path → Break Apart:

Once this has been applied, the interior paths are separate editable shapes. If a transparent background is required for the rest of the illustration, that can be accomplished with the Path → Exclude command:

Hacker Wednesday – Maps, Menus and More!

Greetings from #rdcHQ! We had a very productive Hacker Wednesday today with the addition of a new Junior Member to our team (to be announced) and a VIP guest appearance by Dan Almich to provide the graphics team with professional direction and their first on-site client meeting. Oceana met with Dan and they discussed the sketch that she presented last week. They also reviewed a new site map that further refines the sections of the site:

We also began working on the NAP Poster History which will be a major section of the site. We uploaded an image container PDF to the Internet Archive containing high-resolution TIFFs of most of the posters, and are working on text to accompany the visuals – we think it will tell a compelling story of the history of New Artists Productions:

The Internet Archive Bookreader can also be viewed in a two-page format which is well suited to our idea for presenting the text alongside the poster designs. We will be using the same format for historical news clippings as well -

Another nifty feature of uploading content to the Internet Archive is that the site automatically “derives” alternative formats from our uploaded PDF file, improving accessibility by making the content available in formats like EPUB, Kindle, Daisy and Full Text.

We also made quite a bit of progress in Suffusion, and began work on the
sandbox version of our site. Please note, this is not final and is for purposes of instruction only. It will change over the coming weeks as we continue to build the site and finalize the design. This week, we covered how to build pulldown menus using WordPress pages and change parameters such as the color of these menu items in Suffusion.

We’ll be building a series of tutorials to support New Artists Productions in the transition of the site. This will include much of the material that we are covering during Hacker Wednesdays – such as the intricacies of Suffusion and how to effectively manage content on the Internet Archive. Rather than post these in the form of weekly updates, this content will be made available in its entirety at the #rdcHQ website post-program.

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 as referenced in a previous post.

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 (as illustrated in this example used in our tutorial).

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, highlighting completed graphics in yellow).

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!

Return top