[HTML5] A small request regarding underlined text

#1

As you can see, the underlined htmlText in Flash is much more elegant. The line is thinner and there is some space between it and the characters (actually, I noticed it after creating this comparison image :slightly_smiling_face:).

leaderboards

And the request initially was about the line’s color. :laughing: In Flash it will match the color of the text, while in HTML5 it will always be gray…

#2

Leaving aside the spacing, it looks like Flash uses pixel hinting, meaning it snaps the underline to the nearest pixel. This lets it fill in one row of pixels with the correct solid color.

With HTML5, the line is anchored between two rows of pixels, so it fills both rows with a semitransparent color. The transparency may or may not be why it looks gray.

#3

The spacing is interesting. If I can find a font with a huge descent, I should be able to tell where the underline is supposed to go. Right now, I think it’s aligning to the baseline, which is incorrect compared to Flash.

#4

There is also a bug with the line tearing in some browsers, when formatting in chunks.

someTextField.text = "Click here to claim 5 tokens!";
someTextField.setTextFormat(someTextFormat, 0, 20);
someTextField.setTextFormat(someTextFormat, 20, someTextField.length);

u

#5

Some browsers, meaning not all? @singmajesty CanvasTextField looks like it would underline correctly based on alignBaseline() in TextEngine, but am I missing something?

#6

Might be interesting to test Neko or C++ as well, to see if this is related to browsers in any way, or really is our logic. I’m guessing there’s a logical bug somehow

What is the value of someTextFormat?

#7

So for Arial it looks OK. I’ve fixed underline to be the same color as text and here are the results. HTML5 left, Flash right. I think HTML5’s is a little bit ‘thicker’ even though it is 0.5 width. Setting the width lower makes it look worse so I’ve left it at 0.5

underline%20color
underline color.png1745×58 18.2 KB

#8

Not all. Maybe even only in Firefox.

It’s any embed font.

Can I test it? :slight_smile:

#9

@Neborya sure thing, it is on OpenFL dev branch :slight_smile:

1 Like
#10

I just added support for underlining in the Cairo (native) render as well, and fixed underline to appear over text selection. I also made some changes that makes the underline look sharper

#11

OK, I have amplified my patreonship by another gallon of gas :)))))

1 Like