font-rendering: underline line should be put a bit down, also I am not sure why it renders so think

[andreasdr]

Hi,

regarding font rendering with bold and underline. To me it seems like underline line should be put a bit down, also I am not sure why it renders so think. Do other programs like Word or Open Office render underline line with thickness of font? Not sure. I am talking about native targets like MacOSX, Windows.

Please see an example:

Many thanx. If I can help somehow please let me know.

[joshtynjala]

also I am not sure why it renders so think. Do other programs like Word or Open Office render underline line with thickness of font? Not sure.

In the code, I can see that it always renders the underline at 1 pixel thick. So it doesn't always match the thickness of the font. You just happen to be using a font that has the same thickness.

https://github.com/openfl/openfl/blob/cca4cc0/src/openfl/display/_internal/CairoTextField.hx#L419

I just did a quick test in Adobe AIR, and it looks like Flash renders the underline thickness at < 1 pixel thick. Maybe 0.5 pixels? So it might be worth considering a tweak to that in OpenFL.

[joshtynjala]

To me it seems like underline line should be put a bit down

This is how the y position of the underline is calculated:

var y = Math.floor(group.offsetY + scrollY + group.ascent - bounds.y) + 0.5;

Source: https://github.com/openfl/openfl/blob/cca4cc0/src/openfl/display/_internal/CairoTextField.hx#L391

Math.floor() might not be the right choice here. I'm not sure if Math.ceil() makes more sense, though. That could end up adding too much space between the text and the underline. I wonder if any kind of integer rounding is actually necessary.

I personally agree with the conclusion that there should be more space between the baseline of the text and the underline. It's too close, and it has bothered me for a while. Testing in SWF, I see a bit of empty space before the underline, so we should try match that better, in my opinion. Maybe someone who has worked on the TextField code in OpenFL can provide some thoughts.

[joshtynjala]

I personally agree with the conclusion that there should be more space between the baseline of the text and the underline. It's too close, and it has bothered me for a while.

I just switched it from Math.floor() to Math.ceil() because it seems to be an improvement most of the time. I'm not sure it's the final solution because SWF seems to add a little more space, but it's still better. I'll keep this issue open, if anyone wants to revisit.

[andreasdr]

Ill have a check very soon. How can I try your change?

[joshtynjala]

How can I try your change?

There are a couple of different options.

1. Install OpenFL from the Git repository:

   haxelib git openfl [email protected]:openfl/openfl.git
   

2. Install using the latest Github Actions CI build:

   • Go to the Github Actions page: https://github.com/openfl/openfl/actions

   • Choose the latest successful build of the develop branch.

   • At the bottom of the next page, you'll find an Artifacts section. Download the "openfl-haxelib" artifact. You'll get a zip file, and you can install it with this command:

     haxelib install openfl-haxelib.zip