turn text upside down when using text on path on Sketch 3
I am currently creating a dial in Sketch 3:
I have used Sketch 3's text on path feature to fit the text onto the circular dial. However, the text's orientation is actually upside down from what I want it to beâ€”I would like the number on the bottom of the dial to appear upside down and the numbers at the top, next to the white triangle selector to be right side up.
How would I go about doing this?
Edit: I have so far tried to rotate the text by 180Â° to make it upside down, but when I put the text on the path it doesn't matter. I have also tried putting the text on the inside grey path and using
Layer > Paths > Reverse Order to get the text to go around the outside of the path, however this doesn't seem to work because the text looks to connected to the grey path, and I would like it to appear more elevated.
So, as I understand you want to come up with this shape:
- Create text with numbers, I used 30 font size with 4 spaces between numbers. 4 spaces I think for such font size is comfort space to look ok on oval.
5 4 3 2 1 10 9 8 7 6
Notice that number 6 is placed in the end of the row. It is because we want to place 6 strictly above the oval.
Make sure Width property is in Auto mode.
Text shape width plus additional one space between numbers is a circuit length for oval.
In my case text shape width is 470 px, space between numbers is 146 - 111 = 35 px.
The length of the oval should be 470 + 35 = 505 px, to calculate the diameter (width) of the oval lets use this formula pi(3.14) * D(diameter) = length of the oval.
So D(diameter) = 505 / 3.14 = 160.8 px.
Also make sure border position property of the oval is set to Inside.
Create Oval with the calculated width and equal height (160.8 px).
Place it under text in layers menu. Select text shape go to menu Type > Text on path.
Now slowly move text shape above oval you will se that text inserted inside the circle:
Now it's time to add small space between bottom border of the numbers and inner oval.
I created copy of the oval named it Inner oval decrease size of it by dragging one of the corners and pressing Shift + Alt so it will stay on place.
Additinally I created black oval with no fill and black thick border, named in Black oval.
Hide the first oval by pressing eye in front of it on the layers menu.