TTStyledTextLabel offset between link and regular text when changing from default font

Question

I'm using Three20 TTStyledTextLabel and when I change the default font (Helvetica) to something else it creates some kind of height difference between links and regular text

The following code demonstrate my problem:

 #import <Three20/Three20.h>


    @interface TestController : UIViewController {

    }

    @end


    @implementation TestController
    -(id)init{
        self = [super init];
        TTStyledTextLabel* label = [[[TTStyledTextLabel alloc]   initWithFrame:CGRectMake(0, 0, 320, 230)] autorelease];
        label.text = [TTStyledText textFromXHTML:@"<a href=\"aa://link1\">link</a> text" lineBreaks:YES URLs:YES];
        [label setFont:[UIFont systemFontOfSize:16]];
        [[self view] addSubview:label];


        TTStyledTextLabel* label2 = [[[TTStyledTextLabel alloc]   initWithFrame:CGRectMake(0, 230, 320, 230)] autorelease];
        label2.text = [TTStyledText textFromXHTML:@"<a href=\"aa://link1\">link2</a> text2" lineBreaks:YES URLs:YES];
        [label2 setFont:[UIFont fontWithName:@"HelveticaNeue" size:16]];
        [[self view] addSubview:label2];
        return self;
    }
    @end

In the screen shot you can see that the first link is aligned and the second one isn't

How do I fix it? I think there is a bug in the TTStyledTextLabel code...

Answer 1

If you look at the source code, the font is set using a style: self.font = TTSTYLEVAR(font). I would do two things here

1. Create a Category that overrides the initWithFrame method. Leave everything the same except rename self.font = TTSTYLEVAR(font) to something else like tableXFont so that changing the font style will not affect your whole app.
2. Make and register your own stylesheet so that the tableXFont is defined.

This should set you on the right path to the proper way to do three20 font and styling customization

Answer 2

i just commented - (void)offsetFrame:(TTStyledFrame*)frame by:(CGFloat)y (TTStyledLayout.m:87) out and it did the trick. of course it may break other stuff.

edit: i also commented out the following bits of code

if (!font) {
//    if ([elt isKindOfClass:[TTStyledLinkNode class]]
//        || [elt isKindOfClass:[TTStyledBoldNode class]]) {
//      font = self.boldFont;
//    } else if ([elt isKindOfClass:[TTStyledItalicNode class]]) {
//      font = self.italicFont;
//    } else {
      font = self.font;
//    }
}

to get rid of the bold font.

Answer 3

In the latest version of three20 as of this writing, it seems to me that the problem lives at TTStyledLayout:345.

Specifically, changing:

[self offsetFrame:frame by:(_lineHeight - (frame.height - font.descender))];

to

[self offsetFrame:frame by:(_lineHeight - (frame.height /* - font.descender */ ))];

... seems to solve the problem.

After staring at the TT code for awhile, I believe your problem only crops up when there are URLs on a line because URL boldness inflates some "line height" ivar. If you don't want to fork three20, you could probably just alter your stylesheet to ensure the line heights of URLs are no different than the line height of the rest of your text. I'm just speculating, though.

I plan on filing a bug report about this, too.