Making of Clavis Cælestis: A Synopsis of the Universe

2 hours ago 1

I’ve long loved astronomy. Spending even a few seconds thinking about the wonders in the universe gives me a sense of joy. I marvel at what the scientific community has been able to learn about its inner workings from our tiny blue marble. When I stumbled upon Thomas Wright’s grand poster of his astronomical illustrations from 1742, I was immediately drawn in and thought recreating them would be a fun project.

Source material

Thomas Wright is most well known for his book, An Original Theory or New Hypothesis of the Universe published in 1750, in which he writes nine letters to a friend about his thoughts on the cosmos and the structure of the universe. Before that, in 1742, he wrote a lesser-known treatise titled Clavis Cælestis: Being the Explication of a Diagram, Entituled a Synopsis of the Universe: or, the Visible World Epitomiz’d, in which he discussed the astronomical concepts illustrated on several large engravings.

Scans of text and sheets Scans of the Clavis Cælestis (left) and A Synopsis of the Universe (right)

Wright engraved these concepts on copper plates and published them as seven large sheets meant to be folded and inserted throughout the Clavis Cælestis. When combined into their final arrangement, they formed a large poster at least five feet long that presents a wide-ranging view of astronomy and invites a great amount exploration.

Full sheet Original printing of all sheets on one poster (left) and with sheets numbered (right)

I first stumbled upon Thomas Wright’s illustrations from a pin on Pinterest showing them printed on a single sheet—an uncommon arrangement as I later discovered. The image in that pin is available on Wikimedia which lists its source as a post from the British Library on Flickr; which in turn lists its former owner as George III, King of Great Britain (1738–1820). Thomas Wright may have printed this special copy for the king, for he was worked on instruments that were part of the royal collection when the king ascended to the throne (source).

Beyond this single sheet, Wright’s engravings often appear online in various combinations comprising one or more sheets—often sourced from the high-resolution scans at the Library of Congress. However, their set is incomplete—only including five of the seven sheets and curiously printed on three sheets. The arrangement seems unusual because the sheets were originally published separately. The posters available in online shops and stock sites look nice but make little sense if one knows about their history. For example, places sell sheets one and seven combined or one, three, four, and seven combined. The latter is strange because sheets three and four only contain half of the tall diagrams that flank the sides of the original complete arrangement.

LOC sheets The three scans of sheets one and seven (left), two (middle), and three and four (right) available at the Library of Congress
Google Images screenshot Screenshot of Google Image search results for the poster

Very little about the Clavis Cælestis is available. The most illuminating post I found was from the Linda Hall Library, which Wright’s works. In it, they describe it as “really just a commentary” of the overall poster but also stated that they own the only complete original copy from 1742, which intrigued me. A little more digging turned up very high-resolution scans in their catalogue of the complete book as well as a complete set of scans for the seven sheets—all available under a Creative Commons license.

Linda Hall sheets

Linda Hall sheets closeups

Scans of sheets available at the Linda Hall Library roughly positioned into their intended arrangement (top) and select closeups (bottom)

Finding complete scans in such high resolution is rare. The scans at the Linda Hall Library were truly a jackpot. Every detail is clearly visible—from the thousands of lines representing rays of sunlight to the tiny strokes on comets’ tails. The scans at the Library of Congress are equally amazing but unfortunately incomplete.

Prior to finding the scans at the Linda Hall Library, I learned of a facsimile that was published in 1967, which also turned out to be somewhat rare. I could find no publicly available scans of it but found records for it at the Library of Congress, University of Chicago, Google Books, WorldCat, the Adler Planetarium collection, and the Illinois University Library—the latter of which was advertised as available online but required a university login to access. Being from Chicago, I thought getting a copy on loan from the Adler Planetarium collection would be possible but was fortunate enough to find a copy in excellent condition for sale from AbeBooks at a reasonable price so I ordered it to have as my own. Despite being a facsimile, it’s still an impressive book—complete with fold-out sheets inserted throughout the treatise as intended printed with a tremendous amount of detail.

Facsimile

Facsimile

Facsimile

Pictures of 1976 facsimile

The facsimile also included a preface from the author, M.A. Hoskin, containing a brief biographical and bibliographical overview of Wright’s life. While not an essential part of this project, I enjoy having a copy of my own and enjoyed learning more about Wright’s background from its preface.

Structure

A common practice I’ve developed over the years is creating outlines of the material I want digitize to visualize their structure. Reading through entire texts is a must but making simple outlines have become instrumental in understanding the whole picture.

Most books have a table of contents but they don’t always exactly match what’s written in the text and they don’t show all subsections. The Clavis Cælestis had the same situation. Its table of contents is a short two page summary.

Table of contents

Original table of contents

Contents of text

To get a more complete picture of the actual text, I compiled my own that included the subsections:

  • Summary
  • Preface
  • Introduction
  • Book I. Of the System of the World.
    • Section. I. Of the Planets in general
      • Of the Planets Densities and Quantities of Matter, &c.
    • Section II. Of the Sun and the inferior Planets
      • Of the Sun
      • Of Mercury
      • Of Venus
    • Section III. Of the Earth and Moon
      • Of the Earth
      • Of the Moon
      • To find the Quantity of Matter in the Moon
    • Section IV. Of the Superior Planets
      • Of Mars
      • Of Jupiter
      • Of Saturn
      • Of the Planets in general
        • Of the Parallax of the Planets Orbits
  • Book II. The Hypothesis demonstrated
    • Section I. Of the Laws of Motion and apparent
      • Of apparent Motion
    • Section II. Of Light and Heat
      • Of Refraction. Tab. III.
      • Of the Vicissitude of Seasons
    • Section III. Of the Equation of Time
      • A Table of the Equation of Time
    • Section IV. Of the Phænomena of the Planets
      • Of Eclipses
      • Of Transits and Occultations
    • Section V. The Theory of Tides
    • Section VI. Of Comets
      • Of the Stars, &c.
      • An Explanation of the different Stiles in the Account of Time
      • Old and New Stile explain’d

Sheets of A Synopsis of the Universe

In addition to the text, the figures and illustrations were entry points into the content and in an effort to gain a better understanding of their organization, I created a list of how they were structured on the sheets and alphabetically. There wasn’t much meaning to these arrangements because sheets included figures that spanned multiple sections and the reason for the numbering wasn’t clear. Their outlines are as follows:

  • Sheet 1
    • Saturn and his Settlelites
    • The Orbits & Trajectories of the Planets & Comets Near the Sun
    • Jupiter and his Settlelites
    • Earth and Moon
  • Sheet 2
    • Cosmological systems
  • Sheet 3
    • Figure III. Of Refractions and Reflected Vision &c.
    • Figure V. To Explain the Equation of Time
    • Figure X. Theory of the Tides
    • A Sector of the System of Comets (top half)
  • Sheet 4
    • A Sector of the System of Planets (top half)
    • Figure II. Of Light and Heat to the Planets from the Sun &c.
    • Figure O. To Explain the Doctrine of Parallax
    • Figure I. Of Projectiles and Natural Gravity
  • Sheet 5
    • A Sector of the System of Planets (bottom half)
    • Figure II. The Astronomical Areas Illustrated
    • Figure O. Of the Visible Magnitude of the Stars &c.
    • Figure VIII. Of the Solar and Lunar Eclipses
  • Sheet 6
    • Figure III. The Laws of Motion Explain’d
    • Figure IV. Of the Planets Apparent Motions
    • Figure IX. Of the Planets Transits and Occultations
    • A Sector of the System of Comets (bottom half)
  • Sheet 7
    • Figure VII. Phases of the Planets and Their Solar Aspects
    • Vicissitude of Seasons
    • Figure VI. Phenomena of the Moon

Figures and illustrations by title

  • A Sector of the System of Comets
  • A Sector of the System of Planets
  • Cosmological systems
  • Earth and moon
  • Figure I. Of Projectiles and Natural Gravity
  • Figure II. Of Light and Heat to the Planets from the Sun &c.
  • Figure II. The Astronomical Areas Illustrated
  • Figure III. Of Refractions and Reflected Vision &c.
  • Figure III. The Laws of Motion Explain’d
  • Figure IV. Of the Planets Apparent Motions
  • Figure V. To Explain the Equation of Time
  • Figure VI. Phenomena of the Moon
  • Figure VII. Phases of the Planets and Their Solar Aspects
  • Figure VIII. Of the Solar and Lunar Eclipses
  • Figure IX. Of the Planets Transits and Occultations
  • Figure X. Theory of the Tides
  • Figure O. Of the Visible Magnitude of the Stars &c.
  • Figure O. To Explain the Doctrine of Parallax
  • Jupiter and his Settlelites
  • Saturn and his Settlelites
  • The Orbits & Trajectories of the Planets & Comets Near the Sun
  • Vicissitude of Seasons

I could not determine why multiple figures were numbered “II,” “III,” and “O.” Most all figures were referenced by name in the text. The introduction covered the cosmological systems from the second sheet and the two figures labeled as “O.” The rest of the numbered figures were referenced throughout other sections. The rest weren’t referenced directly but their titles made it clear to which sections they applied. The only two figures never referenced directly in the text were the sections of planets and comets.

Typography

As with many antique illustrations, no typeface was a perfect match for the text Wright used in his engravings because it was drawn by hand. I experimented with several typefaces and settled on Cormorant because of its legibility and old style number characters. Its semibold weight was used for most text throughout the poster.

Typography Initial typeface tests for the poster

I tried quite a few typefaces for the text of the Clavis Cælestis and settled on Sorts Mill Goudy because it was easier to read online than Cormorant and its italic style had similar character to the original text. I have a soft spot for italicized text with a bit of character.

Typography Initial typography tests for the digital edition
Typography Comparison between original text (top) and test with Sorts Mill Goudy (bottom)

The astronomical and astrological symbols were also hand drawn and varied in their depictions. I thought about using a standardized set of symbols but doing so would have eliminated their character. Instead, I recreated each to be as close as possible to the original.

Symbols Examples of astrological (top) and astronomical (bottom) symbols used throughout the original (left) and recreated (right) poster

However, I used standard unicode symbols for those in the text of the Clavis Cælestis because they were closer to the original and to maintain legibility. I discovered that most of them often appear as emojis, which looked garish compared with the rest of the design. A thread on Stack Overflow educated me about the variation selector character that could be used to instruct the browser that non-emoji characters should be used. For example, the code for Aries is ♈ which displays ♈ but changing that to ♈︎ displays the much-nicer ♈︎ instead.

Symbols Astrological (left) and astronomical (right) symbols and their codes used in the text of the digital edition

The spelling of the word “Cælestis” in the title was curiously inconsistent. The treatise’s title page shows it clear as an italicized “æ” ligature but it’s spelled with an “œ” or “oe” in every modern reference. Both appeared to be accepted forms according to Wiktionary, but “cælestis” had a more complete definition while “coelestis” was simply described as an alternate spelling. In an effort to stay true to the original, I used the “Cælestis” spelling.

Title Closeup of the italicized “æ” used on the original title page

Wright used the long s ( ſ ) liberally throughout his text including the aforementioned title but I changed it to the modern lowercase s to maintain legibility. I have a soft spot for the long s since learning about it during my recreation of Byrne’s Euclid but I learned not everyone shares my enthusiasm so I opted for legibility over accuracy.

Redrawing the illustrations

Before embarking on the lengthy task of recreating all of the illustrations and figures, I had to make some adjustments to the layout. Cropping the scans from the Linda Hall Library and arranging them into a single image resulted in an image with roughly a 2:3 ratio, which was the same as the poster I wanted to create but, I wanted mine to have three-inch margins in case someone wanted it framed.

Shrinking the image to fit this area resulted in some extra gaps at the top and bottom. To accommodate this, I redrew the underlying frame with a little more space for some that could be easily extended and repositioned crops of each image as a guide. The only illustration that wasn’t altered was the centerpiece of cosmological diagrams. The rest had whitespace around them or lines that could easily be extended to fill the extra space.

Poster layout adjustment Before (left) and after (right) poster layout adjustments

The centerpiece

The center illustration was the most complex with several cosmological diagrams including the Pythagorean System and the Platonic, Ptolemaic, Ægyptian, and Chaldean systems as well as those of Tycho, and Ricciolus surrounding it. Each system only includess six planets and the moon because Uranus and Neptune hadn’t been discovered yet. The Pythagorean system is shown in two forms—one with the large sun at the top center surrounded by the six planets and a larger diagram showing the planets and their orbits around the sun in the center. Accompanying them are orbits of several comets.

Sheet 2 Scan of original second sheet with cosmological diagrams

I figured this it was a good place to start—thinking that if I could successfully recreate it, the rest would be easier by comparison. The scan from the Library of congress was of a slightly higher resolution than the one from the Linda Hall Library so I used that as a base guide. I started with the sun labeled “SOL” and used that as a test to iron out how I would handle making the many spheres representing the sun, planets, moons, and comets throughout the rest of the poster. The shading was accomplished with groups of concentric and angled arcs—carefully traced one a time and with a tapered width profile applied so the ends of each line are thinner than the middle. Some of the concentric lines were thickened a bit to help add to the appearance of depth. This technique worked well and was repeated for all other spheres in part or in whole depending on the detail needed. I recreated the stippling around the sphere not with a pattern, but by manually placing each dot to ensure the same density as the original—a time-consuming task for sure but worth it.

Sun

Sun

Sun

Recreating the sun from the second sheet; original (top), in progress (middle) and my recreation (bottom)

Pausing for a brief time after recreating the sun, I made an attempt at redrawing the illustrations surrounding the center area, which included a snake eating its own tail (an ouroboros), an old winged man with a scythe in the upper left, a winged woman with two trumpets on the upper right, and a young child juggling balls at the bottom center. No explanation of these figures was given in the text, nor could I find any direct explanation in my research. The most could deduce was the following:

  • The ouroboros could represent the ongoing cycle of time, which aligns with the circular astronomical signs and divisions around the sun.
  • The male figure could represent father time, who is often represented as an older winged figure with a scythe.
  • The female figure could represent Pheme, or the personification of fame, who is often represented as a winged female with trumpets heralding communication.
  • The young child juggling could represent new beginnings an innocence, which could align with the Age of Enlightenment—a movement that emerged in the 17th and 18th centuries, emphasizing reason, science, and individual liberty over superstition and tradition.

Unlike the rest of the geometric elements drawn by Wright, these illustrations were organic and after a brief unsuccessful attempt at redrawing just one wing with many fine brush strokes, I decided to keep the original and not recreate them. Fortunately, scan from the Linda Hall Library was a high enough resolution that all the details are preserved at even the largest poster sizes.

Wing

Wing

Closeups of the wing of the male figure; original (top) and my attempt to redraw it (bottom)

Turning my attention back to the central illustration, I created the astrological divisions around the sun surrounded by the ouroboros. The lines emanating from the center weren’t evenly spaced so they were drawn one at a time with thicker lines at major divisions and thinner lines at smaller ones. Each line also has a very long taper from the outer edge to the middle to avoid appearing too dense toward the center.

With the backdrop of the main area filled in, I focused on all the planets and comets orbiting the sun—slowly and methodically drawing each one and its parts. From the beginning, I made sure to carefully organize and name my layers in Illustrator so I could keep track of everything.

Center astrology

Center area surrounded by ouroboros with the redrawn sun at the center and astrological markings

Screenshot

Screenshot

Closeups of drawing Jupiter’s rays (top) and the comet of 1661 (bottom)

Great care was taken do draw every line as it was with as few shortcuts as possible. One I did allow myself helped with the “rays” of light emanating from planets and comets. As the screens above show, these lines were drawn exactly as the original but their spacing and alignment looked amateurish. To fix this, I used NodeBox to generate rays spaced equally around a center point and then masked them in Illustrator. However, I made sure to use the same number of rays around each body so they were as accurate in density as possible. These looked much better at a smaller scale. Larger rays emanating from the sun in other parts of the poster were hand drawn.

NodeBox Setup of NodeBox for creating evenly-spaced rays around a central point
Jupiter rays Closeup of Jupiter and its moons with evenly-spaced rays around them generated in NodeBox

After completing the central depiction of the Pythagorean system, I created the top one—starting with the sun. I used the same technique as previously described to create the shading on the sphere but its rays of light presented another challenge. Wright drew these rays with great care by varying their width ever so slightly to create an undulation of light and dark lines—an impressive achievement for when it was engraved. To recreate this effect, I draw all the lines with the same width of the thinnest and thickened those at the darkest spots. Then, using NodeBox again as a quick calculator, I calculated the steps in thickness needed to transition from one to the other. This was a time-consuming task but worth the effort. I setup the NodeBox calculator so I could a minimum value, a maximum value, and the number of steps I needed and it would give me the steps from one to the other.

Sun rays

Sun rays

Sun rays

Sun rays before (top), during (middle), and after (bottom) adjusting thickness
Sun rays Setup of NodeBox for calculating steps between the thinnest and thickest lines (e.g., 12 steps between a line of 0.75-inch line and an 0.25-inch line)

The ring around the sun of the top portion containing the title, planets, and the moon presented an interesting challenge. My initial attempts at manually spacing out concentric circles wasn’t fruitful and it was here that I allowed myself another shortcut by using NodeBox. The is a set of concentric arcs but spaced out as if they were poloidial lines of a torus, or parallel lines circling the center but never crossing. When viewed straight on, they appear closer to each other at the edges and farther apart at the center. I achieved this by creating a semicircular arc in NodeBox and sampling the same number of points around it as the number of concentric “rings” to draw. Based on those points, I drew new arcs with the same radius as the image. To avoid the lines looking too perfect, I added a subtle roughen filter in Illustrator. The same method was used to draw the rings in the Platonic and Ptolemaic systems in the upper corners.

While I worked on the Pythagorean system, I experimented with designs for the website of the digital edition, which is covered in more detail below. The whole Pythagorean system including the top and middle portions took about 10 days to recreate.

NodeBox rings Setup of NodeBox to create rings for upper depiction of the Pythagorean system

Original scan

Remake

Original (top) and remake (bottom) of the upper depiction of the Pythagorean system

With the first system complete, I was encouraged by the results and started building out the website for the digital edition while working on the next two systems: the Platonic and Ptolemaic. They were both geocentric with the Earth at the center and other celestial bodies orbiting them and drawn in a similar style. Unique to them were the rings of stars surrounding each. Each of the 66 stars had tiny extra rays emanating from them and were traced by hand.

Platonic system

Platonic system

Platonic (top) and Ptolemaic (bottom) systems

Next, were the two systems of Tycho and Ricciolus. Both were shown in a similar design but had different bodies orbiting the the sun or the Earth. In Tycho’s system, the sun orbited the Earth and all other bodies orbited the sun. It the system of Ricciolus, only Mercury, Mars, and Venus orbited the sun while Jupiter and Saturn orbited the Earth.

The key challenge with these systems was the rays emanating from the sun. At first glance, they seemed simple enough but being the perfectionist that I am, I wanted to draw them as accurate as possible. The rays could be grouped into concentric rings—each more dense than the last the farther away from the center they got. The two catches were that the innermost rays varied in width ever so slightly, creating an undulating pattern and they stretched beyond the inner ring to penultimate outer ring of rays. I achieved the undulating pattern by again using my NodeBox stepper calculator and used some creative clipping masks to ensure every line lined up with the original. Not all of Wright’s lines were perfectly straight but I made sure each line I drew lined up with the ends of Wright’s.

Tycho sun

Tycho rays

Closeup of the Tycho system sun (top) and rays (bottom) of the original (left) and remake (right)

With the top two thirds of the center illustration complete, I turned my attention to the bottom, containing the Ægyptian and Chaldean systems along with one for the moon—the two former with all celestial bodies orbiting around the Earth. At this point, I had become familiar with the techniques needed to complete them by working on the previous systems so they went smoothly. Like with the figures perched on the ouroboros, I chose to keep the illustration of the moon as the original instead of recreating it.

Ægyptian system

Chaldean system

Moon system

Ægyptian (top), Chaldean (middle), and moon systems (bottom)

The entire illustration of all cosmological systems took about three weeks to complete.

Remake of sheet 2 Completed redrawing of the second sheet

After completing it, I started building out the design of the website for the digital edition. (More on this later.) Once the overall design was complete, I balanced the remaining work by retyping the text and recreating illustrations as they were mentioned so I could use the website as I was building it and fine tune it as needed.

Figures

Wright’s figures look deceptively simple. Each had a tremendous amount of detail and presented its own challenges to recreate as accurately as possible. Below are a few highlights of the more interesting ones.

Figure closeups Closeups of figure VIII (top left), vicissitude of seasons (top right), figure VI (bottom left), sector of the system of planets (center), and orbits and trajectories (bottom right)
  • Figure VIII about eclipses required a great deal of extra care to recreate all the intricate lines and shadows across the moon, Earth, and sun. I allowed myself another shortcut by using blends of lines to create the patterns on the shadows.
  • Vicissitude of seasons had plenty of nuances around efficiently constructing the shaded spheres and viewpoints above and below them. This diagram was made on a small laptop screen when flying back from a trip to Florida. In retrospect, I would have appreciated working on a much larger screen like I usually do. I also increased the vertical space between the top and bottom rows of spheres to make use of the new space available in the altered layout.
  • Figure VI about the phenomena of the moon required a lot of creative clipping masks to get the various shadows to appear the same as the original.
  • A sector of the system of planets has 977 dots surrounding the sun—each one placed individually.
  • The orbits and trajectories figure was the last one I created and had the most light rays than any other part of the diagram: 2,317 rays around the center circle and meticulously drawn by hand. Using NodeBox to draw these rays perfectly equidistant from each other would have looked too polished and would have produced moiré patterns when scaled down. By drawing each one, a kind of perfect imperfection emerged. The original diagram had a subtle natural texture and my recreation did as well with the help of a subtle roughen filter. The same technique was used for the rays in the Saturn and Jupiter figures.

One aspect I took some creative liberty to improve were the figure titles. They varied a lot in size and position and few were aligned. I ensured all were formatted with the same size and spacing with minimal changes to tracking as needed. Exceptions were made for the obvious differences like those for orbits and trajectories, Saturn, Jupiter, the sectors, and the vicissitude of seasons. These improvements improves the overall cohesiveness of the poster.

Figure titles Closeup of original (top) and new (bottom) title formatting

Recreating the figures gave me a deeper appreciation for Wright’s dedication and a better understanding of what was described in the text. The final composite poster of all the figures feels in a sense, larger than when I first found it because I now know what it took to create my version. The effort I undertook paled in comparison to Wright’s because he engraved everything by hand and printed it for what must have been a substantial cost at the time. Still, I’m glad I did it and hope others appreciate the time spent on them.

Final recreated poster Entire recreated poster

Digital edition

The digital edition of the Clavis Cælestis required a commitment that I’ve become familiar with over the years: crafting a simple but expressive online experience to explore Wright’s treatise and the poster.

Colors and navigation

Wright’s treatise was printed without color except for a few words on the title page printed in red. To add a splash of color to this digital edition, I drew inspiration from a technique I used on a previous project, Iconographic Encyclopædia, where a different color was used for each main section to give each page its own identity that contributed to a larger whole—much like Wright’s poster comprising many individual figures. Inspiration for the color came from a retro palette I found on Pinterest that I modified to suit my needs.

Early colors Initial experimentation with colors for each section

Early layout experiments were rough and were too reminiscent of my design for Iconographic Encyclopædia but they were necessary so I could move onto the next versions. The core of the website was going to be each section so I mocked up a test in Figma of what one would look like in its entirety. I used the section color as an accent color on any lists, tables, and figure frames. After making a few adjustments, I settled on a general direction and started building the website.

Early layouts Early layout experiments

I also wanted to try something different with the navigation. Rather than having a standard bar across the top, I exercised some creative freedom and made a menu that stays visible on the left side with the current section jutting out. Clicking the menu icon would open a colorful full-screen menu. I enjoyed the design but it felt too flat so I added some depth to it by mimicking a raised 3D box with sides along the bottom and right. This design is done with a few CSS transforms applied to pseudo elements and manipulating variables like depth and relative colors. The result is a somewhat playful menu that adds a splash of color to every page. Menu items become raised by hovering over them.

Navigation iterations Iterations of navigation design

For example, here’s a closer look at the first section in the first book about planets in general.

First, I set the accent color for each section by class as well as define the visual depth:

--planets: #8eaba4; --depth: 1rem; .planets { --accent: var(--planets); }

These variables were used to control the colors and sizes of all three visible sides of each navigation item. The right and bottom sides were created using the ::after and ::before pseudoelements respectively. A transform comprising a skew and offset based on the depth value created the appearance of right-angled corners viewed from an angle.

<li class="nav-item planets"><a href="/clavis-caelestis/planets">Planets</a></li> .nav-item { background: var(--accent); /* Apply section-based color */ inline-size: calc(100% - var(--depth)); display: flex; flex-direction: column; flex: 1 1 auto; position: relative; } .nav-item::after { background: lch(from var(--accent) calc(l - 10) c h); /* Darker right side */ block-size: 100%; content: ""; inline-size: var(--depth); inset-block-end: 0; inset-inline-end: 0; position: absolute; transform: translate(100%, calc(var(--depth) / 2)) skewY(45deg); transition: all 0.1s ease-in-out; } .nav-item::before { background: lch(from var(--accent) calc(l - 20) c h); /* Even darker bottom side */ block-size: var(--depth); content: ""; inline-size: 500%; inset-block-end: 0; inset-inline-end: 0; position: absolute; transform: translate(calc(var(--depth) / 2), 100%) skewX(45deg); transition: all 0.1s ease-in-out; }

Finally, the raised hover state is achieved by reducing the inline size (width) and block size (height) and applying another transform by doubling the depth value.

.nav-section:hover::after { inline-size: calc(var(--depth) * 2); transform: translate(100%, var(--depth)) skewY(45deg); } .nav-section:hover::before { block-size: calc(var(--depth) * 2); transform: translate(var(--depth), 100%) skewX(45deg); }
Expanded navigation Expanded navigation and hovering over a link

The effect was simple and admittedly a little gratuitous but I enjoyed it and had fun building it.

I had an early and lofty idea to enhance Wright’s text with visual explanations thereby rewriting some of his words. I made a brief attempt with the first section of the first book but wasn’t pleased with the results and worried that my interpretations would be incorrect. Instead, I opted to keep his words as they were with minimal formatting.

Design attempt Early attempt at visual explanations

Another early idea was to make the figures interactive like those in my Byrne’s Euclid project where elements mentioned in the text (e.g., angle ICA or celestial body P) would be clickable and be highlighted in the accompanying figure. I created an early test of this for figure O illustrating parallax but decided the outcome wasn’t worth the effort required to make it happen.

Interactive attempt Early interactive attempt

Instead, I left the figures as static images shown alongside the text on larger screens, which I felt was already an improvement over referencing separate fold out sheets as in his original book.

Screenshot Screenshot of figure I and its accompanying text about projectiles and natural gravity

Lists and tables

Sprinkled throughout the text is liberal use of lists using curly brackets and uniquely-aligned text to avoid repeated words. I referred to these as “fenced” and “aligned” lists. For example, the end of the introduction includes astronomical symbols used later in the book, using two curly brackets surrounding “is signified by” to avoid repeating that text between each planet and symbol.

To achieve these fenced lists, I borrowed a technique that I detailed in my blog post about making them in Byrne’s Euclid. Essentially, I created placeholders in the HTML such as <span class="fence">{</span> and run some JavaScript on page load that replaces it with a few SVG shapes that can grow or shrink based on the overall size of the group.

Astronomical symbols List of astronomical symbols used in the introduction from the original text (top) and digital edition (bottom)

Aligned lists are those that appear as a list with some elements aligned with others for improved legibility, like the distances between the Earth and moon in Earth & Moon. The leftmost text is left aligned, the numbers are right aligned, and the rightmost text is left aligned. Lists like this were achieved by simply applying a fixed width to each element and aligning the text for numbers where appropriate. The repeated words are still in the HTML but styled to be invisible to the eye while still retaining semantic.

Distances Distance between earth and moon in the original text (top) and digital edition (bottom)

Fenced and aligned lists were also often combined to achieve more complex list layouts.

Diameters

Surfaces

Lists of planets’ diameters and surfaces

Tabes also frequently used—some simple, such as those in the Planets section but a few were much more complex and required some creative table layouts with rotated text like the table in the Equation of Time. I did my best to stay as true to the original design as possible while retaining semantic meaning. Occasionally, Wright included tables that were easier to layout in Google Sheets and then later cleaned up the HTML.

Periods Table of the periods of planets around the sun; original (top) and digital edition (bottom)
Diameters Phænomena of planets table; original (top) and digital edition (bottom)
Equation of time table Table from the equation of time; original (left), Google Sheets (middle), and digital edition (right)
Comets table Table of observed comets; original (left), Google Sheets (middle), and digital edition (right)

Home page

The home page was a constant source of consternation. As I retyped the text from the treatise and recreated all the figures, I created several designs of the home page, trying to come up with a way to introduce Wright’s work to someone who had never heard of it. The challenge was that this project could be explored in two ways: reading the treatise or exploring the figures. Wright’s grand poster stood on its own and I wanted to let visitors explore it without digging through the entire treatise or relegating the full poster to a separate page. I struggled for a while to design a layout that introduced these two options—bouncing between putting the treatise first, putting the figures first, and showing them in parallel.

Ultimately, I settled on an approach that introduced both the treatise and figures together with a brief introduction and ways to jump to each section. This way, readers aren’t overwhelmed with one or the other and have a choice of how they want to explore the digital edition.

The complete poster was also much too large to view as a single image so I wanted to make each figure clickable to open a slideshow to explore each one individually. The version that appears is an enlarged version from the final recreated poster. The one exception is the sectors of comets and planets. If I showed them at full size, they would either be too narrow or too tall. I cropped these each into three images to make them easier to view.

Home page iterations Early home page layout designs
Home page sections Home page sections
Slideshow Slideshow of figures

Posters

From the beginning, I wanted to create a colorized version of Wright’s figures. I developed a taste for this when doing the same for the New York and Erie Railroad Organizational Diagram of 1855 and was excited to try another. The inverted blueprint-like versions for sale on Etsy inspired me to create a similar dark version but one that wasn’t just an inverse of the original.

I gave myself the challenge of limiting my palette to the colors used on the website so there would be a connection between the two. I slowly and methodically made my way through every layer, changing all the black to white and developed a system for applying colors to common elements:

  • Shadows should stay as shadows. All the celestial bodies with crosshatching to give the appearance of shading should continue to work as such instead of just inverting them. Similarly, shadows among the rays of light should remain visible but dark. Shadows were changed from black to the darkest blue to make them slightly more vibrant.
  • Spheres needed colors. If a dark background was going to be used, the spheres needed colors to make the shadows visible and make them easier to identify such as bright blended oranges for the sun, red for Mars, blue and green for Earth, and shades of orange for Jupiter, Saturn, and Venus. Mercury and the moon were lighter tints of the same hue used for the background.
  • Key lines should be more visible. Not all lines are equal. Wright varied the width of lines to make some more visible than others. I wanted to take this a step farther and make the thinner, less important lines dimmer as well so the more important ones were more visible.
  • Colors should be used sparingly and consistently. Color usage was limited to just the celestial bodies and the figures in the central illustration, allowing them to pop on the dark background.

Colorizing poster

Colorizing poster

Closeups of colorizing the poster

The final result is a set of two posters available for sale: one in antique colors (black on an antique background) like the original and in a modern color palette with bright vibrant colors on a dark blue background reminiscent of the midnight sky.

Posters Final poster designs

Closeup of poster

Closeup of poster

Closeups of posters

Order posters

Final thoughts

This project, like many others, was a labor of love—for astronomy, for antique books, and for spending time carefully crafting something new no one has seen before. I knew when I stumbled upon Wright’s treatise and figures that I had found something special and I thoroughly enjoyed learning about it as I stepped through it figure by figure. The entire project took about six weeks from start to finish and the posters contain nearly 42,000 objects, most drawn by hand.

Finding the complete scans at the Linda Hall Library was exciting and purchasing my own copy of the facsimile was a joy because it serves as a real-world momento of my efforts—something I like to do when possible. I hope others enjoy exploring the treatise and its accompanying poster to learn about how the universe was viewed from more than 280 years prior.

Explore the project

Read Entire Article