Issue
I'm working on responsive web design and I'm trying to avoid writing several versions of each page according to screen width. There are quite a few pages...
I have a problem with font sizes. I tried styling them in vw units but they get too small on small screens or too large on large screens.
So I wrote my own font resizing function. It takes min and max as arguments, min being the font size on a screen 400px wide and max being the font size on a screen 1600px wide. It's a linear function : if min=10px and max=20px, the font size on a screen 1000px wide will be 15px.
What differs from vw units is that the line doesn't have to go through (0,0). In other words, on a hypothetical screen of width=0px the returned font size would not necessarily be 0px. (In my 10-20 example, it would be 4px).
Full functioning example at the end of this post.
The problem is that I can't get it to function from a style sheet.
You can't call a function from a paragraph, for some reason, so I create an iframe which is never displayed inside the paragraph and call the function on the parent element of that iframe, i.e. the paragraph.
As I said, it functions, but it doesn't look neat. I would much rather have a few classes such as :
<style>
.fontSize_10_20 {
font-size: setMinMaxFontSize(100vw, 10px, 20px);
}
</style>
or I could use :
<style>
.fontSize_10_20 {
font-size: calc(7px + 0.8vw);
}
</style>
but when the font size is set in the stylesheet, the style.cssText becomes unreadable. When I call a function to display it, it doesn't write anything. If you run my code, you will see that the last line of the result is "new element3 style.cssText is" with no more info.
Another problem is that you can't examine the paragraph you're writing in. If you modify the paragraph you're examining, the iframe is recreated, the function is called again, etc. The display shows some output again and again until you click on the X saying "stop loading" (Firefox).
Maybe I'm trying to do things the wrong way round. I'm trying to control the javascript functions from html and css. Maybe the normal way is to control html and css from javascript functions. Is it?
<!DOCTYPE html>
<html>
<head>
<style>
.up2 {
font-size: 30px;
}
.up3 {
font-size: 15px;
}
.up6 {
font-size: calc(9px + 0.6vw);
}
</style>
</head>
<!--This launches myFunction() when the page is loaded or resized-->
<body onresize="reloadPage()">
<p id="up1" class="up2" style="font-size: 30px;">This is the up1 paragraph which shows the original font size of class up2</p>
<p id="up2" class="up2" style="font-size: 30px;"><iframe style="display:none" onload="setFontSize(this.parentElement);"></iframe>This is the up2 paragraph which shows the result of setFontSize(this.parentElement); currently setting the font size to 15px.</p>
<p id="up3" class="up3">This is the up3 paragraph describing element1</p>
<p id="up4" class="up2" style="font-size: 30px;"><iframe style="display:none" onload="setMinMaxFontSize(this.parentElement, 10, 20);"></iframe>This is the up4 paragraph which shows the result of setMinMaxFontSize(this.parentElement, min, max); currently setting the font size from 10px (for a screen 400px wide) to 20px (for a screen 1600px wide).</p>
<p id="up5" class="up3">This is the up5 paragraph describing element2</p>
<p id="up6" class="up6"><iframe style="display:none" onload="showInfo(this.parentElement);"></iframe>This is the up6 paragraph modified by font-size: calc(9px + 0.6vw) in the style sheet.</p>
<p id="up7" class="up6">Font information</p>
<script>
// Declaring variables
var w = window.innerWidth;
var h = window.innerHeight;
var element1;
var element2;
var element3;
var min;
var max;
var fs; /*font size*/
function setFontSize(element1) {
document.getElementById("up3").innerHTML += "<br>";
document.getElementById("up3").innerHTML += "element1 is " + element1;
document.getElementById("up3").innerHTML += "<br>";
document.getElementById("up3").innerHTML += "element1 ID is " + element1.id;
document.getElementById("up3").innerHTML += "<br>";
document.getElementById("up3").innerHTML += "element1 style is " + element1.style;
document.getElementById("up3").innerHTML += "<br>";
document.getElementById("up3").innerHTML += "old element1 style.cssText is " + element1.style.cssText;
element1.style.cssText = "font-size: 15px;";
document.getElementById("up3").innerHTML += "<br>";
document.getElementById("up3").innerHTML += "new element1 style.cssText is " + element1.style.cssText;
}
function setMinMaxFontSize(element2, min, max) {
document.getElementById("up5").innerHTML += "<br>";
document.getElementById("up5").innerHTML += "element2 is " + element2;
document.getElementById("up5").innerHTML += "<br>";
document.getElementById("up5").innerHTML += "element2 ID is " + element2.id;
document.getElementById("up5").innerHTML += "<br>";
document.getElementById("up5").innerHTML += "element2 style is " + element2.style;
document.getElementById("up5").innerHTML += "<br>";
document.getElementById("up5").innerHTML += "old element2 style.cssText is " + element2.style.cssText;
document.getElementById("up5").innerHTML += "min = " + min + " max = " + max;
document.getElementById("up5").innerHTML += "<br>";
fs = Math.round(((max * w) - (min * w) - (400 * max) + (1600 * min)) / 1200);
document.getElementById("up5").innerHTML += "fs = " + fs;
element2.style.cssText = "font-size: " + fs + "px;";
document.getElementById("up5").innerHTML += "<br>";
document.getElementById("up5").innerHTML += "new element2 style.cssText is " + element2.style.cssText;
}
function showInfo(element3) {
document.getElementById("up7").innerHTML += "<br>";
document.getElementById("up7").innerHTML += "new element3 style.cssText is " + element3.style.cssText;
}
function reloadPage() {
document.location.reload();
}
</script>
</body>
</html>
Solution
Use clamp for font-size clamp(minimum, preferred, maximum); This will let you set the smallest a font can go, what you would like it to be, and the max it will scale up to.
h1 {
font-size: clamp(2rem, 4vw + 1rem, 3rem);
}<h1>Testing CSS clamp with a large H1 tag</h1>Answered By - OMGDrAcula
