Illuminated Texts (Big capital letters)

Have you allways tried to give your HTML texts and webpages a charming and classical touch with those big capital letters at the beginning of the first paragraph like this you see here in the left? Well, your problems are over. First of all, a little bit of historic information about the so called "Illuminated Manuscripts" of Middle Ages would be at all interesting for context construction and support for selling your project. You can find some resourceful information here.

Now you know a lot about historical books, we should start to do the real deal. Well, how can that letter be big and floating there to the left? You can try to save it as an image, and you will see for your surprise that it IS NOT an image. It's pure text. How good can that be? You don't have to worry about having all the letters converted to image. Imagine if you suddenly realized that you would have to resize the letters... How nagging would that be to have to resize them all and re-publish?

Well, thanks to our mentors of W3C, we now have an easy alternative that works in Firefox and IE from version 6.0. Take a look at the following HTML:

<span>T</span>his is some text, this is
some text, this is some text, this is
some text, this is some text, this is
some text, this is some text, this is
some text, this is some text, this is
some text,this is some text, this is some
text, this is some text, this is some text,
this is some text, this is some text,
this is some text, this is some text.

Notice that we have a SPAN tag around the first-letter. Thus we can attach particular properties to that letter. Like the ones you see bellow:

span {
font-size:400%;
float:left;
font-family:algerian,courier;
line-height:80%;
width:0.7em;
}

Now you test for yourself. Make an HTML document and try this code. For the lazy ones, try the original test from W3C here.

Some experienced people might be thinking I am too smart for my own sake, because there is and even EASIER way to do it, and I had to make such a long turn. This easier way is the First-letter pseudo-class. Pseudo-classes are states that some tags can assume. In a link tag <a>, this pseudo-classes are: link, visited, hover and active, all applied in determined events of a link.

Well, the paragraph tag <p> and other tags have the pseudo-class First-letter, which applies particular attibutes to its first-letter, as it's become pretty obvious. The code bellow shows how to apply the first-letter p-class to a paragraph, working similarly to the technique I have shown above:

p:first-letter {
font-size:100px;
float:left;
font-family:algerian,courier;
}

You can also apply it to a paragraph with a specified class or id, like this: p.class1:first-letter and p#id1:first-letter.

Try it for yourself. If you are still lazy, see it working at the W3C test here. Use the editor to apply the attributes I have shown above and you will have a nice result.

Well, you might be asking yourself why in the world did I show the first technique and not only this very easy one I have shown last, which is, really, way simpler than the first one. I did it to show two different ways, two techniques that have both vantages and disadvantages. With only one technique, perhaps would you come over a situation where it would not suit very well, or would not be very practical. Now, you can choose.

I thank our W3C gurus for these engenious ideas.

Leonardo Baptista Lopes

www.coroflot.com/neovalk

Source: www.w3schools.com