How to shout "understated elegance" with your very own drop cap

Wenchie

You obviously can't be a blogger without a personalized drop-cap. Says who? Says I, because I spent an entire day making mine, so everyone else should, too. Unfortunately, by writing this post, I discovered all sorts of new ways to make drop-caps, so now my CSS circles look... humble. Can you at least tell that I tried to make them look like old-fashioned typewriter keys?

Early bloggers were expert drop-cappers

Early bloggers were very much into drop-caps, also known as "initial caps," "decorated initials," "historiated initials," or "those fancy illuminated letters that medieval monks made."

I was going to say: "Drop-caps were very popular until the mechanical printing press came along and ruined everything," but when I researched that statement, I found it was not precisely true. In fact, the Gutenberg Bible was the world's first adult coloring book. See, Gutenberg was not satisfied with being the man who adapted a wine press into a printing press, developed moveable type, and invented oil-based ink. He wanted to print in technicolor. So while he could have been making a ton of money selling black-and-white copies of the Bible to all the bishops in medieval Europe, he instead got stuck in a technology hell-hole, like we all do when we try to do something that is just a little bit beyond our capabilities. He wanted to figure out an econonomical way to run the same page through his press multiple times with different-colored inks. After all, what was a Bible without red headings and decorative drop-caps and pictures of saints slaying dragons? But printing in color made a mess, it took forever, and he was going broke, so finally he gave up and said, "Fine. What if we ONLY used the black ink and left blank spaces where the drop-caps and the illustrations need to go? Then artists can fill in the blanks."

That led to an explosion of drop-capping and illumination throughout the land. Imagine how bitter the old monk-artists must have been. "The privilege of designing an illuminated drop-cap has to be earned, by copying the entire book of Genesis with a sharpened feather and a pot of iron gall ink, dammit!"

It also led to Gutenberg going bankrupt and losing the press, his employees, and all 180 Gutenberg bibles to his investor (a lawyer, of course), who proceeded to make a killing and take all the credit for having invented the printing press.

I find his story incredibly touching. Revisionists say he was a "con man" because he didn't pay his bills and "paranoid" because he worked in secrecy, but duh, look what happened. He was obviously a creative genius, like Da Vinci, Ben Franklin, and Edison. (Sorry, not including Mr. Jobs in that list. His arrogant deletion of the delete key makes him genius non-grata in my book.)

So the printing press actually spurred the development of drop-cap artistry, until it later turned around and destroyed it, when factory-based mass-production and newspapers came along, and there was no more of that expensive, "let's hire artists to put the final touches on our books" nonsense. So we wannabe CSS drop-cap artists have to look to the way-past for our inspiration.

I love the professor's note on this example of early, Gutenberg drop-cap-art:

...bizarre, eclectic, and rustic... the letters include gold leaf gilding and are embellished with leafy tendrils, floral spirals, and geometric lily of the valley designs. It cannot be assigned to the typical tradition of any region, suggesting it is the work of a remote artist living in a monastery who had limited training or worldly contact.
I could draw that
But, personally, this is my favorite ancient drop-cap. Why? Because it looks like something I could have drawn. Technically, a drop-cap with a picture is called a "historiated initial," but I'm not sure where the dividing line is between a dragon shaped as a letter, and a dragon shaped as a letter while a saint is stabbing it.
<p class="drop-cap-round">You're not a real blogger until you learn how to make your own, fancy-schmancy, CSS drop-cap. So says I, because I spent an entire day making one, so everyone else should have to, too. </p>

and my paragraph will not only start with a drop-cap, but the first sentence will be bold and larger-than-normal, and the rest of the paragraph will be larger-than-normal, and there's no graphics involved, and I don't have to go and load a different image if I decide to start the sentence with an "A" or a "Q" instead of a "Y."

See? I'm doing it again. Same exact thing. Now, I'm not going to go into the details about making drop caps.

I followed this tutorial: https://webdesign.tutsplus.com/tutorials/better-css-drop-caps-with-initial-letter--cms-26350

TWO ISSUES WITH IMAGE VERSION: YOU HAVE TO REMEMBER TO NOT WRITE THE FIRST LETTER OF ACTUAL TEXT, WHICH IS PROBLEM IF SOMEONE EXTRACTS YOUR BLOG POST, OR IF YOUR EXCERPT IS 40 WORDS. SO THAT MUST BE WHY SHE HAS -9000 MARGIN ... DOES THAT SUCK AWAY ONLY THE FIRST LETTER? CAN IT GO BEHIND THE IMAGE? IF SO WHAT IF TRANSPARENT IMAGE?

and all the time in the world, they somehow succeeded in creating work that is still admired to this day.

their work was hampered Also known as were everywhere, at least if you worked in a medieval monastery they were. rop-cap, so says I, to start every post with a fancy-schmancy drop-cap, Now, my drop-cap might not feature a dragon eating a bird, or a dragon getting stabbed by a saint, or

The flexible spine of the dragon makes them ideal for drop-caps
/* =================================================== */
/* MARY'S HAND-MADE ROUND DROP CAP  */
/* =================================================== */

.drop-cap-round:first-letter {
	float: left;
	font-size: 5rem;
	font-family: 'Special Elite', cursive;
	/* was 1.1rem */
	line-height: 2.1rem;
	/* going crazy because 2.6em is perfect for chrome but too much for firefox*/
	padding-top: 2.6rem;
	padding-right: 1.4rem;
	padding-left: 1.4rem;
	padding-bottom: 1.2rem;
	/* Nice! This makes it sink down */
	margin-top: .25rem;
	margin-right: .5rem;
	/* margin-bottom: -.1em; */
	border: 4px ridge darkgray;
	/*navbar brown */
	background: #373737;
	/* smoky gray or whatever */
	color: #F5F5F5;
	text-shadow: 3px 3px gray;
	/* seems to work better with this at end */
	border-radius: 50%;
}
/* this prevents drop cap from being oblong in firefox */
@-moz-document url-prefix(){
	.drop-cap-round:first-letter {padding-top:20px;}
}


.drop-cap-round:first-line {
	font-weight: bold;
	font-size: 1.2em;
}
/* ADDING MARGIN TO PUSH FIRST MARKDOWN NON-PARAGRAPH DOWN*/
.drop-cap-round {
	font-size:1.2em;
	margin-bottom: .5em;
}




fun idea use kids doodles

New frontiers in drop caps:
The initial-letter property will be coming soon.
The concept of curves so the text wraps the actual letter.

Resources:
Open clip art nice alphabet- https://openclipart.org/search/?query=drop+cap
Image-based drop caps: http://www.dailydropcap.com/

Image sources:
https://digital.blb-karlsruhe.de/blbhs/Handschriften/content/pageview/148211
http://www.wikiwand.com/en/European_dragon
https://medieval.tumblr.com/post/27417486964/history
http://upennmanuscripts.tumblr.com/post/121687101216/zoomorphic-initial-s-in-the-form-of-a-dragon-on
Bible: http://www.bpl.org/distinction/files/2016/12/Mentelin3-1.jpg
http://www.hrc.utexas.edu/educator/modules/gutenberg/invention/illuminations/