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">Can't help falling in love</h1>
<h4 class="song-author">Elvis Presley</h4>
<meta name="active" value="true">
<meta name="url" value="https://www.youtube.com/watch?v=vGJTaP6anOU">
<div class="song-text-wrapper">
<!-- start of song text column -->
<div class="song-text-column">
<pre class="song-text-formatting">

<span class="verse" style="margin-top: 0px">
<span class="line">
<span class="chords">   C    Em  Am        F     C    G</span>
<span class="lyrics">   Wise men say, only fools rush in,</span>
</span>
<span class="line">
<span class="chords">       F G     Am   F          C    G    C</span>
<span class="lyrics">   but I can't help falling in love with you.</span>
</span>
</span>

<span class="verse">
<span class="line">
<span class="lyrics">   Shall I  stay, would it be a sin?</span>
</span>
<span class="line">
<span class="lyrics">   If I can't help falling in love with you.</span>
</span>
</span>

<span class="verse">
<span class="line">
<span class="chords">   Em           B7    Em            B7</span>
<span class="lyrics">   Like a river flows surely to the sea,</span>
</span>
<span class="line">
<span class="chords">   Em            B7</span>
<span class="lyrics">   darling so it goes,</span>
</span>
<span class="line">
<span class="chords">   Em           A7            Dm  G</span>
<span class="lyrics">   some things  are  meant to be.</span>
</span>
</span>

<span class="verse">
<span class="line">
<span class="lyrics">   Take my hand, take my whole life too,</span>
</span>
<span class="line">
<span class="lyrics">   for I can't help falling in love with you.</span>
</span>
</span>

<span class="verse">
<span class="line">
<span class="chords">   Em           B7    Em            B7</span>
<span class="lyrics">   Like a river flows surely to the sea,</span>
</span>
<span class="line">
<span class="chords">   Em            B7</span>
<span class="lyrics">   darling so it goes,</span>
</span>
<span class="line">
<span class="chords">   Em           A7            Dm  G</span>
<span class="lyrics">   some things  are  meant to be.</span>
</span>
</span>

<span class="verse">
<span class="line">
<span class="lyrics">   Take my hand, take my whole life too,</span>
</span>
<span class="line">
<span class="lyrics">   for I can't help falling in love with you.</span>
</span>
</span>

</pre>
</div><!-- end of song text column -->
</div>
</div>

When converted to PDF, it will look like this

The entire song must be wrapped in <div> element that has the class song.

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

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

You can create a line of text by adding a <span> element that has the 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. If the text is too long and you see it is broken into two lines, you may want to split the text into two line elements.

You can create a chord line by adding <span> element that has the class chords to the line <span> element. Inside this element you can write the line of chords. Usually you want to put chords first and then add the lyrics.

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>

A thing to keep in mind is that <pre> tag displays its content as it is. It means that you have to manually keep the chords in sync with the lyrics by spacing them properly. That should not be that hard when you have them one over the other.

Most songs are divided into verses and these verses are visually separated. Use a <span> element with the class verse to create a verse and put all the line elements into this <span>. Create a new <span> element for each verse. You may want to keep an empty line between each two verse elements.

This snippet shows how to create two verses, each having a line of chords and lyrics. Such a transition between verse may look like this:

<span class="verse">
<span class="line">
<span class="chords">                        D           G</span>
<span class="lyrics">   jak válejí se líně a louskaj buráky.</span>
</span>
</span>

<span class="verse">
<span class="line">
<span class="chords">                         C            G</span>
<span class="lyrics">R: Hej hou, hej hou, nač chodit do války,</span>
</span>
</span>

By default, there is a single column of the song lyrics, as it is in the example shown earlier. The entire content of the songs has to be wrapped in a <div> element with the class song-text-wrapper. Inside this element, you can add multiple (one or two make sense) columns of the text and they will be given equal amount of space on the page.

A column of text has to be wrapped in <pre> element that has the class song-text-formatting. This is necessary to keep the chords and lyrics in sync. This <pre> element has to be wrapped in a <div> element with the class song-text-column to ensure the entire portion of the text will be displayed on the right place.

The example first shown has a single text column and that is what most songs will require. To create a second column, take a look a this snippet:

<div class="song-text-wrapper">
<!-- start of song text column -->
<div class="song-text-column">
<pre class="song-text-formatting">

<span class="verse" style="margin-top: 0px">
<span class="line">
<span class="chords">   C    Em  Am        F     C    G</span>
<span class="lyrics">   Wise men say, only fools rush in,</span>
</span>
</span>
</pre>
</div><!-- end of song text column -->
<!-- start of song text column -->
<div class="song-text-column">
<pre class="song-text-formatting">

<span class="verse" style="margin-top: 0px">
<span class="line">
<span class="chords">   Em           B7    Em            B7</span>
<span class="lyrics">   Like a river flows surely to the sea</span>
</span>
</span>
</pre>
</div><!-- end of song text column -->
</div>

I hope you get the idea. You will have to manually edit the top margins to make the columns visually aligned. To see how the end song might actually look like, this is the PDF render of a song that has two columns of text. You can imagine that if all the text was in a single column, the song could never fit on an A5 page with the text still being readable.

Even if you divide the content of the song inside two columns, you will generally still need to decrease the font size significantly.

It is important to note that you should not take the display of the song in the application for what the song actually looks like. Try changing the size of the window to see what I mean. The application displays you the songs in a webview and webviews are responsive (since the 2000'). Therefore the song may look just fine in the application, perhaps because your high resolution can fit it all on the screen, but look completely messy when you print it on paper. You should always use the preview feature (the 'PDF preview' buttons) to see how the song will actually look when printed before changing the formatting.

This being sad, a very common problem is that the song is simply too long and a part of it is outside the page. It looks like this in the PDF file

A part of the song (almost half in this case) is not there. This can be fixed by scaling down the font size and decreasing the empty space between the lines and verses. This is handled by the stylesheet in the form of additional CSS classes. The default font size of the browsers nowadays is 16px. If you need to decrease the font size a litle, all you have to do is to add the class font-size-15-px to the song <div> element. The margins between verses and lines will be adjusted accordingly. There are further classes you can use:

• font-size-15-px
• font-size-14-px
• font-size-13-px
• font-size-12-px
• font-size-11-px
• font-size-10-px
• font-size-9-px

If you need to scale down the song eve further, you are free to add smaller font sizes, but you should keep in mind that smaller font is harder to read. In most cases, you should not need to go lower than 12px. Also, using two columns of the text should be regarded as a nuclear option to be used only when there is no other way.

The font size classes should not be used like this

<div class="song font-size-15-px font-size-14-px">

Only a single (or no) font class should be applied on a song at once, like this

<div class="song font-size-12-px">

The margins between the verses should be fine as they are managed by the stylesheet. The first verse may however need special care. The default setting should be this

<div class="song-text-column">
<pre class="song-text-formatting">
    
<span class="verse" style="margin-top: 0px">

where the top margin is manually set to zero. By default, the verse top margin is negative, so setting it to zero moves it down. The empty line is also important. If your song does not have an author, it may look weird and you may want adjust the top margin.

Note that the style="margin-top: 0px" can be added to any element in the HTML document (and used to change different properties than just the top margin) so that you actually have complete control over the way the song will look. But since that is not always necessary and writing a special markup for every song would take too much time, there is the template with the predefined stylesheet to give you a solid toolbox.

To see minor changes like chord alingment or the margin between two verses, you usually don't need to look at the preview PDF (which takes some time to process). The application will show you the changes you made to the song as soon as you save them (Ctrl + S in the Code Editor). Be sure to check the PDF in the end to make sure the song looks as you want it to though.

Sometimes you may want to have two sets of chords in the same song, one transposed for example. This can be done by adding new chords into each of the line elements where you want the chords to be. However the second set of chords should have the class chords2 instead of chords to make it visually different. The chords2 class does not really exist and the second set of chords will look exactly the same as the lyrics, but see for yourself if that is a problem:

<span class="line">
<span class="chords2">       C F     Dm   C          G    F    G</span>
<span class="chords">       F G     Am   F          C    G    C</span>
<span class="lyrics">   but I can't help falling in love with you.</span>
</span>

Notice how the second chords are shifted one character to the right. That is because the class name is longer, but there has to be the same number of spaces to make sure the chords display at the same places.

When the application displays the songs next to each other, you may sometimes want to know how much space is there in the midddle between the songs, to see if there is enough space between the end of the text and the start of the new song.

You can add this code to any of the two songs to show you the borders:

<style>
.song {
    border: 1px solid cyan;
}
</style>

result You can use this trick on any other class like line, song-text-column, song-author and so on to see different borders, but be sure to change the color to differentiate one border from another.

In the previous exmample, you may have noticed that one song in the songlist (Seznam písní) is rendered in thick font as if it was more important. While it is not officially a feature, you may use this dirty trick to do the same. Putting text in <b> and </b> in HTML makes it to render as bold. If you name the song with these tags around the name, the webview will then parse these tags as actual HTML and display it as bold text. You will want to disable title binding in the settings. The caveat is that these tags are now a part of the name of the song in the database, so the song will be on the beginning of the list even if the content you see in the HTML should be somewhere else. In other words, it will break the alphabetical ordering for this song.

If you want to add a note on the same row as are the chords but you do not want the note to look like the chords do, you can use this. In the following example, I want to add the note that there is a riff being played over that chord, but I do not want the note to be bold like the chords are. The solution is to wrap the note in another <span> element and style this element to my needs. Adding the note outside of the chords <span> element would break the markup.

<span class="line">
<span class="chords">   E         F#m  <span> ---(RIFF)</span></span>
<span class="lyrics">   A solitary man</span>
</span>

somewhere in the song, I add this code

<style>
.chords > span {
    font-weight: normal;
}
</style>

This code says that the content of every <span> element whose parent element has the class chords should have normal thickness of text. The end result can then look like this with the note visually not interfering with the chords.

NOTE: The information on this page applies only as long as you are using the default templates and stylesheets. Should you modify them, it is possible the behavior will be different. You can always download the default templates from github; the application will also download them if it does not find any templates on the startup.