Render tune title, subtitle and composer in Latex/HTML and not in the image.

This way the titles remains a constant size even if the image needs to be scaled.
And we have that text appearance under our control.

I can't find a way of switching off the tune title in abcm2ps, and have worked around
by setting the title format to Y0. Y is not a defined ABC header and is not found in
any Dottes tune.

dottes.html.tune

@@ -20,7 +20,19 @@
     </a>
 
     <div class="grid_12 dottes-body">
+      <div class="dottes-tune-display">
+        <div class="dottes-tune-header">
+          <div class="dottes-tune-header-row">
+            <div class="dottes-tune-header-left"></div>
+            <div class="dottes-tune-header-middle">
               <h1>@TITLE@</h1>
+              <h2>@SUBTITLE@</h2>
+            </div>
+            <div class="dottes-tune-header-right">
+              <em>@COMPOSER@</em>
+            </div>
+          </div>
+        </div>
         <img class="dottes-png" src="@TUNE@.png" alt="@TITLE@ dots">
         <div class="dottes-change-@CHANGEVISIBILITY@">
           Change: <a class="dottes-change-link"
@@ -37,6 +49,7 @@
                  href="@TUNE@.abc">ABC</a></li>
         </ul>
       </div>
+    </div>
 
   </div>
 </body>

dottes.tex

@@ -47,17 +47,23 @@
 
 % Show the main tune graphic and optional change.
 % Args are change title (optional), tune title, tune graphic filename.
-\newcommand{\showtune}[3][]{%
+\newcommand{\showtune}[5]{%
   \vfill
   \begin{center}
   \phantomsection
-  \hypertarget{#2}{%
-    \includegraphics[width=\textwidth,height=0.85\textheight,keepaspectratio]{#3}
+  \begin{tabular*}{\textwidth}{@{} p{0.25\textwidth} @{\extracolsep{\fill}} c >{\raggedleft\arraybackslash}p{0.25\textwidth} @{}}
+   & \Large{#1} & \emph{#3} \\
+  \ifemptyarg{#2}{}{%
+   & #2 & \\
+  }%
+  \end{tabular*}
+  \hypertarget{#1}{%
+    \includegraphics[width=\textwidth,height=0.85\textheight,keepaspectratio]{#4}
   }
-  \addcontentsline{toc}{section}{#2}
+  \addcontentsline{toc}{section}{#1}
   \end{center}
-  \ifemptyarg{#1}{}{%
-    Change: \hyperlink{#1}{#1}
+  \ifemptyarg{#5}{}{%
+    Change: \hyperlink{#5}{#5}
   }%
 }
 

firstline.fmt

@@ -2,7 +2,7 @@
 continueall false
 measurenb false
 writefields SRBDZHN 0
-titleformat
+titleformat Y0
 titlespace 0
 topspace 0
 infoline false

makeBookeTunePages.sh

@@ -41,6 +41,8 @@ find $booke -name "*.abc" | sort |
         title=`$dir/abcfield.py --field T --latex $filename`
         fixtitle "$title"
         title=$retval
+        subtitle=`$dir/abcfield.py --index 2 --field T --latex $filename`
+        composer=`$dir/abcfield.py --field C --latex $filename`
 
         changefile=`$dir/abcfield.py --field N $filename | grep "Change:" | sed -e "s/Change: *//"`
         changetitle=""
@@ -49,7 +51,7 @@ find $booke -name "*.abc" | sort |
             fixtitle "$changetitle"
             changetitle=$retval
         fi
-        echo -E "\showtune[$changetitle]{$title}{$graphicsdir/$name}" >> $tunesoutput
+        echo -E "\showtune{$title}{$subtitle}{$composer}{$graphicsdir/$name}{$changetitle}" >> $tunesoutput
 
         echo -E "\showfirstline{$title}{$graphicsdir/firstline-$name}" >> $indexoutput
     done

makeWeb.sh

@@ -65,6 +65,8 @@ find $bookedir -name "*.abc" | sort |
         title=`$dir/abcfield.py --field T --html $filename`
         fixtitle "$title"
         title=$retval
+        subtitle=`$dir/abcfield.py --index 2 --field T --latex $filename`
+        composer=`$dir/abcfield.py --field C --latex $filename`
         changefile=`$dir/abcfield.py --field N $filename | grep "Change:" | sed -e "s/Change: *//"`
         changetitle=""
         changevisibility="no"
@@ -88,6 +90,8 @@ find $bookedir -name "*.abc" | sort |
         # If the title contains HTML character entities, escape
         # initial '&' in the title - it means things to sed.
         sed -e "s/@TITLE@/${title//&/\&}/" \
+            -e "s/@SUBTITLE@/${subtitle}/" \
+            -e "s/@COMPOSER@/${composer}/" \
             -e "s/@MASTERBOOKE@/${masterbooke}/" \
             -e "s/@CHANGETITLE@/${changetitle//&/\&}/" \
             -e "s/@CHANGETUNE@/${changefile/.abc/.html}/" \

singletune.fmt

@@ -6,7 +6,7 @@ leftmargin 0
 rightmarin 0
 topmargin 0
 scale 0.9
-titleformat T0 C1
+titleformat Y0
 titlespace 0
 topspace 0
 % I don't want any info fields in the graphics. To turn off the
@@ -18,6 +18,6 @@ infoname D
 infoname Z
 infoname H
 infoname N
-infoline true
+infoline false
 writehistory true
 continueall false

web/css/dottes.css

@@ -11,7 +11,6 @@ body {
 
 h1 {
     background: white;
-    font-weight: normal;
     text-align: center;
     font-size: 25px;
     font-weight: bold;
@@ -121,6 +120,56 @@ div.dottes-transpose-tune-types
     width: 30%;
 }
 
+div.dottes-tune-display
+{
+    margin: 10px;
+}
+
+div.dottes-tune-header
+{
+    display: table;
+    width: 100%;
+}
+
+div.dottes-tune-header-row
+{
+    display: table-row;
+}
+
+div.dottes-tune-header-left
+{
+    display: table-cell;
+    width: 25%;
+}
+
+div.dottes-tune-header-middle
+{
+    display: table-cell;
+}
+
+div.dottes-tune-header-middle h1
+{
+    font-size: 25px;
+    font-weight: bold;
+    text-align: center;
+    margin: 0px;
+}
+
+div.dottes-tune-header-middle h2
+{
+    font-size: 15px;
+    font-weight: normal;
+    text-align: center;
+    margin: 0px;
+}
+
+div.dottes-tune-header-right
+{
+    display: table-cell;
+    text-align: right;
+    width: 25%;
+}
+
 a.dottes-tune-link
 {
     font-size: 20px;
@@ -143,19 +192,21 @@ img.dottes-png
 {
     display: block;
     width: 100%; /* Make image fill width */
-    /* margin-left: auto; /* Centre image */
-    /* margin-right: auto; */
+    margin-top: 10px;
+    margin-bottom: 10px;
 }
 
 ul.tune-data-list
 {
     list-style-type: none;
+    margin: 0px;
 }
 
 ul.tune-data-list li
 {
     display: inline;
-    margin: 10px;
+    margin-left: 0;
+    margin-right: 20px;
 }
 
 div.dottes-tune-list
@@ -188,8 +239,6 @@ div.dottes-change-no
 
 div.dottes-change-yes
 {
-    display: block;
-    margin: 10px;
 }
 
 div.dottes-change-link