<link type="text/css" href="/resources/css/webkit.css" rel="Stylesheet"></link>
<link type="text/css" href="/loan/LOAN/resources/mobile/appStyles.css" rel="Stylesheet"></link>
[line height]
line-height: 120%
[Indented Paragraphs] (source)
p {
text-indent: 2.0em;
}
p.changed {
padding-left: 0.2em;
border-left: solid;
border-right: none;
border-top: none;
border-bottom: none;
border-left-width: thin;
border-color: red;
*******
The Stylesheet
This is the style sheet that I use for all of my stories.
——————————————————————————–
div {width: 22em;
margin-left: 2em;
margin-right: 2em}
p {margin-top: .3em;
margin-bottom: .3em}
p.small {margin-top: .3em;
margin-bottom: .3em;
font-size: .75em;
color: #0000ef}
p.blk {margin-top: .5em;
margin-bottom: .5em;
margin-left: 2em;
margin-right: 2em}
ol {font-size: .75em}
ul {font-size: .75em}
body {background: #cdc0b0}
——————————————————————————–
div – Division
div {width: 22em;
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 22em will cause the lines to break at about the same relative width as a paperback book.
Browser note: The 4.x versions of Netscape Navigator will display the text as something closer to 24 em wide. That's a bug. Navigator 6, IE 5x, and Opera will display the text correctly at 22em width.
——————————————————————————–
p – Paragraph
p {margin-top: .3em;
margin-bottom: .3em}
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 the only thing I do is adjust the whitespace above and below the box.
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> </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.
——————————————————————————–
While CCS has a text-indent property that can be applied to paragraphs, I have elected to indent paragraphs by using a string of three or four characters. I chose this method for backwards compatibility with older (Pre-4.0) browsers and text-based browsers (such as Lynx).
——————————————————————————–
p.small – Paragraph (Small)
p.small {margin-top: .3em;
margin-bottom: .3em;
font-size: .75em;
color: #0000ef}
I use this style in one place, in the navigation line at the top of each story.
This style is called by adding the class parameter to the p tag:
<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 on your stories, but that is, of course, optional.
——————————————————————————–
p.blk – Paragraph (Block)
p.blk {margin-top: .5em;
margin-bottom: .5em;
margin-left: 2em;
margin-right: 2em}
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.
You can also set off the text in a block by applying italics or Typewriter Text
====font=====
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;font-style:italic;
color: #6C0000;
text-decoration: none;
font-variant: small-caps;
<span style="position: relative; top: 12px; left: 22px;">some words</span>