text is cutting lower parts of letters

mdgriffith / style-elements

Create styles that don't mysteriously break!

http://package.elm-lang.org/packages/mdgriffith/style-elements/latest

BSD 3-Clause "New" or "Revised" License

445 stars 49 forks source link

text is cutting lower parts of letters #88

Open wizza-smile opened 6 years ago

wizza-smile commented 6 years ago

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

mdgriffith commented 6 years ago

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? :/

wizza-smile commented 6 years ago

haha1 thanx 👍

bengolds commented 6 years ago

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?

ghpu commented 6 years ago

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 ?