Initials

Door Robert Cabri - 2008

An initial by the old monks

For centuries the monks in the monastery wrote wonderful calligraphy. Every page
you read was a piece of art. The pages were full of nice decorations.
Each start of a chapter and long paragraphs where decorated with an "initial".
If you look to todays graphic design you still encounter a lot of this ornamental
design. It may not be as figurative as back then, but it still has got a great effect.

Because I like this kind of art, I tried to implement this in my website. Didn't
workout though. I find it difficult to choose a design for my own site and the
design where I implemented this initial effect did not satisfy me. But I still
thought that it would be cool to have a script that will implement this
Initial effect automatically.

My initial creation

So I started with creating an Initial. Here you can see my C initial that will be used.
If you are going to use this script, may i remind you that you have to create all
26 letters of the alphabet and perhabs also all 10 digits.

First I will show you what the code looks like and then explain it so you can
implement it and hopefully learn something from it.

The Script

Enough talk, lets start. When I'm developing my sites I keep my HTML, CSS and
Javascript stricty seperate, so I have created 3 files. One for my HTML, called
initials.html, one for my CSS, called initials.css and one for my javascript
behaviour, called initials.js.

First the (X)HTML file (initials.html)

// The begin of your (X)HTML file

<head>

   <link rel="stylesheet" rev="stylesheet" media="screen" class="initials.css" />

   <script src="/img/spacer.gif"> 
</head>

// more (X)HTML

<p id="initial">

   Creating A very nice initial in your text. 

   // more tekst

</p>

// End of your (X)HTML

The following code is the javascript that will do the replace of the firstletter of the
paragraph

window.onload = init;

 

var imgLoc = '/images/initials/';

var imgName = '-initial';

var imgExtension = 'gif';

 

function init()

{

   if( document.getElementById && document.createElement ) 

   {

      var P = document.getElementById('initial');

      var PText = trim( P.childNodes[0].nodeValue );

      var PFirstLetter = PText.charAt( 0 ).toLowerCase();

      P.childNodes[0].nodeValue = PText.substring( 1 );

      var initialImg = document.createElement('IMG');

      initialImg.src = imgLoc + PFirstLetter + imgName + '.' + imgExtension; 

      initialImg.id = 'img-initial';

      initialImg.setAttribute( 'alt', PFirstLetter );

      

      try {

         P.insertBefore( initialImg, P.childNodes[0] );

      }

      catch( e ) {

         alert( e.message );

      }

   }

}

 

function trim( text )

{

	return text.replace( /^\s*|\s*$/g, '' );

}

The following code will give the styling of your Image. I placed it in my
initials.css and this file is included in the HTML document by the
class="initials.css" /> line

#img-initial

{

	float: left;

	margin: 0 5px 0 0;

	border: 1px solid #000;

}

How the script works

You have to specify the paragraph, div or other element that should have the
initial style In your (X)HTML file. I just specified one paragraph in my code
and it looks like this:
<p id="initial">Creating A very nice initial in your text. // more tekst to expand your paragraph // </p>.

As you see the paragraph element (<p>) has an id. By this id
javascript can tell that this is the paragraph that gets the Initial. You can
change this to whatever you like. Remember, if you change it, also change it in
your Javascript, otherwise it won't work.

First I declared some variables specific for the initial-image:

 

var imgLoc = '/images/initials/';

var imgName = '-initial';

var imgExtension = 'gif';

var imgLoc = '/images/initials/' will determine where the images
are stored on your server. var imgName = '-initial' will be part
of the initial-image filename. For example if the first letter of my paragraph
will be a "D" then your initial-image filename will be d-initial.gif or if your prefer jpg, then just set var imgExtension = 'gif' to jpg. Your Image filename should then be d-initial.jpg.

After that I declare a function that lateron will be called on the onload event
of the browser.

 

function init()

{

	// function body

}

This script works in all mainstreambrowser for as far as I have tested.

If you have no inpiration for designing your own
initials, you can search
the web for interesting fonts
that will do the trick for you.

Andere artikelen

Webshops go to hell!
Custom world with Google Maps
dicaORM Object-relational mapping
Steal browser history with JavaScript
Initials (javascript)

Terug