Fonts in Flint

Overview

In Flint, fonts can either be created using anti-aliasing of pre-installed system fonts or can be imported from the set of images under resource folder.

Anti-Aliased font type

  • Font Name: Users can select the fonts available under the font name list. Eg. Alef, Calibri, Times New Roman, etc.Ensure you have the license to use this font.Users can install a new font if the font of user’s choice is not available,

    Note: Select ‘Install for all Users’ Option to add new fonts.

  • Font Size: To set the approximate height of the font.

    Default Size: A user can specify the font size in terms of pixels by selecting this option. Fit Height: It calculates a size adjustment per font by matching pixel size.

  • Font Style: Used to make the font - Italic or bold.

  • Minimum width: Users can set the smallest width to be provided for each character, irrespective of its actual width.

  • Character Set: choose the type of characters to be exported. It can be alphanumeric, numeric and custom.

    • Alphanumeric – Most of all the characters

    • Numeric – Only numeric characters

    • Custom – User Specified characters only. For example, for an auto-transmission vehicle cluster only the characters PRNDL can be exported. In the preview section, we can view the changes that we have made to fonts. We can set the character values along with seeing their ASCII values.

    • Unicode file - Flint supports multilingual fonts, which can be achieved by choosing Unicode files in a character set.

    Sparklet Font File - Alphanumeric

    Sparklet Font File - Alphanumeric


Sparklet Font File - Numeric

Sparklet Font File - Numeric


Sparklet Font File - Custom

Sparklet Font File - Custom

Installing image-based fonts

Sometimes, applications may demand using shaded or colored fonts, that are created with image processing tools. Flint supports using these image-based fonts, by selecting Font Type as ‘From Images’.

Importing font images

  • To import the font images, we need to simply copy and paste the images into images folder under the Resources folder.

  • Now click on Add. Set the character value and select the desired font image that we have imported, then click OK. We can view the added font images in the preview section.

    Imaged based Font File

    Imaged based Font File


Image Font in textbox

Image Font in textbox

Grouped Fonts

In Flint, multiple font types can be used in a single textbox by choosing the Font grouped option.

Variable Size Fonts:

Let’s create a font file, change the font type to Font Grouped and set the height value.

Font File with Font Grouped type

Font File with Font Grouped type

Now add the font files which are to be grouped by clicking on the Add button.

Grouped Font Files

Grouped Font Files

We have two font files added here now with different styles and sizes. The first font file (trip_font) is a numeric set, while the second (cluster_font) is alphanumeric.

Font Files list in Grouped Font

Font Files list in Grouped Font

Now, let’s drag and drop the labels widget into the design view, map the font grouped file to the widget. By Simulating the project, we can see the variable size fonts in a same textbox as shown below

Variable Size Fonts

Variable Size Fonts

Multilingual fonts:

Any technology that is offered in the user’s preferred language makes the user understand better. With multi-language support, users can choose the language in which they feel more comfortable.

Flint supports multilingual fonts, which can be achieved by choosing Unicode files in a character set. Unicode is a universal font encoding scheme, designed to cover all world languages.

Now let’s see how to create multilanguage font files in Flint. Here we have chosen 3 languages – Hindi,Tamil,Kannada. Create a font file under resources -> fonts. After creating the font file, select suitable Unicode font and choose the Character Set as Unicode file.

Now add the required characters to a text file under custom chars (resources -> fonts -> custom chars) as shown below:

Custom Chars – Hindi Text File

Custom Chars – Hindi Text File

Custom Chars – Hindi Font File

Custom Chars – Hindi Font File

Now create a Grouped Font file and add the created multi-language font files in it.

Multilingual Font Files in Grouped Font

Multilingual Font Files in Grouped Font

EFR (Translation file)

In Flint, EFR file is the translation file which is used to translate texts from one language to another. Double click on EFR file under resources, now check the language box from language selection dialog and add the texts as shown below:

EFR-Translation File

EFR-Translation File

Now drag and drop a Labels box, map the Group font to it. Now open data file, create Data Variable to represent the total number of languages to be accommodated as shown below,

Data Variable – Active language

Data Variable – Active language

and then create Data Bridge for the texts, select Conversion as Translation and select the translation id from the dialog and add the data variable (Active Language) to it as shown below:

Data Bridge for Text

Data Bridge for Text

Now map the data-bridge to the corresponding textboxes. Now go to flint.efp , click Supported Language tab. Select the required languages that are to be exported.

EFP-Supported Language

EFP-Supported Language

Now export and simulate the project.

Simulation Window (Active language-Hindi)

Simulation Window (Active language-Hindi)

Kerning Support

Kerning is the process of adjusting the spacing between characters usually to achieve a visually pleasing result. Kerning makes character spacing more uniform and pleasant to read.

kerning between characters

kerning between characters

Flint allows the user to modify the properties of a font, including its kerning table. Some fonts may require kerning with some letter pairs while others may not. To enable kerning for fonts, open the font file in Flint, enter the point value by which to expand or condense the space to the right of Default Kern Value under Font Information as shown below

Font Kerning

Font Kerning

Image/Custom Kerning

Flint also supports kerning for image-based fonts. To enable kerning, open the font file in Flint, check the box for Character Wise Kerning under Font Information. Now click on the Kern table in which the user can choose the kern value to adjust the spacing between characters which is required.

Image based font kerning

Image based font kerning

For more details, watch the Flint tutorial video for Working with Fonts in the link below: https://www.youtube.com/watch?v=_bXBpYuV5nc