I've been attempting to design a flexible HTML page that replicates the layout of a Java applet clock, but I'm unsure if my current approach is correct.
Below is an example of the three-clock image set that I am currently working on. My method involves using div, margins, and padding in CSS to structure the clocks. However, due to varying font sizes within each line, I've resorted to using vmin font size to achieve auto-resizing, albeit with mixed results. I've scoured the internet for tutorials or examples that address this specific issue, only to come up empty-handed. The existing examples either resize paragraphs with uniform font sizes throughout, or incorporate images instead.
If anyone knows of a tutorial or example that tackles this problem, please share. Perhaps I should consider utilizing canvas or some alternative to div tags for this task.
https://i.stack.imgur.com/D7hyT.png
This snippet below represents my single clock page before adding the CSS elements:
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="AOS/LOS Clock" />
<title>AOS/LOS Clock</title>
<link rel="stylesheet" type="text/css" href="css/mc_style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type=\"text/javascript\" src=\"js/mc_clocks.js?color=00ff00&file=input/aos_times_json;\"></script>
<script type="text/javascript" src="js/mc_engine.js"></script>
</head>
<body id="body">
<div id="wrapper">
<div id="clockAOS" class="clock missionColor"></div>
<div class="title missionColor"><span>Acquisition of Signal</span></div>
<div id="relay" class="siteTdrs"></div>
<div id="clockLOS" class="clock missionColor"></div>
<div class="title missionColor"><span>Loss of Signal</span></div>
</div>
<p id="Msgs"></p>
</body>
</html>