vertically align text in a CATextLayer? vertically align text in a CATextLayer? ios ios

vertically align text in a CATextLayer?

The correct answer, as you've already found, is here in Objective-C and works for iOS. It works by subclassing the CATextLayer and overriding the drawInContext function.

However, I've made some improvements to the code, as shown below, using David Hoerl's code as a basis. The changes come solely in recalculating the vertical position of the text represented by the yDiff. I've tested it with my own code.

Here is the code for Swift users:

class LCTextLayer : CATextLayer {    // REF:    // CREDIT: David Hoerl -     // USAGE: To fix the vertical alignment issue that currently exists within the CATextLayer class. Change made to the yDiff calculation.    override func draw(in context: CGContext) {        let height = self.bounds.size.height        let fontSize = self.fontSize        let yDiff = (height-fontSize)/2 - fontSize/10        context.saveGState()        context.translateBy(x: 0, y: yDiff) // Use -yDiff when in non-flipped coordinates (like macOS's default)        super.draw(in: context)        context.restoreGState()    }}

It is an late answer, but I have the same question these days, and have solved the problem with following investigation.

Vertical align depends on the text you need to draw, and the font you are using, so there is no one way solution to make it vertical for all cases.

But we can still calculate the vertical mid point for different cases.

According to apple's About Text Handling in iOS, we need to know how the text is drawn.

For example, I am trying to make vertical align for weekdays strings: Sun, Mon, Tue, ....

For this case, the height of the text depends on cap Height, and there is no descent for these characters. So if we need to make these text align to the middle, we can calculate the offset of the top of cap character, e.g. The position of the top of character "S".

According to the the figure below:


The top space for the capital character "S" would be

font.ascender - font.capHeight

And the bottom space for the capital character "S" would be

font.descender + font.leading

So we need to move "S" a little bit off the top by:

y = (font.ascender - font.capHeight + font.descender + font.leading + font.capHeight) / 2

That equals to:

y = (font.ascender + font.descender + font.leading) / 2

Then I can make the text vertical align middle.


  1. If your text does not include any character exceed the baseline, e.g. "p", "j", "g", and no character over the top of cap height, e.g. "f". The you can use the formula above to make the text align vertical.

    y = (font.ascender + font.descender + font.leading) / 2
  2. If your text include character below the baseline, e.g. "p", "j", and no character exceed the top of cap height, e.g. "f". Then the vertical formula would be:

    y = (font.ascender + font.descender) / 2
  3. If your text include does not include character drawn below the baseline, e.g. "j", "p", and does include character drawn above the cap height line, e.g. "f". Then y would be:

    y = (font.descender + font.leading) / 2
  4. If all characters would be occurred in your text, then y equals to:

    y = font.leading / 2

Maybe to late for answer, but you can calculate size of text and then set position of textLayer. Also you need to put textLayer textAligment mode to "center"

CGRect labelRect = [text boundingRectWithSize:view.bounds.size options:NSStringDrawingUsesLineFragmentOrigin attributes:@{ NSFontAttributeName : [UIFont fontWithName:@"HelveticaNeue" size:17.0] } context:nil];CATextLayer *textLayer = [CATextLayer layer];[textLayer setString:text];[textLayer setForegroundColor:[UIColor redColor].CGColor];[textLayer setFrame:labelRect];[textLayer setFont:CFBridgingRetain([UIFont fontWithName:@"HelveticaNeue" size:17.0].fontName)];[textLayer setAlignmentMode:kCAAlignmentCenter];[textLayer setFontSize:17.0];textLayer.masksToBounds = YES;textLayer.position = CGPointMake(CGRectGetMidX(view.bounds), CGRectGetMidY(view.bounds));[view.layer addSublayer:textLayer];