Home / Ranma 1/2 Fanfictions / Format

HTML Formatting for Prose

Version 2.0

Joseph Palmer

2.0.1 updated 2003 05 19: "P" changed to "p" in stylesheet (Thanks, B.P.!)

2.0.2 updated 2004 07 22: Fixed "margin-top" description, fixed spelling error, added "Borders" internationalization (Thanks, R.S.)

This is an evolving document. If you have comments, or have found errors, please let me know so that I can address them. jpalmer@josephpalmer.com

 

HTML can be coaxed into presenting your Fanfictions in a form very similar to a book. I've been refining my format over the years, and have finally found one that I like.

Don't panic! While this rather lengthy document goes into some detail about the hows and whys of the format, a complete template, ready to cut and paste is provided in Appendix A.

The goals of this format

Indented Paragraphs - In a book, a new paragraph is indicated by indenting the first line.

Paragraph Spacing - In a book, there is no extra space between paragraphs, unless there is a break in the narrative.

Fixed Column Width - There's a reason why prose books are printed with the text crossing the narrow direction of the page, and why large pages are broken up into columns — The eye is more likely to find the beginning of the next line if it does not have to retrace too far.

I had originally picked a width of 22em, based on measuring a selection of paperback books. Over time I dedcided that 22 felt too cramped, and I have since increased the width to 26

Font - I have not specified either the font face, nor the absolute font size. I'd rather let the user display the document on their preferred or default font face and size. Readers with visual disabilities can view the story with a very large font, and readers with ultra-high resolution monitors may need a larger font. Readers with low resolution displays (or PDAs) may need a smaller font.

Compatibility - The format renders nicely on all browsers, including text based tools like "lynx". This format does use Cascading Style Sheets (CSS), but it does not depend upon them. Obsolete browsers (and lynx) that don't understand CSS will still display a pleasing representation of the prose.

CSS is used sparingly - there has been a lot of noise about poor support for the entire CSS spec in popular browsers, but the subset of features I've used in my format work with Navigator, Internet Explorer, and Opera.

I have changed from using an extrernal linked stylesheet to a self-contained stylesheet embedded in the document head. I know that seems like a step backwards, but many fanfic readers download stories to their computers to read later, and by embedding the stylesheet, the stored HTML document will display properly. Some readers told me they copy the story and save it into a plain text file. Sigh. My aging eyes find 'plain text' to be jarring, and on the occasions when I've printed out fanfics to read, I've pasted them into a word processor to change the font and format to look more like a book. (Besides, if plain text was so good, then why aren't novels printed that way? I challenge you to locate a single work of fiction in your local Borders* published in plain text.)

* Subsititute your local generic booksellers

Standard - This format uses XHTML, which is more strict than normal HTML. Modern browsers are bloated with code that tries to make sense of poor html, XHTML is a response to that. If we create better-formed documents, the browsers can be simpler. (Think PDAs) Strangely enough, I find the enforced structure of XHTML simpler to remember and use than plain html.

There are a few changes in XHTML, but none are particularly difficult. Tags must now be lower case. (That argument is over.) Values must be within quote marks: like "this". No overlapping tags, and all elements must be terminated. The bigest change may be that the <font> tag has been depreciated, so text effects like text color must now be done by using the <span> tag within the stylesheet. (I sometimes include inline translations using a 'grey' font.) I find the span tag easier to use, since no matter how much decoration you envoke with the tag, it is all properly ended with the </span> tag.

Webreview (Now part of Dr. Dobbs) has an excellent article explaining the ins and outs of XHTML.

Contents:


The Format


The Header

This is the required stuff you put at the top of your document to tell the browser what to do. It is not displayed on the screen of the browser.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> The title of your document </title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<meta name="MSSmartTagsPreventParsing" content="TRUE" />

 

<style type="text/css">

<!--

div {width: 26em; margin-left: 2em; margin-right: 2em}

div.wide {width: 40em; margin-left: 2em; margin-right: 2em}

p {margin-top: .3em; margin-bottom: .3em; text-indent: 1em}

p.none {text-indent: 0em}

p.small {font-size: .75em; color: #0000EF}

p.blk {margin-top: .5em; margin-bottom: .5em; margin-left: 2em; margin-right: 2em}

ol.copy {font-size: .75em; list-style-type: lower-roman}

ul {font-size: .75em}

body {Background: #CDC0B0}

img.nb {border: 0}

span.grey {color: grey}

-->

</style>

 

</head>

 

The <!DOCTYPE... line is required by XHTML, It's sort of a pointer to the 'Roseta stone' of HTML. I've switched from transitional to strict Doctype. (It's 2003!)

The <html... line declares that this is an html document, and points to the name space documentation. (Again required by XHTML)

The <head> tag begins the header. The header is also where you would put other meta-information, like search tags.

The <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> Sets a character set, as required in XHTML Strict. ISO-8859-1 is a common latin (West European) character set.

The <meta name="MSSmartTagsPreventParsing" content="TRUE"> tag prevents Internet Explorer from adding "smart links" to the text of your story. "Smart Links" was a feature invented by Microsoft that would inflict ugly squiggly lines under seemingly random tag words on your webpage, Mucking up your nice layout and enticing your readers to visit another (Microsoft sponsored) page while in the middle of your page. After much feedback from webmasters, Microsoft backed down from deployment of this feature, but has not disavowed it for future use.

The <title> tag begins the title. This title is what's picked up in the browser window title, and it's picked up as the title if you bookmark a page. Close the title with the </title>tag.

The <style... tag starts the style section, which is placed in HTML comments. The elements of the style sheet will be covered below.

The </style> tag ends the style section

The </head> tag closes the header.


The Body


The body contains the HTML that will be rendered onto the screen.

 

<body>

<div>

<h1> The Title of your Story, </h1>

<p> By T. Author</p>

<hr />

<p class="none"> This is the first paragraph of the story. XHTML demands that a paragraph always begins with a <p> tag and end with a </p> tag. Note that I've selected the "none" class so this first paragraph is not indented. It is a common typographical practice to leave first line of a chapter without an indent. </p>

<p> This is the second paragraph of the story. Note that no style class has been selected, so this paragraph will be rendered per the style for "p", which includes a 1 em text indent. I placed the indent on the "p" since it is the most common paragraph used in prose. </p>

<p> Each paragraph in the story is formed in the same way. </p>

<hr />

<a href="http://validator.w3.org/check?url=" your full url"><img border="0" src="vxhtml10.gif" alt="Valid XHTML 1.0!" height="31" width="88" /></a>

</div>

</body>

</html>


The <body> tag is required, It tells the browser that the body starts here. (The closing </body> is at the bottom of the format.)

The <div> tag declares a "division" within the document. A div is a structual block element of HTML, it can contain other block elements. (A paragraph is a block element) In the Stylesheet the div is used to set the width of the text. I put the entire story into one big "div". (See the closing </div> down at the bottom of the format.)

The <h1> tag makes a nice big title. The </h1> tag is required to close the title.

The <p> tag starts each paragraph, the </p> tag is required to close each paragraph. To select a styled paragraph, the class of the tag is added within the opening paragraph tag.

The <hr /> is used to create a break between the title section and the story itself. That space and slash are not a misprint. XHTML requires that all elements be closed (which explains the </p> on every paragraph). Naturally empty elements, such as the <hr> are closed by the addition of a space and trailing slash.

The following section is optional.

 

<a href="http://validator.w3.org/check?url=your full url"><img class="nb" src="vxhtml10.gif" alt="Valid XHTML 1.0!" height="31" width="88" /></a>

 

It places a small graphic in your story, and links it to the W3 validation software. When you click on that graphic it asks the W3 to read the page you've specified, and generate a report about that page.

It looks like this:

Valid XHTML 1.0!

Go ahead, click on the picture above. Then hit the back button on your browser to get back here.

That's the format. That's all you need to be XHTML compatible. Now on to the Stylesheet...


The Stylesheet

This is the style sheet that I use for my stories.


div {width: 26em; margin-left: 2em; margin-right: 2em}
p {margin-top: .3em; margin-bottom: .3em; text-indent: 1em}
p.none {text-indent: 0em}
p.small {font-size: .75em; color: #0000EF}
p.blk {margin-top: .5em; margin-bottom: .5em; margin-left: 2em; margin-right: 2em}
ol.copy {font-size: .75em; list-style-type: lower-roman}
ul {font-size: .75em}
body {Background: #CDC0B0}
img.nb {border: 0}
span.grey {color: grey}

div - Division

div {width: 26em; margin-left: 2em; margin-right: 2em}

The div Element is the magic key to this format. It's used to set the width of the text, and to pull the text away from the left edge of the window.

The width: property sets the width of the 'div' region.

The margin-left: pushes the div region to the right, (Out of the left gutter)

The margin-right: does the same on the right.

I'm using the em to set the widths here. The em is a relative measurement, which means that the width of the text is related to the font size. If you want to know more about the em, here is an outstanding article on Typographical Measurement systems.

A width of 26em will cause the lines to break a little wider than a paperback book.

Browser note: The 4.x versions of Netscape Navigator will display the text as something closer to 28 em wide. That's a bug. Navigator 6, IE 5x, and Opera will display the text correctly at 26em width. (It's 2003, time to get a modern browser)


p - Paragraph

p {margin-top: .3em; margin-bottom: .3em; text-indent: 1em}

The p element sets the base style for paragraphs. A paragraph is a block-level element, which means that it is rendered within a 'box'. For the base style I adjust the whitespace above and below the box, and I use text-indent: to indent the paragraph.

margin-top: sets the space above the 'box'

margin-top: sets the space below the 'box'

These style changes pull paragraphs of text closer together. Books are printed with no blank lines between paragraphs, but the HTML standard renders a full blank line between paragraphs.

I've elected to bring the paragraphs closer together, but not so close as to completely remove the extra 'leading' between them. This compromise is a both an aesthetic choice and a concession to the lower resolution of computer screens. In less fancy words, I like the way it looks.

There's another reason to bring the paragraphs together — a full space between paragraphs is used in prose to indicate to the reader that a change or discontinuity has occurred in the narrative.

That full line break is forced by adding a paragraph with a non-printing character between paragraphs:

 

<p> Here is a sample paragraph. It's just nonsense text used to illustrate the basic shape of a rendered paragraph.</p>

<p> &nbsp;</p>

<p> Here is a the second sample paragraph. It's just nonsense text used to illustrate the basic shape of a rendered paragraph.</p>

 

This html would render as:


Here is a sample paragraph. It's just nonsense text used to illustrate the basic shape of a rendered paragraph.

 

Here is a the second sample paragraph. It's just nonsense text used to illustrate the basic shape of a rendered paragraph.


p.none - Paragraph (no indent)

p.none {text-indent: 0em}

This style is called by adding the class parameter "none" to the p tag:

This style cascades the whitespace styles from the <p> tag, but over-rides the text-indent so that the paragraph is not indented. This seems a bit backwards, but since the indented paragraph is far more common in prose, I figured it was better to have the default paragraph indeneted and save the more verbose tag over-ride that indent.

p.small - Paragraph (Small)

p.small   {font-size: .75em; color: #0000EF}

I use this style in one place, in the navigation line at the top of each story.

 

<p class="small">This is the string of text I want to appear in a smaller font. It will also appear on a bluish color.</p>

 

It will render as:

This is the string of text I want to appear in a smaller font. It will also appear on a bluish color.

 

Here's what my navigation bar looks like:

 

Home / Ranma 1/2 Fanfictions / Format

 

The HTML for that looks like this:

<p class="small">
<a href="http://www.josephpalmer.com/index.shtml">Home</a> /
<a href="http://www.josephpalmer.com/fanfic/fanfic.shtml">Ranma 1/2 Fanfictions</a> / Format</p>

 

I recommend that you have a navigation feature for your entire website, but that is, of course, optional.


p.blk - Paragraph (Block)

p.blk     {margin-top: .5em; margin-bottom: .5em;}

I use this style for paragraphs that are in some way removed from the story. The text appears in a smaller box like this:

This is an example of the 'blk' style, I used it in "Black" to set off a news report that was heard from a radio. The block format is commonly used when a large block of text is to be quoted verbatim, such as a newspaper article.


ol - Ordered List

    ol.copy      {font-size:  .75em; list-style-type: lower-roman}

I use the ordered list to format my copyright disclaimer.

Note that this disclaimer is for Ranma 1/2, (You'll need to reference the correct copyright holders) and that as far as I know no such disclaimer has ever been tested in court. I wrote this one in a good faith effort to acknowledge the authority of the story's creator.

Japanese copyright law is somewhat more deferential to the derivative works than US law, but more importantly, In Japan there seems to be a peaceful co-existance and perhaps a demonstratable symbiotic relationship between original publishers and dojinshi, which borrow liberaly from the original works for character and art designs than do prose fanfiction.


Copyright Notice

  1. The characters and stories of Ranma 1/2 are Copyright © Rumiko Takahashi, and are used here without permission or license.
  2. No claims to the above copyright are made by the author of this work.
  3. This work is for non-commercial use ONLY, and is produced for the enjoyment of fans only.
  4. This work is the expression of the author and the depiction of the Ranma 1/2 characters herein are in no way represented to be a part of Ranma 1/2 as depicted by the original author and copyright holder(s).

The HTML for that looks like this:

<p><b>Copyright Notice</b></p>

<ol class="copy">

<li>The characters and stories of Ranma 1/2 are Copyright &copy; Rumiko Takahashi, and are used here without permission or license.</li>

<li>No claims to the above copyright are made by the author of this work.</li>

<li>This work is for non-commercial use ONLY, and is produced for the enjoyment of fans only.</li>

<li>This work is the expression of the author and the depiction of the Ranma 1/2 characters herein are in no way represented to be a part of Ranma 1/2 as depicted by the original author and copyright holder(s).</li>

</ol>


ul - Unordered List

    ul{font-size:    .75em}

I used the unordered list in "Hot" to break off a series of non-story paragraphs.


body - Body

    body    {background: #cdc0b0}

I declare a body background color to flood the page with a less than bright white background. I'm personally not very hot on either full white or patterned .gif backgrounds, and I find that a pastel background makes it easier on the eyes.


Tools


Text Editor

I prefer NoteTab Pro 4.82 as my text editor. NoteTab Pro does html tag coloring, and can integrate with Html Tidy. It's available online for $19.95. I've been using it for a couple of years, and it has proven to be very stable.


HTML Validator

I use the W3C validator to check the validity of my code.

I think it's important to the future of the web that we authors stick to the W3 standards. By supporting open standards, can we can help prevent the takeover of the web by those pushing proprietary features and tags.

I used to use HTML Tidy, but I've found that since I switched to XHTML, I make far fewer errors, and I find the utility of an offline checker is no longer compelling.


Text Decoration

Bold

<b> </b> - Bold is frequently used as the title of chapter, but is rarely used within the body of prose text.

 

Example Bold Text

 

<i> </i> - Italics is used for extra emphasis or to clue the reader that a word is in a foreign language.

Italics

 

Example Italic Text

 

Colored text

Colored text is rarely, if ever, seen in in the body of fictional prose. I use a grey color to de-emphasise inline translations:

 

“So is purple hair your type?” Mariko nudged her brother.

He watched as they crossed the room. “Keba-keba.” [Too showy (fluffy)]

Mmmmmmm.” Mariko hummed.

 

The HTML for that looks like this:

 

<p class="blk">He watched as they crossed the room. &#8220;<i>Keba-keba</i>.&#8221; <span class="grey">[Too showy (<i>fluffy</i>)]</span></p>

Special Characters

HTML can call characters outside of the normal ascii range.

 

&nbsp; - The non-breaking space. This space can be put between words that you simply don't want split between lines. Also, since browsers compress 'white space', tabs and spaces in the source file are shrink to a single space. The &nbsp; is treated differently, and you can stack them up to make indents or expressive spacing.

 

Example     of several non-breaking spaces in a row

 

&#8212; - The em dash. An extra wide dash commonly used in prose to mean a break longer than a comma. Traditionally the em dash is as wide as the block around the capital letter "M".

 

Example—Text

 

Punctuation

&#8216; - The left (opening) single quotation mark.( )

&#8217; - The right (closing) single quotation mark. ( ) Also used as the apostrophe.

&#8220; - The left (opening) double quotation mark. ( )

&#8221; - The right (closing) double quotation mark. ( )

Examples: First with true quotation marks, then in typewriter style:

 

“I find that ‘curly’ quotation marks give prose a professional polish.”, don’t you agree?”

 

"I find that 'curly' quotation marks give prose a professional polish, don't you agree?"

 

Clearly, that wasn't he best bit of prose I've ever written, but it does make use of both double “ ” and single ‘ ’ quotation marks, and the use of &#8217; as an apostrophe.


Appendix A

A Copy-paste ready XHTML Template, ready for you to input your story. The text in red is the fixed boilerplate, and the text in blue should be replaced.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> The title of your document </title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<meta name="MSSmartTagsPreventParsing" content="TRUE" />

<style type="text/css">

<!--

div {width: 26em; margin-left: 2em; margin-right: 2em}

div.wide {width: 40em; margin-left: 2em; margin-right: 2em}

p {text-indent: 1em}

p.none {text-indent: 0em}

p.small {font-size: .75em; color: #0000EF}

p.blk {margin-top: .5em; margin-bottom: .5em; margin-left: 2em; margin-right: 2em}

ol.copy {font-size: .75em; list-style-type: lower-roman}

ul {font-size: .75em}

body {Background: #CDC0B0}

img.nb {border: 0}

span.grey {color: grey}

-->

</style>

 

</head>

<body>

<div>

 

<!-- this section is the optional navigation feature -->

<p class="small">

<a href="Your Home page URL">Home</a> /

<a href="Your Fanfic Page URL">Ranma 1/2 Fanfictions</a> /

The Title of this file -- Not a link</p>

<!-- End of optional navigation feature -->

 

<h1> The Title of Your Story </h1>

<p> By T. Author</p>

<hr />

<p class="none"> This is the first paragraph of the story. Note that this paragraph is not indented. The first paragraph of a story (or chapter) is frequently not indented, unless it begins with quoted dialog.</p>

<p> This is the second paragraph of the story. Note that it is indented by using the plain paragraph style. Most paragraphs in prose are indented. </p>

<p> Each paragraph in the story is formed in the same way. Don't forget the closing tags!</p>

<hr />

<!-- this section is the optional copyright notice -->

<p><b>Copyright Notice</b></p>

<ol class="copy">

<li>The characters and stories of Ranma 1/2 are Copyright &copy; Rumiko Takahashi, and are used here without permission or license.</li>

<li>No claims to the above copyright are made by the author of this work.</li>

<li>This work is for non-commercial use ONLY, and is produced for the enjoyment of fans only.</li>

<li>This work is the expression of the author and the depiction of the Ranma 1/2 characters herein are in no way represented to be a part of Ranma 1/2 as depicted by the original author and copyright holder(s).</li>

</ol>

<!-- End of the optional copyright notice -->

<!-- this section is the optional format banner and HTML check link -->

<a href="http://validator.w3.org/check?url=your full url"><img class="nb" src="vxhtml10.gif" alt="Valid XHTML 1.0!" height="31" width="88" /></a>

<!-- End of the optional format banner -->

</div>

</body>

</html>


  1. Copyright © Joseph Palmer, 2003 All Rights Reserved.
  2. Permission to use the XHTML Template, in whole or in part, for use on private, non-profit websites is freely granted.

Valid HTML 4.0!

[TextCounter Fatal Error: Could Not Write to File _fanfic_format_Format2_0_shtml] hits.