When you display formatted text in a single control like TextArea or TextInput the control handles text alignment automatically.

However if you have formatted text split across several controls it may not align properly until you adjust the baseline position of the formatted text.

Take a look at the two screenshots below. The one on the left shows two UITextField controls with formatted text that have different font sizes. The one on the right shows the same two controls with their baseline positions adjusted.

It’s important to note that adjusting the height of each control is not the same as adjusting the baseline position.

To align the “subtitle” text with the “Title” text like in the screenshot above, you would do something like the following:

subtitle.y += Title.baselinePosition – subtitle.baselinePosition;


If you have more two components with formatted text, simply record the largest baseline position and add the difference to the vertical position of each component.