9

Sketch Users: How do you align text vertically?

4 years ago from , http://meet-cristian.com

I am working on a personal project and I figured I'd give it a shot in Sketch. One thing I can't figure out is how to align text on the vertical axis. Sketch gets it to snap to the edge of the text box, which for almost all fonts is not where the text starts.

Image alt

Any suggestions would be appreciated.

16 comments

  • Goran Peuc, 4 years ago (edited 4 years ago )

    Yes but the edge of the text box is where browser believes this text to start if you developed it like that and put it in a browser. It does not matter that you optically can see this misalignment. That is how HTML/CSS works. Sketch is not a graphic design tool. It is a step in process of creating websites (and other digital apps).

    So if there is a 30 pixel padding on the left of John K, and 30 pixel padding on the left of UI Designer, browsers will render those fonts (because they are of different sizes) a little bit off vertical alignment.

    7 points
    • Petter SilfverPetter Silfver, 4 years ago

      For this the hold true, they should then change the default way line-height is rendered. But then again, that would probably be unbearable.

      1 point
    • Maciej JurczakMaciej Jurczak, 4 years ago

      I think that is better to render font this way, because in production is much more less problem with implementing labels, as it's in design.

      0 points
      • Petter SilfverPetter Silfver, 4 years ago (edited 4 years ago )

        The original question here probably regards expecting a similar behaviour of an application like Photoshop, where the layer would align according to the bitmap information. However, this isn't optimal because the alignment is dependent on what characters are used in a text layer (e.g. "amy" would not align similar to "elk" because of the difference in ascender height).

        But stating "Yes but the edge of the text box is where browser believes this text to start" isn't true simply because Sketch renders leading the same way Photoshop does (i.e. increasing the distance from the baseline upwards, instead of up and downwards from the centreline like in CSS's half-leading). Placing a text in an element, similar to "John K. Fitzgerald" wouldn't look like it does in Sketch, if the line height is increased.

        0 points
    • Weston Thayer, 4 years ago

      HTML and CSS are actually outliers for not supporting text bounding features. iOS, Android, and Windows' frameworks all support positioning text by cap height / baseline, which is what's needed in this situation.

      2 points
    • Rory Smyth, 4 years ago

      Great for browser development. But this is not how Android renders it's text. Which is especially annoying when you want to rely on tools like Zeplin for spacing.

      1 point
  • Vikalp Gupta, 4 years ago

    One thing you can do is when you finalise the text, put them in different text boxes and convert it to outline.

    Hope, this helps. We can discuss if I have misunderstood anything. Alt image

    1 point
    • Cristian Moisei, 4 years ago

      That's hardly a solution.

      3 points
      • Drew ShimomuraDrew Shimomura, 4 years ago

        It's worth being a little more charitable to the commenter, Cristian. They put effort into responding, and their suggestion actually does solve your problem as stated in certain situations. If you explained why you don't see it as a solution, it would help others better understand your problem.

        4 points
        • Cristian Moisei, 4 years ago

          I assumed it was obvious - because it irrevocably restricts further edits, seriously who converts their text to shapes?

          1 point
          • Beth RBeth R, 4 years ago

            Pretty much everyone who had every created a wordmark before.

            0 points
    • Greg ChristianGreg Christian, 4 years ago

      downvote

      0 points
  • Weston Thayer, 4 years ago

    Ahh yes, this problem has been haunting me for a while. There's actually a simple formula for vertically centering text (at least for Latin scripts), but it requires changing the text's bounding box from what you showed to this:

    Illustrator's Area Type lets you do this. Essentially it spans from the cap height font metric to the baseline metric.

    If you can get Sketch to do that, vertically centering will just work. The detailed formula is textMarginTop = floor((layoutHeight - textAreaHeight) / 2).

    Font Metrics are quite powerful once you get access to them. It's a shame that there isn't any CSS support, but they're working on it. I wrote a bit about some other cool font metrics tricks on my blog a while back. IMO, all our UI tools and technologies could benefit from these features.

    0 points
    • Cristian Moisei, 4 years ago

      It shouldn't be this complicated but it's a solution. I'll give it a shot.

      0 points
      • Weston Thayer, 4 years ago (edited 4 years ago )

        Agreed. If I was a Sketch user, I'd look into making a plugin for you, but alas, no Mac to test it on.

        Edit: I can't test it out, but the text on path feature looks like it gives you access to the baseline. Maybe there's a creative solution there...

        1 point
  • Lisa Lessenger, 2 years ago

    Anima plugin has this now if any one is still struggling. Expand pin tab and the bottom of the toolbar has horizontal and vertical alignment pins.

    0 points