CSS Trick: Drop-Caps
Comments
Yeah, I can see what you’re saying. Perhaps my choice of wording wasn’t the best. The point I was trying to make, though, was that the example I gave would apply the style where you wanted it without having to add special code to your content to specify that you wanted a drop-cap ”here”.
Both your example and the first one I mentioned in my post rely on putting in explicit code in cases where you want the drop-cap and leaving it out where you don’t.
In particular, your example wouldn’t work in pMachine if you used the Auto-XHTML feature since it would always create a plain <p> tag.
I suppose maybe I was just trying to say that my example was more “semantic” in that it removed the styling from the content and placed the definition and logic for it entirely in the stylesheet. Which is where I, personally, would prefer it but not everyone else will. The “semantic” part of it was with regards to removing the style from the content and thus leaving the content to be (more) semantically pure rather than trying to say that a drop-cap itself was semantically significant (and in most cases, including my own use here, I’d say it is not semantically significant).
Wow, I think I’ve lost myself. :D Anyway, there are obviously tons of approaches to use here and people just have to find the one that works best for them in their particular case.
Chris- Just tried this out (I had been using the span class="dropcap" method previously, but I kept forgetting to do it for every entry) and it works great in Moz & Firefox, but it doesn’t have any effect on the text in IE/win. Any ideas?
My guess is that IE is not pulling a fresh copy of your CSS. Try browsing directly to your CSS file in IE, or flush your cache and reload.
:IE: is an evil, dumb browser.
Which is to say: it doesn’t support the “:first-letter” pseudo-element. If you view this site in IE you’ll see that the drop-cap doesn’t appear. For my puposes, though, it’s just a nice little extra visual benefit that people who use a decent browser get (along with a number of other nicer effects). It doesn’t hamper any IE users.
thanks for the tip Derek, but unfortunately it didn’t help. still showing fine in all browsers but IE. unless anyone has any other suggestions, i think i’ll go back to the span method and just be more dilligent about using it.
chris- thanks for the info on IE not supporting the first letter pseudo-element. you’re right- it doesn’t hamper IE users, but since 90% of my blog readers are using IE, my dropcap is essentially non-existant on my site. i added the dropcap span as a formatting button in my EE publish page, i’ll just have to discipline my self to use it.
It doesn’t matter whether you use my typical span method or :first-letter. Drop-caps are a subjective display characteristic and are *not* semantic. Not semantic. Not semantic. Not semantic. Not semantic. Semantic? No, obviously not semantic. Just want a big letter from time to time. Not semantic. Obviously not.
Chris-
Perhaps if IE won’t recognize the first letter psuedo element in CSS, there’s another way to tell software to apply some action to the first letter of a paragraph, perhaps using php, like through a plugin? (There’s a Drop Cap plugin for MT, presumably in Perl)
Here’s my idea: I like to apply dropcaps at the EE field level, not the paragraph level. In other words, I want only the first letter of the {body} field to be drop capped, regardless of how many total paragraphs there are in {body}. Why? Because I use drop caps to signify new blog entries, not new paragraphs. (I use a drop cap rather than displaying entry titles, because I got sick of trying to think of witty titles for entries. Now I can apply a boring but relevant title for archiving purposes, but most readers won’t ever see it)
So would there be a way, through a plugin, to use php to tell EE to always apply some predefined style, like span class="dropcap", to the first character a designated field?
Yes, that could certainly be accomplished with a Plugin. The basic logic would be amazingly simple, too. Strip off the first letter, wrap it in the specified code, then prepend it to the field text.
The trick with it is that you’d also want some logic that would make sure that the first character wasn’t from pMcode or HTML. So it would have to be smart enough to “ignore” any code that was actually part of the entry and simply select the first “real” letter/number.
So, yes, it’s definitely possible. It’s not something I have time to mess with, though.
That code isn’t very semantically correct, though.
Something bothered me about this statement, Chris, but I couldn’t figure out what, at first. I mean, a dropcap’s a stylistic element. What semantics can it bear?
In thinking about it though, I guess a paragraph that begins with a dropcap signals a topical change, as though there’d be a heading above it if you could think of one. So I guess a paragraph beginning with a dropcap has semantic significance.
But in that case, shouldn’t the :first-letter pseudo-class be applied to paragraphs discretely, rather than with an Adjacent Sibling Selector? In your example the paragraph’s semantics piggyback on the H4’s. Isn’t the paragraph the thing? How about this:
.dc:first-letter {
clear: left;
float: left;
margin: 0em .2em 0em 0em;
padding: 0em;
color: #039;
font: bold 1.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
height: auto;
left: 0em;
top: 0em;
position: relative;
background-color: transparent;
}
This way, any paragraph can be given ‘class="dc”’ and we’re all set. The stylesheet and rendering can change, but the semantics of a “drop-cap paragraph” are preserved. ‘Course this is a drag if you use a CMS and avoid long-handing structural markup into stored content (obviously, :first-letter can only be applied to block-level elements). I think your solution is trying to work within that limitation.
The middle ground is to use Textile, which will distinguish ordinary paragraphs by double linefeeds but still lets you apply a class to an individual paragraph:
p(dc). This paragraph begins with a drop-cap.
Whaddaya think?
LQ
By Lou Quillio on February 13, 2004 at 01:49pm link