Attention SCA types: Illuminating HTML

[kengr]

I came across a site that was using large caps for the first letter of the start of sections of a story. Rather like on illuminated manuscripts.

Seeing as this was a trick I'd wanted to add to webb pages I dug into the html for the page to see how they did it.

Here's an example, using the Gettysburg address:

Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.

But, in a larger sense, we can not dedicate -- we can not consecrate -- we can not hallow -- this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us -- that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion -- that we here highly resolve that these dead shall not have died in vain -- that this nation, under God, shall have a new birth of freedom -- and that government of the people, by the people, for the people, shall not perish from the earth.

Here's the critical bit:

<p><span style="float:left; font-size:90px; line-height:70px; padding-top:3px; padding-right:2px; font-family: serif;">F</span>our score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.</p>

Comments

[freetrav.livejournal.com]

If you use a stylesheet, you might want to consider looking at using the :first-letter pseudo-element. If you mark the paragraph that you want the drop-cap on with the class "dropcap", you'd write in the CSS stylesheet

P.dropcap:first-letter { float: left; font-size: 90px; line-height: 70px; padding-top: 3px; padding-right: 2px; font-family: serif; }

And then just write

<P class="dropcap">Four score and seven years ago...</p>

This also has the advantage of not breaking the word "Four" into two words, "F" and "our", which the explicit span does. Unfortunately, you can't use pseudo-elements if you're using in-line CSS as in your example, and you can't demonstrate the CSS stylesheet version in LJ.

As a side remark, the use of px as a measurement unit is generally held to be Not Good Form, as it interferes with many browsers being able to resize (e.g., if the user wants larger text because of vision issues). Use em instead; 1em is the default size for text not otherwise resized, and will accommodate a user's need for differently-sized text as default. In your example, the 70px line-height looks to be about 4em on my browser/screen, which would make the font-size about 5.14em. But you can play with those numbers just as you undoubtedly did to get the 90 and 70.

[kengr]

I just copied the code from the page. I was going to try to find an alternative to px because I like hav ing text resizable.

I'll play with your suggestions.

[fayanora.livejournal.com]

Cool!

[scott-sanford.livejournal.com]

Lovely. My first thought was to have 26 (or so) graphics and load in F.gif or whatever as needed; this is clunky in various ways and it's nice to know that there's a more elegant solution - at least when you don't want something floral and entangled in Celtic knotwork.