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-BeckGitHub
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
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; }Oh, haha ... so I forgot to ask if there is a CSS only solution to this ... sorry!
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.
That may work.
Or if your container has a set width, you can set it in CSS.
(after that you could write an algorithm, that cuts the text into smaller pieces, so you just have to supply the text itself 😅 )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! 🙌
Let me know if it works ^.^
... oh, and if the container width is e.g. max() then it, and the text will be responsive with it, right?
In theory ...
😄
I'll give that a definitv "maybe, probably?" 😄
😅
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);
}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?
I was trained as a dancer, just so you have a grasp of my maths skills. 🤣
% 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?
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?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.
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 ... 🧐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)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
"Just use 
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)
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)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 😉
Good luck.🙂
... 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?.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?