iOS: Bold and Italic on the same word

Question

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.

I believe you can use CTFFontDescriptors for coretext to get the effect you want. http://developer.apple.com/library/ios/#documentation/Carbon/Reference/CTFontDescriptorRef/Reference/reference.html I am not sure of the details of how this works though. — Joel, Apr 09 '12 at 19:27
TTTAttributeLabel most definitely can have both bold an italic. — Alastair Stuart, Apr 09 '12 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. — Byte, Apr 10 '12 at 13:43

Byte · Accepted Answer · 2013-05-23T18:45:11.393

7

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.

edited May 23 '13 at 18:45

answered Apr 10 '12 at 20:47

Byte

2,920
3
33
55

That library is much better than using a uiwebview if you just want bold and italic! – Carles Estevadeordal Apr 12 '12 at 11:11
Do you forget releasing objects? – user4951 Jan 31 '13 at 08:01
1

in Automatic Reference Counting? – Byte Feb 04 '13 at 09:35
2

@Byte Even though ARC, you should still release the CTFont object you create. Ex: `CFRelease(font)` – lobianco May 05 '13 at 15:16

score 2 · Answer 2 · answered Jan 10 '13 at 14:10

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]];

How you can extend this to be used as a function in order to add: *`kCTFontBoldTrait`* and *`kCTFontItalicTrait`* on the fly ? — el.severo, Mar 21 '16 at 12:31

score 2 · Answer 3 · answered Jun 19 '13 at 11:15

2

You can use this where sender is instance of UIButton

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

answered Jun 19 '13 at 11:15

Nagendra Tripathi

923
12
23

score 1 · Answer 4 · answered Apr 11 '12 at 15:25

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;
}];

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. — Byte, Apr 11 '12 at 16:32

Carles Estevadeordal · Answer 5 · 2012-04-10T19:53:08.530

0

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.

edited Apr 10 '12 at 19:53

answered Apr 09 '12 at 22:16

Carles Estevadeordal

1,137
9
17

Thank you for your contribution. As much as I like the simpleness, I cannot get the background to be transparent. Am I missing something? – Byte Apr 10 '12 at 13:57
Yes, you have to do: [myWebViewLabel setBackgroundColor:[UIColor clearColor]]; – Carles Estevadeordal Apr 10 '12 at 16:53
Yes, sure, I have copied it form an app that uses it. Have you put the in the HTML code and the setBackgroundColor when you create the object? – Carles Estevadeordal Apr 10 '12 at 19:28
Come on! Just google it: transparent uiwebview... You miss webView.opaque = NO; – Carles Estevadeordal Apr 12 '12 at 11:06

iOS: Bold and Italic on the same word

5 Answers5