marinettiCSS

4D media

3 | concrete poetry

marinettiCSS

An act of artistic “forgery”

Art is a lie that makes us realize the truth.

—Pablo Picasso

One of the surest tests is the way in which a poet borrows. Immature poets imitate; mature poets steal; bad poets deface what they take, and good poets make it into something better, or at least something different. The good poet welds his theft into a whole of feeling which is unique, utterly different than that from which it is torn; the bad poet throws it into something which has no cohesion. A good poet will usually borrow from authors remote in time, or alien in language, or diverse in interest.

—T. S. Eliot

Deceit or double take? Larceny or license? The art world is rife with what at first glance appears to be little more than thievery, plagiarism, lies, and stunts. What separates an artist appropriating an image from a student caught in the act of plagiarism? In a word: intent. The plagiarizing student wishes to pass others’ work off as their own. The appropriating artist wishes to reveal a new way of seeing things that have become so familiar that we have come to take them for granted.

Several people have employed acts of forgery as an artistic expression. Notable within this genre are the museum hoaxes of Banksy, discussed in this NY Times article, and with images in this NYT slideshow which borrows from an original post in a now-broken blog post at Wooster Collective. Notice how his work follows the conventions of museum painting and framing, which is why some of his museum hoaxes lasted for days without being noticed even by museum workers! So: what is authentically art?

Bansky “installation” at the Met, 2005

J. S. G. Boggs, $1 FUNback, 1998

The artist J. S. G. Boggs forged a pretty common one: money. He doesn’t sell his work — he spends it, informing the recipient of his Boggs bill of its nature before consummating a transaction. He therefore is not a counterfeiter, as his bills do not replicate so much as resemble money, and he doesn’t try to pass it off as real. And the lucky recipient of Boggs’ money resells it on the art market for vastly more than the face value. So: what is authentically money? 

This exercise is informed by such a strategy. Using a famous work of typographic innovation below, we’ll attempt a CSS “forgery” of the same. Is it possible for code to replicate typesetting?

Marinetti in Typeset

Filippo Tommaso Marinetti was equal parts politician and artist. He was one of the founders of Italian Futurism, an artistic movement that celebrated the dynamism of the machine age. Alas, the Futurists allied themselves with Italian Fascism. Sharing a vision of a new Italy, Marinetti and dictator Benito Mussolini became collaborators. Marinetti hoped Futurism would become the official art of the Fascist state — a status Mussolini was not interested in bestowing. Nevertheless, unlike the Nazi regime, Fascism did not reject modernist movements like Futurism.

While there is no excuse for Marinetti’s opportunistic alliance with a morally bankrupt and nihilistic political party, from a strictly formal standpoint art historians recognize his typography as an innovation that changed the course of fine art and graphic design around the world, far beyond the ideological confines of Fascism.

Take a look at this “stanza” from the poem Dunes by Marinetti. He revered machines and motion, and the physical act of typesetting and the dynamic action of the printing press inspired the formatting of his poetry. Variously in French and Italian, Marinetti called his typographic experiments les mots en liberté or parole in libertá (words-in-freedom). Despite his nationalist politics, he worked for a French newspaper as a war correspondent and wrote a version of this poem in French:

Marinetti in CSS

We took the French version of the Marinetti poem above and, using CSS, set the text of the poem in a manner that reflects the content.

After “typesetting” it in CSS, we styled colors of faded ink and aged paper that drew inspiration from the Lacerba publication.

Transforms in CSS

A particularly fun MDN Web Docs section covers a special case of code known as a transform. Transforms can scale, rotate, skew, or translate elements, and are supported in modern browsers. Transforms are even animatable!

The sandbox at the link above allows you to play with transforms and copy the code. Another sandbox is found at w3schools.com, and another that allows you to animate is at westciv.com.

In our CSS setting of the Marinetti poem, we’ll be focusing on transform: scale and transform: rotate to help us achieve our “forgery.”

Setting Marinetti

Your task will be to use line spacing, word spacing, font family, font-size, margin, transform rotation and scaling, color, and other attributes to make your CSS version look like the original, to generate a CSS setting of the text as similar to the typesetting as you can create. In short, you are attempting to create a forgery.

Step 0: Analyze and prepare the poem image

Finding main sections

In a sketch, we broke down the visual elements and hierarchy, finding attributes and formats common and/or unique to each element. We thought about visualizing different “zones” of content that might translate into divs or spans, as in this sketch:

We came up with four main zones that would host primary and secondary divs:

• mouv, named after the first part of the “mouvement …” text.
• upper bordered area, which contains vent, named after the “vent” text, and nega, after the “negateur …” block.
  • Inside nega, we find two elements: a big curly brace and the text.
• lower bordered area, which contains sang, after “sang” of course, and affi, after the “affirmateur …” block.
  • Inside affi, two elements: a stack of a brace with rules, and the text.
• kara, named after the first part of the rotated “karazouc …” text.

There will of course be other divs, but this gives us the basis to generate a structure.

Sizing the image

We will “trace” the poem image to create, size, and place those divs, so we want the image to be a logical size. In our build, we will use pixels as a unit of measure — px. So we’ve cropped and obtained a pixel dimension for the image in Photoshop, thusly:

• Width: 330 px
• Height: 510 px

Step 1: Creating the basic HTML structure

<!doctype html>
<!-- STEP 1 OF MARINETTI.HTML: BASIC STRUCTURE, ATTACH CSS, SET CENTERED TRACING IMAGE AS BACKGROUND -->
<html>
<head><!-- INDENT AND SPACE LINES FOR HUMAN LEGIBILITY -->
   <meta charset="UTF-8"> <title>Excerpt from Dunes by F.T. Marinetti</title><!-- PROVIDE A TITLE -->
   <link href="css/marinetti.css" rel="stylesheet" type="text/css" /><!--GENERATE CSS LINK WITH PAGE PROPERTIES: HTML: CLASS: ATTACH STYLE SHEET... -->

   <!-- GENERATE STYLE WITH PAGE PROPERTIES: APPEARANCE (CSS) AND SELECT BACKGROUND IMAGE WITH NO-REPEAT-->
      <style type="text/css"> /* TO SHOW AND HIDE BACKGROUND FOR TRACING, USE A CSS COMMENT START BEFORE background-image - KEEP END COMMENT TO EASE SWITCH */
         body { 
            background-image: url(images/Marinetti-Dunes_1914.jpg);
            background-position: center;
            background-attachment: fixed;
            background-repeat: no-repeat; */ 
         }/* ADD background-position AND background-attachment BY HAND FOR CENTERING */
      </style>

</head>

<body>

</body>
</html>

@charset "UTF-8";
/* STEP 1 OF MARINETTI.CSS: NOTHING TO SEE HERE YET! */
/* CSS Document */

Notice the code is liberally commented to help you understand the process. In the steps that follow, we suggest visiting the steps at each link and inspecting the code directly in a browser window (in Chrome, we use right-click to access View Page Source in the contextual dropdown menu, and other browsers have similar functionality). For the sake of brevity in the remaining steps, we won’t show the code in its entirety as we did above, but we will unpack examples and case studies.

Attaching CSS

We set up a directory with two files, marinetti.html and marinetti.css. The CSS file was placed in a sub-directory named css. Note in the comments the suggestion to generate the link to the external CSS file in Dreamweaver by using the Page Properties in the HTML tab, and finding the Class button to access Attach Style Sheet… in a dropdown menu. We’ll follow this kind of commenting convention in the source code throughout future steps.

We also provide a <title> for the page: Excerpt from Dunes by F.T. Marinetti.

Tracing a background image

<style type="text/css">
   body {
      background-image: url(images/Marinetti-Dunes_1914.jpg);
      background-repeat: no-repeat;
</style>

<style type="text/css">
   body {
      background-image: url(images/Marinetti-Dunes_1914.jpg);
      background-position: center;
      background-attachment: fixed;
      background-repeat: no-repeat;
</style>

Note also a comment instruction to show and hide the background image for tracing by using the start of a CSS comment — /* — just before the background-image: url... property. We keep the end comment — */ —after the background-repeat: no-repeat; property. This makes it very quick to hide and reveal the background image for tracing (don’t, by the way, bother with the Tracing function you might see in the Page Properties dialog box — it ain’t so great). Practice commenting on this block of code, turning it off and on, as you’ll be doing this a lot in the building of this work!

Step 2: Create, position, and size primary divs with ruled borders

We used this process to build the source code you see on the site:

<body>
<container>
<main>
</main>
</container>
</body>

main {
   position: relative;
   height: 510px;
   width: 330px;
   background: #33333320;
}

<main>
   <!-- MOUV -->
   <div>
      *MOUV
   </div>
   <!-- UPPER -->
   <div>
      <div>
         *VENT
      </div>
      <div>
         *NEGA
      </div>
   </div>
   <!-- LOWER -->
   <div>
      <div>
         *SANG
      </div>
      <div>
         *AFFI
      </div>
   </div>
   <!-- KARA -->
   <div>
      *KARA
   </div>
</main>

IDs versus classes

If you’re building a file along with this, you may notice in Dreamweaver that the <div> tags just stack on one another inside <main>. How do we size and position them, and how do we provide ruled borders where we see them in the poem?

This is where the distinction between IDs and classes becomes very useful. Recall that an ID is a unique identifier: that is, you can only use it one time in a file. A class, on the other hand, is reusable within a page, and among many pages if needed. So what kind of styling is best to invoke with which? As a general rule, with some minor exceptions, we do the following here:

Sizing and placing divs with IDs

In this step, we’re concerned with sizes and locations. Each <div> is uniquely sized and positioned using an #id found in the internal CSS for the page. We’ll use the code for LOWER as an example here.

#lower {	
   position: absolute;
   top: 305px;
   left: 86px;
   width: 200px;
   height: 204px;
}

.......

<div id="lower"> ...
</div>

Styling ruled borders with classes

Several divs can be styled to define the ruled borders we see holding the middle sections of the poem. MOUV, UPPER, LOWER, and KARA each contain such a border. These borders may be useful in another context: for example, if we were setting a bunch of Marinetti poems that contained such borders, they could be reused. So we used classes and made them available externally. Again, using LOWER as our example:

.noBorderBottom {
   border-right-width: 1px;
   border-top-width: 1px;
   border-left-width: 1px;
   border-right-style: solid;
   border-top-style: solid;
   border-left-style: solid;
}

.......

<div id="lower" class="noBorderBottom"> ...
</div>

Temporary background colors

In many instances in the source code, you’ll see a transparent gray color applied to each <div> that will receive content. We did this as a temporary measure, to allow us to see the sizes of the divs as they align with the background image. Later, when we were satisfied that the divs were defined correctly, we deleted the background color. LOWER had no color because it has a border and otherwise no content. So we’ll use one of its children, SANG, as our case study:

#sang {
   position: absolute;
   width: 58px;
   height: 204px;
   background: #33333320;
}

We’ll see other instances of background colors used as a visual aid in future steps.

Step 3: Adding unformatted content with secondary divs

The text, seen below, is written out completely unformatted for you to copy and paste into the HTML document:

See how the content changes when stripped of form? By the way, if you’re curious about the meaning and can’t read French, copy and paste it into Google Translate.

<div id="sang">
   *SANG
</div>

<div id="sang">
   <div>
      sang
   </div>
</div>

At the site, once the text is inserted, you can see the content beginning to organize itself. It’s somewhat orderly, even if it’s not yet too expressive. You might be troubled about what’s happening in KARA, but it will iron itself out soon enough!

Step 4: Justifying content

				#sangText {
   position: absolute;
   width: 58px;
   margin-top: 90px;
   background: #33333320;
}

.......

<div id="sang">
   <div id="sangText">
      sang
   </div>
</div>

.centerText {
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
}

.......

<div id="sangText" class="centerText">
   sang
</div>

.basicStyle {
   font-size: 14px;
}

.......

<div id="affiText" class="basicStyle">
   affirmateur<br />
   optimisme force<br />
   repousser le vent-<br />
   pessimiste-chaud-<br />
   ou-froid<br />
   aller sans but<br />
   pour faire vi-<br />
   vre courir<br />
   etre
</div>

Note the use of some new background colors among the braces and in KARA. These consist of even more deeply nested divs, and to keep things straight, gray just won’t cut it anymore! So we have a red, green, and blue scheme to help us map these divs.

Step 5: Adding and sizing typefaces

To make sure the client browser displays our work correctly, we relied on hosting fonts right in our directory. We created a fonts folder and placed each font family in its own folder, to allow Dreamweaver to attach the font in external CSS.

You can see it took an astounding eight fonts to properly (or at least closely) represent the typography of the original!

Searching for fonts

Where did these fonts come from? There are millions to choose from, some with very restrictive licensing and a hefty price. For our build, we limited our selections to those for which we could find a license to host at no cost. This does limit the field considerably, but there are still thousands!

Google Fonts

Searching with IdentiFont

Font finding is a needle-in-a-haystack proposition. Fortunately, there are helper sites that can assist. Many are using AI to assist with images of text styled with an unknown font, which you can upload. One of the best is IdentiFont.com with a wide array of tools.

@font-face {
   font-family: EB Garamond;
   src: url( "../fonts/eb_garamond/EBGaramond-VariableFont_wght.ttf ");
}

CSS “typesetting” properties

If you’re coming at CSS from the standpoint of traditional typesetting, or even from digital typesetting in a program like Illustrator or InDesign, you’ll feel a bit lost getting used to the terminology in CSS. There is a font-kerning property that uses the kerning data stored inside a font, but we didn’t use this in our build. We used letter-spacing as the CSS equivalent of tracking. For leading, the space between baselines in traditional typographic terminology, CSS uses a property called line-height.

For letter casing, CSS uses the text-transform property. Its values include some that are easy to understand, like uppercase and lowercase and capitalize. But if you’re looking for title case in CSS don’t bother. And, confusingly, if you want to create small caps, that’s a different property altogether: font-variant with a value of small-caps.

How all of these are applied in our build was context-dependent and involved a good bit of heuristic exploration. In some cases, the fonts we chose simply didn’t have the extreme proportions found in Marinetti’s type. Here’s one case study:

.mouvStyle {
   font-family: Hadrianbold Regular;
   font-size: 31px;
   line-height: 45.4px;
   text-transform: uppercase;
}

Choose the height first!

In a few very conspicuous places — MOUV and the curly braces at NEGA and AFFI — it was impossible to get the height-width ratio correct. The chosen fonts, while narrow, were not narrow enough to emulate Marinetti’s typography. We found a way to correct that in the next step. The best idea for the time being was to set the heights correctly first, and let the widths fall where they may, even though they are a bit unsightly!

Another typesetting refinement applied here is a forced justify, which we mentioned earlier. It’s applied as a class called justifyText to the negaText and affiText divs. To help it, we add white-space: nowrap; to the basicStyle class.

Step 6: Styling transform scale and rotate

Non-uniform scaling: a forgivable type-crime?

We used a non-uniform scale to shrink the widths of MOUV text and braces at NEGA and AFFI. Now, some will rightly argue that non-uniform scaling is a type-crime. But in this context, we felt it was a forgivable sin. We’ll use the curly brace under NEGA as a sample:

.negaBracketStyle {
	font-family: Wremena Light;
	font-size: 330px;
	margin-bottom: 5px;
	margin-right: 3px;
	transform: scale(0.12,1);
}

.......

<div id="negaBracket" class="centerText">
   <div class="negaBracketStyle">
      {
   </div>
</div>

Rotating type

We needed to transform: rotate the contents of KARA to orient it to the right-side div content in a final act of transformation.

.rotateStyle {
   transform: rotate(-90deg);
}

.......

<div id="kara" class="borderLeft">
   <div class="basicStyle rotateStyle">
      <div id="karaText" class="smallBoldStyle">
         karazouc–zouc–zouc
      </div>
      <div id="nadiText" class="nadiStyle">
         nadi–nadi–aaaaaaaaaaaaaaaaaa
       </div>
   </div>
</div>

Step 7: Spans, inline styles, and colors

Most of our work here is tweaky but important refinement, starting with that outlier “T.” By now you might be pretty proficient at interpreting code: can you find the ID, class, new div, and font-face assigned to solve this? We will reveal at least this much: the eighth and final font for this is Imprimeur Classique EF found at OnlineWebFonts.com.

When is it OK to use inline styles?

Many of the changes here occur on the line-by-line tweaking in the text blocks in NEGA, AFFI, and KARA. Take some time to analyze what’s going on with the use of <spans> and inline styles applied to them.

Why solve these using inline CSS? Don’t we try our best not to use it? As a general rule, one should avoid inline styling. However, for one-off instances of a line-height change here or there, it takes more code to write it up as a new class or ID, and then apply that to a tag. So, the rule of thumb we use is if the style…

• is shorter to write inline
• never repeats anywhere else
• doesn’t impede the legibility of content or code around it

… then it’s OK to indulge in a small amount of inline styling in your code.

Color: the finishing touch

Note the use of color to create an allusion to faded ink and aged paper as our final treatment!

color: #1B191A;
background-color: #C5BCB0;

.vignette {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   box-shadow: 0 0 100px rgba(153, 119, 85, 1.0) inset;
}

.......

<container class="vignette">

Final step: licensing and publishing

Take a look at the source code for the licensing statement commented near the top of the page. It acknowledges the origin of the poem and recognizes it now resides in the public domain. It also applies a Creative Commons license, which some of our free fonts require us to do.

Once you’ve taken care of the legal bits, you can SFTP upload it to your server and enjoy the fruits of your labor live online!

If you’re interested in learning more about the work of Marinetti and the history of his poem Dunes, visit the PDF excerpt of Marinetti: Materiality and Sensation: Mechanical Synaesthesia.