why font is not full screen ?

i want to make this font responsive and full screen by width how can i do it ? i have code pen attached https://codepen.io/kev00690/pen/zYgpNVV
kev
CodePen
portfolio
...
33 Replies
Chris Bolson
Chris Bolson2mo ago
I'm not 100% sure what you are trying to achieve but I suspect that by using media queries you are overcomplicating this and will never truly be able to achieve a 100% width text. Whilst not generally a good idea, you could base the font-size on the viewport with something like this: font-size: calc(100vw / 20); (note - 20 is a magic number but it worked for your text example) A quick fork of your pen: https://codepen.io/cbolson/pen/eYqVEKq (note - as you have linked to the santa hat as a local file I am not sure how this will be affected by this dynamic text size).
Vic Nash
Vic Nash2mo ago
You're probably looking at something like this: https://kizu.dev/fit-to-width-text/
Fit-to-Width Text
What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! Join me as I continue exploring the experimental implementations of the latest specs.
Chris Bolson
Chris Bolson2mo ago
That is very cool!! Definitely worth a closer look. However it is important to take into account that animation-range currently only has 70% browser coverage which doesn't include Firefox or Safari.
Vic Nash
Vic Nash2mo ago
Here's the newer version with close to 90%: https://kizu.dev/fit-to-width/
Fit-to-Width Text: A New Technique
Registered custom properties are now available in all modern browsers. Using some pre-existing techniques based on them and complex container query length units, I solved a years-long problem of fitting text to the width of a container, hopefully paving the path towards a proper native implementation.
peterpumkineaterr
peterpumkineaterrOP2mo ago
1. you sure it will work ? 2. you sure it's worth the hassle ?
Vic Nash
Vic Nash2mo ago
Alternatively, throw the text into an svg for less hassle.
peterpumkineaterr
peterpumkineaterrOP2mo ago
https://codepen.io/kev00690/pen/zYgpNVV this is the problem i'm facing
kev
CodePen
portfolio
...
Vic Nash
Vic Nash2mo ago
Wrap the lines individually within the component, depending on your design.
peterpumkineaterr
peterpumkineaterrOP2mo ago
what do you mean ?
peterpumkineaterr
peterpumkineaterrOP2mo ago
this is the design
No description
Chris Bolson
Chris Bolson2mo ago
As I understand it you need to do something like this:
<span class="text-fit">
<span><span>404 not found</span></span>
<span aria-hidden="true">404 not found</span>
</span>
<span class="text-fit">
<span><span>portfolio under construction</span></span>
<span aria-hidden="true">portfolio under construction</span>
</span>
<span class="text-fit">
<span><span>404 not found</span></span>
<span aria-hidden="true">404 not found</span>
</span>
<span class="text-fit">
<span><span>portfolio under construction</span></span>
<span aria-hidden="true">portfolio under construction</span>
</span>
So, as Vic says, each line is wrapped within it's own "text-fit" wrapper. I must say that I think that my solution was simpler for you specific needs. Either that or the SVG option that Vic also suggested.
peterpumkineaterr
peterpumkineaterrOP2mo ago
you mean i should directly export text as svg and use here ? i did this before
peterpumkineaterr
peterpumkineaterrOP2mo ago
it goes like this
No description
ἔρως
ἔρως2mo ago
its possible to do the text with svg, and it can be shrunk/stretched to fit the width
Chris Bolson
Chris Bolson2mo ago
That is due to other styling that you have defined. Try commenting out the "display: flex" that you have on the body and you should see that it works.
peterpumkineaterr
peterpumkineaterrOP2mo ago
oh yes but then social icons moves away i tried your method but i think somethin' is wrong
peterpumkineaterr
peterpumkineaterrOP2mo ago
No description
Chris Bolson
Chris Bolson2mo ago
🤔 not sure what "something is wrong" actually means without seeing the code, a working example and knowing how you expect it to work https://codepen.io/cbolson/pen/GRVxmaP - I put flex back on the body but removed the align center. - I then wrapped the text in it's own wrapper and gave that a flex grow of 1 and a flex basis of 100% so that it can stretch to the max amount of space. - Finally I centered the social icons.
I have added some comments where I changed/added things.
Chris Bolson
Chris Bolson2mo ago
You just need to adjust the font-size to fit your design + font-family. In my code I think that I mentioned that "20" was a magic number (ie I arrived at that value by testing various values until I hit the one that worked). For you pen 21 would actually be a better value to try, or even a decimal value (20.2 actually seems pretty spot on but it may depend slightly on the browser).
peterpumkineaterr
peterpumkineaterrOP2mo ago
damnn it's good but you know chris i didn't quite understand that long text-fit code also read that website two times it straight up went over my head i can use your code but it will be difficult for me to diagnose in future
Chris Bolson
Chris Bolson2mo ago
I will admit that I don't fully understand it but then again I haven't tried too hard 😆 I know that it works as shown by the links that Vic shared so I just looked at what you had in your code that was "breaking" it. As I say, I think that my solution (for this specific use case) is simpler to understand and less of a hack. All you need to do is adjust the value of the final "clamp()" function.
peterpumkineaterr
peterpumkineaterrOP2mo ago
i didn't saw clap() function where is it ? also
font-size: max(1rem, calc(100vw / 10.55));
font-size: max(1rem, calc(100vw / 10.55));
this one is working for me
Chris Bolson
Chris Bolson2mo ago
on your h1. You have font-size: max(1rem, calc(100vw / 20));. Try changing that to font-size: max(1rem, calc(100vw / 20.2)); OK, that is good too. It pushes the text on to a third line which is is fine 👍
Chris Bolson
Chris Bolson2mo ago
As SVG has also been mentioned a few times, and just for reference, you could create your SVG text something like this:
<svg viewBox="0 0 150 50" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" font-family="Archivo">
<g font-size="18" font-weight="bold">
<text x="0" y="15">404 NOT FOUND.</text>
</g>
<g font-size="15" font-weight="bold">
<text x="0" y="30">PORTFOLIO UNDER</text>
<text x="0" y="45">CONSTRUCTION.</text>
</g>
</svg>
<svg viewBox="0 0 150 50" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" font-family="Archivo">
<g font-size="18" font-weight="bold">
<text x="0" y="15">404 NOT FOUND.</text>
</g>
<g font-size="15" font-weight="bold">
<text x="0" y="30">PORTFOLIO UNDER</text>
<text x="0" y="45">CONSTRUCTION.</text>
</g>
</svg>
https://codepen.io/cbolson/pen/KKOoqbq (note - I deliberately made the 2nd and 3rd lines of text slightly smaller to help you understand a bit better).
peterpumkineaterr
peterpumkineaterrOP2mo ago
damn it's too easy it's done i used cal() and it's working fine for me i'm not gonna invest much time in this construction page cause i also have to design my portfolio website.
peterpumkineaterr
peterpumkineaterrOP2mo ago
this is how it looks. thanks for help guys i really appreciate it and i learn new things also.🎉
No description
clevermissfox
clevermissfox2mo ago
Very intriguing ! Why is the span[aria-hidden] then given a visibility hidden ? If it’s hidden from screen readers and sighted users, what is its point? And why is the first element inside each .text-fit doubled wrapped in two spans ?
peterpumkineaterr
peterpumkineaterrOP2mo ago
looks like i can learn something here 👀
Vic Nash
Vic Nash2mo ago
Element is doubled. Hence one of them has aria-hidden true, so that it doesn't announce twice. Element is doubled: it occupies space. The 2nd element then takes the remaining space, and we can find out how big that one is. We have two containers. The parent text-fit and the child that spans the rest. Registering properties, computes their values like a snapshot. Roma Komarov explains it very well in their article with the newer approach.
clevermissfox
clevermissfox2mo ago
1. Element is hidden: Right I understand why it’s aria hidden by why is it then hidden for sighted users ? 2. Span wrapper is doubled <span><span>fit-to-width text</span></span>: Ahh I see! thank you!
peterpumkineaterr
peterpumkineaterrOP2mo ago
i didn't understand anythin'
Want results from more Discord servers?
Add your server