Text Position Drawn Lower with custom Visualizer

Jan 10, 2012 at 5:56 AM


Just wondering if anyone has run into a problem where text is rendered lower than expected when using a custom visualizer.  I have created a very simple XNA 4.0 sample to show what I mean:

Sample Project: Project Link

What I did was grabbed the built in SuaveSkin XML, 2 spritefonts and the bitmap and put them in the Content project.  Then, in the Game1 class's Initialize, you will see the gui.Visualizer being set by that XML skin file.

I am expecting to see the same results as the default built in Visualizer but instead I get this:


Any thoughts would be appreciated.


Jan 10, 2012 at 8:46 AM

The fonts embedded in Nuclex.UserInterface.dll are created by my custom content processor (Nuclex.Fonts.Content.TrueTypeImporter). This content processor lets you choose between two modes:

  • Position text with its upper end at the location you draw text (XNA default)
  • Position text with its baseline (= the lower end of characters like abcde, but not qjpgy)

In the embedded fonts, I chose the latter method (mainly personal preference, it allow me to line up text of different sizes without things looking weird), so if you use the Suave XML with a font generated by the default XNA content processor, you'll have to adjust all vertical positions by 13 or 14 pixels upwards!

Jan 10, 2012 at 3:22 PM

Thank you for the fast reply!

For anyone else reading this, I ended up changing the yoffset attribute of the Text element child of the Frame Element for all objects in the SuaveSkin XML File.


<text font="default" hplacement="center" vplacement="center" yoffset="15" color="#3F3F3F" />

 Turned into

<text font="default" hplacement="center" vplacement="center" yoffset="0" color="#3F3F3F" />

For each of the "button" frames, I did a -15 on each yoffset.

Thanks again Cygon!