How do you make a vertical text UILabel and UITextView for iOS in Swift?

Question

If you came to this question based on the title but are not interested in Mongolian, you might be looking for this Q&A instead:

• Swift: How can you rotate text for UIButton and UILabel?

---

I've been learning Swift in order to develop iOS apps for traditional Mongolian. The problem is that traditional Mongolian is written vertically from top to bottom and from left to right. My question is how do I display text vertically and still have line wrapping work?

If you stay with me for a minute, I'll try to explain the problem more clearly. Below is an image of the kind of text view I would like to achieve. In case the foreign script throws you off, I have included English text that follows the same pattern. In fact, if the app has any English text to display, this is how it should look.

For a simple one-line UILabel, a 90 degree clockwise rotation would work. However, for a multi-line UITextView I need to deal with line wrapping. If I just do a plain 90 degree rotation, the first thing written will end up being on the last line.

So far I have made a plan that I think can overcome this problem:

1. Make a custom font in which all of the letters are mirrored vertically.
2. Rotate the text view 90 degrees clockwise.
3. Mirror the text view horizontally.

That should take care of the text wrap.

I can do the mirrored font. However, I don't know how to do the Swift coding for the rotation and mirroring of the UITextView. I've found the following links that seem to give hints to parts of the solution, but they are all in Objective C and not in Swift.

• How to rotate sub-views around their own centres?
• Rotate UIView around its center keeping its size
• iOS: Mirror content on screen
• Mirroring UIView

There are traditional Mongolian apps in the app store (like this and this) but I haven't found anyone yet who is sharing their source code, so I don't know what they are doing behind the scenes to display the text. I plan to make my code open source so that it is not so hard for others in the future to develop apps for the several million people who read traditional Mongolian. Any assistance you can give to this endeavor would be much appreciated, not just by me but also by the Mongolian people. Even if you don't know yourself, upvoting this question to make it more visible would help.

Update

@sangonz's answer is still a great answer, but I temporarily unmarked it as the accepted answer because I just couldn't get everything to work. Specifically:

• Enabling scrolling (either by embeding the custom view in a scrollview or by subclassing UIScrollView). In the github project, @sangonz said this should be easy, but it wasn't for me.
• Getting a relayout (rather than stretching) of the word lines on an orientation change. I think this shouldn't be too hard to solve with a little more research.
• Why don't the text lines go all the way to the edge of the view? There is a big gap at the bottom.
• How to unlink the NSTextStorage of the custom vertical view from the other UITextView. (see this question)

Up to this point I have been using the original method I proposed above, but what I really want is to get something like what @sangonz proposed working.

I am also now considering alternate methods like

• Using Core Text, Disadvantage: it feels like reinventing the wheel
• Using WebKit, Disadvantage: Apple no longer uses WebKit for their UITextView

Answer 1

Edit: This is how I finally did it.

Here's a very basic implementation in my GitHub: Vertical-Text-iOS.

Nothing fancy, but it works. Finally I had to mix TextKit and image processing. Take a look at the code. It involves:

1. Subclassing NSTextContainer to get the right text dimensions.
2. Creating a custom UIView to render the text applying affine transformations to each line and rendering using NSLayoutManager to keep all TextKit features.

---

TextKit way

The proper way to keep all native text benefits (e.g. highlighting, selection...) is to use standard TextKit APIs. The method you are proposing would break all that or would possibly result in strange behaviour.

However, looks like TextKit in iOS does not support vertical orientation out-of-the-box yet, but it is prepared for that. As a side note, in OS X it is somewhat supported and you could call textView.setLayoutOrientation(.Vertical), but it still has some limitations.

The NSTextLayoutOrientationProvider protocol defines an interface providing the default orientation for text laid out in a conforming object, in absence of an explicit NSVerticalGlyphFormAttributeName attribute. The only UIKit class that implements this interface is NSTextContainer, whose default implementation returns NSTextLayoutOrientationHorizontal. An NSTextContainer subclass that handles vertical text could set this property to NSTextLayoutOrientationVertical to support the custom layout orientation logic.

Source: UIKit > NSTextLayoutOrientationProvider Protocol Reference for iOS

In conclusion, you should start subclassing NSTextContainer, and you will have to deal with NSLayoutManager and NSTextContainer a lot.

---

Custom image processing way

If, on the other hand you decide to follow your custom text rendering I suggest the following approach.

1. Render the normal text to a hidden layer with a normal font. Give it the correct size to its bounding box.
2. Get the text properties, mainly text height and line spacing.
3. Process the image drawing each line in reverse order from bottom to top as you can see in the image below. You should get a new CGImage as a result.
4. Rotate the image creating a UIImage and setting the correct UIImageOrientation value.
5. Insert that image into a UIScrollView that only allows horizontal scrolling.

Beware this method renders the whole text, so don't use it for very long texts. If you need to do that, you will need to consider a tiling approach. Watch WWDC 2013 > 217 - Exploring Scroll Views on iOS 7.

Good luck!

Update: (image from github project)

Answer 2

If you're going to rotate the text I would suggest using a right-to-left layout so that you can skip the mirroring step (and just rotate the other way).

You should be able to just set the label/textview's transform property:

view.transform = CGAffineTransformTranslate(CGAffineTransformMakeRotation(CGFloat(-M_PI_2)), view.bounds.width, view.bounds.height)

You need to translate after you rotate because the view rotates around its origin (in the upper left).

The good news is that gestures and taps are transformed at the same time the pixels are, so controls continue to work the way you expect them to.