View Single Post
Old 01-20-2009, 06:57 PM   #1
brewt
Boo-Frickety-Hoo-Erizer
brewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enoughbrewt will become famous soon enough
 
brewt's Avatar
 
Posts: 251
Karma: 686
Join Date: Oct 2007
Device: Kobo Glo HD!
Using CSS in Word to make a Drop Cap work in an Epub

....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):

afterdroppeda
afterdroppedl
afterdroppedw
drop
initial
initialwithspace

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).


Enjoy.
-bjc
Attached Files
File Type: zip DropCap.zip (339 Bytes, 875 views)

Last edited by brewt; 01-22-2009 at 10:59 AM.
brewt is offline   Reply With Quote