Roof over square root symbol - ios

Question

I want to write a UILabel that can print square root expressions with a roof on it instead of just a simple √x. There should be a line over the x there as if it's written on paper.

Answer 1

Using Quartz 2D (the QuartzCore framework), you could just draw the line over it:
Thus, given
self.label.text = #"√23+45";
[self addSquareRootTopTo:self.label];
This would draw a line over the characters after the √ symbol:
- (void)addSquareRootTopTo:(UILabel *)label
{
NSRange range = [label.text rangeOfString:#"√"];
if (range.location == NSNotFound)
return;
NSString *stringThruSqrtSymbol = [label.text substringToIndex:range.location + 1];
NSString *stringAfterSqrtSymbol = [label.text substringFromIndex:range.location + 1];
CGSize sizeThruSqrtSymbol;
CGSize sizeAfterSqrtSymbol;
// get the size of the string given the label's font
if ([stringThruSqrtSymbol respondsToSelector:#selector(sizeWithAttributes:)])
{
// for iOS 7
NSDictionary *attributes = #{NSFontAttributeName : label.font};
sizeThruSqrtSymbol = [stringThruSqrtSymbol sizeWithAttributes:attributes];
sizeAfterSqrtSymbol = [stringAfterSqrtSymbol sizeWithAttributes:attributes];
}
else
{
// for earlier versions of iOS
sizeThruSqrtSymbol = [stringThruSqrtSymbol sizeWithFont:label.font];
sizeAfterSqrtSymbol = [stringAfterSqrtSymbol sizeWithFont:label.font];
}
// create path for line over the stuff after the square root sign
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(label.frame.origin.x + sizeThruSqrtSymbol.width, label.frame.origin.y)];
[path addLineToPoint:CGPointMake(label.frame.origin.x + sizeThruSqrtSymbol.width + sizeAfterSqrtSymbol.width, label.frame.origin.y)];
// now add that line to a CAShapeLayer
CAShapeLayer *layer = [CAShapeLayer layer];
layer.path = path.CGPath;
layer.lineWidth = 1.0;
layer.strokeColor = [[UIColor blackColor] CGColor];
layer.fillColor = [[UIColor clearColor] CGColor];
[self.view.layer addSublayer:layer];
}
That yields a less than satisfactory gap:
You could play around with this to nudge the top of the square root symbol down, but the alternative approach would be to use Quartz 2D to draw the entire square root symbol. Thus, take the square root symbol out of the label's text value:
self.label.text = #"23+45";
[self addSquareRootTo:self.label];
And then draw the whole square root symbol in Quartz 2D:
static CGFloat const part1 = 0.12; // tiny diagonal will be 12% of the height of the text frame
static CGFloat const part2 = 0.35; // medium sized diagonal will be 35% of the height of the text frame
- (void)addSquareRootTo:(UILabel *)label
{
CGSize size;
if ([label.text respondsToSelector:#selector(sizeWithAttributes:)])
{
NSDictionary *attributes = #{NSFontAttributeName : label.font};
size = [label.text sizeWithAttributes:attributes];
}
else
{
size = [label.text sizeWithFont:label.font];
}
UIBezierPath *path = [UIBezierPath bezierPath];
// it's going to seem strange, but it's probably easier to draw the square root size
// right to left, so let's start at the top right of the text frame
[path moveToPoint:CGPointMake(label.frame.origin.x + size.width, label.frame.origin.y)];
// move to the top left
CGPoint point = CGPointMake(label.frame.origin.x, label.frame.origin.y);
[path addLineToPoint:point];
// now draw the big diagonal line down to the bottom of the text frame (at 15 degrees)
point.y += size.height;
point.x -= sinf(15 * M_PI / 180) * size.height;
[path addLineToPoint:point];
// now draw the medium sized diagonal back up (at 30 degrees)
point.y -= size.height * part2;
point.x -= sinf(30 * M_PI / 180) * size.height * part2;
[path addLineToPoint:point];
// now draw the tiny diagonal back down (again, at 30 degrees)
point.y += size.height * part1;
point.x -= sinf(30 * M_PI / 180) * size.height * part1;
[path addLineToPoint:point];
// now add the whole path to our view
CAShapeLayer *layer = [CAShapeLayer layer];
layer.path = path.CGPath;
layer.lineWidth = 1.0;
layer.strokeColor = [[UIColor blackColor] CGColor];
layer.fillColor = [[UIColor clearColor] CGColor];
[self.view.layer addSublayer:layer];
}
That looks a little better:
Clearly, you can implement this any way you want (using either of the above, or probably better, subclassing a UIView to putting this, or its CoreGraphics equivalent, in drawRect), but it illustrates the idea of drawing the square root symbol yourself.
By the way, if using Xcode version prior 5, you'll have to manually add the QuartzCore.framework to your project and then include the appropriate header:
#import <QuartzCore/QuartzCore.h>