in Coding, Writing tips

Novel formatting html and css

Novel formatting

I have decided to share the code that I used on my ‘prose’ pages so that others can easily create nicely formatted pages set as they would be in a novel. The first line of a paragraph following a h1 tag has a large first letter.

Subsequent lines use standard paragraph tags and begin with an indented first line. Where those paragraphs wrap, lines are not indented, however if you want to start a new scene you insert a paragraph with the class ‘space’. Space forces a 1em height line in between, and the paragraph following it has no indent.

 

It’s entirely up to you whether you want to put an   element inside the paragraph to make sure the height shows, but I have overridden the height of the empty paragraph in the CSS.

Part of the style prevents the user from selecting the text. This is an entirely optional feature — to disable it, simply remove the first instance of the .prose class that contains the -webkit-touch-callout and -user-select properties.

 

CSS

 

<br />
/* prose pages */<br />
/* Fonts are set on the container and header in case a theme likes to override h1 styles. */<br />
.prose {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}<br />
.prose {font-family: 'EB Garamond', serif; margin-left: auto; margin-right: auto; max-width: 608px;}<br />
    .prose h1 {font-family: 'EB Garamond', serif;text-align:center !important;margin-bottom: 70px; margin-top: 70px;}<br />
    /* Justify makes the line spread to the full width. WordPress makes this even nicer by using automatic line hyphenation. */<br />
    .prose p {margin:0;text-align:justify}<br />
    .prose p.space{min-height:1em;}<br />
    .prose p + p {text-indent: 28.8px;}<br />
    /* Use .pov where you want to put *** or another marker centred between sections. */<br />
    .prose p.pov {text-align:center;}<br />
    /* Force the lines following a .pov or .space to be non-indented. .first enables you to force this on a specific line with no prior space */<br />
    .prose p.first, .prose p.pov, .prose p.pov + p, .prose p.space + p {text-indent:0;}<br />
    .prose h1 + p::first-letter {float: left;font-size: 62px;line-height: 2.8;margin-right: 4px;margin-top: 7px;}<br />

 

HTML

 

</p>
<p>&lt;article class=&quot;prose&quot;&gt;<br />
   &lt;h1&gt;Chapter 1&lt;/h1&gt;<br />
   &lt;p&gt;This is the beginning of a chapter. The first letter is taken from the style where the line following the chapter heading is a paragraph.&lt;/p&gt;<br />
   &lt;p&gt;Subsequent lines use standard paragraph tags and begin with an indented first line. Subsequent lines are not indented, however if you want to start a new scene you insert a paragraph with the class ‘space’. Space forces a 1em height line in between, and the line following it has no indent.&lt;/p&gt;<br />
   &lt;p class=&quot;space&quot;&gt;&amp;nbsp;&lt;/p&gt;<br />
   &lt;p&gt;It’s entirely up to you whether you want to put an &amp;amp;nbsp element inside the paragraph to make sure the height shows, but I have overridden the height of the empty paragraph in the CSS.&lt;/p&gt;<br />
&lt;/article&gt;</p>
<p>