6

line-height issue (Sketch & InVision Inspect)

over 6 years ago from , UI/UX

I'm testing out the InVision Inspect tool with our in-house development team. I'm running into issues with Sketch where the text bounding box doesn't sit directly above and below the sentence or word. When using Inspect this will give the incorrect spacing between two objects. Inspect will say the distance between the two object is on 40px when in reality it is ~60px.

Whether you use Inspect or a Sketch spec plugin, how do you deal with this issue?

7 comments

  • Saxon Fletcher, over 6 years ago

    Hi James! I came across this thread and wanted to get in touch. I work on the Inspect team at InVision :)

    The added spacing ~10px above and below the text field should represent the specified line height which is consistent with how it would be rendered in browser (CSS/HTML). Let me know if this isn't the case as I'd like to look into it further.

    How are you liking it so far? Any other feedback or ideas?

    1 point
    • James McGill, over 6 years ago

      Hi Saxon! I appreciate you reaching you out.

      I think the issue lies within sketch. The extra spacing/inconsistencies with the line-height and where the bounding box sits around the type exists within my sketch file. Sometimes the bounding box will line up with the ascenders and descenders. Sometimes it will sit 10px above the ascenders and 20px from the descenders. From what I'm seeing Inspect is measuring from where the bounding box is so I believe this issue needs to be fixed with Sketch first.

      Inspect looks really promising though! I love it so far and hopefully the developers will too.

      0 points
      • Saxon Fletcher, over 6 years ago

        Hey James, that is interesting indeed. You are correct in that we take measurements from the Sketch file. I'd be interested to see if this is a bug Sketch have picked up on, I personally haven't come across it.

        Thanks for the nice comments. Glad you are liking it :)

        0 points
  • Jonathan ShariatJonathan Shariat, over 6 years ago

    I've also noticed text gets jostled when you directly import a sketch file. I wonder if its related.

    1 point
  • Michal Kopanski, over 6 years ago

    Not sure if it applies here, but when I was having issues with text rendering (specifically text wrapping and line-height), the InVision support asked me to upload my fonts to the prototype assets, which fixed the issue.

    Hope that helps!

    0 points