Output synopsis to HTML.

Used Jonathan's CSS.

5 files changed, 170 insertions, 90 deletions

diff --git a/screenplain/export/default.css b/screenplain/export/default.css
index a0cbd4c..e3ab992 100644
--- a/screenplain/export/default.css
+++ b/screenplain/export/default.css
@@ -1,100 +1,164 @@
 /* Reset */
-html, body, div, span, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
-small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
+html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
+margin: 0;
+padding: 0;
+border: 0;
+font-size: 100%;
+font: inherit;
+vertical-align: baseline;
 }
-
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
-  display: block;
+article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
+display: block;
 }
 
 /* Styles for Screenplain */
-
-.screenplay {
-  background: white;
-  font-family:'Courier Final Draft',Courier;
-  font-size: 12pt;
-  width: 36.14em;
+body {
+text-align: center;
 }
-.screenplay em {
-    font-style: italic;
+#wrapper {
+font-family: 'Courier Final Draft','Courier Screenplay',Courier;
+font-size: 12pt;
+text-align: left;
+width: 480pt;
+padding-left: 90pt;
+padding-top: 24pt;
+position: relative;
+margin: 0 auto;
 }
-.screenplay strong {
-    font-weight: bold;
+header {
+margin-bottom: 1em;
+border-bottom: 1px solid black;
 }
-.screenplay br {
-    clear: both;
+footer {
+margin-top: 1em;
 }
-
-/* Slug */
-.screenplay > h6 {
-  width:36.14em;
-  margin-top: 2em;
-  font-weight: bold;
-  text-transform:uppercase;
-}
-.screenplay div.action {
-  margin-top: 1em;
-  width:36.14em;
-}
-.screenplay .centered {
-  text-align: center;
-}
-.screenplay div.dialog, .screenplay div.dual {
-  margin-top: 1em;
-}
-.screenplay div.transition {
-  margin-top: 1em;
-  margin-left:24.09em;
-  margin-right:2.4em;
-  margin-bottom:12pt;
-  width: 9.64em;
-  text-align:right;
+em {
+font-style: italic;
 }
-
-.screenplay .dialog p.character {
-  padding-left: 12em;
-  width: 23em;
-}
-.screenplay .dialog p.parenthetical {
-  padding-left: 9.03em;
-  width: 15.06em;
+strong {
+font-weight: bold;
 }
-.screenplay .dialog p {
-  padding-left: 6.05em;
-  width: 21.07em;
+br {
+clear: both;
 }
 
-.screenplay .dual > div {
-  float: left;
-  width:48% !important;
-}
-.screenplay .dual p.character {
-  padding-left: 6em;
-}
-.screenplay .dual p.parenthetical {
-  padding-left: 3em;
-}
-.screenplay .dual p {
-  padding-left:0em;
-  width: 19em;
-}
-.screenplay .dual .right {
-  margin-left: 1em;
-}
-.screenplay .dual .right p.character {
-  padding-left: 6em;
+/* Slug */
+
+div {
+width: 460pt;
+}
+h1:before,h2:before,h3:before,h4:before,h5:before {
+content: "\25e6\00a0";
+margin-left:-9pt;
+}
+h1,h2,h3,h4,h5{
+font-family:'Gill Sans','Helvetiva Neue',Helvetica,sans-serif;
+margin-top:24pt;
+font-weight:400;
+color: rgb(110, 110, 110);
+border-top:dotted 1px rgb(199, 199, 199);
+background-image: -webkit-linear-gradient(top, rgb(255, 255, 245), rgb(255, 255, 255));
+font-size: 11pt;
+}
+h1,.h1-synopsis {
+margin-left:-71pt;
+}
+h2,.h2-synopsis {
+margin-left:-61pt;
+}
+h3,.h3-synopsis {
+margin-left:-41pt;
+}
+h4,.h4-synopsis {
+margin-left:-21pt;
+}
+h5,.h5-synopsis {
+margin-left:-1pt;
+}
+.h1-synopsis,.h2-synopsis,.h3-synopsis,.h4-synopsis,.h5-synopsis,.h6-synopsis{
+font-family:'Gill Sans','Helvetiva Neue',Helvetica,sans-serif;
+font-size: 10pt;
+font-style: italic;
+color:rgb(145, 145, 145);
+display:block;
+margin-bottom:5pt;
+}
+h6 {
+margin-top: 2em;
+text-transform: uppercase;
+font-weight: bold;
+}
+div.block {
+position: relative;
+background: #fff;
+}
+div.action p {
+margin-top: 1em;
+}
+.centered {
+text-align: center;
+}
+div.dialog,div.dual {
+margin-top: 1em;
+}
+div.transition {
+margin-top: 1em;
+margin-bottom: 12pt;
+text-align: right;
+}
+.dialog p.character {
+padding-left: 153.33pt;
+}
+.dialog p.parenthetical {
+padding-left: 115pt;
+}
+.dialog p {
+padding-left: 76.67pt;
+width: 306.67pt;
+}
+.dual > div {
+float: left;
+width: 48%!important;
+}
+.dual p.character {
+padding-left: 6em;
+}
+.dual p.parenthetical {
+padding-left: 3em;
+}
+.dual p {
+padding-left: 0;
+width: 19em;
+}
+.dual .right {
+margin-left: 1em;
+}
+.dual .right p.character {
+padding-left: 6em;
+}
+span.scnuml {
+display: block;
+float: left;
+margin-left: -4.52em;
+font-weight: inherit;
+-webkit-touch-callout: none;
+-webkit-user-select: none;
+-khtml-user-select: none;
+-moz-user-select: none;
+-ms-user-select: none;
+-o-user-select: none;
+user-select: none;
+}
+span.scnumr {
+display: block;
+float: right;
+margin-right: 0.72em;
+font-weight: inherit;
+-webkit-touch-callout: none;
+-webkit-user-select: none;
+-khtml-user-select: none;
+-moz-user-select: none;
+-ms-user-select: none;
+-o-user-select: none;
+user-select: none;
 }
diff --git a/screenplain/export/html.py b/screenplain/export/html.py
index 886318c..b589129 100644
--- a/screenplain/export/html.py
+++ b/screenplain/export/html.py
@@ -10,6 +10,7 @@ import os
 import os.path
 
 from screenplain.types import *
+from screenplain.richstring import plain
 
 
 class tags(object):
@@ -90,11 +91,18 @@ def format_slug(slug, out):
         if num:
             with tags(out, 'span class="scnumr"'):
                 out.write(to_html(slug.scene_number))
+    if slug.synopsis:
+        # TODO: allow formatting in synopsis
+        with tags(out, 'span class="h6-synopsis"'):
+            out.write(to_html(plain(slug.synopsis)))
 
 
 def format_section(section, out):
     with tags(out, 'h%d' % section.level):
         out.write(to_html(section.text))
+    if section.synopsis:
+        with tags(out, 'span class="h%d-synopsis"' % section.level):
+            out.write(to_html(plain(section.synopsis)))
 
 
 def format_action(para, out):
@@ -149,7 +157,7 @@ def convert_full(screenplay, out):
         '</style>'
         '</head>'
         '<body>'
-        '<div class="screenplay">\n'
+        '<div id="wrapper" class="screenplay">\n'
     )
     convert_bare(screenplay, out)
     out.write(
diff --git a/screenplain/types.py b/screenplain/types.py
index 8c10692..92ff174 100644
--- a/screenplain/types.py
+++ b/screenplain/types.py
@@ -15,6 +15,7 @@ class Slug(object):
         """
         self.line = line
         self.scene_number = scene_number
+        self.synopsis = None
 
     @property
     def lines(self):
@@ -29,6 +30,7 @@ class Section(object):
     def __init__(self, text, level):
         self.text = text
         self.level = level
+        self.synopsis = None
 
     def set_synopsis(self, text):
         self.synopsis = text
diff --git a/tests/files/sections.fountain b/tests/files/sections.fountain
index 96a2266..3878e5f 100644
--- a/tests/files/sections.fountain
+++ b/tests/files/sections.fountain
@@ -1,9 +1,15 @@
 # First level
 
+= Synopsis for level one.
+
 ## Second level
 
+= Synopsis for level two.
+
 EXT. STREET - DAWN
 
+= Synopsis for the street scene
+
 DAWN walks down the street.
 
 ## Second level again
diff --git a/tests/files/sections.fountain.html b/tests/files/sections.fountain.html
index d06decb..df46c11 100644
--- a/tests/files/sections.fountain.html
+++ b/tests/files/sections.fountain.html
@@ -1,6 +1,6 @@
-<h1>First level</h1>
-<h2>Second level</h2>
-<h6>EXT. STREET - DAWN</h6>
+<h1>First level</h1><span class="h1-synopsis">Synopsis for level one.</span>
+<h2>Second level</h2><span class="h2-synopsis">Synopsis for level two.</span>
+<h6>EXT. STREET - DAWN</h6><span class="h6-synopsis">Synopsis for the street scene</span>
 <div class="action"><p>DAWN walks down the street.</p></div>
 <h2>Second level again</h2>
 <h6>EXT. ALLEY - CONTINUOUS</h6>