查找动态宽度的最大字体大小

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.

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.

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.