Initials

initial example 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.

initial C 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" href="initials.css" />
   <script src="initials.js" language="javascript"></script>
</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 sPTexttest = 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 <link rel="stylesheet" rev="stylesheet" media="screen" href="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.