New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplistic size measurement of text causes overflow #36

Open
hossameldeen opened this Issue Jan 4, 2019 · 6 comments

Comments

Projects
None yet
3 participants
@hossameldeen
Copy link

hossameldeen commented Jan 4, 2019

Screenshot

image

Code

view : () -> Html Never
view _ =
    Collage.Text.fromString "hamada"
      |> Collage.rendered
      |> Collage.Render.svg
<body>
  <script>
    var app = Elm.Main.init({ node: document.querySelector('body') })
  </script>
</body>

Ellie

https://ellie-app.com/4mB5pLNhSJPa1

Description

Using the simplest way to render a string, sometimes some part of the beginning and end of it disappears. When using a string like foobarbaz, its rendered correctly. But when using, e.g., m, it is not.

Didn't go over all the characters that work and don't work correctly.

If you need any more details, please tell me.

@danfishgold

This comment has been minimized.

Copy link
Contributor

danfishgold commented Jan 4, 2019

I’m pretty sure this is due to the fact that width of text elements isn’t accurate: calculating the real width of the string requires a synchronous call to JavaScript (using Native code, which is forbidden in Elm 0.19), so instead the package gives an estimate based on the font size.

Since m is a relatively wide character the estimation is off.

The package determines the size of the svg based on the size of the elements within, so the width is a little too small.

One possible solution would be to use a monospace font.

Another would be to use Collage.Render.svgBox with manual width and height.

I’m guessing this is a known issue, but I don’t think there’s a way to fix it 😕

@hossameldeen

This comment has been minimized.

Copy link

hossameldeen commented Jan 5, 2019

No problem. Thank you for your reply.

If I'd use Collage.Render.svgBox with manual width and height, how would I determine the width and height?

@timjs

This comment has been minimized.

Copy link
Owner

timjs commented Jan 5, 2019

Yes, @danfishgold is completely right. In Elm 0.18, the library used a native call to the HTML canvas to measure the width of some text. In Elm 0.19 this is not allowed any more and I reverted to a very simplistic calculation using the font size and the string length. I'm open to any suggestions to make this work again.

Ideally, we would use some font library that measures text. Obviously, we can't make bindings to an existing JavaScript one any more, due to the restrictions in Elm 0.19.

Regrettably, I don't think ports are the way to go. If my understanding is correct, this would require every developer using this library to wire up to a port themselves. I think requiring every developer to do this is bad library design.

@timjs timjs changed the title Text overflow when using character 'm' Simplistic size measurement of text causes overflow Jan 5, 2019

@hossameldeen

This comment has been minimized.

Copy link

hossameldeen commented Jan 6, 2019

@timjs Thank you for your comprehensive reply.

For me, I wouldn't mind wiring ports, but my problem with ports is asynchronicity. I've tried to think of a design that would allow the user to just wire some ports but couldn't. Do you have one in mind?

@hossameldeen

This comment has been minimized.

Copy link

hossameldeen commented Jan 6, 2019

Note: I've made a post on Elm Discourse in case anyone there has a work-around in mind.

@timjs

This comment has been minimized.

Copy link
Owner

timjs commented Jan 6, 2019

@timjs Thank you for your comprehensive reply.

You're welcome.

For me, I wouldn't mind wiring ports, but my problem with ports is asynchronicity. I've tried to think of a design that would allow the user to just wire some ports but couldn't. Do you have one in mind?

Nope, when using ports it will always be async I guess.

Note: I've made a post on Elm Discourse in case anyone there has a work-around in mind.

Wonderful! Keep me posted if any solution comes up. I see decoding font files could be an option, but it is also async.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment