Context: https://github.com/timjs/elm-collage/issues/36 Summary: I’m using elm-collage to display some text. This package used to make a native synchronous call to measure the text size . Of course, that isn’t possible anymore. So, they’ve “reverted to a very simplistic calculation using the font si…

[image] hossameldeen: As a package user (not author), how would you go around this issue? Do you have any solution in mind? For computing the text width, there is this package from @folkertdev : [image] Experiences using elm/bytes for decoding font files Over the past weeks I’ve been writi…

Yes. The package a work in progress, but should make this possible. A problem if you want it to be synchronous is that currently, I still need to load the font file to parse it and extract the size of each character. The idea is to have some web-app somewhere that you can give a font and it will sp…

[image] folkertdev: A problem if you want it to be synchronous is that currently, I still need to load the font file to parse it and extract the size of each character. Good point, I did not give this much thought before. If the font file is only loaded at runtime, the overall process would s…

I ended up using ports for this. I have the advantage of using only static strings that can be measured once (although the app also scales). I also use CSS animation to hide the initial state where things are not yet correctly aligned. Not a real solution, but thought what others are doing might be…

@folkertdev Thank you, will keep an eye on the package to see how the experience would turn out! @wondible That’s a good idea! Actually, my use-case is indeed static! Does your code happen to be open-source in order for me to not reinvent the wheel? (P.S: Thank you Viir for pointing out to elm-cf…

[image] hossameldeen: @wondible That’s a good idea! Actually, my use-case is indeed static! [image] GitHub - JustinLove/schedule-from-videos: Builds a historical Twitch... Builds a historical Twitch streaming schedule by looking at recent video times and durations. - GitHub - Just…

If your use-case is static, maybe you can just store the widths of the characters in a mapping function and do something like a string |> toCharlist |> List.map charLength |> List.sum?

@wondible Thank you; that’s beyond awesome! … I’m also thinking about precomputing in Javascript the widths of all the strings used in my application and then giving everything in as flags , in order to not have any asynchronous code in Elm. However, haven’t actually tried it, so don’t know if that …

In case you are interested, I have a ports solution for this: https://package.elm-lang.org/packages/the-sett/svg-text-fonts/latest/

How to go around measuring text synchronously?

Learn

Viir January 6, 2019, 9:31am 2

For computing the text width, there is this package from @folkertdev:

Topic		Replies	Views
Pure Elm rich text editor Show and Tell	37	5176	April 23, 2021
Responsive Text Size in Elm-UI Learn	5	4010	December 18, 2018
Getting an element's scrollWidth Learn	3	972	March 5, 2023
What is currently impossible to build with Elm? Learn	18	3807	May 19, 2020
HTML onLoad not available natively? Learn	12	3916	May 6, 2019

How to go around measuring text synchronously?

Related topics