Texts with same glyph width jittering on Horizontal Right Alignment

17 views
asked May 21 in Embedded Wizard Studio by Kriskrome93

Hello, 

This is following up with the second issues mentioned in the thread https://ask.embedded-wizard.de/1297/views-attrtext-getcontentarea-returns-incorrect-text-size?show=1300

I'm using a proprtional font with same glyph width for the numbers in a Text field. On setting the alignment to Right aligned, the text appears to jitter each time the number data is changed. 

This is similar to the problem mentioned in the above thread, but I'm using the Studio version 9.20

Do you recollect this being fixed in the later version as mentioned in the comments ? 

Thanks! 

1 Answer

0 votes
answered May 22 by Paul Banach

Hello,

I suppose, you observe an effect resulting from Kerning metrics. Usually, when using fonts, the distance between two glyphs is not limited to the width of the affected glyphs. Even if two glyphs have equal width, there are further font specific metrics affecting their distance. Kerning is one example. We added Kerning support in version 9.10.

Unfortunately, the Kerning metrics can not be disabled in the actual version. I would thus recommend to try another font. We discuss internally the possibility to enhance Embedded Wizard by additional options to switch off kerning metrics. 

Best regards

Paul Banach

commented May 22 by Kriskrome93
Hi Paul,

If it was the issue with the font, Kerning would affect Left Alignment too right ? I see no jitter or jumping texts when the font is Left Aligned.
commented May 22 by Paul Banach
Hello,

without knowing the font it is difficult to say what is wrong. The effect resulting from kerning should also affect left aligned text output - as far as I have tested it. Can you provide us the used font and the configured font size? I would like to analyze it.

Best regards

Paul Banach
commented May 22 by Kriskrome93

Hi Paul, 

This is not specific to a particular font, I tried with the Microsoft supplied Segoe UI and could see the issue. Let me brief the steps: 

1. Assign a Text view with Segoe UI (any Proportional font with same glyph width for the numbers)  

2. Change the Alignment to Horizontal Right 

3. Update the Text with values and you could see the Text numbers jittering to the left corresponding to the last digit of the number

4. Make the Alignment to Horizontal Left and the issue is not observed. 

Let me know if this helps, 

Thanks 

commented May 22 by Paul Banach

Hello,

unfortunately with Segoe UI I was not able to reproduce the behavior. In turn, when using Arial font, I can observe the effect of two 1 digits being displayed closed together. I was able to verify that in this case the Arial font contains an entry in the kerning table to correct the arrangment of two following 1 glyphs in order to get better looking outputs. In case of Segoe UI, there is no kerning table entry for this glyph combination. So far this confirms my observation. I suppose your version of Segoe UI differs from the used on my machine. Or the resulting kerning data does depend on the specified font size. What size have you configured for the Segoe UI font?

Concerning your other observation. The kerning metrics also affect left aligned text. If you display the string 100 and 110 the last 0 digit jitters slightly. From my point of view, this is the correct behavior since the font data contains corresponding instructions to bring two 1 digits closer. Do you agree?

Anyway, what can you do?

Option 1: Since Embedded Wizard actually does not allow to disable the kerning tables, the simplest option would be to try another font. 

Option 2: Trick out the font converter so the kerning data is not taken in account. In Embedded Wizard it is possible to map the involved glyphs to other codes. You configure this in the attribute Ranges. Concrete, instruct Embedded Wizard to import the glyphs '0'-'9' and store them at other code points. For example at the code points 0x1030 .. 0x1039. Following is the setting of the Ranges attribute:

Consequently, to display the digit 1 with such font you have use the code point "\x1031". The string "\x1031\x1031\x1030", in turn, displays the digits 110. Because of the mapping, the kering data for the glyphs is not available anymore. Tne jitter disappears. The problem, which remains is how to convert a regular string containing e.g. the digit "110" in a string containing the mapped code-points?

For this purpose I would iterate over the original string and add 0x1000 to each found glyph in range 0x0030 .. 0x0039 (0-9). To test this approach I have implemented following ConvertDigits() method:

var string str = aString;
var int32  len = str.length;
var int32  inx;

for ( inx = 0; inx < len; inx = inx + 1 )
  if (( str[inx] >= '0' ) && ( str[inx] <= '9' ))
    str[inx] = (char)((int32)str[inx] + 0x1000 );

return str;

Now wherever I assign a string containing digits and I use the special font, I invoke the method. For example, to format and display a number:

var int32 someNumber = ...

// Let the text view display the number 
TextView.String = ConvertDigits( string( someNumber ));

I hope the workaround helps you further. Anyway, in the next version we will add a option to disable kerning tables.

Best regards

Paul Banach

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint

...