PDA

View Full Version : Large letter at beginning of each paragraph?


redsea
01-24-2006, 04:20 AM
Hello all!

I'm a relative novice working on a couple text-heavy sites. To break up some of the monotony, I'd really like to incorporate what they call an "initial" at the beginning of each paragraph - that is, make the very first letter large and bold. I don't need a different font or anything.

When I try to do this simply by increasing the size and boldness, it appears to make a larger gap between the next line of text... looks pretty sloppy, with the first line of each paragraph slightly higher than it should be.

Does anyone know of a way to make those big initial letters and still preserve the line spacing? I've tried searching around a bit and couldn't find anything specific. Any info would be appreciated!
Thanks.

domedia
01-24-2006, 04:57 AM
Some CSS:
p {
font-family : arial, helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
color : #c00;
}

P:first-letter {
font-family : "Times New Roman", times, serif;
font-size : 30px;
color : #000;
}


and the HTML:


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

The CSS pseudo element :first-letter let's you select the first letter in an element, in this case the paragraph tag.

Change the style information around to experiment!

redsea
01-25-2006, 08:25 AM
Thanks a lot!

It works great in Firefox and IE, but I did notice it still increased the line-spacing in Opera. Any ideas on how to negate that?

Creative Insanity
01-25-2006, 09:55 AM
Don't use opera. hehe

No but seriously opera has problems with many sites and I think it is unreasonable to expect a developer to accomidate every browser in the world. If they did the net would be a bare place.

I would just concentrate on the most used which would be FF and IE and maybe Netscape.

davidj
01-25-2006, 10:12 AM
if only they were standadised

imaging developing to one browser knowing it will work in all

and Where rocking horse people eat marshmellow pies,

domedia
01-25-2006, 02:55 PM
redsea, maybe adding line-height: 13px into to the stylesheet in both css rules would help. Play around with the px value.

redsea
01-28-2006, 02:24 AM
Thanks for the input everyone! Being new to this, I'm not really sure where to draw the line between attractive design and compatibility, but it's nice to get some reassurance from other folks.

redsea
01-28-2006, 06:30 AM
And one more thing... is there an easy way to override this in the html? If I want some of the paragraphs to begin with a regular sized letter?

domedia
01-28-2006, 08:17 PM
And one more thing... is there an easy way to override this in the html? If I want some of the paragraphs to begin with a regular sized letter?
Yes make a class, (below I chose to use the word 'nice', but a classname can be whatever you want) and only apply it to paragraphs you want to have that effect:
CSS:p {
font-family : arial, helvetica, sans-serif;
font-size : 12px;
font-weight : bold;
color : #c00;
}

p.nice:first-letter {
font-family : "Times New Roman", times, serif;
font-size : 30px;
color : #000;
}
HTML:
<p class="nice">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>


Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>