: 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.

@Alves566

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:


To make text outside the circle, select oval shape and press flip vertically in Inspector view:


Next, slightly move text shape to the rigth so 6 number goes strictly above the oval (I used guide to align the text) and don't forget that text shape width should be in Auto mode:


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.


Adding white triangle and red background is simple.
Final result:


Sketch file

Vote Up Vote Down