View Full Version : Using CSS in Word to make a Drop Cap work in an Epub

01-20-2009, 06:57 PM
....he said, biting off more than he could chew. This'll turn out to be a bigger tutorial than I intend, but hey, what's the worse that could happen?

Attached is a DropCap.css that works in Microsoft Word 2003 and above. (below that, css support is sketchy at best).

First things, first: where should it live? Where Word really wants it to live is: C:\Documents and Settings\%USERNAME%\Application Data\Microsoft\Templates

You can put it anywhere, but if you drop it there (on a PC), when you go to add the css, it will just show up right away, instead of having to carouse around on your machine. Calibre will find it there, too.

To load it in, go to the [Tools/Templates and Addins] menu, Linked CSS tab. Pushing the [Add] button will open to the above mentioned directory. When you select it at and say [OK], Word will prompt you to save and reload the document - this is essential to make it work, so let it. Pick [Web Page Filtered] for the file type.

Once it's reloaded, the CSS will have added these styles to your Available Formatting in you Styles and Formatting pane (Format/Styles and Formatting menu):


The plan goes like this to use it:

The Paragraph you want to Drop Cap, first set the style to either [initial] or [initialwithspace] for the entire paragraph (depending on what you want to happen at the end of the paragraph - more on that in a minute).

Select the Initial Letter of the Paragraph, and change it to [drop].

From the End of the Drop Cap through the End of First Available Space, (before the next word in the paragraph) select one of the [afterdropped] styles. If the first letter is an "A" use, [afterdroppeda], if it's an "L", use [afterdroppedl], and for all other letters, use [afterdroppedw]. This controls the space between the drop cap and the rest of the first line.

This is a demonstration of what it could look like in word. Only without the Color. And you can't tell here (nor in word) that the space after the word "This" is also colored green - metaphor for styled in [afterdroppedw].

BIG FAT NOTE: IT WON'T LOOK LIKE A DROP CAP IN WORD. If you want to see it, save in (in HTML, Filtered), and open it in a browser.

Use until you're happy.

Coupla notes:

The drop cap and other code is set for the drop cap to be at 400% of "Normal", and is based on the "Normal" font call. You can change the font or size in the css, but then you'll have to adjust the spacing for the compensator styles (afterdropped). You can change the Font Call itself by modifying the style directly in Word as well.

If you modify the [Normal] style in Word, the [initial] and [initialwithspace] will be modified too.

The reason I built an [initial] and an [initialwithspace] style has to do with Word's AutoFormatting. If you use Autoformat (as I do), Word will induce into available and used styles [bodytext] and several of it's variants and apply them throughout your document. The space after the [initialwithspace] style matches the default after-paragraph spacing in [BodyText].

Word's working with css is a little weird (duh). This is because Word embeds word-generated styles in the html file itself. So if you modify any of the above styles directly in Word, some parts of your document might need to be restyled - the font size call for the drop call is and on-the-fly-embedment, so when you re-open your dropcapped html file, you'll see [drop] and [drop 48 pts]. So you'll need to know where the style came from if you're using multiple css's when you start modifying things in Word directly, and they will get whoinky. Just so's ya know.

Calibre will output the above code just fine into an epub. Mobipocket modifies things and it won't look like a drop cap in mobi. But it's not altogether horrible. FYI.

Also - it might be just my defective hardware, but Calibre seemed to have iffy trouble consistently reconnecting to the css if it was on my flash drive. So it would be better to build out of calibre directly on the rest of your computer. (Boy did that take me a while to figure out).


01-21-2009, 06:32 PM
Coupla Extra Notes.

Sometimes, it doesn't seem to work. Here's why:

Something in the process of saving the Word file as HTML, Filtered, with the DropCap.css tampers with the Normal style on it's way out that becomes evident when you re-open the file in Word, which breaks the drop cap. To Fix it, re-open the html file in Word - you'll see that the spacing between paragraphs is not how you left it.

To Fix:

Modify the [Normal] Style, Press the [Format] button in the lower left hand corner, and select [Paragraph]. In the [Indents and Spacing], set the Spacing Before and Spacing after to 0 (to Zero instead of Auto), click ok, and check [Automatically Update].

If you've used the [initialwithspaace] style, you'll see a new style: [initialwithsapce + After 0p], right click on it, and [select all (X) instances], and change them back to [initialwithspace]. This will create another new style: [drop+ 12 pt, not bold]. Same thing, right click on that style, and [select all (X) instances], and change them back to [drop. Save the file again as Html Filtered, and the drop cap will work again.

What's more, every time you get to reopen the file in Word, you get to do this again. 'cause Word is trying to "fix" things for you. Stupid Word.

This behavior is reasonably consistent, so a Macro could be called on to fix it - record the above actions, so you just have to call the macro to repair it, time and time again.

I think it has something to do with the original source encoding of the original documents - the breaking seems to be inconsistent. But the fix is consistent.

I've also seen where the text after the drop cap has run into the rest of the text of the paragraph. I'm afraid the only way to fix this, assuming it has been styled correctly to start with, is to find the offending place in a text editor (like Notepad, or better yet, Ted). You'll see something like this:

<p class=initialwithspace><span class=drop><span style='font-size:48.0pt'>A</span></span><span
class=afterdroppeda> </span>scooted away from.....</p>

Hard to see, fer sure, but the span class of [afterdroppeda] ended after Annie, then rebuilt itself for the space after the word. More of the Evil Empire's Efforts to be hElpful.

This won't work. Unfortunately, you'll have to (get to) hand-edit it (yuck) to look like:

p class=initialwithspace><span class=drop><span style='font-size:48.0pt'>A</span></span><span
class=afterdroppeda>nnie </span>scooted away from.....</p>

Again, if you get to rebuild the afterdrop-spans in Word, you'll get to refix this, too. Don't know why it happens some of the time - might have something to do with grammar checker thinking it knows more than you do (which, it does).

Stoopid Word. And yes, I know, "why would you want to set yourself up for aaaalllll this extra extra work when you could just hand edit your html and build you epub by hand from scratch?"

I'm Lazy. Remember?


01-22-2009, 04:55 AM
Depending on the font shape and size, you may have to add also special "afterdropped" styles for O, S...

01-31-2009, 06:00 PM
Wake up the dog, Clear off a 2x2 section of wall, and dig out your horsewhips, I'm back. Couldn't leave well enough alone.
Attached is a new revision of the css for making drop caps work from Word into an epub. After struggling with the first release, I've rebuilt it.

I decided that, given the size of the devices we all are reading on, a 48pt space for the drop cap is just too big. So this is toned down to 36 points.

When you attach this css into your word document, there are some noticeible changes (improvements?).

<Initial> and <InitialWithSpace> styles are gone. Use <Normal> or <Body Copy> instead, depending on what you want the space after the initial paragraph to be like - an extra 6pts (body copy) or 0pts extra space (normal). Both are defaulted in Word.

Select the 1st letter of the paragraph your want to have the drop cap appear in as <drop>. It the 1st letter is the whole word, like "A" or "I", yer done. If it is the 1st letter of a word, select the rest of the word (NOT the space after the word) in one of the following styles, depending on what the initial letter was:

<afterdroppeda> if it is an "A"
<afterdroppedbcdefopqrtvw> if it is a "B C D E F O P Q R T V or W"
<afterdroppedghijkmnsuxyz> if it is a "G H I J K M N S U X Y or Z"
<afterdroppedl< if it is an "L"

This is tuned (ha!) for the default font in Normal to be, well, normal, i.e., 12 pt Times New Roman.

A couple messages up I described a problem with the space afterr the <afterdropped---> style getting re-expressed. This is solved by not making the space after the word in the <afterdropped---> style. Word would re-express the style if the first word was a Proper Name that Word Recognizes. Can't figure out why, might have to do with word attempting to be helpful with preparations for data field, might not, I might really not care.

There is still an occasional instance of style re-expression if punctuation is involved with the first word. Still haven't figured out how to solve that from within Word.

If the first bit of your paragraph is a quote, like
"Ask Me Again," said Jane...
Most "real" books would take the initial double-quote off, and bigger up the first letter.

If the bit of your chapter you're applying the drop cap to has a bunch or really short sentences like:
A Dark a Stormy Night.
Raining to Boot.
you are on your own for making an intelligent decision to make it look right. Let me know what you think. Typical typographic techniques may not work because we can't tell where the soft line breaks will come in on the target device.

And it still doesn't look like a drop cap in Word itself. Oh Boo Frickety Hoo.