Skip to main content
September 18, 2011
Question

Uneven line-height in TextFlow control?

  • September 18, 2011
  • 1 reply
  • 1235 views

I've switched from the regular TextField to the new TextLayout framework, thus using the new TextFlow control. Everything is great except that lines for some reason don't snap horizontally to pixels. Meaning, the line-height varies due to rounding and the selection rectangle becomes blurry. I've looked up and down the documentation and can't find anything that would explain this, nor do I find anything on the mighty google.

I haven't done anything strange and it's still a minimal implementation so I don't see what I personally could've done wrong: http://pastebin.com/hBxR1eVS ... setting the line-height works partially (although far from ideal), but there is still something causing a non-integer height. I'm compiling against Flex SDK 4.5.1 with FlashDevelop.

There must be a way to force lines to snap to pixels... right? Any help would be greatly appreciated.

PS. This will be output and rendered as HTML later, so being able to have them visually similar sure would be a plus.

 

As you can see here, the spacing between the lines varies between 5 and 6 pixels, and the selection rectangle is blurred (everything is selected, the background is grey).

This topic has been closed for replies.

1 reply

September 18, 2011

I am experiencing the same problem and I didn't find any helpful article about it.

A bit offtopic, but I thought it is interesting to share. CFF is on of course.

The text gets weird colors.

September 18, 2011

That's not so weird, it's sub-pixel rendering for LCDs. Zooming in makes it look strange.

I fiddled around a bit and found that setting lineheight to "100%" solves the line-height issue for me (I want 100% anyway)... however, it still doesn't align on pixel boundaries. Although who knows, it might just "break" for other content and end up uneven anyway.

What I find so strange is that this is default behavior, why on earth? Even the selection is consistently blurry so it's hardly hard to easy to miss. Is it perhaps possible to make some modification or override some object to that would round of all the position values perhaps?

Participating Frequently
September 19, 2011

Hi SyranideX,

I have some thoughts on this, like to share with you.

LineHeight is defined as : the distance from the baseline of the previous line to the baseline of the current line is equal to the maximum amount of the leading applied to any character in the line.

So it's default value is "120%", not "100%" to prevent lines without gap.

As for non-integer lineHeight, TLF is using FTE's TextLine, as the documents below shows, lineHeight of TextLine is a non-integer value, so TLF doesn't "cut" the values, just uses TextLine's lineHeight plus some gap values. Does it help ?

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/engine/TextLine.html#textHeight

Best regards!

Mingjun.

From: Adobe Forums <forums@adobe.com<mailto:forums@adobe.com>>

Reply-To: "jive-464876580-mqa6-2-2c3mj@mail.forums.adobe.com<mailto:jive-464876580-mqa6-2-2c3mj@mail.forums.adobe.com>" <jive-464876580-mqa6-2-2c3mj@mail.forums.adobe.com<mailto:jive-464876580-mqa6-2-2c3mj@mail.forums.adobe.com>>

Date: Sun, 18 Sep 2011 15:30:03 -0700

To: Mingjun Zhang <mjzhang@adobe.com<mailto:mjzhang@adobe.com>>

Subject: Uneven line-height in TextFlow control?

Adobe Forums<http://forums.adobe.com/index.jspa>

Re: Uneven line-height in TextFlow control?

created by SyranideX<http://forums.adobe.com/people/SyranideX> in Text Layout Framework - View the full discussion<http://forums.adobe.com/message/3923803#3923803