Style

3 minutes to read Download PDF Edit

In most document template widgets and components as well as on the top level document, a style can be defined. This style is designed in Cascading Style Sheets (CSS). However, many of the more common style attributes can be adjusted using the Style Editor. Depending on what type of widget you are styling, you will see different options in the Style Editor. You can also fully customize the style in the tab ‘Custom Styles’.

Tab pages

Font

Widgets/Components for which the font tab page is visible:

  • Document template
  • Data grid
  • Data grid cell
  • Dynamic label
  • Title
  • Static label
  • Table

If you’d like to show text in a language with uncommon characters such as Arabic or Thai, make sure you select a font in the style editor that supports these characters. ‘Tahoma’ is such a font.

Cell styling

Widgets/Components for which the cell styling tab page is visible:

  • Data grid
  • Data grid cell
  • Title
  • Table
  • Table cell

Custom styles

The custom styles tab page is always visible for widgets/components that allow styling.

Custom fonts for PDF documents

You can include custom fonts in your generated documents by simply using a custom style, for example you’d include font-family: Verdana; in your style to make the text appear in Verdana font. However, for generating PDF documents this requires some extra work. The following section will teach you how to do this.

The PDF generator can be setup to include a custom font by editing a config file for the library responsible for generating the PDF file. You can find this file in your Mendix installation folder in the subfolder /runtime/lib. The file is called fop.xconf. To make it easier for you to update your Mendix version or to deploy your application it is highly recommended that you do not edit this file directly but instead copy it into your project resources folder. When this file is present in your resources folder, the runtime will automatically access it instead of the default file.

When you have the fop.xconf file and all the fonts in your resources folder, you can add the font you want to use to the folder. Next, open the fop.xconf file in a text editor. The config file is in xml format. Look up the tag and you should easily be able to single out Tahoma and Arial.

To add your own, use the following setup:


<font kerning="yes" embed-url="mycustomfont.ttf">
    <font-triplet name="myfont" style="normal" weight="normal"/>
</font>

The embed-url is where the library can find the font file. The font-triplet-name is the name you would use in your custom css style. This name has to be in lowercase for your own custom fonts.

If you want to use italic or bold versions of the font, you need to specify this as well. For example:

<font kerning="yes" embed-url="mycustomfontinbold.ttf">
   <font-triplet name="myfont" style="normal" weight="bold"/>
</font>

<font kerning="yes" embed-url="mycustomfontinitalic.ttf">
   <font-triplet name="myfont" style="italic" weight="normal"/>
</font>

<font kerning="yes" embed-url="mycustomfontinboldanditalic.ttf">
   <font-triplet name="myfont" style="italic" weight="bold"/>
</font>

In the end your setup should look like this:

  • fop.xconf, your custom font and the 6 default fonts should be in your project resources folder.
  • the fop.xconf file should include a reference to your custom font.