True Type fonts in EL

[gvissers]

TL;DR: Grum got bored and decided to do something about fonts not looking all that great on modern screens. Work in progress, shows promise but still needs a lot of fleshing out.

Making this into an issue at the urging of @pjbroad .

One of the great things about a HiDPI screen is that fonts look really really crisp. One of the disadvantages of such a screen is that the fonts in the EL client don't really scale all that well, and look rather blocky if scaled up. If only we had a set of great looking fonts that scale well, and which we could use in EL.

Well, I'm not a font designer, but I have plenty of True Type fonts installed on my system. And there's the SDL_ttf library...

So I decided to explore the option of using system fonts in EL. Generating a texture with the available font characters can be done easily. And so the journey down the rabbit hole starts. Turns out the client assumes things about fonts in many places. Like characters always have an equal width. Or not. Or always have the same height. Every font user seems to use a different rounding convention. Sometimes using symbolic constants. Sometimes not.

Development can be followed in the ttf branch on my github page. Unfortunately I seem to somehow have broken the console again in the last commit, so I'll update this issue with some pictures[FIXED] and a list of TODO items later[DONE].

Here's the current list of things that need to be resolved. This list may be added to as new issues crop up.

• [X] Generate font textures on demand, not for all font files in a list
• [x] Find a way to properly select and store which font files are used. Indices in a static list don't work if the contents of a directory are not under our control.
• [x] Fall back on fixed font if a font file cannot be found
• [X] Proper alignment with variable width fonts, e.g. the statistics window looks messy right now. (Statistics, knowledge, counters, session, rules done).
• [X] Add a window handler for handling font and text size changes. (Handler added, and used in various windows, though more may be needed)
• [X] Update book layout code to properly fill the pages.
• [X] Fix layout of encyclopedia and help (restricted to fixed size fonts for the time being)
• [x] Fix map editor
• [x] Fix code documentation where needed
• [ ] As always, more testing.

[pjbroad]

Wow, what a difference! It will take some getting use to it though. When you're ready to merge this back into the master branch, we should talk first. I've been working with Ben to get the Mac build fixed and we intend to do a release soon. I'm planning to cherry-pick the needed commits onto the stable branch but its already looking complex.

[gvissers]

Wow, what a difference! It will take some getting use to it though.

Well, the plan is to make it optional, not to use it by default, and always be able to fall back on the fonts as we have them now. I happen to like it though, the text is much more readable to me.

When you're ready to merge this back into the master branch, we should talk first.

Of course. I'll also leave the decision on whether to merge it at all up to you. If you decide not to merge, I'll just keep it as a separate branch in my own tree.

I've been working with Ben to get the Mac build fixed and we intend to do a release soon. I'm planning to cherry-pick the needed commits onto the stable branch but its already looking complex.

By all means, do the release. This is still some way from being finished.

[gvissers]

As I have more or less completely rewritten the book rendering, here is a short update.

Below is an image of the first two pages of a book as it is currently rendered by the client. (It uses a contrived example of using an image which I hacked into the text, because (of course after I rewrote the whole thing), I found out that NONE of the client-side books contains an image...) It has several issues:

• lines have a fixed (maximum) number of characters, leading to wasted space on the right side of the page
• Images are not scaled correctly (and nor are their positions).
• Text does not flow naturally around an image, when an image does not fit on a page, a new page is added and text then continues after the image.
• Image captions are near indistinguishable from normal text
• And I strongly suspect, though this image does not show it, that it is entirely possible that caption texts overlap with the image when using variable width fonts.

And here is how the new code displays the book using the same font: Much better IMHO. In addition to fixing the previously mentioned problems, I have decided to center the book title and author name on the page, to give them some more emphasis.

And of course, with the font changes, we can now also use system fonts. Like Comic Sans :) Or Segoe script: Which I find somewhat easier to read.

[pjbroad]

Much nicer.

[gvissers]

I have most alignment issues with variable width fonts worked out now, but now I'm running into a snag: the layout for the encyclopedia and help windows is done entirely in the XML files, assuming a monospaced font using the One True Font Width, using explicit newline tags after each line, aligning with the careful use of spaces. Example:

<Help>
<Page name="HelpPage">
   <size>Big</size><color r="1" g="0.6" b="0"/>
   <text x="2" y="2">             Eternal Lands Help</text><nl/>
   <nl/><nl/>
   <size>Medium</size>
   <color r="0.4" g="0.8" b="1"/>
   <text> This is the Eternal Lands Help Page. Here you can find</text><nl/>
   <text> information that will help you to get familiar with the</text><nl/>
   <text> interface, and some tips to get you started in the game.</text>
   <nl/>
   <nl/>
   <color r="0.9" g="0.9" b="0.9"/>
   <size>Medium</size>
   <link ref="HP Commands" title="Shortcut Keys"/>
   <size>Small</size>
   <text x="250">-  Shortcut keys</text><nl/>
...
   <size>Medium</size>
   <link ref="HP Interface" title="Interface"/>
   <size>Small</size>
   <text>      -  Explanation of the Game Interface</text><nl/>
   <size>Medium</size>
   <link ref="Calendar" title="Calendar"/>
   <size>Small</size>
   <text>       -  Calendar of the Elders and Special Days</text><nl/>
... etc.

Personally I think this format is... suboptimal, but at least there is no way to make this work dynamically and handle variable width fonts, font or text size changes, or changes in window size. Long-term, I would like to just rewrite the encyclopedia to a more sane format. The above example could look something like

<Help>
<page name="HelpPage">
   <text size="big" align="center" yoff="1el" color="#ff9900">Eternal Lands Help</text>
   <nl/>
   <text size="medium" color="#6699ff"> This is the Eternal Lands Help Page. Here you can find information that will help you to get familiar with the interface, and some tips to get you started in the game.</text>
   <nl/>
   <table>
      <row>
         <col><link ref="HP Commands">Shortcut Keys</link></col>
         <col><text>- Shortcut keys</text></col>
      </row>
...
      <row>
         <col><link ref="HP Interface">Interface</link></col>
         <col><text>- Explanation of the Game Interface</text></col>
      </row>
      <row>
         <col><link ref="Calendar">Calendar</link></col>
         <col><text>- Calendar of the Elders and Special Days</text></col>
      </row>
... etc.

This would necessitate a complete rewrite of the encyclopedia and all translations though. So for the short term, I can see the following options:

• Ignore the situation, and hope noone complains about a messy layout when they change the font or scale.
• Always render help files in monospaced font 1.
• Introduce a new encyclopedia font, and restrict it to monospaced fonts. That at least gives the user some options, and we can react to font changes.

I'd love to hear your (as in: anyone reading this, not only @pjbroad :smiley:) opinions on how to proceed.

[pjbroad]

I had related problems when adding the UI scaling stuff, that was probably a lot simpler though. Once the XML is loaded, you can manipulate the size and positions information directly. In common_encyclopedia_display_handler() I added code to adjust the size and positions using the current scale before drawing, then restored the original value afterwards. A complete hack I know but it works OK. It was simpler because I didn't need to wrap lines differently as the scale changes. I agree a rewrite would be a massive amount of work. Of the options you suggested, the "new encyclopedia font" sounds good.

[gvissers]

I had related problems when adding the UI scaling stuff, that was probably a lot simpler though. Once the XML is loaded, you can manipulate the size and positions information directly. In common_encyclopedia_display_handler() I added code to adjust the size and positions using the current scale before drawing, then restored the original value afterwards.

Yes, I saw that as I was working on the code.

It was simpler because I didn't need to wrap lines differently as the scale changes.

Yes, a solution like that won't work for variable width line wrapping, because I don't know which lines form a paragraph and where to put a "real" line break. I could combine consecutive text elements into a single text while parsing the encyclopedia, but that would get me into trouble with the table-like setup above.

To really fix this problem, I think we need to separate the reading of the contents from the actual layout. I did something similar with the books, where the unformatted contents are now kept in memory, and are reformatted whenever necessary (UI scale, font changes, or possibly window size changes).

I agree a rewrite would be a massive amount of work. Of the options you suggested, the "new encyclopedia font" sounds good.

I think I'll go for that right now. I do want to fix this at some point, but would like to see if we can get the current branch cleaned up enough that we can think about merging it into master before I start that.