JohnCoates / CSSketch

Plugin that adds CSS support to Sketch 3 for a faster design workflow.
MIT License
1.89k stars 97 forks source link

CSS line-height property weirdness #29

Open tsawitzki opened 8 years ago

tsawitzki commented 8 years ago

Hey John,

what an amazing plugin idea first of all! I have one issue though right now, after test running it in my environment:

Setting the font-size in em seems to work fine as far as I can see, I run into problems setting line-height property though (which Sketch itself is a bit nasty with). Steps to reproduce this:

  1. Make a text layer
  2. Set line-height via Sketch GUI to "auto" or leave on default
  3. Give text layer class name (e.g. .copy)
  4. Set the line-height property via css to 135% (a value I often start with in CSS) and save
  5. The text layer will flicker with a change of line height change but jump back to its original line size
  6. Set the line-height in CSS again, this time to e.g 145% and save
  7. The text layer will now change its line-height but way too much
  8. Set the line-height in CSS again, this time to e.g 100%and save
  9. Nothing will happen
  10. Set the line-height in CSS again, this time to 10px and save
  11. You will get some decent line-height but it feels a bit too much
  12. Set the line-height in CSS again, this time to 0px and save
  13. The line-height will increase …

Anyway, it seems like setting the line-height in CSS is not really possible or am I getting something completely wrong, maybe?

It would be great to be able to use line-height at least kind of like in a real browser setting.

Regards Tobias