Origin/anchor point for scaling
Is it possible to change the point towards where something scales?
Ive set my font to 1vw (which might be stupid), and when I make the screen smaller, it seems it scales towards the top left.
This is what it seems to be doing top is currently, bottom is what i'd want: https://i.imgur.com/qw7Espr.png
Here's the example:
https://codepen.io/d0kefish/pen/WNgNKjL
19 Replies
transform-origin???Not that one, Mannix, no:
The transform origin is the point around which a transformation is applied. For example, the transform origin of the rotate() function is the center of rotation.
āhttps://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
They're not doing any transformations, just wonky (and IMO bad) font sizing.Its probably oblivious but I'm super new to this, but does that mean I should find some other way to handle my text?
Also, are there limits to whats resonable to fail/not fail.
Font size should always, always always include
rem in it somewhere someway somehow, or else you're completely ignoring the user's visual accessibility issues
My suggested starting point for "fluid type" is this:
The clamp() function says "be the middle number, but no smaller than the first and no larger than the third".
https://developer.mozilla.org/en-US/docs/Web/CSS/clamp
It does nothing about the "anchor point" of the text, however. But it will respect the user's chosen font sizeDoes this work with other things aswell? IE could i clamp the way it scales down?
Clamp takes care of the scaling: the first number is the minimum it will ever be, the third number is the maximum it'll ever be, and the second number is what it aims to be.
Would you say the overall solution to this is valid, or is it stupid?
Like, should i redo it.
If I'm reading your question correctly,
clamp() isn't the solution since you're trying to change the anchor point of the text. clamp() will only solve your font size issues.
That being said, I'm not sure there is a CSS property to change where the text starts from.
So in a way it might as long as the screen size isn't shrinking too far
š¤·I'm honestly not sure what it would even look like in this case. The timeline is at the top, if you scale down and it's anchored to the bottom left corner, that would make a gap appear at the top?
maybe I'm misunderstanding what you want though
You're right, id still get the same issue it seems
I was hoping there would be an option for like center left.
what is the issue then?
Well I guess it wasnt a valid way to fix it.
ok, but if you describe the issue, maybe someone else will know how to fix it?
Im looking for a way to make my text scale along or as far along as possible with the rest of the squares.
One other way would be to have it completely locked and the user would have to scroll left or right instead, but im not sure what is more user friendly.
I'm not sure most users will think to zoom tbh
currently, scaling doesn't really change that much, I think mostly because you're using
vw units
it makes the text position go up and down a bit, that's allIs using vw units ever valid?
Ie if I want to be using REM, when or why would i use VW?
Honestly not sure what I did, but seems to work alot better now: https://codepen.io/d0kefish/pen/WNgNKjL
the position is more stable, but zooming doesn't really change anything either
zoom is an accessibility feature, so if anyone needs to use zoom on your site, they won't be able to
vw is a complicated one to use well, I generally just steer clear because I'm not really that much of a CSS expertIll keep at this for now, I guess ill notices more issues when its on an acutal page. Thanks guys