Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why are condensed fonts not displayed properly in FireMonkey?

(And what can I do about it?)

If I create two labels in VCL and set one to use Arial and another Arial Narrow I'll see an expected result.

enter image description here

If I do the same in Firemonkey, the second label is not displayed in Arial Narrow. It is even not displayed in Arial (dots on i's are round, shape of 's' is all wrong etc.).

enter image description here

Does anybody know why FM (I was testing this with Delphi XE4) is not displaying the font properly? Is there anything I can do about it?

Source for the VCL form:

object Form3: TForm3
  Left = 0
  Top = 0
  Caption = 'Form3'
  ClientHeight = 198
  ClientWidth = 475
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  OldCreateOrder = False
  PixelsPerInch = 96
  TextHeight = 13
  object Label1: TLabel
    Left = 24
    Top = 32
    Width = 134
    Height = 14
    Caption = 'This label is using Arial @11'
    Font.Charset = DEFAULT_CHARSET
    Font.Color = clWindowText
    Font.Height = -11
    Font.Name = 'Arial'
    Font.Style = []
    ParentFont = False
  end
  object Label2: TLabel
    Left = 24
    Top = 52
    Width = 152
    Height = 15
    Caption = 'This label is using Arial Narrow @11'
    Font.Charset = DEFAULT_CHARSET
    Font.Color = clWindowText
    Font.Height = -11
    Font.Name = 'Arial Narrow'
    Font.Style = []
    ParentFont = False
  end
  object Label3: TLabel
    Left = 24
    Top = 98
    Width = 398
    Height = 36
    Caption = 'This label is using Arial @32'
    Font.Charset = DEFAULT_CHARSET
    Font.Color = clWindowText
    Font.Height = -32
    Font.Name = 'Arial'
    Font.Style = []
    ParentFont = False
  end
  object Label4: TLabel
    Left = 24
    Top = 140
    Width = 429
    Height = 37
    Caption = 'This label is using Arial Narrow @32'
    Font.Charset = DEFAULT_CHARSET
    Font.Color = clWindowText
    Font.Height = -32
    Font.Name = 'Arial Narrow'
    Font.Style = []
    ParentFont = False
  end
end

Source for the FM form:

object Form4: TForm4
  Left = 0
  Top = 0
  Caption = 'Form4'
  ClientHeight = 207
  ClientWidth = 558
  FormFactor.Width = 320
  FormFactor.Height = 480
  FormFactor.Devices = [dkDesktop, dkiPhone, dkiPad]
  DesignerMobile = False
  DesignerWidth = 0
  DesignerHeight = 0
  DesignerDeviceName = ''
  DesignerOrientation = 0
  object Label1: TLabel
    Font.Family = 'Arial'
    StyledSettings = [ssSize, ssStyle, ssFontColor]
    Height = 17.000000000000000000
    Position.X = 16.000000000000000000
    Position.Y = 32.000000000000000000
    Text = 'This label is using Arial @11'
    Width = 225.000000000000000000
  end
  object Label2: TLabel
    Font.Family = 'Arial Narrow'
    StyledSettings = [ssSize, ssStyle, ssFontColor]
    Height = 17.000000000000000000
    Position.X = 16.000000000000000000
    Position.Y = 48.000000000000000000
    Text = 'This label is using Arial Narrow @11'
    Width = 225.000000000000000000
  end
  object Label3: TLabel
    Font.Family = 'Arial'
    Font.Size = 32.000000000000000000
    StyledSettings = [ssStyle, ssFontColor]
    Height = 41.000000000000000000
    Position.X = 16.000000000000000000
    Position.Y = 104.000000000000000000
    Text = 'This label is using Arial @32'
    Width = 433.000000000000000000
  end
  object Label4: TLabel
    Font.Family = 'Arial Narrow'
    Font.Size = 32.000000000000000000
    StyledSettings = [ssStyle, ssFontColor]
    Height = 65.000000000000000000
    Position.X = 16.000000000000000000
    Position.Y = 128.000000000000000000
    Text = 'This label is using Arial Narrow @32'
    Width = 545.000000000000000000
  end
end
like image 616
gabr Avatar asked Jul 17 '13 13:07

gabr


1 Answers

This seems to only affect fonts within families - if the font does not exist in the fonts folder under its own family name. Arial Narrow, for example, is a font within the "Arial" font file (it exists within a family and is not, per se, a family unto itself).

Typically a font family would include the four styles only

Arial (naively contains)

  • Arial Regular
  • Arial Bold
  • Arial Italic
  • Arial Bold Italic

"Arial Narrow", however, exists within the "Arial" family alongside the standard styles - ie :

Arial (actually contains)

  • Arial Regular
  • Arial Bold
  • Arial Italic
  • Arial Bold Italic
  • Arial Narrow
  • Arial Narrow Bold
  • Arial Narrow Italic
  • Arial Narrow Bold Italic
  • Arial Black

It seems that FMX is only looking one level deep within any given font family and is not looking at any style variant that deviates from the strict GDI+ style definitions (Regular, Bold, Italic, Bold Italic).

This also, by inspection, affects Arial Black - other examples are easy to find by running through your fonts folder. Franklin Gothic Demi, Gill Sans Ultra Bold, etc... anything that follows the above pattern. The font seems to be rendered in the default Segoe UI when these fonts are encountered.

A stopgap solution is to use Arial and set the Scale property to X=0.82 - it's not perfect, but it's quite close to Arial Narrow.

Arial stretch vs Arial Narrow

This is probably a bug and should be QC'd.

like image 130
J... Avatar answered Oct 24 '22 01:10

J...