Present text or label vertically (90 deg)

#1

I am trying to present text or a label vertically (not vertical text alignment) but to display the entire text vertically or rotate it 90 degrees. Imagine a credit card or a membership card, full screen vertical. And you need to present the name of the person vertically on a specific location of the card.

I’ve been playing around with the “rotate” property of the label, but the behaviour is so unpredictable and weird. It truly feels like a hack rather than a built in feature.

When using rotate=“90” for example. The label still behaves like it is not rotated, so the text is wrapped based on the width of the screen, and does not allow to be longer (wider). It’s annoying since I need it to be as wide as the height of the screen :slight_smile:

I used padding or margin to position the label. And once I was satisfied, it all broke apart since the label moved around the view basen on how much content there was in the label. This is no good since the value is dynamic (a persons full name) so I cannot predict how much content there will be.

So I am asking if there are any better ways to do this? Feel like the built in rotate property is more for images rather than text or layout? Altho I have seen images being cropped as well after rotation…

#2

Try disabling text wrap, set explicit width and play with translateY instead of margin.

Or if you think image works better, you can create image from your text and play with rotate. In order to generate image from your text, you may use this plugin.

21%20PM
WhatsApp Image 2018-07-23 at 12.09.21 PM.jpeg720×1280 27.4 KB

#3

Thanks for the translate() tip, worked much better than margin/padding :+1:

I am still having issues with the width. It does not allow me to set it wider than the view width. It just stays the same no matter what, and cuts the text with “…”.

#4

You will have to set the width explicitly, more like a square.

#5

Yeah I tried that, set the with to be equal to the height of the view, no dice. It doesn’t allow the label to be wider than the view itself… I am testing on iOS.

#6

I did a quick test already and it worked for me. If you setup a playground, I can take a look.