Currently, I am focusing on developing responsive web design and looking for ways to avoid creating multiple versions of each page based on screen width variations. The struggle lies in managing font sizes effectively. While attempting to style them using vw units, I encountered issues with fonts appearing either too small on smaller screens or too large on larger screens.
To address this challenge, I devised my own font resizing function which accepts minimum and maximum values as parameters. For instance, setting min to 10px and max to 20px would result in a font size of 15px on a 1000px wide screen.
Unlike vw units, the unique aspect of my function is that it does not require the line to pass through (0,0). In essence, even on a hypothetical screen with 0px width, the calculated font size wouldn't necessarily be 0px (for example, it could be 4px in the case of 10-20 range).
I have shared a complete working example at the end of this passage.
The only setback I face is the inability to make the function work from a stylesheet. As an alternative workaround, I insert an iframe within the paragraph (though invisible) and leverage it to call the function on the parent element, i.e., the paragraph itself.
Although this method is functional, it lacks elegance. Ideally, I wish to define a few classes for better readability:
<style>
.fontSize_10_20 {
font-size: setMinMaxFontSize(100vw, 10px, 20px);
}
</style>
Alternatively, I could employ the following approach:
<style>
.fontSize_10_20 {
font-size: calc(7px + 0.8vw);
}
</style>
However, styling the font size in the stylesheet tends to make the style.cssText unreadable. Even when attempting to display the content after calling a function, no output is generated at times. Upon running the code, you may notice that the final line displays "new element3 style.cssText is" without further information.
Another complication arises when trying to inspect the paragraph being written. Any modifications to the examined paragraph trigger the recreation of the iframe, repeated function calls, and continuous outputs until interrupting the cycle by clicking on the "stop loading" X button (specifically in Firefox).
Perhaps I am approaching this process from an incorrect angle. Instead of controlling JavaScript functions through HTML and CSS elements, maybe the conventional practice involves manipulating HTML and CSS via JavaScript functions. Could this be the more appropriate direction?
<!DOCTYPE html>
<html>
<head>
<style>
.up2 {
font-size: 30px;
}
.up3 {
font-size: 15px;
}
.up6 {
font-size: calc(9px + 0.6vw);
}
</style>
</head>
<!--This triggers myFunction() upon page load or resize-->
<body onresize="reloadPage()">
<p id="up1" class="up2" style="font-size: 30px;">This represents the up1 paragraph showcasing the original font size defined by the up2 class.</p>
<p id="up2" class="up2" style="font-size: 30px;"><iframe style="display:none" onload="setFontSize(this.parentElement);"></iframe>Here is the up2 paragraph demonstrating the outcome of setFontSize(this.parentElement); currently adjusting the font size to 15px.</p>
<p id="up3" class="up3">This corresponds to 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>Displayed here is the up4 paragraph reflecting the result of setMinMaxFontSize(this.parentElement, min, max); presently adjusting the font size from 10px (on a 400px wide screen) to 20px (on a 1600px wide screen).</p>
<p id="up5" class="up3">This manifests as the up5 paragraph outlining element2.</p>
<p id="up6" class="up6"><iframe style="display:none" onload="showInfo(this.parentElement);"></iframe>This describes 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>
// Variable Declarations
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>