Responses by Nicholas Rougeux, web designer/data artist

Background: Byrne’s Euclid brings Oliver Byrne’s 1847 book Euclid’s Elements to life by reproducing the entire book online. Each diagram was created by tracing the originals and ensuring their dimensions and relationships stayed true to Euclid’s geometric principles. Proofs accompanying each diagram have been enhanced with clickable shapes to aid in understanding the shapes.

Highlights: The ability to interact with the diagrams to gain a better understanding of how the proofs were constructed. At the core of the design was the goal to faithfully reproduce and adapt Byrne’s original work in a web format, including colors, typography and layout. It creates a faux vintage look that is popular among those familiar with the work and newcomers who are just discovering it.

Challenges: Getting the same font used in the original book (Caslon), creating a font just for the decorative initials, finding a workflow to type the long s ( ſ ) efficiently, creating the unique stylized variations for common math symbols like greater than and less than (> and <) and devising a framework for flexible equations that include shapes as well as text.

Favorite details: The typographical achievements throughout the site, as described in my blog post. I developed a system where they work together harmoniously.

Navigational structure: Each book Byrne reproduced from Euclid’s original has its own page. Also, since each book has many proofs in it, a dropdown was created to let users jump to any proof on the page with miniature diagrams as thumbnails. The original publication also had references within the proofs, so these were transformed into clickable references. The bottom of every page also includes a link to each of the books.

Technical features: Adobe Illustrator was used to create the diagrams, and convert them to SVG, the glyphs for the decorative initials font and the posters. Glyphr Studio was used to convert those glyphs into the font. PHP was the server-side used to build the site. A little jQuery was used for the minimal JavaScript involved, and HTML and CSS was used for the interactivity.

Anything new: I learned a lot about typography from the 1800s, including the usage of the long s ( ſ ). I also learned about geometry techniques, such as how to bisect an angle with only a compass and a ruler. From a technical standpoint, I learned about fine-tuning HTML, CSS and SVG to achieve the nuanced typographical style, shapes and diagrams from the original book.

Alternative approach: I’d look for a more efficient way to structure the proof diagrams and clickable elements in the code or a more efficient way to generate the code for them.