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
Imgur
Felix
CodePen
WNgNKjL
...
19 Replies
Mannix
Mannixā€¢2y ago
transform-origin???
13eck
13eckā€¢2y ago
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.
d0kefish
d0kefishā€¢2y ago
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.
13eck
13eckā€¢2y ago
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:
::root {
--1rem: clamp(1rem, 0.875 + 0.5vmin, 2rem);
/* add some common font sizes you need/will use here, like 0.5rem, 1.25rem, 1.5rem, etc */
}

body {
font-size: var(--1rem);
}
::root {
--1rem: clamp(1rem, 0.875 + 0.5vmin, 2rem);
/* add some common font sizes you need/will use here, like 0.5rem, 1.25rem, 1.5rem, etc */
}

body {
font-size: var(--1rem);
}
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 size
d0kefish
d0kefishā€¢2y ago
Does this work with other things aswell? IE could i clamp the way it scales down?
13eck
13eckā€¢2y ago
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.
d0kefish
d0kefishā€¢2y ago
Would you say the overall solution to this is valid, or is it stupid? Like, should i redo it.
13eck
13eckā€¢2y ago
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 šŸ¤·
Jochem
Jochemā€¢2y ago
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
d0kefish
d0kefishā€¢2y ago
You're right, id still get the same issue it seems I was hoping there would be an option for like center left.
Jochem
Jochemā€¢2y ago
what is the issue then?
d0kefish
d0kefishā€¢2y ago
Well I guess it wasnt a valid way to fix it.
Jochem
Jochemā€¢2y ago
ok, but if you describe the issue, maybe someone else will know how to fix it?
d0kefish
d0kefishā€¢2y ago
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.
Jochem
Jochemā€¢2y ago
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 all
d0kefish
d0kefishā€¢2y ago
Is using vw units ever valid? Ie if I want to be using REM, when or why would i use VW?
d0kefish
d0kefishā€¢2y ago
Honestly not sure what I did, but seems to work alot better now: https://codepen.io/d0kefish/pen/WNgNKjL
Felix
CodePen
WNgNKjL
...
Jochem
Jochemā€¢2y ago
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 expert
d0kefish
d0kefishā€¢2y ago
Ill keep at this for now, I guess ill notices more issues when its on an acutal page. Thanks guys
Want results from more Discord servers?
Add your server