Powerapps - Vertical Text in Vertical Gallery

Have you ever tried aligning text vertically ? If not, please read the below trick to accomplish the same.

Have you ever tried aligning text vertically? If not, please read the below trick to accomplish the same.

In general, we have two css properties writing-mode and text-orientation to align text in different modes. However, these css properties are not supported inside power apps html text control.

So, I have used another property called transform with 90 degrees of rotation. This property has been supported in both web and mobile versions of Power App.

This is the sample data I have loaded inside the onStart property of the power app. I have included all the images in the source code for quick reference.

ClearCollect(
    varcountries,
    [
        {
            Title: "Malaysia",
            image: Malaysia_Circle
        },
        {
            Title: "Canada",
            image: Canada_Circle
        },
        {
            Title: "Germany",
            image: Germany_Circle
        },
        {
            Title: "UK",
            image: UK_Circle
        },
        {
            Title: "US",
            image: US_Circle
        },
        {
            Title: "India",
            image: India_Circle
        },
    ]
);

Data binding

I have added a vertical gallery and bound with the above collection as a data source. Added an HTML text control and added below HTML text to accomplish vertical text alignment.

ThisItem.Title is a dynamic variable inside HTML text control to fetch the title property of the current item.

"<div
style='
Height:140px;
width:160px;
text-align:center;
transform: rotate(-90deg);'
>
"&ThisItem.Title&"
</div>"

Extra aesthetics

Circle with visible property based on current item selection

Visible: If(ThisItem.IsSelected,true,false)

The circular shadow around the image

"<div style='
Height:320px;
Width:320px;
border-radius:50%;
background: #0d1539;
box-shadow: 5px 5px 15px #050817;
'>
<div>
</div>"

Source code