iOS: Bold and Italic on the same word

Asked 9/4, 2012 at 19:21 Answered 19/6, 2013 at 11:15

Background: I have been trying to display a sentence with Bold and Italic font as well as normal ones.

Question: How can I display something like this "Hello, my name is Byte". Notice that Byte is both bold and italic, while other words remains normal.

I have tried: I think coreText should be able to do something along the line, I just have not been able to find the correct way to do it. I also used TTTAttributeLabel and cannot make it both bold and italic. I have Three20 loaded, just do not know which or what to use. Webview does not work with my background.

As a reply to Carles Estevadeordal:

UIWebView *webView = [[UIWebView alloc]initWithFrame:CGRectMake(10, 360, 300, 40)];
[webView setBackgroundColor: [UIColor clearColor]];
[webView loadHTMLString:[NSString stringWithFormat:@"<html><body style=\"background-color: transparent;\">Hello, my name is <b><i>Byte</b></i></body></html>"] baseURL:nil];
[self.view addSubview:webView];

This is exactly the code, I used. It displayed white background.

Everyway answered 9/4, 2012 at 19:21 Comment(3)

I believe you can use CTFFontDescriptors for coretext to get the effect you want. developer.apple.com/library/ios/#documentation/Carbon/Reference/… I am not sure of the details of how this works though. – Wines 9/4, 2012 at 19:27

TTTAttributeLabel most definitely can have both bold an italic. – Stites 9/4, 2012 at 23:30

@AlastairStuart Do you happen to have an example because I spent quite a bit of time trying to understand TTTAttributeLabel and came up with nothing. – Everyway 10/4, 2012 at 13:43

After a good night sleep, I found a way to do it using TTTAtributedlabel. Here is how:

TTTAttributedLabel *attLabel = [[TTTAttributedLabel alloc]initWithFrame:CGRectMake(x, y, xx, yy)];
NSString *text = @"Hello, my name is Byte";

[attLabel setText:text afterInheritingLabelAttributesAndConfiguringWithBlock:^(NSMutableAttributedString *mutableAttributedString) {

    //font helvetica with bold and italic 
    UIFont *boldSystemFont = [UIFont fontWithName:@"Helvetica-BoldOblique" size:10];

    CTFontRef font = CTFontCreateWithName((__bridge CFStringRef)boldSystemFont.fontName, boldSystemFont.pointSize, NULL);

    NSRange boldRange = [[mutableAttributedString string] rangeOfString:@"Byte" options:NSCaseInsensitiveSearch];
    [mutableAttributedString addAttribute:(NSString *)kCTFontAttributeName value:(__bridge id)font range:boldRange];

    CFRelease(font);

    return mutableAttributedString;
}];

I still do not have a way to add 2 attributes (ie: bold and italic separately) into the same word/letter. But this does the trick.

Everyway answered 10/4, 2012 at 20:47 Comment(4)

That library is much better than using a uiwebview if you just want bold and italic! – Monogenic 12/4, 2012 at 11:11

Do you forget releasing objects? – Mobilize 31/1, 2013 at 8:1

in Automatic Reference Counting? – Everyway 4/2, 2013 at 9:35

@Everyway Even though ARC, you should still release the CTFont object you create. Ex: CFRelease(font) – Lattie 5/5, 2013 at 15:16

In case you are still interested in a CoreText solution to this issue :

newFont = CTFontCreateCopyWithSymbolicTraits(fontRef,
                                             self.textSize,
                                             NULL,
                                             kCTFontBoldTrait | kCTFontItalicTrait,
                                             kCTFontBoldTrait | kCTFontItalicTrait);

[attrString addAttribute:(NSString*)kCTFontAttributeName
                   value:(id)newFont
                   range:[copyString rangeOfString:customText.text]];

Sallust answered 10/1, 2013 at 14:10 Comment(1)

How you can extend this to be used as a function in order to add: kCTFontBoldTrait and kCTFontItalicTrait on the fly ? – Partridgeberry 21/3, 2016 at 12:31

You can use this where sender is instance of UIButton

   sender.titleLabel.font=[UIFont fontWithName:@"Helvetica-BoldOblique" size:18.0f];

Tamikatamiko answered 19/6, 2013 at 11:15 Comment(0)

To add two attributes (this is non ARC code):

#define kLabelFontSize 16.0

NSString labelString = @"Let's slide loudly";

[self.tttLabel setText:labelString afterInheritingLabelAttributesAndConfiguringWithBlock:^NSMutableAttributedString *(NSMutableAttributedString *mutableAttributedString) {

    UIFont *boldSystemFont = [UIFont boldSystemFontOfSize:kLabelFontSize];
    CTFontRef boldFont = CTFontCreateWithName((CFStringRef)boldSystemFont.fontName, boldSystemFont.pointSize, NULL);
    if (boldFont) {
        [mutableAttributedString addAttribute:(NSString *)kCTFontAttributeName value:(id)boldFont range:NSMakeRange(6, 11)];
        CFRelease(boldFont);
    }

    UIFont *italicSystemFont = [UIFont italicSystemFontOfSize:kLabelFontSize];
    CTFontRef italicFont = CTFontCreateWithName((CFStringRef)boldSystemFont.fontName, italicSystemFont.pointSize, NULL);
    if (italicFont) {
        [mutableAttributedString addAttribute:(NSString *)kCTFontAttributeName value:(id)italicFont range:NSMakeRange(12, 18)];
        CFRelease(italicFont);
    }

    }];

    return mutableAttributedString;
}];

Stites answered 11/4, 2012 at 15:25 Comment(1)

This is correct, but not to the question I asked. The 2 attributes are not on the same word. (6-11) (12-18). Thanks for the contribution. – Everyway 11/4, 2012 at 16:32

If the sentence has a fixed format the easiest solution is to use 2 different UILabels, one with the normal font and the other one with a Bold and Italic font set.

If the sentence is dynamic then you should use a UIWebView object as it was a lavel and load a simple webpage with your text and the < b > < i > < /i > < /b > fields set at the spot when you want it bold and italic like:

[myWebViewLabel loadHTMLString:[NSString stringWithFormat:@"<html><body style=\"background-color: transparent;\">Hello, my name is <b><i>Byte</b></i></body></html>"] baseURL:nil];

I hope it helps.

Monogenic answered 9/4, 2012 at 22:16 Comment(4)

Thank you for your contribution. As much as I like the simpleness, I cannot get the background to be transparent. Am I missing something? – Everyway 10/4, 2012 at 13:57

Yes, you have to do: [myWebViewLabel setBackgroundColor:[UIColor clearColor]]; – Monogenic 10/4, 2012 at 16:53

Yes, sure, I have copied it form an app that uses it. Have you put the <body style=\"background-color: transparent;\"> in the HTML code and the setBackgroundColor when you create the object? – Monogenic 10/4, 2012 at 19:28

Come on! Just google it: transparent uiwebview... You miss webView.opaque = NO; – Monogenic 12/4, 2012 at 11:6

Recommended topics

Hot tags