Display fraction number in UILabel

Question

I am working on the app in which I have to show fraction number on label.

NSMutableAttributedString   * hogan = [[NSMutableAttributedString alloc] initWithString:self.toValue];
  [hogan setAttributes:@{NSFontAttributeName:[UIFont fontWithName:@"DINPro-Bold" size:11.0]} range:NSMakeRange(9,6)];
  UILabel *fal = [[UILabel alloc] initWithFrame:CGRectMake(100,12, 150.0, 50)];
 fal.text = @"";
 fal.textColor = [UIColor whiteColor];

 fal.backgroundColor = [UIColor redColor];
  fal.font = [UIFont fontWithName:@"DINPro-Bold" size:18.0];



fal.attributedText=hogan;
[self addSubview:fal];

and the Output of this code is 1/5. I want to show like this ⅕.

I have tried with attribute string but it doesn't work.

Can anyone please help me.

Thanks in advance.

Answer 1

I have created the following two helper functions which will return the unicode string for a given number (0-9) in subscript or superscript format:

-(NSString *)superscript:(int)num {

    NSDictionary *superscripts = @{@0: @"\u2070", @1: @"\u00B9", @2: @"\u00B2", @3: @"\u00B3", @4: @"\u2074", @5: @"\u2075", @6: @"\u2076", @7: @"\u2077", @8: @"\u2078", @9: @"\u2079"};
    return superscripts[@(num)];
}

-(NSString *)subscript:(int)num {

    NSDictionary *subscripts = @{@0: @"\u2080", @1: @"\u2081", @2: @"\u2082", @3: @"\u2083", @4: @"\u2084", @5: @"\u2085", @6: @"\u2086", @7: @"\u2087", @8: @"\u2088", @9: @"\u2089"};
    return subscripts[@(num)];
}

Once you have these declared, you can easily call something like this:

NSLog(@"%@/%@", [self superscript:5], [self subscript:6]);

Which would output the following:

⁵/₆

And even a screenshot for ya from my normal UILabel:

EDIT

Here's a function that will work with any fraction, including 37/100, for example:

-(NSString *)fraction:(int)numerator denominator:(int)denominator {

    NSMutableString *result = [NSMutableString string];

    NSString *one = [NSString stringWithFormat:@"%i", numerator];
    for (int i = 0; i < one.length; i++) {
        [result appendString:[self superscript:[[one substringWithRange:NSMakeRange(i, 1)] intValue]]];
    }
    [result appendString:@"/"];

    NSString *two = [NSString stringWithFormat:@"%i", denominator];
    for (int i = 0; i < two.length; i++) {
        [result appendString:[self subscript:[[two substringWithRange:NSMakeRange(i, 1)] intValue]]];
    }
    return result;
}

Calling the following:

NSLog(@"%@", [self fraction:37 denominator:100]);

Logs ³⁷/₁₀₀.

Answer 2

If you only want to use very common fractions, use their standard Unicode characters, as mentioned in other answers.

Or, to get an arbitrary fraction, you might want to hardcode all the characters for superscript and subscript decimals from Unicode. There is a special fraction slash, too.

The code below will convert an NSString numerator and NSString denominator into a fraction like ¹³⁄₅. Could easily be modified to use an NSNumberFormatter.

// Constants for the different Unicode charcodes, where the nth array 
// member is for the digit n.
NSArray *superscriptDigits = @[@"\u2070",
                               @"\u00b9",
                               @"\u00b2",
                               @"\u00b3",
                               @"\u2074",
                               @"\u2075",
                               @"\u2076",
                               @"\u2077",
                               @"\u2078",
                               @"\u2079"];
NSArray *subscriptDigits = @[@"\u2080",
                             @"\u2081",
                             @"\u2082",
                             @"\u2083",
                             @"\u2084",
                             @"\u2085",
                             @"\u2086",
                             @"\u2087",
                             @"\u2088",
                             @"\u2089"];
NSString *slashCharacter = @"\u2044";

+(NSString *)fractionStringFromDenominator:(NSString *)denominatorString
                                 numerator:(NSString *)numeratorString {

    NSMutableString *fractionString = [NSMutableString new];

    for (int i = 0; i < denominatorString.length; i++) {
        unichar c = [denominatorString characterAtIndex:i];
        [fractionString appendFormat:@"%@", [self unicodeForDigitChar:c subscript:NO]];
    }

    [fractionString appendFormat:@"%@", slashCharacter];

    for (int i = 0; i < numeratorString.length; i++) {
        unichar c = [numeratorString characterAtIndex:i];
        [fractionString appendFormat:@"%@", [self unicodeForDigitChar:c subscript:YES]];
    }

    return fractionString;
}


+(NSString *)unicodeForDigitChar:(unichar)c subscript:(bool)subscript {
    if (c >= '0' && c <= '9') {
        return subscript ? subscriptDigits[c - '0'] : superscriptDigits[c - '0'];
    }
    // Not a standard digit character
    return @"";
}

Answer 3

You can achieve it by setting the UILabel's text property to the Unicode of 1/2:

myLblName.text = [NSString stringWithFormat:@"%C",0x00bd];

And also see below link
NSString: Looking for Unicode for superscript: 1, 2, 3
Might be helpful for you. Enjoy ;)

Answer 4

Try setting the label's text property to the Unicode of 1/5:

label.text = [NSString stringWithFormat:@"%C",0x2155];

Answer 5

I don't know if there is any other solution to have frictions inside "normal" UILabel, but You can create your own.

Create new class extend from UIView and draw two string and line in between.

You can use

[str drawAtPoint:CGPointMake(x,y)]

Than you just write a set method that takes two numbers or setter for decimal number and than you convert this into friction.

- (void) setFractionValue: (NSNumber * ) a divider: (NSNumber * ) b {

    // Draw fraction a/b
    [[NSString stringWithFormat:@"%@", a] drawAtPoint:CGPointMake(x,y1)] ;
    [[NSString stringWithFormat:@"%@", b] drawAtPoint:CGPointMake(x,y2)] ;
}

or use something like this :

- (void) setDecimalValue: (NSNumber *) decimal {

    // convert decimal to fraction 
    // get a and b from fraction
    // Draw fraction a/b
    [[NSString stringWithFormat:@"%@", a] drawAtPoint:CGPointMake(x,y1)] ;
    [[NSString stringWithFormat:@"%@", b] drawAtPoint:CGPointMake(x,y2)] ;

}

EDIT

---

Use case :

 @implementation TestDrawText


- (void)drawRect:(CGRect)rect {

    [super drawRect:rect];



    [self drawText:rect.origin.x + 10 yPosition:rect.origin.x + 10 text:@"2"];

    [self drowLine:rect.origin.x + 11 yPosition:rect.origin.x + 30];

    [self drawText:rect.origin.x + 20 yPosition:rect.origin.x + 20 text:@"5"];
}

- (void)drawText:(CGFloat)xPosition yPosition:(CGFloat)yPosition text: (NSString * ) text{

    CGPoint point = CGPointMake(xPosition, yPosition);
    NSDictionary* textFontAttributes = @{NSFontAttributeName: [UIFont fontWithName: @"Helvetica" size: 12], NSForegroundColorAttributeName: UIColor.redColor};
    [text drawAtPoint:point withAttributes:textFontAttributes];
}

- (void) drowLine:(CGFloat)xPosition yPosition:(CGFloat)yPosition {

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);

    // Draw them with a 2.0 stroke width so they are a bit more visible.
    CGContextSetLineWidth(context, 2.0f);

    CGContextMoveToPoint(context, xPosition, yPosition); //start at this point

    CGContextAddLineToPoint(context, xPosition + 15, yPosition - 15); //draw to this point

    // and now draw the Path!
    CGContextStrokePath(context);
}

This is quick example and need to be configure to your wishes, but is a start from where you could go.