Text sizing to container

Yet another question which feels basic, but hey, here we go ... Is there a way to make the size of each p fit the container content, so I don't have to go in and set every single font size? I've been looking around, but it seems hard to do. Looked into variable fonts but that doesn't really work here. There is no grid on this yet, but after a discussion the other day, could that be a solution since grid tend to have strong willed parents, making sure the children do what they say? Especially gauling is the last p with the artist name, Beck, in it. That's not stretching at all like it should, and I'm just magic numbering without luck at the moment. What makes it more challenging is that I obviously want the fonts to resize fluidly when I resize the screen. Going through every single p and finding the Utopia (https://utopia.fyi/) calc for each one feels like unnecessary work. There must be a simpler solution. The design I'm going for: https://github.com/AMarlonG/Quote-by-the-artist-Beck/blob/main/assets/Beck-quote.jpg Repo: https://github.com/AMarlonG/Quote-by-the-artist-Beck
Utopia
Utopia
Fluid responsive design
GitHub
Quote-by-the-artist-Beck/Beck-quote.jpg at main ยท AMarlonG/Quote-by...
A vertical experiment on intrinsic responsiveness and fluidity. - Quote-by-the-artist-Beck/Beck-quote.jpg at main ยท AMarlonG/Quote-by-the-artist-Beck
GitHub
GitHub - AMarlonG/Quote-by-the-artist-Beck: A vertical experiment o...
A vertical experiment on intrinsic responsiveness and fluidity. - GitHub - AMarlonG/Quote-by-the-artist-Beck: A vertical experiment on intrinsic responsiveness and fluidity.
23 Replies
Wolle
Wolleโ€ข2y ago
I would use JS to read the container width, then the width of each row, calculate the multiplier to make it stretch 100% and then apply that as em. You would have to split the text before and put each row in its own element though. example: container: 300px, row-1: 100px -> #row-1 { font-size: 3em; }
ร… Marlon G
ร… Marlon Gโ€ข2y ago
Oh, haha ... so I forgot to ask if there is a CSS only solution to this ... sorry!
Wolle
Wolleโ€ข2y ago
You mean like font-size: calc(container-width / own-width * 1em);? As far as I know you got % that is either the width of the parent (top, left,etc.) or of the element itself (transform, etc). You could get the other via JS and set a custom property.
.row {
font-size: calc(var(--container-width) / 100% * 1em);
}
.row {
font-size: calc(var(--container-width) / 100% * 1em);
}
That may work. Or if your container has a set width, you can set it in CSS.
.beck-container {
--conainter-width: *px/rem/em/ch/vw (not %);
width: var(--container-width);
}
.beck-container {
--conainter-width: *px/rem/em/ch/vw (not %);
width: var(--container-width);
}
(after that you could write an algorithm, that cuts the text into smaller pieces, so you just have to supply the text itself ๐Ÿ˜… )
ร… Marlon G
ร… Marlon Gโ€ข2y ago
Yes! I was thinking sbout this, but was unsure if font-size did calc ... I'm not a maths guy, but this does make sense. It will take me a year, but here I go. Ok. Cool! Thanks! ๐Ÿ™Œ
Wolle
Wolleโ€ข2y ago
Let me know if it works ^.^
ร… Marlon G
ร… Marlon Gโ€ข2y ago
... oh, and if the container width is e.g. max() then it, and the text will be responsive with it, right? In theory ... ๐Ÿ˜„
Wolle
Wolleโ€ข2y ago
I'll give that a definitv "maybe, probably?" ๐Ÿ˜„
ร… Marlon G
ร… Marlon Gโ€ข2y ago
๐Ÿ˜… I'll get back to you. ๐Ÿ˜‰ Hmm ... Something is happening, but not sure what. And the font size is not responding. body { --cont-w: min(12ch, 100% - 2rem) } ... sorry, just ment ot add the repo again: https://github.com/AMarlonG/Quote-by-the-artist-Beck The font size isn't adjusting but the width of the container is responding to the text somehow, because it should be 12ch on large screen, but it's minimizing to what I guess is 1rem ... Relevant code in main.css here: body { background-color: #F9F6EE; --cont-w: min(12ch, 100% - 2rem) } .content { width: var(--cont-w); margin-inline: auto; color: black; text-align: center; font-family: var(--font-f); text-transform: uppercase; /* font-size: 5rem; */ line-height: 0.95; margin-block: 15rem; border: solid purple 2px; } .one { font-size: calc(var(--cont-w) / 100% * 1em); } .text-one { font-size: calc(var(--cont-w) / 100% * 1em); }
Wolle
Wolleโ€ข2y ago
What you put in that custom property gets used where ever you use it and % will then be interpreted depending on the element (afaik). Could you please put it in a codepen/stackblitz or similar?
ร… Marlon G
ร… Marlon Gโ€ข2y ago
I was trained as a dancer, just so you have a grasp of my maths skills. ๐Ÿคฃ
Wolle
Wolleโ€ข2y ago
% in font-size seems to be reference the parent font-size. Seems like you will need js, or maybe a css-wizard has another idea?
ร… Marlon G
ร… Marlon Gโ€ข2y ago
Just so I understand: The % in font-size: calc(var(--cont-w) / 100% * 1em); is looking back at it's parent font-size, which means .text-one is looking at font-size in .one, and that again is looking at the root font-size which is 1rem?
Wolle
Wolleโ€ข2y ago
Jep. So basically 100% = 1em in font-size. I got it working, fine-tuning not included: https://codepen.io/Wolle74/pen/VwBNgEE?editors=0110 Custom properties in CSS get calculated where they are used, so if you use % in a custom property it will have different values depending on the element it is used on. And calc() can have problems with different units.
ร… Marlon G
ร… Marlon Gโ€ข2y ago
So do you mind going on a bit of a mental run with me? If the % is looking at some kind of root font-size, could you set a root font-size that sets the largest font-size in the design - the p where there are three letters (too, art, you, day). Then set the container width to match that size, and then calc the rest of the font-sizes as you first suggested? I am obviously not in any way able to think of how to start coding this, but do youf ollow me? Basically setting a font-size that dictates the container, and then adjusting from there on. Could it e.g. be :root {--font-large: 20rem } Then setting those specific p I mentioned to font-size: var(--font-large), and the rest of the p to font-size: calc(var(--cont-w) / 100% * 1em); Would the container width then also be var(--font-large)? ... in short: instead of fitting the text to the container, fitting the container to the largest p, then adjusting the rest from there on ... Sorry if I'm rpeating myself, I'm thinking as I write ... ๐Ÿง
Wolle
Wolleโ€ข2y ago
If you don't want to set a fixed width on your .content, but let its size be determined by the children, you just need to set --cont-w in JS, too. But besides that, I would guess it will work. Your 100% should be your custom property you set via JS. In my pen its var(--el-w)
ร… Marlon G
ร… Marlon Gโ€ข2y ago
With all the modern css tools this feels like it should be solvable with only css ... dang it. I feel like the two top answer in this stack overflow is also closing in on something ... https://stackoverflow.com/questions/16056591/font-scaling-based-on-size-of-container
Stack Overflow
Font scaling based on size of container
I'm having a hard time getting my head around font scaling. I currently have a website with a body font-size of 100%. 100% of what though? This seems to compute out at 16 pixels. I was under the
Wolle
Wolleโ€ข2y ago
"Just use this you write an algorith to split your text, you could use svg instead of span/div/p and it should scale automatically. (and you would learn a thing or two about svg, which can come in handy)
ร… Marlon G
ร… Marlon Gโ€ข2y ago
That's true, and probably what I will do, but still ... got this unfullfilled feeling inside, hehe! Thank you so much for leaping into the rabbit hole with me. I might not climb out just yet ๐Ÿ˜‰
Wolle
Wolleโ€ข2y ago
Good luck.๐Ÿ™‚
ร… Marlon G
ร… Marlon Gโ€ข2y ago
... hi again @daswolle . Hehe! ๐Ÿซฃ I just wanted to dig into the % issue with regards to font size. I have a questions about this Codepen: 1. Why isn't the text .text-one sizing like the .content is sizing? Specifically why isn't it adjusting to the 100% - 0.5rem in the --width-base calculation?
Wolle
Wolleโ€ข2y ago
.text-one and .content do have the same width. I don't understand, what the problem is you are right now, could you please elaborate?
Want results from more Discord servers?
Add your server