This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Blaine Billingsley
Posted Mar 28 - Read on Facebook

Hey Framesters! One thing that has stumped me is how to generate layouts that are text-based without hardcoding the heights. For example, I have a list of posts that each have varying lengths. How can I get each post to be the proper height for the text?

9 Comments

Anders Haig

Someone more experienced may have a better way but here's an example of a technique you can use in environments like Framer where height isn't inherited: http://share.framerjs.com/gq49g6nol5g9/

The basic concept is that the line height of the text is a given and the number of lines can be derived from the number of characters in the text / the number of characters that fit in a line. This is slightly imperfect given that it's not a fixed width font but I count 40 characters per line.

Anders Haig

So the height of the text is basically # of characters / 40 * 48 (32px font size * 1.5 line height)

Anders Haig

For the card I just added 96px for the height of the title and the extra padding but you could actually count that to make it more accurate.

For the y position of each card, I just stored the last y position outside of the loop overwriting it with each card as it loops (see lines 47, 53, 54)

Lemme know if you want a better explanation.

Koen Bok

I made this utils function a while ago to measure text size before you draw it. It's in every Framer build: https://github.com/koenbok/Framer/blob/master/framer/Utils.coffee#L591

Mike Feldstein

i was never able to make the text size function work. These return the same values:
Utils.textSize("small",{fontSize:"10px"}, {width: Framer.Device.screen.width})
Utils.textSize("big",{fontSize:"500px"}, {width: Framer.Device.screen.width})
they all give a height of 28. It'd be really great to be able to just call .measuredSize() on a layer or something to make sure all the appropriate styles are included

Mike Feldstein

Here's a gross hack that i've used, but i feel like it should work with just the commented out Utils.textSize line, what am I doing wrong?

http://share.framerjs.com/pvui4faucs6y/

Blaine Billingsley

Thanks everybody! Anders Haig I had been doing that in a much less smart way thus far, thanks for example! Very cool. Koen Bok I wasn't away that this Util existed! I will play around with it and see if it works for me. Mike Feldstein a quick look at you example and printed the Utils.textSizel you commented out and it *appears* to be working in that context. Only looked at it for a second though.

Blaine Billingsley

Koen Bok there are a ton of Utils like this that aren't in the documentation. The github link straight into the coffee script is super helpful! Thanks. We should add all of these to the documentation on the site via a konami code :)

Blaine Billingsley

Trying it out I am getting the same problem Mike described, actually.

Read the entire post on Facebook