Drop Caps for Expressive Paragraphs on Wikidot
-
I've recently started playing with this for a Roman-themed wiki I'm developing for a friend's game. I've always loved the concept of a drop cap, but not all codebases make coding a drop cap easy. Sure, CSS has ways, but it isn't always user-friendly, and you are limited by your fonts.
Here's a way to do it that creates unique drop caps, and works nicely with most Wikidot pages. It isn't PERFECT, but it's close.
- Using an graphic design program (Photoshop, Fireworks, GIMP), create PNG files for each alphabetic letter using the font of your choice. Keep the background transparent. Try to keep these images small. Mine are no more than 55 pixels square (click here for my drop cap library).
- Upload your images to a library, as I have done in the above link.
- Use the attached code at the beginning of the paragraph you want to add a drop cap, where 'L' is the letter you want to be the drop-cap (and obviously your own wiki address).
[[span]][[f<image http://ablusandbox.wdfiles.com/local--files/dropcaps/L.png]][[/span]]This will add the drop cap. Now, it varies on how close to the top of the paragraph the drop cap sits. I'm still troubleshooting that, but this works pretty nicely as is.
