Find max font-size for dynamic width
Question
I'm using SASS/SCSS and want to create a @function/@mixin which will figure the max possible font-size for a container, given a dynamic width.
For example:
<body style="font-size: 10px;">
<div style="width: 960px;"> <!--This width is dynamic-->
<span style="font-size: 12.3em">Patrick Rocks</span>
</div>
</body>
The unknown variable in this equation is the font-size on the <span> tag. I set it to 12.3em which would be 123px (relative to the font-size of the <body> tag), but that could change depending on letter-spacing font-family or other aspects. Perhaps because of the complexity of this it would be best served to calculate this with JavaScript, or PHP.
2 answers
solution1
0 2011-09-14 18:48:04
You can't do this on the server side, as the user's font may have any dimensions. You'll have to do it in javascript, in the browser.
solution2
0 ACCPTED
I've worked it through and found a solution which fits my needs. The solution only works if the following is known.
- The exact text being used
- The font being used
- The default width based on the parent font-size
DEMO: http://wecodesign.com/demos/stackoverflow-7420897.htm
SCSS:
$logoDefaultWidth: 76; /*Pixels*/
@function getFontSize($newLogoWidth) {
$fontSize: $newLogoWidth/$logoDefaultWidth;
@return #{$fontSize}em;
}
@function pxToEm($px) {
@return #{$px/10}em;
}
body {
font-size: 10px;
}
.logo {
width: pxToEm($logoDefaultWidth);
}
.logo.s960 {
font-size: getFontSize(960);
}
.logo.s480 {
font-size: getFontSize(480);
}HTML:
<div class="logo s960">Patrick Rocks</div>
<div class="logo s480">Patrick Rocks</div>
TODO:
This solution has a known issue with WebKit (Chrome/Safari) browers. WebKit browsers render @font-face font's much thicker than they should, thus making the $logoDefaultWidth incorrect. I'm working on trying to find out how to stop WebKit from making the font so thick, or on a separate calculation for WebKit.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.