I’m trying to make a lockscreen for my phone. Check this image so you get an impression.
In order to keep the date nicely fit across the width of the screen, I decided to dynamically let the font-size change, whenever the string changes in width (e.g. “May” is wider than “Jul”). Because of this, the bigger the font, the closer it gets to the line above. I would like to have a fixed distance. In the case of the image that the top of the “A” in “Aug” keeps equal distance to the bottom of the “y” in “Sunday”.
If anyone knows how to do this, I’m happy to hear it.
Here’s the Javascript code:
for (var i = $("#date").css("font-size").slice(0, -2); $("#date").width() < $("#clock").width()-2; i++)
$("#date").css("font-size", i.toString() + "px");
The complete CSS:
body { font-family: Calibri; color: #fff; text-shadow: -1px 0 #585858, 0 1px #585858, 1px 0 #585858, 0 -1px #585858; background-color: #000; position: relative; }
#clock { width: 280px; position: absolute; top: 50%; margin: -.7em 0 0 40px; font-size: 53px; } //e.g. 5:30 AM
#day { font-size: 0.9em; line-height: 35px; } //e.g. Sunday
#date { margin-top: 15px; position: absolute; font-size: 90px; line-height: 55px; } //e.g. 5 Aug
The relevant HTML structure:
<body>
<div id="clock">
<div id="day">
</div>
<div id="date">
</div>
</div>
</body>
Mess with the
line-heightof the element until the upper boundary of the element is at the top of the font, then margin it down from the element above as needed.Hopefully my example will do a better job than my explanation:
http://jsfiddle.net/ZYecS/3/