style-elements icon indicating copy to clipboard operation
style-elements copied to clipboard

Published 20 hours ago • verified publisher icon mdgriffith

text is cutting lower parts of letters

Open wizza-smile opened this issue 7 years ago • 4 comments

Hi!

When using the text Element, the rendered text is using a HTML with display: block; and overflow: hidden;

This is cutting the lower parts of letters like 'g'. You can see this best on big h1 texts.

I found out that there is a Modify.makeInline function in the Internals, that would render the text properly, but since it is Internal, that does not seem to be the correct way.

Am I the only one with this problem?

Versions

  • Elm: 0.18
  • style-elements: 4.0.0

wizza-smile avatar Sep 25 '17 10:09 wizza-smile

Yeah, this should be fixed in 4.1 once I release it. The manual fix is to bump up the Font.lineHeight to something like 1.2. The default is 1.0 which apparently isn't big enough to show the entire font. who knew? :/

mdgriffith avatar Sep 25 '17 11:09 mdgriffith

haha1 thanx 👍

wizza-smile avatar Sep 25 '17 12:09 wizza-smile

Quick note on this -- text that is also wide (for example, italics) gets cut off too, even with the lineHeight fix: https://ellie-app.com/7qxCJtPdYa1/6

Is the overflow: hidden piece strictly necessary?

bengolds avatar Oct 16 '17 23:10 bengolds

Still having this problem with 4.2.1 In my case, the bottom of a "g" character is cropped because line-height: 1.2 is not enough , maybe we should use line-height: normal ?

ghpu avatar Nov 18 '17 09:11 ghpu