If you are unfamiliar with HTML and CSS, here are some basic resources.

Songs are stored in HTML format and rendered through a WebView. When you create a song, the program will automatically generate a new song HTML file from template. (Default template is stored at /resources/templates/song.html).

The template contains a base layout for the song which you can freely edit, however there are some conditions to the format for the song to be displayed properly.

Take a look at this document

<div class="song">
<h1 class="song-title">Hruška</h1>
<h4 class="song-author">Čechomor</h4>
<div class="song-text-wrapper short-song">
<pre class="song-text">

<span class="line" style="margin-top: -25px">
<span class="chords">      D           A             D      G   A</span>
<span class="lyrics">   Stojí hruška v širém poli, vršek se jí zelená</span>
</span>
<span class="line">
<span class="chords">       D     G    A      D           A    D</span>
<span class="lyrics">/: Pod ní se pase kůň vraný, pase ho má milá :/</span>
</span>
<br>
<span class="line smaller-br">
<span class="lyrics">   Proč má milá dnes pásete, z večera do rána</span>
</span>
<span class="line">
<span class="lyrics">/: Kam můj milý pojedete, já pojedu s váma :/</span>
</span>
</pre>
</div>
</div>

TODO: Add screenshot of the document above for illustration
The song must be wrapped in <div> element that has a class song.

The song must have an <h1> element that has a class song-title. The text may be empty.

The song must have an <h4> element that has a class song-author. The text may be empty.

You can create a line of text by adding a <span> element that has a class line. Content of the line belongs inside this element.

You can create a line of lyrics by adding <span> element that has a class lyrics to the line <span> element. Inside this element you can write the line of lyrics.

You can create a chord line by adding <span> element that has a class chords to the line <span> element. Inside this element you can write the line of chords.

An example of a line with both chords and lyrics may look like this:

<span class="line">
<span class="chords">        G                     C             G</span>
<span class="lyrics">1. Když Sever válčí s Jihem a zem jde do války</span>
</span>

You can add an arbitrary number of such lines behind each other and they will all display as a verse.

You can close a verse by adding a <br> element after a line <span> element. The next line <span> element you add will appear with indentation, visually telling us it is a new verse.

Such a transition between verse may look like this:

<span class="line">
<span class="chords">                        D           G</span>
<span class="lyrics">   jak válejí se líně a louskaj buráky.</span>
</span>
<br>
<span class="line>
<span class="chords">                         C            G</span>
<span class="lyrics">R: Hej hou, hej hou, nač chodit do války,</span>
</span>

The entire content of song chords and lyrics must be wrapped in a <pre> element that has a class song-text. This ensures than any spaces you make between words and chords will be preserved and not stripped off by the WebView.

Space between verses can be moderated in a different manner. The entire songbook (anything that gets into the WebView) is styled using CSS. The stylesheet (is by default at /resources/css/style.css) has several predefined classes we can apply on the first line <span> of the verse to change the margin.

For example this verse will have smaller space between itself and the one before him:

<br>
<span class="line small-br">
<span class="lyrics">2. A v jeho blízkosti se náhle zdá,</span>
</span>
<span class="line">
<span class="lyrics">   že létat v oblacích se málem dá,</span>
</span>

When you can not utilise any of the standard margin classes, you may need a little workaround. You can set the margin-top property manually. See this code example:

<br>
<span class="line small-br">
<span class="lyrics">2. A v jeho blízkosti se náhle zdá,</span>
</span>

The song was too long to fit a single A5 page even when using small-br. Logically we tried to use very-small-br but that was too small a space between verses. Thus we had to compromise and set the margins manually as follows:

<br>
<span class="line" style="margin-top: -77px;">
<span class="lyrics">2. A v jeho blízkosti se náhle zdá,</span>
</span>

This is the basic formatting you should be good with. Alternatively you can read on.

If a song is too long no matter how much you strip the spaces between verses, you need to use another tool. Alongside with the spaces between verse, we can help by subtracting the font size used for the song. This we do by changing the class of the song-text <pre> element analogiaclly to the previous example.

As you may have notice, changing the font size has an effect on the layout. We need to cope for this by using a special class for chords. For example instead of:

<span class="chords">       G                 C            G</span>

We write this (assuming we used song-text-long on our <pre> element):

<span class="chords-long">       G                 C            G</span>

Sometimes the song is too long that it simply won't fit even if you downscale the font size so much that you need a magnifying glass to see the letters. Then the only available space we have left is on the sides. We can split the song lyrics into two columns to use this space, however at this point the song sometimes ceases to fit horizontally and especially in the output PDF you can see the lines being split and continuing where another lines should be. That is the reason why this is the very last resort.

The formatting is rather simple though:

1. You need to find a line that looks like this:

<div class="song-text-wrapper short-song">

In the default template it is located right under the song-author <h4>.

You need to change the line to this:

<div class="song-text-wrapper long-song">

2. After the song-text <pre> element you create a new song-text <pre> element. Then you split your verses evenly between these two element. Content of the first <pre> element will be displayed on the left and content of the second one on the right.

Example code:

<div class="song-text-wrapper long-song">
<pre class="song-text">

<span class="line" style="margin-top: 5px;">
<span class="chords">    Ami</span>
<span class="lyrics">1.  O dvě řeky dál, když si podzim s barvou hrál</span>
</span>
<span class="line">
<span class="chords">          C</span>
<span class="lyrics">    jeden stopař kdysi postavil srub.</span>
</span>
<span class="line">
<span class="chords">        Am                  E7         Am</span>
<span class="lyrics">    Oči měl jako len, lovil kůže celej den,</span>
</span>
<span class="line">
<span class="chords">         E7              Am</span>
<span class="lyrics">    na prsou nosil kančí zub.</span>
</span>
</pre>
<pre class="song-text">
<span class="line smaller-br">
<span class="lyrics">2.  Měl tenhleten muž ze všech nejrychlejší nůž</span>
</span>
<span class="line">
<span class="lyrics">    jeho šíp nikdy neminul cíl.</span>
</span>
<span class="line">
<span class="lyrics">     A svou dívku si vybral z kmene Cherokee,</span>
</span>
<span class="line">
<span class="lyrics">    takže všichni mu říkali Cherokee Bill.</span>
</span>
</pre>
</div>

TODO: Add a screenshot