Much has already been written (Billboard, Wikipedia) about Nine Inch Nails’ viral marketing campaign for Year Zero (2007), their most recent album. The marketing campaign consisted of clues, a bit like The DaVinci Code: things like USB drives left in NIN concert bathrooms; coded messages on T-shirts that yielded URLs; ‘fake’ forums, etc. In essence, various media were used to direct the curious and the fanatic to peculiar websites, such as

• http://iamtryingtobelieve.com/, and
• http://anotherversionofthetruth.com/

Even more striking, as a media/marketing effect, was ‘embedding’ an image in the static at the end of the song “The Warning”. This shape, like an elongated arm, is known as The Presence, and is featured on the album cover. (You might speculate that the spectrograph was what it was, and the hand-like pattern got noticed and then the album-cover was conceived. But that would make you an unbeliever.)

Other sources (1, 2) claim the image is in the song “My Violent Heart”, but I have not seen it there. I have only seen it in “The Warning” (see the detail from my spectrograph, created with Audacity).

Leaving aside the cleverness of the campaign, this article takes a closer look at one of the campaign sites, http://iamtryingtobelieve.com/ , in order to learn some of the CSS/HTML techniques used. http://iamtryingtobelieve.com/ was created by 42 Entertainment. Below is a screenshot.

Typographic Distortion Effects

Below is a screenshot detail from the “How Does Parepin Affect You?” page, http://iamtryingtobelieve.com/howdoes.htm. As you can see, there are a couple of typographic effects—larger font sizes and the weird unfocus/distortion effect (’administration approved’)

These effects are, in fact, not created graphically in an editor, but through CSS/HTML rendering in the browser. Thus, all the text is in fact live text, and easily digested by search engines.

Code

Here is another screenshot detail:

The code looks like this (reformatted for readibility):

    HOW DOES PAREPIN AFFECT
    
    YOU?


    We’ve all heard a lot about how Parepin isn’t addictive, and
    how its side effec
    
    and mostly mild. I can attest that
    Parepin isn’t addictive, at least
    in my
    
    case, because
    
        I eli
        
            minated it
        
    from my system about two
    
    months ago and had no adverse
    affects.


    We’ve all heard a lot about how Parepin isn’t addictive, and
    how its side effects are rare
    
    and mostly mild. I can attest that 
    Parepin isn’t addictive, at least in my
    
    case, because I eliminated it from my
    system about two
    
    months ago and had no adverse affects.

That is not a typo. The same content is entered twice, in two separate

tags, which overlap each other exactly, thanks to the position:absolute in-line CSS in the code,

. Thus, certain distortion effects will occur when the text does not overlap perfectly.

The first of these is employed using the tag. The CSS for this is:

.one {
    letter-spacing:-1px;
    text-transform:uppercase;
}

This is self-explanatory—it converts the text to uppercase, and changes the letter-spacing to -1px.

Let’s take a look at the two effects separately:

• Text-transform:

  E pluribus unum

  (

  E pluribus unum

  )

  E pluribus unum

  (

  E pluribus unum

  )

• Letter-spacing:

  E pluribus unum

  (

  E pluribus unum

  )

  E pluribus unum

  (

  E pluribus unum

  )

Combining the two:

E pluribus unum

Overlaying this on top of “E pluribus unum” would mimic the first distortion effect we see in the “How Does Parepin Affect You?” snippet above.

A second class, , is used for the text “and mostly mild”. Its mechanism is to print “d mos” 2px to the left the first time, and overlay a normal copy of “and mostly mild” on top of it:

.left {
    left: 2px;
    position: relative;
}

.one {
    letter-spacing:-1px;
    text-transform:uppercase;
}

.left {
    left: 2px;
    position: relative;
}

.bigWhite {
    font-weight:bold;
    font-size:18px;
    font-family:Georgia;
}

.leftUp {
    left: 3px;
    top: 1px;
    position: relative;
}

This entry was posted on Sunday, June 10th, 2007 at 12:47 am and is filed under CSS/HTML. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.