The Easy Way to HTML Code Fic in Microsoft Word

[beatrice_otter]

Lo these many years ago, when I was just a fannish newb trying to post fanfic to LJ, my elders passed down to me a secret: how to html code your fic the easy way in Microsoft Word, without either introducing errors or weird characters.  You see, if you use a rich text interface and go directly from Word to the rich text posting, things like smart quotes (quotes which curl toward the quoted text, which is Microsoft's default) will come out as weird characters when viewed in some browsers.  If, however, you post into the html interface, you lose the smart quotes ... but you also lose all other formatting like italics and so forth.  And if you write while inserting the html tags as you go, it looks a lot messier and is harder to read and edit, at least for me, anyway.

And so here I am, passing on what I have learned so that nobody has to hand code all their italics.

Here's the simple and easy way of coding your italics and such in Word.

1. Write your fic as if it is a normal story.  If you want to have something italicized, just do it using Word's normal functions.  If you want something bold, do it using Word's normal functions.  Do this with all formatting like that.  Don't put in any html coding at all.  Just remember what formatting you put in that you will want to keep.
   1. EXCEPT scene breaks.  If you use something like this *** and Word turns it into lines for you, stop it from doing that.  (You can do this by hitting the backspace every time it does that, it should revert to *** for you.)  Use consistent characters for scene breaks, the same every time.
   2. Put a manual line break between each paragraph.  This looks nicest if you set it so that it doesn't automatically give you extra space between paragraphs, but you don't have to.  (This can be adjusted in the "Paragraph" dialog box, or in the Layout tab if you're using Word online through OneDrive.)
2. When done and ready to post, hit ctrl-F.  This will bring up the Find box.  There are three tabs at the top; Find, Replace, and Go To.  Click Replace.  There will now be two fields in the box, Find What and Replace With.
3. Put your cursor in the Find What field.  Type in whatever characters you use for scene breaks.  Then put your cursor in the Replace With field, and type < hr > (remove the spaces).  Click the "Replace All" button.  You now have the html code for horizontal lines at all the scene breaks.
4. Delete the scene break characters from the Find What box.  Click the "More" button; more options should show up.  Down at the bottom, there will be a "Replace" section with three dropdown buttons, one greyed out.  Click the "Format" dropdown and select "Font."  A new dialog box will appear.  Click Italic in the Font Style box, and then Okay.  This dialog box will disappear, taking you back to the Find/Replace box, and underneath the Find What field it will now say Font: Italic.  Move your cursor to the Replace With field and type in < em > (without the spaces).  With your cursor still in the Replace With field, click the "Special" dropdown at the bottom and select "Find What Text."  A caret and ampersand (^&) should show up in the Replace With field.  After the caret ampersand, type < / em > (no spaces).  It should look like this, except without the spaces: < em > ^& < / em >.  Click "Replace All."  All of your italic text will still be italic, but it will now have the html tags around it.  You don't have to worry about remembering to close tags--the open tag will be inserted just before the italics begin, and the close tags will be inserted just after they end, leaving the text in the middle just the same as you typed it.
5. Do the same with bold text, changing "italic" to "bold" in the Font Style box and using the strong tag instead of the em tag in the Replace With field.
6. Do the same with any other formatting you want to do in html.
7. Save As.  Instead of just hitting "Save," click "Save As" button and select .txt from the file type dropdown.  It'll ask you if you're sure, because that will strip out a lot of the formatting.  Click yes--you want to get rid of all of Microsoft's bulky and weird formatting, leaving nothing but your text and html tags.
8. Open the .txt version of your story in a program like Notepad that does nothing but read .txt files, and copy and paste from there into the HTML posting interface of the site of your choice.

And there you have it!  A lot simpler and easier than typing in your html tags by hand, with no chance of missing a close tag somewhere.

Rebloggable on tumblr.

Comments

[needled_ink_1975]

I just tested this and it works in OpenOffice Writer, too! I have more than 130K worth of fic that is going to be MUCH easier to code now (I used to just search for italics. I never knew about the "^&" trick thingy).

You are a goddess.

–N

[beatrice_otter]

You're welcome, but I can't take credit for it--I learned it from someone else, lo these many moons ago. But I figure, it's the kind of trick that makes things SO MUCH EASIER. I was betaing a fic yesterday for someone who had hand-coded the html instead of using Word's formating, and it made it harder to beta, and I realized they probably didn't know the search-replace trick, and I thought, time to pass the wisdom on.

[needled_ink_1975]

That icon, your research icon? You have no idea how appropriate it is. My story's ~130K of WWII AU.

When I got your reply I blinked and actually checked to see if I'd somehow added you to my project filter without remembering :P

[beatrice_otter]

Hee! How funny. No, I'm just a history buff.

[muccamukk]

Hand tagging as I write is such a habit by now, for me anyway. I do it instinctively, even when I'm in the middle of a word war or something.

The finding italics thing is cool. It works on open office as well.

[beatrice_otter]

Good to know on the open office thing!

I can hand tag while writing on an instinctive level; such as when I'm commenting on LJ/DW, for example. But I prefer not to have to, because it takes longer than ctrl-I or ctrl-B or whatever, and thus interrupts my thoughts more.

[genarti]

Oh man, thank you so much! I knew there was a way to do it, but I hadn't been able to find the method for a) finding all italic or bold text and b) adding the formatting instead of just replacing all italic text with empty font tags or something. This will be hugely helpful, and way faster.

(I've also just got my MS Word set to not do curly quotes, not change -- or ... to their special character versions, etc. It loses me nothing to have my quotes be ", and it saves a lot of time.)

[beatrice_otter]

Saving-as .txt will strip out all of the curly quotes and special characters in the MS format that not everything reads well, while leaving some of them (em dashes, for example, the -- made into one long dash) in a format that works pretty well with other stuff. So you get the stuff that works in a format that works, and not the stuff that doesn't work or anything in a wonky format.

[schneefink]

I didn't know you could search for text in italics! This is convenient, thanks :)

[beatrice_otter]

Yeah. One of those features that, once you know Word can do it, suddenly opens up a lot of possibilities.

[needled_ink_1975]

Hi, I'm back here, because I have some useful info for OpenOffice Writer users.

The method that beatrice_otter details here will indeed work for some older versions of OOWriter (namely my ancient 2.something), but it doesn't work in newer versions. Apparently this is a known bug.

BUT! Here is a link to the AltSearch extension (this is an Apache-approved extension, nothing hinky). Download and install by double-clicking (starts OO) and confirm installation via the extension install dialogue.

After that:
~ open your document and click your new AltSearch icon
~ click "Properties" and select "Italic"
~ in the Replace field type "< em > & < /em >" or whichever appropriate tag (without quotes or spaces, and without the caret)
~ click "Replace all"
~ PROFIT!

And then you can come back here and use the rest of beatrice_otter's awesomesauce guide.

See ya.

Ugh, ETA: in AltSearch, make sure that you have the "Regular expressions" box checked.