Breaking the Rectilinear Mold

Tansy: Web Layout Parisien (Open Source Javascript and SVG)

David Dailey, Dan Miller, Hope Koutsouflakis
Slippery Rock University

Contents

Abstract

The concept of hypertext has succeeded in transforming the linear text of antiquity into the more modern technologies of web-based communication. Nonetheless, on the fiftieth anniversary of hypertext, we are still stuck in boxes. Ideas do not always fit in rectangles, and the graph theoretic topology of such things as much, flow charts, taxonomies, and more generally, glyphs and art, do not always conform comfortably to our 15th century legacy of rectangular typesetting. While even the forward-looking SVG has embraced a richer metaphor for human expression than its cousin, HTML, it too has chosen to remain inside the box, at least for the time being.

Fortunately, scripted solutions can reveal that not only are non-rectilinear designs for web pages and font-families possible, but also that they may be just as easily manipulated as working within a box model. We demonstrate “the Paris street model” theory of graphical layout and show how it can be adapted both to the flow of web content and to the design of font-families.

For example: a series of SVG circles,
when dragged and resized, can be used to define and control a large collection of those lines tangent to pairs of circles. Up to four lines per pair of circles may be defined, so that a nonrectilinear geometry of up to 2n(n-1) lines may be easily controlled through the use of n circles. We show how both web design and font design may be liberated from historic convention through simply throwing away the box.
Background: Polygons, Lines, and Rectangles
In its earliest days, spatial communication among humans probably consisted of combinations of gestural language and signs including; drawings in sand, on trees, and on cave walls (like Lascaux), and simple sculptural work, as with clay.  As the development of pottery, metalsmithing, and paper progressed and as cultures developed writing systems, the issues of how to tell stories in space (particularly on two-dimensional surfaces) encountered and solved many problems of how to convey ideas through pictures and text as those pictures and texts were forced to coexist within a shared space and shared medium. It was natural, but not universal, to divide space into rectangles, so as to provide a natural boundary between narrative and illustration. Nonetheless, in part due to the lack of literacy in the general population, the graphics were often primary, with text providing a secondary role, often helping to explain the graphics, where most of the message resided. In such cases, the text often conformed to the shapes provided by the graphics, rather than vice versa. As seen in figure one, examples from antiquity allowed text to conform to graphics, and in extreme examples, such as the Book of Kells, meaningful elements, both symbols and text, would flow into and around graphics, and those graphics were sometimes not only meaningful, but textual in nature. As seen, (figure one at right), early examples of printing with graphics, still let the shape of the text conform, somewhat to the image, though this became unwieldy given the obvious constraints of the linear flow of metal letters on their supports known as composing sticks [1].

img1 img2 img3
Papyrus circa 1250 BC, Thoth's declaration to the Ennead, based on the weighing of the heart of the scribe Ani [2]. Chi-Rho monogram, circa 800 AD, from Book of Kells [3]. This Biblia Pauperum, circa 1462, or "pauper's bible," is the first known work to combine the woodcut images and movable type [4].
Figure 1 - separation of narrative and illustration using rectangles and other shapes.

img4 img5
Apocalypse, dated 1400-1500. Page of a block book [5]. First incunable with illustrations, Ulrich Boner's Der Edelstein, printed by Albrecht Pfister, Bamberg, 1461 [6].
Figure 2 - separation of narrative illustration using rectangles and other shapes.

As the printing press came to dominate the European world of printing in the 15th century, books were divided into two categories, text based and image based. The latter, known as “block books,” were printed through wood blocks in which the text like the illustration was hand carved. The text, not being formed from movable metal letters, retained the sense that text emphasized and explained the graphics. But with the obvious mechanical constraints introduced by the printing press, illustrations were difficult to insert into the printed page, and so rectangles were reserved for those illustrations, making the illustration subservient to the text [7] [8].

Later theorists, such as Kittler, and even McLuhan, wrote of the “monopoly of the alphabet” introduced and enforced through printing, which largely eliminated the role of the image from society [9]. 

As history  moved through its various evolutions from the early printing press, to offset printing, to digital printing and the web, society has largely maintained this legacy of rectangles of imagery used in an auxiliary manner, to punctuate the, generally, larger rectangles of text.

Historical Ways of Presenting Information

Throughout history, many different sorts of documents have woven elements of meaning and form together in fascinating ways, which often involve the juxtaposition of semantic elements in shapes which are not merely rectangular. These include examples from many domains of expression including illuminated manuscripts, illuminated letters, calligrams, calligraphic arts, word art, typographic puns, symbol arrangements, stained glass, mandalas, coats of arms, currency, mainstream art (including, for example, Native American and modern, such as Dadaism and cubism), software visualization including flowcharts, mind-mapping, posters, album covers, cartoons and even tattoos.  A sampling of some of these examples follows.

What is important to notice about all of these is that
semantic elements, including text, symbols, or meaningful decoration, are placed in space (in ways either meaningful or decorative) without conforming to rectangular boundaries.
Illuminated Manuscripts
Some of the most noteworthy examples of the intermingling of semantic elements with non-rectangular geometry are found in illuminated manuscripts of the early Middle Ages (For example see http://en.wikipedia.org/wiki/Illuminated_manuscript).  Those documents frequently featured highly decorated text interwoven with illustrations.  Oftentimes, the decorations were not merely decorative, but involved meaningful symbols, and in some cases, text, deformed into the contours of other semantic elements. Among the most famous of the illuminated manuscripts is the Book of Kells from Ireland (or nearby islands) dating from about 800 A.D.

img6 img7
Book of Kells -- Chi Rho [3] and detail [10].
Figure 3 - Illuminated Manuscript, Book of Kells


img8 img9
Book of Kells, Principit Matthew [3] and detail [10].
Figure 4 - Illuminated Manuscript, Book of Kells

The tradition of the illuminated manuscript continues today in the work of some contemporary artists. Note how, in the following example (circa 2010) by Sue Symons, text and graphics flow into and around other textual and graphical elements.

img10
Figure 5 - Illuminated Manuscript [11].
Illuminated Letters
Other examples in which geometric shapes themselves have meaning, and in which other meaningful, and perhaps decorative, elements flow into those geometries, are shown in “Illuminated Letters.”

img11
Figure 6 - Gothic letters from illuminated manuscript (ca. 1380) [12].

img13 img14
Modern Example [14]. Alphabet Made from Human Poses [15].
img12
La Grande Danse Macabre [13].
Figure 7 - Other examples of illuminated letters dating from late medieval period to modern times.
Word Art
A curious and diverse collection of modern examples can be seen in various forms of “word art” in which the shaping of words or texts and the meanings of both end up being correlated. Such word art includes things like shape poems, typographic puns, and calligrams.

poems and puns in which the shape of the text helps convey meaning
Figure 8 – Shape Poems, examples of text flowing into shapes that illustrate an idea [16].

Typographic puns were popularized by Playboy Magazine for a time during the 1950’s and 60’s, though there are examples  from many cultures and from many eras, sharing some overlap with the next subcategory, calligrams.

img16 img17
Typographic Puns as seen in "good" SVG viewer. The word TWIST, twisted by SVG/<replicate>
Figure 9– Typographic Puns [17]

Calligrams are often similar to typographic puns and shape poems, but are more generally the placement of letters and words to form pictures. The individual glyphs are often distorted to better conform to the shape.  This differs from shape poems where the positioning of the letters forms a picture. In both cases, the picture is often, but not always, semantically related to the meaning of the text.

img18
Figure 10 – Calligram (Many other examples can be seen here: http://cs.sru.edu/~ddailey/svg/Geometric Accessibility.html): Lion drawn in Arabic Calligraphy [18].
Calligraphy
Islamic calligraphy has long been known for the beauty of its shapes and for the dynamic and non-linear flow of its text. But examples of elaborate flow of text exist in many cultures. We give just two examples here, with a suggestion to the reader to do an Internet search for images displaying “calligraphic art.”

img19 img20
 Turkish Islamic Calligraphy [19]. The Here and Now – Calligraphy [20]
Figure 11– Calligraphic Art Examples.
Symbol Arrangements
It is important to remember that alphabets and other forms of script are not the only types of symbols that contain meaning. As in the Book of Kells and in the religious iconography of many religions, many of the symbols have cultural connotations that provide full-fledged semantics. Oftentimes, as with the Book of Kells, these symbols flow into patterns that are both nonlinear and non-rectangular. Following is a simple illustration of this.

img21
Figure 12 - tree vector art: symbols in the shape of a tree [21].
Stained Glass
Stained glass windows, particularly those of the European churches of the late Middle Ages and early Renaissance, tend to provide excellent instances of the central premise: that symbols, text, and other meaningful elements are arranged into shapes that defy the rectangular partition of the plane.

Following are three examples, two medieval and the other modern.  All show Christian iconography that told stories of saints and the Bible, using icons, often familiar to the worshippers, which identified the participants. (For example, the use of crossed keys to signify Saint Peter, see http://en.wikipedia.org/wiki/Iconography#Christian_iconography).

img22 img23 North Rose of Abbey of St. Denis
Stained Glass Window from Chartres Cathedral [22]. Contemporary Stained Glass window from St. Mary Aldermary Church, London [23]. North Rose of the Abbey of St. Denis, Paris. "Symbolisom - showing God the Creator, surrounded by the Days of Creation, the Order of the Heavens represented by the Zodiac and the Order of Earth as represented by the Labours of the Months. In the corners is the Fall of Mankind [24]."
Figure 13 - Examples of Stained Glass
Currency
That currency is filled with symbols, Masonic or otherwise, has been the subject of speculation, cinema, and conspiracy theory for some time in popular culture. Currency has long carried the combination of symbol, icon, and text to convey meaning about both the authenticity and the value of different denominations.. In both the bill and the coins shown below, we see that the text and icons co-mingle in spaces influenced by one another, rather than by rectangles.

img25
Figure 14 - One dollar banknote, Canada, (1898) [25].

img26 img27 img28
Veiled and diademed head of Concordia right, PAVLLVS LEPIDVS CONCORDIA around L. Aemilius Paullus standing to right of trophy, Perseus and his two sons captives on the left [26].
Central Arabic legends surrounded by Arabic legends; outer frame with five annulets. Islamin Dynasties. Omayyads of Spain. Al-Hakim. 796-822 AD [27]. Coin of the Parthian king Artabanus II (circa 126 BC) [28].
Figure 15– various coins demonstrating non-rectilinear layout
Coats of Aarms
img29 img30 img31
Scan einer Couleurkarte des Corps Marchia Brünn [29]. Escudo Municipio Scure -Zulia – Venezuela [30]. Studentenwappen des Corps Budissa Leipzig zu Passau [31].
Figure 16 – various Coats of Arms displaying non-rectilinear layouts
Cartoons
img32
Figure 17 - "'The Mice are Bburying the Cat,', a 1760s Russian lubok hand-coloured woodcut. It probably originally dates from the reign of Peter the Great, but this impression probably dates from c. 1766; p. Possibly a satire on Peter's reforms, or just a representation of carnivalesque inversion, 'turning the world upside down'. [32]"
Popular Culture
The era of “poster art” in the United States, particularly for the “psychedelic genre” was well known for its fanciful nonlinearity. Three rather prototypical examples are shown here. Note how the distinction between text and graphic is particularly blurred in these, as was quite typical of the genre.

img33 img36 img38
Taking Woodstock poster [62] Jefferson Airplane at the Fillmore [63] Grateful Dead, Otis Rush, Canned Heat [64]
Figure 18 - various posters advertising bands and music concerts

The same tendency can be seen in the album covers of, not only that period, but later as well. A symbiosis between the advertising of concerts and that of the live performances seemed to exist. Again, it is not only text, but other meaningful elements that can leverage the freedom of layouts not based on rectangles. We view this sort of arrangement of meaningful elements as somewhat, but not completely, differentiable from the standard rules of aesthetics which tended to govern the balance and composition of Renaissance painting.

img39 img40 img41
album cover: Michael Jackson's Dangerous (1991) [33] detail of left picture [33] album cover: Beatles' Revolver [34]
Figure 19 – album covers of various artists
Software Visualization and Flow Charts
Since the early days of attempting to visualize the interconnections of complex entities like software, various shapes such as diamonds have been used to represent semantics. However, what is most relevant to the signification of the geometry is not the choice of how the nodes or leaves are portrayed, but the nature of the spatial connections between those nodes. Certain diagrams, as argued later, simply do not lend themselves to rectangles, but require more flexible partitions of the space the artist has to work in.

img42
Figure 20 – A Guide to Navigating NPR’s Top 100 Science Fiction and Fantasy Books [35].

img43
Figure 21 – UK Energy Flow Chart [36].

img44
Figure 22 - Euler diagrams - Dwyer (2012) [37].

In the last example, we are given an instance of how certain researchers at Microsoft Corporation have been using Euler diagrams, rather than the conventional flowchart to help visualize interrelations between parts of complex software projects. This particular example is applied to a Shakespearean play, illustrating the breadth of applicability of such approaches as well as the spatial complexity needed in order to present these interrelations.
Mind Mapping and Thought Mapping
In the last part of the 20th century, a certain way of presenting the interrelations between concepts became popularized: “mind maps.” While such a technique is claimed to have examples dating back to Leonardo da Vinci and to the much earlier Porphyry of Tyros, 3rd century BC [38], the concept definitely shows popularization following the revolution in cognitive science emanating from work of Alan Collins, M. Ross Quillian, Marvin Minsky, Donald Norman, and others who used semantic networks to describe and mimic the human learning process during the late 1960’s and 1970’s. A British popular psychologist Tony Buzan seems to be the first to use the actual term in 1974. The popularization of the concept of the hypertext, and software that allowed the creation of hypertexts in the 1980’s, such as Jay David Bolter’s Storyspace, and Apple Computer’s HyperCard, certainly served to put that sort of thinking into the collective zeitgeist.

img45
Figure 23 - Mind Map (circa 2012) [39].

That others had experimented with such concepts is apparent from this diagram drawn in a notebook in 1972. It is an experiment in which the author played with thought-mapping rather than mind-mapping, and it was around that time that my fascination with the topology and graph theory of ideas came into being.

img46 
Figure 24 - Thought map: Experiment in Writing (1972) [40].
Maps
Maps have always attempted to marry semantics with geometry in the effort of fitting symbols, words, and pictures into a geometry that bears some resemblance to a particular theory of the shape of the world. Over time, the theory of that shape may change and certainly the concepts of which are the most important aspects of social and economic infrastructure will change. Contemporary attempts to project the earth’s spherical surface onto planar drawings that minimize Euclidean distortion have undergone continued re-evaluation through experimentation and theoretical advances. Certainly however, the development of the cartogram (see http://en.wikipedia.org/wiki/Cartogram for more information) in which the Euclidean correspondences between latitude and longitude of places with their placement is made secondary to other variables, such as population density, have challenged contemporary notions of what matters most in mapping. That words, symbols, and pictures flow into non-rectangular shapes has been a persistent hallmark of the map as a communicative device. That the world should be drawn as a circle, or that a country should be shaped like a lion, or that departures from Euclidean realism should be minimized, are all theories of space that affect how labels and symbols for things and their meanings should flow together in our maps. The Mappa Mundi of the European Middle Ages frequently reflected a belief that the world was intrinsically circular, perhaps with Jerusalem at the center and heaven at the top, and that the proximities between physical places on the earth might be less important than spiritual distances.

img47 img48
Eberstorfer Stitch (ca. 1300)  Detail of Eberstorfer Stitch 
Figure 25 - Above are examples of Mappa Mundi. The specific Eberstorfer map "was attributed to Gervase of Tilbury at around 1234 for some time; newer comparisons date the original image into the year 1300 and no longer to that person. [41]."

By the time of the Renaissance, perhaps in part due to the discovery of the “New World” and circumnavigation of the earth, an insistence on correlating map distances with terrestrial distances seems to have become the norm. That a person should be able to put a ruler on a map and use that distance to estimate city to city travel times seemed to be a part of this exploration-conscious era.

img49 img50
Figure 26 – (left) the Netherlandic Lion, a popular design of the countries Netherlands, Luxembourg, and Belgium and (right) detail [42].

By the time of pre-Haussmannian Paris, discussed in greater detail in a later section, and with the advances of engraving, maps had become highly realistic in the geometric sense of correlated distances. The symbologies of text, buildings, roads, rivers, and even gardens had grown into the quite expressive language of what most now recognize as modern cartography.

The map below by Louis Brion de la Tour is described thusly:

An extraordinary map of pre-Haussmann pre-Revolutionary Paris and the early Faubourgs (suburbs) issued in 1780, during the final decade of the French Monarchy. Covers Paris on Both sides of the Seine from the Ecole Militaire to the Hôpital de la Roquette, extends north as far as Montmartre and south roughly to Les Gobelins. Produced at the height of French dominance of the cartographic arts, this map is a masterpiece of the engraver's art. Individual buildings, fields, streets, hills, valleys, orchards, and public gardens are revealed in breathtaking detail. We can even see the incomplete state of the northern wing of the Louvre Palace. There is an elaborate street index on either side of the map. An allegorical, neoclassical title cartouche featuring war trophies appears in the upper right quadrant. This type of map, known as a pocket or case map, is designed with the traveler in mind, and while it displays beautifully unfolded, is designed to fold and fit in a vest or coat pocket. It accordance with its purpose the map has been dissected and mounted on linen in 24 sections. This system was devised in the 18th century to protect folding maps against damage caused by repeated folding and unfolding. The linen backing absorbs the stress of folding and can easily be mended or replaced, thus preserving the integrity of the actual paper document. Folded this map fits into a beautiful brown tooled leather slip case, which is included [43].

img51 img52
Figure 27 – (left) Map of Paris from 1787, designed par Louis Brion de la Tour and (right) detail [46].

That the semantic elements of a map are bound to regions other than rectangles, is so obvious that many of the architects of the modern web seem to frequently neglect this most obvious of use cases for non-rectangular flow. Not only do words conform to their containers, streets, rivers, and parks, but the semantic elements marking buildings and the like expand to fit the geometry of their surround in a fashion dictated more by semantics than by photorealism.
Art (Plain and Simple)
The fact that the world’s art does not flow into rectangles is just as self-evident as the case with maps. What might not be apparent at first glance is just now much of world art has relied on the flow of meaningful symbols into artistic divisions of space. We present several examples without explanation, just to illustrate, once more, the basic premise that rectangles are not always the best containers for our human ideas.

img53 img54
Figure 28 – (left) Monolith rock of the sun and (right) detail [44].

img55 img56
Figure 29 - (left) Book Jacket: "Looking at Indian Art of the Northwest Coast" [45], (right) Book Jacket: "Primitive Art" [46].

img57
Figure 30 - Amitayus Mandala [47].

img58 
Figure 31 - Yellow Submarine -- derivative art [48].

img59 img60
Figure 32 - (left) kleine Dada Soir Theo van Doesburg, Poster Kleine Dadasoirée Haagsche K.K. [proof], December 1922 - 10 January 1923, Lithography [49]. (right) Evening of the Bearded Heart, Zdanevich (1923) [50].

img61 img62 img63
Air Man Space [51] The Aficionado [52] The(a)mes: Market [53]
Figure 33 - Cubism as meaningful (non-rectilinear) vectors

The Web and Rectangles

While many forms of expression, both historical, modern, and across many cultures, have flowed into shapes that are numerous and non-rectangular, it is certainly the case that the printing press, with its primary emphasis on text and secondary emphasis on graphics, serving as auxiliary illustration, relied on the rectangle for typesetting. When graphics were sprinkled in to text, rectangles to contain them were set aside, for the ease of aligning parallel lines of typed characters.

Likewise, a few centuries later, as the hypertext came into being (see http://en.wikipedia.org/wiki/Ted_Nelson) the computer and the internet were the natural media for delivery.  The confluence of programming ease and the historical conventions of printing, made the CSS box model a natural, albeit stifling, choice for expressive convention. It was particularly believed, in the conventional model of the web, that the following three things were all distinct, separable, and orthogonal, and that their separation, like cats, dogs, and humans, was somehow predetermined, almost as if by a higher being:

Had HTML, containing a very dominant T as its second letter, been the only way to offer human expression on the wondrous medium known as the Web, then the world might have been content to presume that this trichotomy was, in fact, valid. Alas, for the conventionalists, SVG gained traction and the distinction between these three inviolable domains becomes blurred, at best. Briefly, the three aspects of the meaning, form, and behavior of expressions are sometimes inextricably intertwined, not only in the ongoing progress of human expression, but SVG happens to allow those expressions to occur in ways which better preserve, for the sake of various kinds of accessibility, all three.

Rectangles as containers of content have been perpetuated on the web out of simple conformity with historic traditions of the printing press, out of the fact that it is easier to write programs to flow text and graphics into rectangles, and out of the simplified, albeit flawed, notion that presentation and content may easily be separated. It sort of worked with HTML. It most certainly does not work for more general expressive content.

Interestingly, Ted Nelson, the creator of the term “hypertext” has also written:

"Hierarchical  and sequential structures, especially popular since Gutenberg, are usually forced and artificial. Intertwingularity is not generally acknowledged—people keep pretending they can make things hierarchical, categorizable, and sequential when they can't [54]."

From a mathematical perspective, there is no reason to presume that all ideas can be expressed within two dimensions, let alone three. Our physical world is intuitively three-dimensional, with movements in those three dimensions over time, presenting richness that is hard to convey in a static canvas, even if that canvas is three dimensional. Indeed, the mere concept of five things mutually interconnected, known in graph theory as K5, the complete graph on five nodes, cannot be diagrammed, without overlapping edges in two dimensions per Kuratowski’s Theorem [55]. In contrast, four mutually connected entities and their connections can be drawn in two dimensions, though there is no way to draw such a relation if all of the regions to be connected are rectangles (for illustration see http://cs.sru.edu/~ddailey/NonRectangles/Rectangles.html).

If we consider that the reason for placing things near one another in space has to do with semantic proximity (with maps this seems a reasonable constraint for expressions to be understandable), then semantic necessity sometimes dictates that things should not be rectilinear (That the topology of ideas is relevant as an intrinsic part of their visual representation is given support in this article by Steven Pinker:
http://pinker.wjh.harvard.edu/articles/papers/Pinker%20A%20Theory%20of%20Graph%20Comprehension.pdf)

Paris

In the mid-19th century Napoleon III presented Georges-Eugène Haussmann the opportunity to redesign Paris. Haussmann transformed it from a medieval city with poverty, poor drainage and sewage systems, and a well-known predisposition to revolutions, into a modern city with wide boulevards connecting its monuments and facilitating transportation along both avenue and train (as the Paris revolt of 1871 demonstrated (cf. http://en.wikipedia.org/wiki/Paris_Commune), the Parisian fondness for revolutions was not ended by Haussmann’s redesign efforts). The familiar appearance of a city that now greets film-makers and tourists alike was forever changed by Haussmann’s enormous undertaking in urban planning. The transformation was so sweeping (and costly) that historians refer to Paris as either pre-Haussmannian or post-Haussmannian. Haussmann no doubt took some of his inspiration from Pope Sixtus V’s redesign of Rome three centuries earlier. That plan, though less far-reaching, likewise consisted of the construction of several straight linear avenues cut through medieval neighborhoods previously composed of winding narrow passageways that circumnavigated historic tracts of real-estate, occupied by buildings that had crumbled and been rebuilt uncountable times on the same footprints over the centuries.

J. C. Moughtin, Professor Emeritus of Planning, writes:

"The  straight street is associated with axial city planning in addition to gridiron planning. Two outstanding examples of axial planning are Rome, as laid out by Sixtus V, and Paris, as planning  by Haussmann for Napoleon III.  Sixtus V was concerned to develop a structure of paths along which pilgrims could move freely from church to church. The great processional routes established by Sixtus V set the pattern for much later architectural development and heritage which remains today. Haussmann, too, was concerned with movement, but in this case it was a concern for the rapid movement of troops to keep order in the city. The plans Haussmann prepared have also left a great heritage of city street design [56]."


img64 img65
Detail of Street Map of Paris [57] Google Maps section of Paris [58]
Figure 34 - Paris: (left) pre-Haussmann and (right) post-Haussmann, showing how the nature of its lines changed.
Controlling Geometry
Haussmann’s redesign of Paris had several objectives: improvement of traffic, reduction of squalor and disease, creation of public parks, and improvement of infrastructure such as sewage and aqueducts [56]. At the same time, the redesign allowed better municipal access by police and maintenance workers. Many argued that it made the task of preventing revolutions easier, by making it harder for crowds to erect barricades, and easier for the armies to fire artillery without risk to property or harm from friendly fire. Both Haussmann’s and Sixtus V’s forays into urban planning can be seen as attempts to bring control to an otherwise unruly situation.

It was in Paris, in 2010, while attending a workshop on the control of font families through collections of parallel lines, when I was struck by how the tyranny of the rectangle controlled not just layout, but even those glyphs that authors of texts cast into those rectangles.  Paris, with its non-rectilinear layout, seemed just the right metaphor.  That premise has been a central hypothesis of this work.


While a user interface for controlling rectangles can be provided by “table wizards” which before the ascendancy of CSS, were an essential tool for controlling web layout, perhaps some other interface could be designed which would allow the easy control and manipulation of lines that might control both layout and typographic design! In particular, it was realized, a large set of lines may be controlled by a small set of the circles to which those lines are tangent.

Ways of Controlling Lines (Tangents to Circle)

Table wizards, implemented by companies such as Allaire, Microsoft, SAS, Adobe, and Macromedia, have been used since as early as 1995 to control the layout of rectangles supported in the web, using HTML <table> or CSS. They provide a GUI that simplifies the partition of the browser window into a flexibly defined set of rectangles. It is natural to ask if this functionality is somehow intrinsic to rectangles; merely convention, based on centuries of practice with printing, or ease of programming that has kept CSS, and hence the web, locked in these barely post-medieval rectangles.

Table wizards gave authors a simplified GUI for the control of rectangular web geometry, writing the somewhat difficult rowspan and colspan attributes in the HTML table code for us.  As the “tyranny of the rectangle” has ingrained itself both in standards and thence in people’s thinking, it is not clear that the functionality of the HTML table as a layout convenience has yet been matched by the zealously ideological CSS, though I have heard rumors that it has been, if one is willing to obtain an advanced degree in CSS.

The appearance The HTML
img66 <table border="1" cellpadding="2" cellspacing="2">
    <tr>
      <td></td>
      <td></td>
      <td rowspan="3"></td>
      <td rowspan="2"></td>
    </tr>
    <tr>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td rowspan="3"></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td colspan="3"></td>
    </tr>
    <tr>
    </tr>
</table>
Figure 35 - A complex partition of a rectangle using colspan and rowspan.

Most modern software seems to enable complex rectangular partitions through the slightly more tedious splitting and merging of cells, which while manageable, is not quite so convenient for the more complex designs!

However a simplified GUI that allows flexible partition of space into polygons might also be had from the use of either Voronoi diagrams or line arrangements.

img67
Figure 36 – Voronoi Diagrams (left) and line arrangements (right)

Either could be seen as potentially valid partitions of the plane, perhaps appropriate in slightly different contexts.  The natural interface for producing Voronoi diagrams is given by their definition: a set of n polygons corresponding to a given set of n nodes such that, every point interior to a given polygon is closest, in Euclidean distance, to the node corresponding to its polygon [59] (the interface arising naturally from this, using SVG, JavaScript, and D3 may be seen at http://cs.sru.edu/~ddailey/voronoi.html).  To generate the a maximum of n(n+1)/2 +1 polygons associated with n lines, one merely needs to provide 2n actions, given as mouse clicks at two locations, to specify the n lines, however even more efficiency of interface to output may be realized from the following remarks about the lines tangent to a set of circles.
Historical Construction of Tangent Lines
Euclid’s Proposition 17 of Book III of The Elements constructively proves that given a circle and a point outside that circle there are two lines tangent to the circle that pass through the point [60]. It is likely that Archimedes and his students were aware of a method for constructing lines tangent to both of two circles, since one of Archimedes' students, Apollonius, resolved the issue of how to construct the eight circles tangent to each of three given circles.  The technique is demonstrated in the 1888 work of John Casey [61].

img68
Figure 37 – An excerpt from the work of John Casey [61].

Likewise, in the case that the two circles are disjoint, the other three tangent lines may be similarly constructed. In the software we describe in this paper, called Tansy (from its use of tangents to pairs of circles), we call the two circles formed about the point P with radii, respectively r1=radius(AEB)-radius(CDF) and r2=radius(AEB)+radius(CDF), “ephemera” and allow the display of many of these ephemera within the software. The construction proceeds as follows:

img69
Figure 38 – Screenshot from Tansy, described in detail below.

The circle PLQ (red) is constructed centered at the midpoint of PQ and passing through both P and Q. Points H, J, K and L are constructed where the “difference circles” (blue) and the red circle meet (solving the two simultaneous quadratics for the intersections of two circles).  The segments QH, QJ, QK, and QL are constructed.  Next:

(1)    EF, parallel to QH, is constructed at a distance r1 from QH. It forms a segment from which the line 1 is constructed.
(2)    OR, parallel to QJ, is constructed at a distance r1 from QJ. It forms a segment from which the line 2 is constructed.
(3)    TS, parallel to QK, is constructed at a distance r1 from QK. It forms a segment from which the line 3 is constructed.
(4)    NM, parallel to QL, is constructed at a distance r1 from QL.  It forms a segment from which line 4 is constructed.

The line segments, once constructed, are then extended until each meets the bounding box of the screen’s edge. Additionally, the interior lines, those crossing one another between the two circles to which they are tangent, are stored within the program in an array called “Inner,” and the exterior tangents are called “Outer.” These two classes of lines may be hidden or made visible as per the user’s choice.
Moving Lines
During the early phases of our project we had created an interface that allowed lines to be drawn, free of the circles. In this simplified interface, each line was drawn with a mouse down event at (x1, y1) and a mouse up event at (x2, y2). The line segment, thus constructed, was extended as a line, until it met the edges of the screen.  Furthermore, lines could be dragged by selecting any point on the initial segment. Each of the endpoints also was used as a pivot point, such that the line could be rotated about that point by selecting a segment between the pivot points and the screen’s edges. Currently when the user exits the “circles mode,” the initial circles are hidden and the lines are thickened so as to allow the selection of a line by a mouse down event. Once selected, the line may be rotated. In a future improvement, we seek to recreate the previous interface by creating a pair of natural pivot points, probably based on the circles that defined the line originally. 
Finding Intersections and Segments
Determining the place where two lines meet is trivial, since the equations of both lines are known. We calculate the n(n-1)/2 intersections of the n lines, taking care not to when two lines are parallel, using doubly nested loops. It is important to realize that the lines, are labeled (and hence remembered) in the order in which they were drawn. This is not an order that presents any geometric intuition about whether a line’s intersection with another line, will lie to the left of or the right of, for example, its intersection with a third line. The ID’s of the lines contain information, merely about when the line was drawn, not where the line is located.  The implication for this is that knowing, for example, in the illustration below, that the points (4, 7) and (6, 7) form a line segment while (4, 7) and (5, 7) do not, requires more computational logic than might, at first glance, be obvious. It is the process of determining the connectivity or adjacency of the intersection points of one chosen line with two others that is the meat of this particular process.

img70
Figure 39 – Screenshot from Tansy after exiting “circles mode” showing intersecting lines and the segments formed.

The collection of all line segments is found by taking the union of all lines, including the four lines on the edge, into an array called “Relevant.”  Either Inlines or Outlines may be excluded from consideration. Each line in Relevant is then investigated sequentially by function "linearOrder()." "linearOrder()" takes each line it is passed and forms a collection of all points at which that line intersects all others in Relevant, so long as those intersection points fall within the boundary of the screen. It also orders those points from left to right, by merely sorting a line’s intersection points on the x-variable, assuming that no line is perfectly vertical. As a result, the line’s points of intersection are then collated in a proper sequence.  A line’s segments may then be identified by merely grouping pairs of consecutive points. 
Once the user clicks on either “Segments” or “Polygons” a complete list of all line segments is provided to the program for later purposes.
Segments as Drawing Elements
Our treatment of line segments has relied on the basic premise that a collection of line segments is not merely a drawing, but an infinite collection of potential drawings. We may conceptualize a basic shape generated by a collection of line segments as a glyph, known also as characters or sprites, which may ultimately be reshaped by adjusting the underlying geometry of the original line arrangement. That is, line segments that are collinear should remain collinear even as the geometry of a scene is modified. Likewise, the preservation of relative orientation, such as the notion that the curve of the letter P should remain in similar proximity to the upright of the letter, regardless of the stretching or deformation of the glyph is intrinsic to our design of this part of the program. Specifically, we seek to define not just a drawing but a class of drawings in which relationships between elements are defined by an underlying geometry. In the World Wide Web of the future, users should be able to tweak not merely individual characters within a font family, but to apply, with a shared and simple interface, global modifications to the entire collection of glyphs within the family. One should be able to define not merely, a set of states through which a shape, like a sprite, transforms over time, but the ways in which that shape conforms to its surround and to the other shapes around it.
The Selection of a Collection of Line Segments
Once the segments of a line have been identified, as described earlier, they may be displayed by toggling the “segments” check box.  One can then select any of the highlighted line segments; they turn red on mouse over events and black when clicked. If a black, selected, line is clicked a second time it is deselected and its color returns to its original randomized value .

Also, as the number of line segments along a given line can be large, the program allows that if two non-contiguous segments along the same line are chosen directly after one another, then all segments between those two are also selected.

Selecting line segments to make a glyph 
Figure 40 – Screenshot from Tansy showing selected line segments, this is the beginning part of glyph formation.
Sets of Segments as Glyphs
The glyph editing part of Tansy is quite the fledgling at present, but it displays an example of the sort of functionality we expect it to have.

Once a collection of segments has been selected, then the user may store that collection as a glyph by clicking “save” and then the appropriate letter of the alphabet, currently just the 26 characters of the Roman alphabet are supported. Additional shapes may then be selected and stored.  Each shape is transformed, through rescale and translation, so as to fit exactly into the bounding box reserved for it by that character of the alphabet.

At any time, after a collection of segments has been saved as a glyph, the glyph may be edited, by opening the glyph editor.

Placing a segment collection into a character
Figure 41 – Screenshot from Tansy showing the Glyph editor

By choosing the “adjust” mode, any glyph can then be opened so that its control points, the end points of its line segments, may then be modified.  The following conversion types are currently supported; linear to quadratic, cubic, or join.  Join allows the path resulting from the glyph to retain the control points given by the underlying line arrangement, but the nature of how the glyph responds to those control points is then modifiable.

img73
Figure 42 – Screenshot from Tansy showing the adjustment of a glyph before adjustment

For example, in the above glyph, we will modify the “tip of the P” – the bottom rightmost control point modifying it from linear to cubic.

img74
Figure 43 – Screenshot from Tansy showing the adjustment of a glyph after adjustment

Finally, the glyph may be rotated and “bloat wrapped” so that the glyph, even as reshaped by the change in status of the nature of its control points (from, for example, linear to cubic), still fits the bounding box reserved for it:

img75
Figure 44 – Screenshot from Tansy showing the adjustment of a glyph after all adjustments


To demonstrate that this technique can indeed work for defining an entire font-family, which could then, in theory, be reshaped in numerous ways by redefining the underlying geometry, following is an illustration of the drawing, completed in less than 10 minutes of 26 letters, using merely four control lines. Clearly, a font family drawn with more control lines could have greater expressive nuance associated with it.


img76
Figure 45 – Screenshot from Tansy showing a completed font family using just four control lines

Finding Polygons

As described above it requires a bit of computational work to find the adjacencies (or linear ordering) among the intersections of a line with other lines.  Likewise, discovering the polygons created by a line arrangement is not as easy as it might seem, at first glance. In both cases, the massively parallel architecture of the human visual system makes both tasks seem trivial.  

The polygons are clearly composed of the line segments found as described earlier.  These segments are stored as a large array, called "SG," later processed by function "polyFind()" which finds the polygons.  The function starts by moving along a line until it finds an intersection, easily found because all of the segments start and end at intersections.  At the end intersection, all four segments leading from that intersection are “oriented”, meaning that their angles (from zero to 360 degrees) are evaluated so that we may choose to take either a right turn (if one exists) or a left turn.  This clockwise (or counterclockwise) traversal is continued until the sequence of right (or left) turns leads back to the start node. At that time, a loop has been traversed and a convex polygon has been located. The polygon is then stashed atop an array.

This approach is successful in that it finds all polygons created by the combination of visible tangential lines.  It does require an adjustment since each n-sided polygon is found as many as 2n times, twice for each of its vertices, since the polygon may be traversed beginning at any of its vertices and may be traversed either clockwise or counter-clockwise from each.  Each duplicate polygon must then be identified and not rendered.
Recognizing When Two Polygons are the Same
For each n-sided polygon on the screen there are up to 2n different versions of the polygon found, so a process to isolate only one instance of each polygon must be employed.

img77
Figure 46 - Above image shows one six-sided polygon.  This polygon is initially found six times, once for each vertex.

There are two methods that are used for reduction of polygons: canonical and sort.  The function canonical does most of the work in removing the repeated polygons.  function canonical rotates each polygon until it begins with the lowest node index.  Once all of the polygons begin with the lowest node index they may be compared with the other n-sided polygons.  Most of the duplicate polygons are discovered within this method.  The polygons are then run through a JavaScript built in sort to ensure they are in the correct order, doing this ensures that canonical worked correctly and that anything missed by canonical is correctly indexed.  When running canonical alone the polygons on the outer edge of the screen were each rendering twice so the use of sort was added to the preexisting code in order to make up for this.  At this point each proposed polygon can be compared, and only unique polygons are created.
Filling Polygons with Color, Gradients, or Imagery
Once the polygons are found, they then can be filled with content.  In breaking the rectilinear mold the eventual goal would be to support all of the features currently supported by HTML in order to create a viable replacement to the box model.  In that sense we need to be able to fill a polygon with color, images,  text, and hypertext.  Text will be covered in the next section of this document.

There are two ways to fill a polygon with imagery: "global" and "local." In local fill, the image is resized to match the size of the bounding box of the polygon.  The image is then clipped so that only the portion within the polygon is shown.

img78
Figure 47- An image of San Francisco using local fill

Global fill mode sets the size of the image equal to the size of the screen and then only displays the portions of the image that the user selects.

img79
Figure 48 - An image of San Francisco using global fill.  Notice that an almost identical portion of the image is shown using multiple polygons as Figure 40 is shown using a single polygon.

There are also three different sources from which Tansy allows the user to choose an image:
Implementing the last of these techniques was the trickiest, since the new file upload mechanisms of HTML5 allow for dynmic access to local drive space through window.URL.createObjectURL( )  using code including these lines:
	var img = document.createElement("img");
img.src = window.URL.createObjectURL(files[0]);
IS.setAttributeNS(xlink,"xlink:href",img.src)
Allowing these locally served images to be included in the user's saved work, given the lack of availability of the full path name, requires that the user's images must be saved in a predefined directory (currently,  the same directory into which Tansy's output will be saved).

Similar to the way that images can be flowed into single and multiple regions, so too, can color and gradients be flowed into the same regions.
Since the polygons have been discovered and rendered as SVG paths, filling with color or gradient is trivial. Currently, we use random colors and random gradients, though a color picker and a gradient designer would be nice future additions.
Filling Polygons with Text
Currently there is no <textarea> contained within the SVG specification.  (Two companies decided not to implement the SVG1.2 standard which had compelled it, opting instead for the watered down SVG 2.0 that is not yet accepted). This leaves the process of flowing text into an arbitrary shape to the programmer.  This is accomplished through Tansy's function textFit().  The function takes two parameters: an SVG path element and the text.  The path element represents the polygon and must be separated into the coordinate pairs that represent the vertices of the polygon. The d attribute of the path is parsed and the path is transformed into coordinate pairs. From there, finding the left and right edges of the polygon, working downward vertically from the vertex of lowest value on the y axis, is how the left and right boundaries of the text flow at a given height can be found.

After the path is transformed into coordinate pairs the highest point, the point with the lowest y-value, is found and stored.  If two points share the lowest y-value the point with the lowest x-value is selected as the highest.  Simultaneously, the lowest point is found, the point with the highest y-value, and stored.  If two points share the highest y-value, the point with the lowest x-value is selected as the lowest point.  After finding these points, the other points are sorted into arrays depending on whether they fall to the left or the right of the highest point, though this is not always correct and the points are re-sorted into left and right at a later point.  The lowest point is then added to both of the arrays.  At this point we are able to traverse from the highest point to the lowest point in two separate directions without repeating any of the points. 

Starting with the highest point in the polygon and moving through the coordinates, a set of intermediate points is generated along each line segment.  Then, using the font size of the text, a series of points along each line segment is also generated, keeping only the x-value.  This process is repeated until both arrays, containing the points left and right of the highest point, are exhausted.  During the creation of the intermediate points, the x-values are put into arrays that truly correspond with the left and right side of the polygon.

Next, the text needs to be broken down into an array of individual words in order to facilitate a text wrap feature.  We take the two arrays of points and create a text object from the left to the right.  The words are placed into the text object one word at a time.  After each word is placed the bounding box of the text object is compared to the right coordinate of the intermediate points.  Once the bounding box is greater than the right point, the text object is appended to the page.  The word that causes the overflow is returned to the head of the array containing the words.  At this point, a new text object is generated, using the next left point as its starting x-value.  The starting y-value is calculated using the font size.  This process is repeated until the array of words is empty or there is no more room within the polygon.
Saving work from Tansy
In order to save one's work, the current state of the SVG document, including polygon coordinates, fills, clipPaths, images (locally stored or remotely served) and the like, must be serialized. The current version of the SVG DOM, as Tansy is used to build a page, is  maintained internally by the JavaScript of Tansy. That internal version and the DOM appropriate for a stand-alone document are slightly different, owing to event handlers, the way in which  the polygons themselves are handled, the amount of JavaScript needed in the saved version (clearly less than in the drawing environment that Tansy provides).

This work is done inside a function  , which uses
	var oSerializer = new XMLSerializer();
var XML = oSerializer.serializeToString(object);
on instances of object that correspond to several of the drawn layers of the active document: the Polygon layer, the Images layer, and then adjusts the resulting DOM to account for considerations such as whether or not Inlines and Outlines are both visible and the fact that in the current version's text handling, more tspans are used than would be desirable for subsequent hand-editing of the resultant SVG. An example of a "live" webpage, saved from Tansy and used for the promotion of The Graphical Web 2014 is illustrated below:
Output from Tansy used for Promotion of TGW2014
This page's SVG output required perhaps two hours of tweaking of the exported SVG code, to get images properly aligned and to provide working links to other web content. Other examples (as screen images generated before the export functionality was added) can be seen here.

The Current Version of the Software

The reader is directed to our most current working version of the software at http://cs.sru.edu/~ddailey/fonts/Tansy1.7.4.htm.  Additionally, however, we are inviting contributions to the project through github at this address. Brief instructions on how to use the software can be seen at http://cs.sru.edu/~ddailey/Parisien.html.

It is also an open source project, currently on Github, so the reader is also encouraged, invited and urged to contribute. It's a fairly complex set of routines to handle all the various aspects of geometry and help is actively sought from those who like geometry, SVG and nonrectilinear molds!


Future Directions for Tansy

Several parts of this project were completed only partially, as a proof of concept. We hope the reader’s experimentation will provide just the proof  we are hoping for. However, there are some known bugs and several things we hope to improve and expand in future editions of the software:
  1. Development of a user guide. The current interface is not intuitive and the user will need help in figuring out what to do. It is on the agenda!
  2. Making it so that as circles (and lines) are relocated, polygons and glyphs automatically adjust. That is, we wish for the textual and imagery fills of polygons to be reflowed, as well as the shape of the glyphs, following the user's adjustment of the geometry (by moving circles around after the polygons have been fillled. There are several issues here, including anticipated speed problems associated with dynamic re-rendering based on mouse events, and the very thorny issue that as lines move, polygons not only change shape and size, but sometimes, disappear altogether since one line might be repositioned to the other side of a particular vertex!
  3. Improved text flow. Currently, the lines of text as flowed into polygons sometimes misrepresent the places where those lines intersect the left and right edges of some polygons. Also, owing to oddities with cross-browser handling of how <tspan>s are measured, each line is currently a <text> and each word within the line is a <tspan>. Ultimately, each polygon should have only one <text> element, with each new line being represented by a single <tspan>.  When serialized, this adjustment to the SVG DOM is made after the fact, prior to saving the usesr's work.
  4. Allowing for user-defined text to be flowed into polygons. This should not be too difficult, with some prototypes of the functionality having been built. One idea would be to create a floating i-frame with dimensions equivalent to the bounding box of the selected polygon.
  5. Improved glyph editor. The glyph editor, allowing redefinition of the coordinates of a glyph as either linear, quadratic, cubic, or “joined” (to allow merging of collinear nodes), are slightly buggy and not intuitive. This part of the project needs to be refactored.
  6. Importing of existing fonts. We would like to be able to take an existing font and have it bloat-wrapped to fit an existing line arrangement. From there, one would be able to use the controlling circles to simultaneously modify the entire font family.
  7. Improved choice of colors and gradients. Currently, colors and gradients used to fill polygons are given random colors. Incorporation of a color-picker as well as a gradient design tool, would reduce the amount of hand-editing once a document has been exported and saved.
  8. Improving the movement of lines. Currently lines may only be rotated (about one of their control points). Dragging lines as well as allowing rotation about the other control point should be enabled.
  9. Deletion of lines and circles (and corresponding recalculating of intersections, segments, and polygons).
  10. Merging of adjacent polygons. It would be nice to be able to remove the line segment that separates two polygons so as to merge those two into one that represents the union of both regions. While this should not be too difficult to do, it does raise the question of how to flow text into areas that end up with concavities after such merging, which is certainly a possibility. I believe the issue of flowing text into non-convex polygons has not yet been specified by W3C's various working groups.
  11. Allowing for ovals rather than circles to be used. This could prove useful since when one of the lines of a line arrangement is moved.  It is likely that no pair of circles conform to all four tangent lines. Defining the ellipse tangent to four given lines, appears to be a complex problem, however.
  12. Using github more effectively to stimulate contributes to Tansy from a wider community.

Works Cited

[1]     Wikipedia, "Composing Stick - Wikipedia, the free encyclopeida," [Online]. Available: http://en.wikipedia.org/wiki/Composing_stick. [Accessed 1 September 2013].
[2]     Wikipedia, "Thoth's declaration to the Ennead, based on the weighing of the heart of the scribe Ani".  From http://en.wikipedia.org/wiki/Papyrus_of_Ani. [Accessed August 2014].
[3]     Chi-Rho. from J. H. Todd, "Descriptive Remarks on Illuminations in Certain Ancient Irish Manuscript," Nichols and Sons, London. [Accessed August 2014].
[4]     J. Norman, "The First Combination of Text and Illustrations in One Printing Forme (1462-1463) : From Cave Painting to the Internet". Available: http://www.historyofinformation.com/expanded.php?id=2784. [Accessed 1 September 2013].
[5]     Wikipedia, "Page from the Apocalypse, a block book printed in Europe between 1450 & 1500" taken from "File:Apocalypse.jpg - Wikipedia, the free encyclopedia"  [Accessed August 2014]; original source.
[6]     Ulrich Boner, Der Edelstein First incunable with illustrations. Printed by Albrecht Pfister, Bamberg, 1461from Wikipedia: "Incunable - Wikipedia, the free encyclopedia"
[7]     Wikipedia, "Printing press, Wikipedia, the free encyclopedia," [Online]. Available: http://en.wikipedia.org/wiki/Printing_press. [Accessed 1 September 2013].
[8]     J. Norman, "Integrating Illustrations into the Printed Text (Circa 1460 - 1490) : From Cave Paintings to the Internet," [Online]. Available: http://www.historyofinformation.com/expanded.php?id=2815. [Accessed 1 September 2013].
[9]     F. A. Kittler, Literature Media, Ney York: OPA (Overseas Publishers Association), 1997.
[10]     Chi-Rho monogram, Book of Kells. Wikipedia, http://upload.wikimedia.org/wikipedia/commons/e/ee/KellsFol034rChiRhoMonogram.jpg as seen at http://en.wikipedia.org/wiki/Book_of_Kells  . [Accessed 1 September 2013].
[11]     Photograph of Diptych by Sue Symons. [Art]. Original on Display at Bath Abbey, England, Photo by Author. 2012.
[12]     G. Grassi, "Il Taccuino di Giovannino de' Grassi, edizione in facsimile.," Codices Illustres, [Online]. Available: http://www.codices-illustres.it/catalogo/giovannino_de_grassi/. [Accessed 1 September 2013].
[13]     T. Weynats, "Early Visual Media Archaeology," 2003. [Online]. Available: http://www.visual-media.be/photography.index.html. [Accessed 1 September 2013].
[14]     Mondo, "MONDOmagazine," [Online]. Available: http://mondomagazine.net/. [Accessed 1 September 2013].
[15]     Alphabet Photography, "Human Alphabet by Alphabet Photography Inc," [Online]. Available: http://www.alphabetphotography.com/human_alphabet.aspx. [Accessed 1 September 2013].
[16]     D. Dailey, Artist, Google Search Shape Poems. [Art]. Online, 2011.
[17]     D. Dailey and D. Whitfield, "SVGTextAccessibility," 2011. [Online]. Available: http://cs.sru.edu/~ddailey/svg/GeometricAccessibility.html. [Accessed 9 September 2013].
[18]     H. Macura, "Discovering the Art of Arabic Calligraphy," Arabian Gazette, 21 August 2012. [Online]. Available: http://arabiangazette.com/discovering-arabic-calligraphy/. [Accessed 1 September 2013].
[19]     H. Mehub, "Showcase of Inspiring Arabic Calligraphy Artworks," hongkiat.com, [Online]. Available: http://www.hongkiat.com/blog/arabic-calligraphy-artworks/. [Accessed 1 September 2013].
[20]    Hand drawn calligraphy from http://blog.designojek.com/2010/04/13/hand-drawn-calligraphy/ [Accessed 1 September 2013].
[21]     All-free-download.com, "Abstract Tree Vector Art abstract - Free vector for free download," [Online]. Available: http://all-free-download.com/free-vector/vector-abstract/abstract_tree_vector_art_148267.html. [Accessed 1 September 2013].
[22]     Wikimedia, "Cathedral-chartes-2006_stained-glass-window_detail_01.jpeg" . Stained glass window at Chartres Cathedral Inline from http://commons.wikimedia.org/wiki/Cath%C3%A9drale_Notre-Dame_de_Chartres [Accessed 1 September 2013]
[23]     Glass 2629 from St. Mary Aldermary Church. [Art]. Author's Photograph Collection, 2012.
[24]     Wikipedia, "Basilica of St Denis - Wikipedia, the free encyclopedia," [Online]. Available: 1.
[25]     "File:Dominion of Canada one Dollar banknote of 1898.jpg - Wikimedia Commons," [Online]. Available: http://commons.wikimedia.org/wiki/File:Dominion_of_Canada_one_Dollar_banknote_of_1898.jpg. [Accessed 1 September 2013].
[26]     Wikimedia Commons, "File:Aemilia10 5.jpg - Wikimedia Commons," [Online]. Available: http://commons.wikimedia.org/wiki/File:Aemilia10_5.jpg. [Accessed 1 September 2013].
[27]     Wikimedia Commons, "File:Al Andalus dirham 76119.jpg - Wikimedia Commons," [Online]. Available: http://commons.wikimedia.org/wiki/File:Al_Andalus_dirham_76119.jpg. [Accessed 1 September 2013].
[28]     Wikimedia Commons, "File:Artabanosiia.jpg - Wikimedia Commons," [Online]. Available: http://commons.wikimedia.org/wiki/File:Artabanosiia.jpg. [Accessed 1 September 2013].
[29]     Wikimedia Commons, "File:Marchia Brunn.jpg - Wikimedia Commons," [Online]. Available: http://commons.wikimedia.org/wiki/File:Marchia_Br%C3%BCnn.jpg. [Accessed 1 September 2013].
[30]     Wikimedia Commons - Wikimedia Commons, "File:Escudo Sucre Zulia.svg," [Online]. Available: http://commons.wikimedia.org/wiki/File:Escudo_Sucre_Zulia.svg. [Accessed 1 September 2013].
[31]     Wikimedia Commons, "File:Corps Budissa (Wappen).jpg - Wikimedia Commons," [Online]. Available: http://commons.wikimedia.org/wiki/File:Corps_Budissa_%28Wappen%29.jpg. [Accessed 1 Septepber 2013].
[32]     Wikipedia, "Lubok - Wikipedia, the free encyclopedia," [Online]. Available: http://en.wikipedia.org/wiki/Lubok. [Accessed 2 September 2013].
[33]     Wikipedia,  Michael Jackson: Dangerous, album cover from Wikimedia File:Michaeljacksondangerous.jpg[Accessed 1 September 2013]. 
detail from blogspot.
[34]     Wikipedia, "Revolver (Beatles album) - Wikipedia, the free encyclopedia," [Online]. Available: http://en.wikipedia.org/wiki/Beatles_revolver. [Accessed 1 September 2013].
[35]     SF Signal, "FLOWCHART: Navigating NPR's Top 100 Science Fiction and Fantasy Books - SF Signal," [Online]. Available: http://www.sfsignal.com/archives/2011/09/flowchart_for_navigating_nprs_top_100_sff_books/. [Accessed 1 September 2013].
[36]     D. Smith, "Charting UK Energy Flows >> Simulacra," 22 March 2011. [Online]. Available: http://simulacra.blogs.casa.ucl.ac.uk/2011/03/charting-uk-energy-flows/. [Accessed 1 September 2013].
[37]     N. H. Riche and T. Dwyer, "Untangling Euler Diagrams," [Online]. Available: http://research.microsoft.com/en-us/um/people/nath/docs/eulerdiagrams_infovis2010.pdf. [Accessed 1 September 2013].
[38]     The Mind Mapping Site, "History of Mind Mapping - The Mind Mapping Site," [Online]. Available: http://www.mindmappingsite.com/history/history/history-of-mind-mapping. [Accessed 1 July 2013].
[39]     A. Sicinski, "Mind Mapping Skills Mind Map by Adam Sicinski | Mind Map Art," [Online]. Available: http://www.mindmapart.com/mind-map-study-skills-mind-map-adam-sicinski/. [Accessed 18 June 2013].
[40]   D. Dailey  Thought map: Experiment in Writing , 1972, in Why SVG is going to be Really Big  presented SVG Open 2009.
[41]     Wikipedia, the free encyclopedia, Ebstorfer World Map, circa 1300,  from Mappa Mundi Wikipedia 2013.
[42]     Wikipedia, "Leo Belgicus - Wikipedia, the free encyclopedia," [Online]. Available: http://en.wikipedia.org/wiki/Leo_Belgicus. [Accessed 2 September 2013].
[43]     Geographicus, "Nouveau Plan Routier de la Ville et Faubourgs de Paris: Geographicus Rare Antique Maps," [Online]. Available: http://www.geographicus.com/P/AntiqueMap/Paris-esnautsrapilly-1780. [Accessed 26 September 2013].
[44]     Wikipedia, "Aztec calendar - Wikipedia, the free encyclopedia," [Online]. Available: http://en.wikipedia.org/wiki/Aztec_calendar. [Accessed 18 September 2013].
[45]     H. Stewart, Looking at Indian Art of the Northwest Coast, University of Washington Press.
[46]     F. Boas, Primitive Art, Dover Press, 1927.
[47]     Wikipedia, "Amitābha - Wikipedia, the free encyclopedia," [Online]. Available: http://en.wikipedia.org/wiki/Amitayus. [Accessed 2 October 2013].
[48]     D. Azevedo, Artist, Yellow Submarine. [Art]. Deviant Art, 2011-2014.
[49]     T. van Doesburg, Artist, Kleine Dada Soir. [Art]. Dada, 1922-1923.
[50]     I. Zdanevich, Artist, Evening of the Bearded Heart. [Art]. Soiree du Coeur a Barbe, 1923.
[51]     L. Popova, Artist, Air+Man+Space. [Art]. 1912.
[52]     P. Picasso, Artist, L'aficionado (Le torero). [Art]. Museum Kunstmuseum, 1912.
[53]     D. Dailey, Artist, The(a)mes:Market1456, Enhanced photo. [Art]. 2012.
[54]     T. Nelson, Computer Lib, Self-published, 1974.
[55]     Wikipedia, "Kuratowski's theorem, Wikipedia, the free encyclopedia," [Online]. Available: http://en.wikipedia.org/wiki/Kuratowski's_theorem. [Accessed 13 September 2013].
[56]     C. Moughtin, Urban Design, Street and Square, 3rd edition, Routledge, 2003.
[57]     Wikipedia, "History of Paris - Wikipedia, the free encyclopedia," [Online]. Available: http://en.wikipedia.org/wiki/History_of_Paris. [Accessed 9 September 2013].
[58]     Google Maps 2013: Section of Paris (Rive Droite along Champs-Elysees). [Art]. 2013.
[59]     Wikipedia, "Voronoi diagram - Wikipedia, the free encyclopedia," [Online]. Available: http://en.wikipedia.org/wiki/Voronoi_diagram. [Accessed 22 September 2013].
[60]     Eculid, "Construction of Tangent from Point to Circle/Euclid's Proof - ProofWiki," [Online]. Available: http://www.proofwiki.org/wiki/Construction_of_Tangent_from_Point_to_Circle/Euclid%27s_Proof. [Accessed 1 September 2013].
[61]     J. Casey, A sequel to the first six books of the Elements of Euclid, containing an easy introduction to modern geometry, with numerous examples., Dublin: Hodges, Figgis & co., 1888.
[62]     IMP Awards, "Taking Woodstock Movie Poster - Internet Movie Poster Awards Gallery," [Inline]. From http://www.impawards.com/2009/taking_woodstock.html.  [Accessed 2 September 2013].
[63]     W. Wilson, Bill Graham PresentsJefferson Airplane at the Fillmore By Wes Wilson from http://www.wes-wilson.com/bill-graham-presents.html [Accessed 1 September 2013].
[64]      Canned Heat from Graphic Design History and Theory by Wes Wilson [Accessed 1 September 2013].