Style

Last modified: August 20, 2024

Introduction

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.

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 teaches you how to do this.

The PDF generator can be set up 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 app 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.

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.

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:

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