self-conscious-design
clone your own copy | download snapshot

Snapshots | iceberg

No images in this repository’s iceberg at this time

Inside this repository

content.xhtml
application/xhtml+xml

Download raw (19.7 KB)

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
  <title>Bartleby</title>
  <link class="day" href="styles/style.css" rel="stylesheet" title="day" type="text/css" />
  <style>

   .bold{
	font-weight:bold;
   }
   .disappear {
     	color: transparent;
	transition: 5s;
   }

   .disappear .keep {
	color: black;
   }	

   span.pop-up {
      margin-top: -60px;
	   font-size:20px;
	   width:70%;
	   background-color:#333333;
	   color:white;
      padding:6px;
   }

   .hide {
      /*visibility: hidden;*/
      display:none;
      opacity: 0;
      transition: 1s;
   }

   .show {
      /*visibility: visible;*/
      display:block;
      opacity: 1;
      -webkittransform: translateX(0px) translateY(1px);
      transition: opacity 5s;
   }

  /*.trans { opacity: 0; filter: alpha(opacity: 0); }*/
  .trans { color:white;border-bottom:solid 1px #333333;};

  </style>
  <script src="js/jquery.js"></script>
  <script>

  //<![CDATA[

   function deleteLetters (objId) {
      var par = $('#' + objId);
      var initText = $.trim(par.text()), ptr = 0;
      var timer = setInterval(function() {
        var ln = $.trim(par.find('.trans').text().length);
        if (ln == initText.length) {
            par.empty();
            clearInterval(timer);
            //counter++;
            //par = $('#par'+counter);   
        }

        $('#' + objId).html(function() {    

            return $('<span>').addClass('removeMe')
                .html(initText.substring(ptr++ , ptr))
                .before($('<span>').addClass('trans').
                       html(initText.substring(0 , ptr-1)))
                .after(initText.substring(ptr));
        }).find('span.removeMe').animate({'opacity': 0}, 200);
                
      }, 300);
   };

  $(document).ready(function() {

	$(".pop-up1").addClass ("show");

	// Make all the pop-up elements disappear when they are clicked and prevent
	// the default behaviour of iBooks

   $(".pop-up1").click (function (e) {
      $(this).remove();
      $(this).addClass("hide");
	   $(".pop-up2").addClass ("show");
        e.preventDefault();
    });

    $(".pop-up2").click (function (e) {
	   $(this).remove();
      $(".pop-up3").addClass ("show");
        e.preventDefault();
    });

    $(".pop-up3").click (function (e) {
	   $(this).remove();
      deleteLetters ("par1");
      $(".pop-up4").addClass ("show");
        e.preventDefault();
    });

    $(".pop-up4").click (function (e) {
	   $(this).remove();
      deleteLetters ("par2");
      deleteLetters ("par3");
      deleteLetters ("par4");
      $(".pop-up5").addClass ("show");
	   /*$(".keep").addClass ("bold");*/
        e.preventDefault();
    });

    $(".pop-up5").click (function (e) {
	   $(this).remove();
      $(".pop-up6").addClass ("show");
   
      $(".pop-up6").after ("<span></span>");
      var p = document.getElementById("pop-up6");
      p.style.webkitTransform = 'translateY(0px) translateX(1px)';

        e.preventDefault();
    });

    $(".pop-up6").click (function (e) {
	   $(this).remove();
      $(".pop-up7").addClass ("show")
        e.preventDefault();
    });

   $(".pop-up7").click (function (e) {
	   $(this).remove();
      deleteLetters ("par5");
      $(".pop-up8").addClass ("show")
        e.preventDefault();
    });

   $(".pop-up8").click (function (e) {
	   $(this).remove();
      deleteLetters ("par6");
      $(".pop-up9").addClass ("show")
        e.preventDefault();
    });

   $(".pop-up9").click (function (e) {
	   $(this).remove();
      $(".pop-up10").addClass ("show");
        e.preventDefault();
    });

   $(".pop-up10").click (function (e) {
	   $(this).remove();
      $(".pop-up11").addClass ("show");
        e.preventDefault();
    });

   $(".pop-up11").click (function (e) {
	   $(this).remove();
      $(".pop-up12").addClass ("show");
        e.preventDefault();
    });

   $(".pop-up12").click (function (e) {
	   $(this).remove();
      $(".pop-up13").addClass ("show");
        e.preventDefault();
    });

   $(".pop-up13").click (function (e) {
	   $(this).remove();
      $(".preferNotTo1").addClass ("disappear");
      $(".pop-up14").addClass ("show");
        e.preventDefault();
    });

   $(".pop-up14").click (function (e) {
	   $(this).remove();
      $(".pop-up15").addClass ("show")
        e.preventDefault();
    });

   $(".pop-up15").click (function (e) {
	   $(this).remove();
      $(".preferNotTo2").addClass ("disappear");
      $(".pop-up16").addClass ("show");
        e.preventDefault();
    });

   $(".pop-up16").click (function (e) {
	   $(this).remove();
      $(".pop-up17").addClass ("show");
        e.preventDefault();
    });

   $(".pop-up17").click (function (e) {
	   $(this).remove();
      $(".preferNotTo3").addClass ("disappear");
      deleteLetters ("par7");
      $(".pop-up18").addClass ("show");
        e.preventDefault();
    });

    $(".pop-up18").click (function (e) {
	   $(this).remove();
      $(".pop-up19").addClass ("show");
        e.preventDefault();
    });

   $(".pop-up19").click (function (e) {
	   $(this).remove();
      deleteLetters ("par8");
      $(".pop-up20").addClass ("show");
        e.preventDefault();
    });

   $(".pop-up20").click (function (e) {
	   $(this).remove();
      $(".pop-up21").addClass ("show");
        e.preventDefault();
    });

    $(".pop-up21").click (function (e) {
	   $(this).remove();
      $(".pop-up22").addClass ("show");
        e.preventDefault();
    });

   $(".pop-up22").click (function (e) {
	   $(this).remove();
      $(".preferNotTo4").addClass ("disappear");
      $(".pop-up23").addClass ("show");
        e.preventDefault();
    });

     $(".pop-up23").click (function (e) {
	   $(this).remove();
      $(".pop-up24").addClass ("show");
        e.preventDefault();
    });

   $(".pop-up24").click (function (e) {
	   $(this).remove();
      $(".preferNotTo5").addClass ("disappear");
      $(".pop-up25").addClass ("show");
        e.preventDefault();
    });

    $(".pop-up25").click (function (e) {
	   $(this).remove();
      $(".pop-up26").addClass ("show");
        e.preventDefault();
    });

   $(".pop-up26").click (function (e) {
	   $(this).remove();
      $(".pop-up27").addClass ("show");
        e.preventDefault();
    });

   $(".pop-up27").click (function (e) {
	   $(this).remove();
      $(".pop-up28").addClass ("show");
        e.preventDefault();
    });

   $(".pop-up28").click (function (e) {
	   $(this).remove();
      $(".preferNotTo6").addClass ("disappear");
      $(".pop-up29").addClass ("show");
        e.preventDefault();
    });

   $(".pop-up29").click (function (e) {
	   $(this).remove();
      $(".preferNotTo7").addClass ("disappear");
        e.preventDefault();
    });

  });
	//]]>
  </script>
</head>

<body>
  <section epub:type="frontmatter" id="frontmatter">
    <section epub:type="titlepage" id="titlepage">
      <h1 class="top">Bartleby, the Scrivener</h1>
      <h2>A Story of Wall-Street</h2>

      <h3 class="aut">Herman Melville</h3>
    </section>
  </section>

  <section epub:type="bodymatter" id="bodymatter">
    <section id="ch1">

<p id="par1">In answer to my advertisement, a motionless young man one morning, stood upon my office threshold, the door being open, for it was summer. I can see that figure now—pallidly neat, pitiably respectable, incurably forlorn! It was Bartleby.</p>

<p><span class="pop-up pop-up1 hide" style="margin-left:3em;">In answer to my advertisement</span><span class="pop-up pop-up4 hide" style="margin-left:8em;">It was Bartleby.</span><span class="pop-up pop-up3 hide" style="margin-left:4.5em;">I can see that figure now—pallidly neat, pitiably respectable, incurably forlorn!</span><span class="pop-up pop-up2 hide" style="margin-left:2em;">a motionless young man one morning, stood upon my office threshold</span></p>

<p id="par2">After a few words touching his qualifications, I engaged him, glad to have among my corps of copyists a man of so singularly sedate an aspect, which I thought might operate beneficially upon the flighty temper of Turkey, and the fiery one of Nippers.</p>

<p id="par3">I should have stated before that ground glass folding-doors divided my premises into two parts, one of which was occupied by my scriveners, the other by myself. According to my humor I threw open these doors, or closed them. I resolved to assign Bartleby a corner by the folding-doors, but on my side of them, so as to have this quiet man within easy call, in case any trifling thing was to be done. I placed his desk close up to a small side-window in that part of the room, a window which originally had afforded a lateral view of certain grimy back-yards and bricks, but which, owing to subsequent erections, commanded at present no view at all, though it gave some light. Within three feet of the panes was a wall, and the light came down from far above, between two lofty buildings, as from a very small opening in a dome. Still further to a satisfactory arrangement, I procured a high green folding screen, which might entirely isolate Bartleby from my sight, though not remove him from my voice. And thus, in a manner, privacy and society were conjoined.</p>

<p><span class="pop-up pop-up5 hide" style="left:5em;">At first Bartleby did an extraordinary quantity of writing.</span></p>

<p id="par4">At first Bartleby did an extraordinary quantity of writing. As if long famishing for something to copy, he seemed to gorge himself on my documents. There was no pause for digestion. He ran a day and night line, copying by sun-light and by candle-light. I should have been quite delighted with his application, had he been cheerfully industrious. But he wrote on silently, palely, mechanically.</p>

<p><span class="pop-up pop-up6 hide" id="pop-up6" style="margin-left:6em;">he seemed to gorge himself on my documents.</span><span class="pop-up pop-up7 hide" style="margin-left:3.5em;">As if long famishing for something to copy</span></p>

<p id="par5">It is, of course, an indispensable part of a scrivener's business to verify the accuracy of his copy, word by word. Where there are two or more scriveners in an office, they assist each other in this examination, one reading from the copy, the other holding the original. It is a very dull, wearisome, and lethargic affair. I can readily imagine that to some sanguine temperaments it would be altogether intolerable. For example, I cannot credit that the mettlesome poet Byron would have contentedly sat down with Bartleby to examine a law document of, say five hundred pages, closely written in a crimpy hand.</p>

<p><span class="pop-up pop-up8 hide" style="margin-left:4em;">It is a very dull, wearisome, and lethargic affair.</span></p>

<p id="par6">Now and then, in the haste of business, it had been my habit to assist in comparing some brief document myself, calling Turkey or Nippers for this purpose. One object I had in placing Bartleby so handy to me behind the screen, was to avail myself of his services on such trivial occasions. It was on the third day, I think, of his being with me, and before any necessity had arisen for having his own writing examined, that, being much hurried to complete a small affair I had in hand, I abruptly called to Bartleby. In my haste and natural expectancy of instant compliance, I sat with my head bent over the original on my desk, and my right hand sideways, and somewhat nervously extended with the copy, so that immediately upon emerging from his retreat, Bartleby might snatch it and proceed to business without the least delay.</p>

<p><span class="pop-up pop-up10 hide" style="margin-left:6em;">that I abruptly called to Bartleby.</span><span class="pop-up pop-up9 hide" style="margin-left:2em;">It was on the third day, I think, of his being with me,</span></p>

<p class="preferNotTo1">In this very attitude did I sit when I called to him, rapidly stating what it was I wanted him to do—namely, to examine a small paper with me. Imagine my surprise, nay, my consternation, when without moving from his privacy, Bartleby in a singularly mild, firm voice, replied, "<span class="keep">I would prefer not to.</span>"</p>

<p><span class="pop-up pop-up13 hide" style="margin-left:6em;">I would prefer not to</span><span class="pop-up pop-up12 hide" style="margin-left:6em;">when Bartleby in a singularly mild, firm voice, replied</span><span class="pop-up pop-up11 hide" style="margin-left:2em;">Imagine my surprise, nay, my consternation</span></p>

<p class="preferNotTo2">I sat awhile in perfect silence, rallying my stunned faculties. Immediately it occurred to me that my ears had deceived me, or Bartleby had entirely misunderstood my meaning. I repeated my request in the clearest tone I could assume. But in quite as clear a one came the previous reply, "<span class="keep">I would prefer not to</span>."</p>

<p><span class="pop-up pop-up15 hide" style="margin-left:2em;">I would prefer not to</span><span class="pop-up pop-up14 hide" style="margin-left:2em;">in quite as clear a one came the previous reply</span></p>

<p class="preferNotTo3">"Prefer not to," echoed I, rising in high excitement, and crossing the room with a stride. "What do you mean? Are you moon-struck? I want you to help me compare this sheet here—take it," and I thrust it towards him.</p>

<p><span class="pop-up pop-up16 hide" style="margin-left:2em;margin-top:-20px;">What do you mean?</span><span class="pop-up pop-up17 hide" style="margin-left:2em;">Are you moon-struck?</span></p>

<p class="preferNotTo3">"<span class="keep">I would prefer not to</span>," said he.</p>

<p id="par7">I looked at him steadfastly. His face was leanly composed; his gray eye dimly calm. Not a wrinkle of agitation rippled him. Had there been the least uneasiness, anger, impatience or impertinence in his manner; in other words, had there been any thing ordinarily human about him, doubtless I should have violently dismissed him from the premises. But as it was, I should have as soon thought of turning my pale plaster-of-paris bust of Cicero out of doors. I stood gazing at him awhile, as he went on with his own writing, and then reseated myself at my desk. This is very strange, thought I. What had one best do? But my business hurried me. I concluded to forget the matter for the present, reserving it for my future leisure. So calling Nippers from the other room, the paper was speedily examined.</p>

<p><span class="pop-up pop-up18 hide" style="margin-left:2em;margin-top:-20px;">His face was leanly composed</span><span class="pop-up pop-up19 hide" style="margin-left:2em;">his gray eye dimly calm.</span></p>

<p id="par8">A few days after this, Bartleby concluded four lengthy documents, being quadruplicates of a week's testimony taken before me in my High Court of Chancery. It became necessary to examine them. It was an important suit, and great accuracy was imperative. Having all things arranged I called Turkey, Nippers and Ginger Nut from the next room, meaning to place the four copies in the hands of my four clerks, while I should read from the original. Accordingly Turkey, Nippers and Ginger Nut had taken their seats in a row, each with his document in hand, when I called to Bartleby to join this interesting group.</p>

<p class="preferNotTo4">"Bartleby! quick, I am waiting."</p>

<p><span class="pop-up pop-up20 hide" style="margin-left:2em;">Bartleby! quick, I am waiting.</span></p>

<p class="preferNotTo4">I heard a slow scrape of his chair legs on the uncarpeted floor, and soon he appeared standing at the entrance of his hermitage.</p>

<p class="preferNotTo4">"What is wanted?" said he mildly.</p>

<p class="preferNotTo4">"The copies, the copies," said I hurriedly. "We are going to examine them. There"—and I held towards him the fourth quadruplicate.</p>
<p><span class="pop-up pop-up21 hide" style="margin-left:6em;">The copies, the copies</span></p>

<p class="preferNotTo4">"<span class="keep">I would prefer not to</span>," he said, and gently disappeared behind the screen.</p>

<p><span class="pop-up pop-up22 hide" style="margin-left:5em;">I would prefer not to</span></p>

<p class="preferNotTo5">For a few moments I was turned into a pillar of salt, standing at the head of my seated column of clerks. Recovering myself, I advanced towards the screen, and demanded the reason for such extraordinary conduct.</p>

<p class="preferNotTo5">"<i>Why</i> do you refuse?"</p>
<p><span class="pop-up pop-up23 hide" style="margin-left:3em;">Why do you refuse?</span></p>

<p class="preferNotTo5">"<span class="keep">I would prefer not to</span>."</p>
<p><span class="pop-up pop-up24 hide" style="margin-left:4em;">I would prefer not to</span></p>

<p class="preferNotTo6">With any other man I should have flown outright into a dreadful passion, scorned all further words, and thrust him ignominiously from my presence. But there was something about Bartleby that not only strangely disarmed me, but in a wonderful manner touched and disconcerted me. I began to reason with him.</p>

<p><span class="pop-up pop-up25 hide" style="margin-left:2em;">there was something about Bartleby that not only strangely disarmed me</span><span class="pop-up pop-up26 hide" style="margin-left:4em;">but in a wonderful manner touched and disconcerted me</span></p>

<p class="preferNotTo6">"These are your own copies we are about to examine. It is labor saving to you, because one examination will answer for your four papers. It is common usage. Every copyist is bound to help examine his copy. Is it not so? Will you not speak? Answer!"</p>

<p><span class="pop-up pop-up27 hide" style="margin-left:6em;">Will you not speak? Answer!</span></p>

<p class="preferNotTo6">"<span class="keep">I prefer not to</span>," he replied in a flute-like tone. It seemed to me that while I had been addressing him, he carefully revolved every statement that I made; fully comprehended the meaning; could not gainsay the irresistible conclusions; but, at the same time, some paramount consideration prevailed with him to reply as he did.</p>

<p><span class="pop-up pop-up28 hide" style="margin-left:4em;">I prefer not to</span></p>

<p class="preferNotTo7">"You are decided, then, not to comply with my request—a request made according to common usage and common sense?"</p>

<p class="preferNotTo7">He briefly gave me to understand that on that point my judgment was sound. Yes: <span class="keep">his decision was irreversible.</span></p>

<p><span class="pop-up pop-up29 hide" style="margin-left:2em;">his decision was irreversible</span></p>

<hr style="margin-top:40px;"/>

<p class="explanation">The project proposes to consider the EPUB as a self-conscious book, which refuses for the readers to read its story. During the process, different approaches were explored to visually represent this refusal and react to the reader’s interactions.</p>

<p class="explanation">The project is based on Bartleby, the Scrivener, a short story by Hermann Melville, published in 1853. The story takes place in a law office, where Bartleby is employed as a copyist. Bartleby is first presented as a rigorous clerk but gradually decides not to work anymore.</p>

<p class="explanation">Bartleby’s behavior finds an echo in the book’s reactions. The more Bartleby refuses to work, the more the book prevents the reader from reading. Pop-ups appear on the text and hide its content. They are themselves filled with excerpts from dialogues between the narrator and Bartleby, or descriptions of his personality. Clicking on them make paragraphs vanish increasingly.</p>

    </section>
  </section>
</body>
</html>