Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Clockface Development: Rotating text?

Hi guys, totally new to most coding things in general outside of some basic website coding. I swear, I feel like this is a super stupid question but I can't for the life of me find the answer. I have googled and I have searched a few different things here in the community to try and find the answer. Please, be gentle with me? I feel like this should be super easy and I'm missing something really dumb! 

 

How can I rotate my text for my watch face. I have included a screenshot of what I mean and listed a few resources that I found below that aren't working 😞 

 

Nope? https://davidwalsh.name/css-vertical-text?fbclid=IwAR3kgZl6ULQU8RszuKVo0UzAL7lLdV0b6WNTbkHuKrVK7CQn3...

 

Nope? https://css-tricks.com/snippets/css/text-rotation/

(It seems like something about this code would turn text but I have no idea what it's doing. And it's going to make it turn when clicked? I want it to be turned all the time.)

 

 

Best Answer
2 REPLIES 2

Try this one: ROTATE, we don't support CSS transforms unfortunately.

Best Answer
0 Votes

Hi,

could you please show me the other code?(Not the CSS).

 

I guess that you should put the label inside a <g>, and rotate the <g>. This is because you can not transform the label, but you can transform the <g>.

 

Example:

<g id="dataWrapper">
    <g transform="rotate(-45)">
        <text id="lblSteps" class="lblSteps">0</text>
    </g>
</g>

Best Answer
0 Votes