::first-line & ::first-letter

January 29, 2004 | View Comments (16) | Category: CSS Focus

Summary: Explaining the uses of the ::first-line & ::first-letter pseudo elements.

In this second edition of CSS Focus we will look at the ::first-line & ::first-letter pseudo elements. These are really effective if you wish to give your conent a more artsy, graphic design type feel. I can see this being especially effective on articles that span a couple of pages. If you forgot what a pseudo element is in CSS here is the definition straight from the horse's mouth:

Pseudo-elements create abstractions about the document tree beyond those specified by the document language.

Got it? All it is saying is that the normal function of document languages does not allow the use of selecting specific elements from a document, but with pseudo elements you are given that power.

::first-line

This can only be used on block level elements suchs <hn>'s and <p>'s, but I have only seen it used for <p>'s. All this does is give you the ability to change the first line of the paragraph using any of these CSS properties:

So there are numerous things you could do with these properties and the ::first-line pseudo element. You may wish to make the first line all capitals and in Times Roman or create some funky spacing between all of the letters. If the first sentence wraps beyond the first line it will still only apply to the first line of the block level element.

::first-letter

The ::first-letter element changes the first letter of a sequence to whatever your heart desires that is available from these options:

As was the case with ::first-line there are an endless amount of things you can do when using this element. The only real effective use of this element that I have come across is making drop caps. An example might be:

Test case for this element. Hopefully, it works and I am not making a fool of myself. If I type this long enough you will see that the first letter drops down and covers two lines. However, I think my line-lengths are longer than what I specified for this drop cap so more than likely it will be huge, but not cover two lines. The code behind this was quite simple to implement, but the effect can be powerful. I think this would work really well with serif fonts such as Times and Georgia.

I am sure many of you were aware of these elements before, but for those who didn't, now you have some new toys to play with and for those who forgot about them, maybe you could consider using them in your next design.

UPDATE: As Minz pointed out in the comments, these are CSS3 selectors so will not work in the majority of browsers. The CSS2 selectors are :first-line & :first-letter (notice only one colon). With regards to what works in what browsers, I have no idea.

Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/128

Comments

#1

First, it does not work in Opera 7.23. On the other hand, Moz 1.5 the first letter only covers one line (as far as I understand)

Gaspar (http://511.blogspot.com)

#2

Scrivs,
I'm just wondering why you didn't use the CSS2 Selectors, which shoiuld work in most browsers?
Or is CSS Focus about CSS3?
Sorry if I got that wrong.

Minz Meyer (http://www.minzweb.de)

#3

ehm....
my apologies, should be pseudo elements, NOT selectors...

Minz Meyer (http://www.minzweb.de)

#4

Scrivs,

are most pseudo styles supported by all modern browsers?

Steven

#5

When you consider that most DTP software mishandles drop-caps, you can only expect it to be worse on the web. Drop-caps have only really been properly done in handset letterpress.

The question is what you line up, on a "T" for instance the left-hand arm should be in the gutter and the text aligned with the outer edge of the vertical stem of the letter. Of course, I am talking proper typography here you realise. I think people would be best advised to forget about drop caps on the web. Mind you, I think people should also forget about drop-caps in books and magazines until they learn to do them properly.

Joel (http://biroco.com/other/nash.htm)

#6

And of course it didn't work on IE6, but Firebird does style the first letter.

While I don't know much about typography, I'd agree with Joel that it doesn't seem to align well.

It doesn't look sloppy, it just doesn't look like it fits well. Perhaps if it were slightly larger and did take up two lines?

Anyways, thanks for posting about these pseudo elements. They're new to me.

Jacob (http://www.mavenglobe.com/blog/)

#7

Minz: To be honest I was browsing the CSS specs and came across those pseudo elements. That is how it happened.

I see it only works in Moz so far. It might work in Opera if the style wasn't inlined possibly.

Joel: I agree that the example could have been done a little bit better and maybe people shouldn't use it too much, but to say they shouldn't use it till they know how to do it right is something I have to disagree with. How can you know how to do it right, unless you actually do it?

Also, I think it look horrible with sans-serif. Maybe I will change the style to a serif font to see its effect.

Scrivs (http://www.9rules.com/whitespace/)

#8

Changed the font to Times, but still couldn't get it to cover two lines. Oh well, something play around with.

Scrivs (http://www.9rules.com/whitespace/)

#9

For that to really look right, you need a titling caps font... which of course most people don't have on their PC, so again, you're back to the font issue.

If I have to do a drop cap for something, I'll use a graphic. If someone's on a screen reader, one missing letter won't cause too much confusion. (I suppose you could use that image replacement technique if you really cared that much about one letter)

I remember wasting several hours of my life on the CSS2 variants of first-letter and first-line.
You can see samples of the CSS2 ones (and they work in IE6) here:
http://www.mompswebdesign.com/css/dropcap.html

JC (http://thelionsweb.com/weblog)

#10

It doesnt seem to work in Safari 1.1, maybe I am just missing something?

Josh Jarmin (http://www.radiantrock.com/blog/)

#11

Scrivs, thing is I don't think a drop cap can be done right with CSS at all, that why I think it should be avoided. I wasn't criticising your attempt above, simply saying the technology doesn't have the finesse required. And that even with DTP most designers without a background in typography invariably do drop caps badly because the software invites people to do them badly.

Take a look at the drop caps in some of the old Private Press handset letterpress books where people slaved for hours on drop caps. There they look right.

Joel (http://biroco.com/journal.htm)

#12

Well when you put it like that Joel it all makes sense :)

I guess it just goes back to CSS and power.

Scrivs (http://www.9rules.com/whitespace/)

#13

Josh: It looks like Moz is the superior browser when it comes to this stuff.

Scrivs (http://www.9rules.com/whitespace/)

#14

Scrivs, most of the browsers mentioned *do* support the first-letter, first-line psuedo elements. I think your demo is what's at fault.

"<p:first-letter>T</p :first-letter>" is not valid HTML. And a "T" is not its own paragraph (if you wanna argue symantics).

Psuedo elements are only for the CSS, so your demo should just be normally marked up with the CSS in the HEAD looking something like: "p:first-letter {yadda:yadda;}".

I know you were trying to keep the styles inline, but inline psuedo elements aren't possible with CSS2.

David (http://individed.topcities.com)

#15

Just to help you out a little bit, I have done a little test on CSS2 pseudo-elements:
http://www.minzweb.de/en/pages/working/pseudo.htm
It seems to work in most browsers.
About the <p:first-letter> markup. This is fictional markup as mentionened in the specs in order to show how a browser could possibly interpret these pseudo-elements:
http://www.w3.org/TR/REC-CSS2/selector.html#q20

Minz Meyer (http://www.minzweb.de)

#16

Well done Minz. A great example.

Scrivs (http://www.9rules.com/whitespace/)

Keep track of comments to all entries with the Comments Feed