atypography tool

live link  |  github repo  |  short URL for class: https://shorturl.at/XbCXk

Some time ago I've encountered Atypography. As someone who enjoys both design, computation, and a little challenging puzzle every once in while - I liked the idea:

Atypography is an "Art movement that graphically represents traditional writing systems in an unconventional way, creating an authentic design that remains readable while concealing text signs at first glance. Atypography conceals textual content initially but can be deciphered by anyone with time. Reducing glyphs to minimal forms that are widely applicable..."

‍

‍

some examples (source): 

‍

‍

I thought this would be interesting to try for my final, as there is something about the Atypography approach that is pretty much computational, or systemic. At least in the sense that in order to read it you need to decipher the rules, and then just apply them to (all) the visual unit(s). These are the "laws" of this "game" - you have to figure out the code, but once you do, it's consistent. So it is very much a systematic approach to decyphering written forms. And personally, even just seeing how the same rules are applied to express different letters is sometimes a truly joyous expereince.

I initially set out to try and do something like that with vsketch and the techniques we've covered in class but it felt very cumbersome and I felt like working directly with HTML, CSS and JS made more sense for what I had in mind — and this is by no means a complete work, but just an initial stage — a tool for messing around with letters to create visual compositions that are on varied degrees of legibility. I tried creating all the alphabet using only straight lines, but some letters proved complex (try designing an "x" or "v" that don't have diagonal lines... I did come up with a design though, but it would involve the whole alphabet to be designed differently too — a task for another time). I compromised on either vertical, horizontal, or diagonal lines. I added bounding boxes for each letter that are independent from each other so there's room for a lot of play there. I also added control to the line thickness and length for the vertical and horizontal lines — these are indeed set to all characters as to adhere to the "rules of play" - the same rules must be applied to all letters. That is a pretty simple and basic system of rules, pretty much the simplest one I could think of that would still be somewhat interesting to mess with.

I've since thought of more interesting sets of rules that can be applied, and there's a lot more that could be done here, but it's meant to quickly allow for experimentation and be a springboard for further development. Also, I... just had fun doing this.

‍

‍

One neat little trick I learned was using the dataset property - a way to store custom data attributes in HTML elements, that can be read in Javascript. For example, when I'm creating each letter's container, I can define it like this:

letterContainer.dataset.letter = letter;

This creates an HTML attribute that looks like this:

<div class="letter-container" data-letter="A">

And then this attribute can be accessed either in Javascript like so: element.dataset.letter

‍

When I first started this I thought could just use flexboxes and CSS to create all the parts of the letters and that would have been really cool, because all the parts of the letters would be relative to each other and I just generally don't like using absolute positioning unless I have to... But then diagonal lines require rotation, and the stretching of the bounding box would be more complex.

Both the vertical and horizontal lines are generated as divs (I found it easier for me to understand and work with initially rather than straight up SVGs). But it didn't quite work for diagonal lines - because I wanted to keep everything responsive, scaling diagonal divs would affect their thickness in a way that wasn't consistent with the vertical and horizontal lines' thickness. Using the SVG element and namespace gives us the attribute vector-effect, defined as non-scaling-stroke, which makes it so when the SVG element is scaled, the stroke attribute doesn't scale with it.

All the letters are constructed using percentages, and update to fill their container when they're first created but also every time one of the sliders is adjusted, or the container's dimensions change.

‍

For the dragging, using preventDefault() was important, as the browser has default dragging behavior that would start text selection and could interfere with my dragging operation. I'm also using stopPropagation() for a similar reason - without it, the browser might think I'm also interacting with a parent element and that could create a mess. Using this method allows us to only interact with one thing at time and not have that interaction bubble up the DOM tree.